Центр документации
Карта сайта

Создай визитку сам!


Самоучитель по интеграции дизайна и настройке Amiro.CMS на примере демонстрационной версии пакета Визитка »


Стили

На форме редактирования макета рассмотрим закладку «Стили (CSS) макета».

Рис. 8.

Каждый макет включает общий файл стилей (common.css) и собственный файл стилей.

Закладка "Стили (CSS) макета" содержит следующие поля:

  • Файл стилей. Позволяет выбрать собственный файл стилей из уже имеющихся файлов css.
  • Имя нового файла стилей. Позволяет создать новый файл стилей. Необходимо ввести новое имя файла. К примеру: new.css.
  • Стили макета. Отображается содержание файла собственных стилей макета. Доступно на редактирование.

На закладке "Глобальные стили (CSS)" отображается содержание общего файла стилей common.css. Доступно для редактирования. Следует помнить что это общий файл стилей, и изменение какого-либо стиля отразится на всех страницах сайта.

Все стили в общем файле стилей common.css подлежат настройке. Не рекомендуется удалять стили. Если Вам необходимо  переопределить глобальный стиль в стиле макета, просто скопируйте его туда и отредактируйте.

В общем включаемом файле стилей common.css задаются глобальные стили, т.е стили подключаемые на все страницы.

Рассмотрим его подробно.

  1. Для всех элементов, задается общий стиль, к примеру стиль шрифта:

    body, table, tr, td, p, a, input, select, textarea {color:#000000; font-family:Verdana; font-size:12px;}

  2. Ссылки:

    A {color:#33626F;text-decoration:underline}
    A:hover {color:#33626F;text-decoration:none}
    A:visited {color:#33626F;}

  3. Заголовки и заголовки ссылки:

    h1, h1 a, h1 a:visited {color:#33626F;font-size:18px;font-weight:bold; margin-bottom:5px; margin-top:5px;}
    .h1, .h1 a, .h1 a:visited {color:#33626F;font-size:18px;font-weight:bold; margin-bottom:5px; margin-top:5px;} и т. д.

  4. Верхнее меню

    .top_menu, .top_menu a, .top_menu a:hover, .top_menu a:visited {font-size:10px;}

  5. Нижнее меню.

    .bottom_menu TD, .bottom_menu a, .bottom_menu a:hover, .bottom_menu a:visited{font-size:10px;}

  6. Главное меню, у таблицы главного меню задан атрибут class=main_menu, у таблицы выпадающего меню задан атрибут class=pd_menu.

    .main_menu {background-color:#89C6D7;padding-left:10px;padding-right:5px}
    .main_menu TD{padding-left:10px}
    .main_menu A, .main_menu A:visited {color:#000000;font-weight:bold;text-decoration:none;}
    .main_menu A:hover {color:#ffffff;text-decoration:none;font-weight:bold;}
    .submenu { position:absolute; left: 0; top:0; visibility:hidden;width:100px;}
    .pd_menu {border:1px #48899B solid;background-color:#ffffff}
    .pd_menu td {color:#000000;border:0px; background-color:#89C6D7;padding:5px 8px 5px 8px}
    .pd_menu a, .pd_menu a:visited {font-size:11px;font-weight: normal; text-decoration:none;}
    .pd_menu a:hover { color:#FFFFFF; text-decoration:none;font-size:11px;font-weight: normal;}

  7. Специальный блок - Каталог товаров:

    TD.eshop_tree_level_1 {}
    .eshop_sm_level_0 {}
    .eshop_sm_level_0 A, .eshop_sm_level_0 A:visited {color:#33626F;font-weight:normal;font-size:13px;text-decoration:none;}
    #selected_sm_level_0 A {color: #33626F;font-weight:bold; text-decoration:underline}

    .eshop_sm_level_1 A, .eshop_sm_level_1 A:visited {color:#33626F;font-size:12px; font-weight:normal;text-decoration:none;padding-left:10px;}
    span.eshop_sm_level_1 A:hover {color:#33626F; font-weight:normal; text-decoration:underline}
    #selected_sm_level_1 A {color: #33626F;font-weight:bold; text-decoration:underline;padding-left:10px;}

    .eshop_sm_level_2 A, .eshop_sm_level_2 A:visited {color:#33626F;font-size:11px;text-decoration:none;padding-left:20px;font-weight: normal;}
    span.eshop_sm_level_2 A:hover {color:#33626F; font-weight:normal; text-decoration:underline}
    #selected_sm_level_2 A {color: #33626F;text-decoration:underline;padding-left:20px; font-size:11px; font-weight:bold;}

    .eshop_sm_level_3 A, .eshop_sm_level_3 A:visited {color:#33626F;font-size:11px;text-decoration:none;padding-left:30px;font-weight:normal;}
    span.eshop_sm_level_3 A:hover {color:#33626F;text-decoration:underline;font-weight:normal;}
    #selected_sm_level_3 A {color:#33626F;text-decoration:underline; font-size:11px;font-weight:bold;padding-left:30px;}

  8. Карта сайта, карта раздела.

    #tree { font-size:10px; }
    #tree IMG { BORDER: 0px; }
    #tree DIV {font-size:10px;}
    #tree DIV A{font-size:10px;}
    #tree DIV A:hover {font-size:10px;}
    .tree_item_selected {color:#48899B }

    #tree DIV.sm_level_0 {font-size:14px; font-weight:bold;}
    #tree DIV.sm_level_0 A {color:#33626f; font-size:14px; font-weight:bold;}
    #tree DIV.sm_level_0 A:hover{font-size:14px; font-weight:bold;}
    #tree DIV.sm_level_0 A:visited {font-size:14px; font-weight:bold;}

  9. Элементы формы

    FORM { margin: 0px; }
    INPUT { FONT-SIZE:11; }
    INPUT.txt, INPUT.field { BORDER: #48899B 1px solid; }
    INPUT.txt_noborder { BORDER: #FFFFFF 0px solid; }
    INPUT.check { BORDER: 0px; }
    INPUT.btn { FONT-SIZE:11px; BACKGROUND: #89C6D7; COLOR: #000000; FONT-WEIGHT: bold; BORDER: #48899B 1px solid; }
    SELECT.sel { FONT-SIZE:11; BORDER: #48899B 1px solid; }
    CHECKBOX.chb{ FONT-SIZE:11; BORDER: #48899B 1px solid; }
    TEXTAREA.ta { FONT-SIZE:11; BORDER: #48899B 1px solid; }

  10. Фотоальбом:

    .photoalbum_act {border:#c0c0c0 1px solid;}
    .photoalbum a {font-weight:bold;text-decoration:none;}

  11. Таблица, которой выставлен атрибут class=tbl, такая таблица используется во многих шаблонах, в частности шаблон корзины, прайс-лист, заказ, и т.д.

    TABLE.tbl {border-top:1px #48899B solid;border-left:1px #48899B solid}
    TABLE.tbl TD {border:0px}
    TABLE.tbl TH {color:#000000;border:0px; background-color:#89C6D7;font-size:12px;padding:5px 8px 5px 8px}
    TABLE.tbl TH.al {color:#000000;border:0px; background-color:#89C6D7;font-size:12px;padding:5px 8px 5px 8px; text-align:right; font-weight:normal;}
    TABLE.tbl TD {border-right:1px #48899B solid; border-bottom:1px #48899B solid; font-size:11px;padding:5px 8px 5px 8px}

  12. Прайс лист:

    TABLE.price {border-right:1px #48899B solid;}
    TABLE.price TD {border-bottom:1px #48899B solid; border-left:1px #48899B solid; font-weight:normal;}
    TABLE.price TH {color:#000000; border-left:1px #ffffff solid; background-color:#89C6D7;font-size:12px;padding:5px 8px 5px 8px}
    TABLE.price TH.al {color:#000000;border-left:0px #ffffff solid; background-color:#89C6D7;font-size:12px;padding:5px 8px 5px 8px; text-align:right; font-weight:normal;}
    TABLE.price TD {font-size:11px;padding:5px 8px 5px 8px}

  13. Специальный блок – Корзина:

    #cart_small {font-size:9px;color:#333333;}
    #cart_small a {font-size:9px;}

  14. Иконка сортировки в каталоге:

    .icon_sort { border:#48899B 1px solid;background-color:#89C6D7;margin-top:3px;}

  15. Цены Каталога товаров.

    - цены на странице с подробным описанием конкретного товара.

    .price_details {color:#DE2418;font-size:12px;font-weight:bold} - цена
    .old_price_details {color:#e00000;text-decoration:line-through;font-size:12px;font-weight:bold} – старая цена, если есть скидка
    .discount_details {color:#e00000;font-size:11px;font-weight:bold} - скидка

    - цены на странице со специальными товарами

    .price {color:#33626F;font-size:12px;font-weight:bold} - цена
    .old_price {color:#e00000;text-decoration:line-through;font-size:12px;font-weight:bold} – старая цена, если есть скидка
    .discount {color:#e00000;font-size:11px;font-weight:bold} - скидка

    - цены на странице со списком товаров.

    .price_small {color:#33626F;font-size:11px;font-weight:bold} - цена
    .old_price_small {color:#e00000;text-decoration:line-through;font-size:11px;font-weight:bold} – старая цена, если есть скидка
    .discount_small {color:#e00000;font-size:11px;font-weight:bold} - скидка

  16. Изображения для модулей

    .eshop_image {margin-top:3px;margin-right:5px;} – малое изображение, и изображение в случае отсутствия всплывающего изображения.
    .eshop_image_click {margin-top:3px;margin-right:5px;border: 0px #33626F solid;} – изображение при наличии всплывающего изображения.

  17. Опросы

    .vote_res_small_on {background-color:#33626f;border-top:1px #33626f solid;border-bottom:1px #33626f solid;}
    .vote_res_on {background-color:#33626f;border-top:1px #33626f solid;border-bottom:1px #33626f solid;}
    .vote_res_small_off {border-top:1px #33626f solid;border-bottom:1px #33626f solid;}
    .vote_res_off {border-top:1px #33626f solid;border-bottom:1px #33626f solid;}

  18. Статусные сообщения

    .status_error {color:#660000; font-size:10;}
    .status_notice {color:#000066; font-size:10;}
    .status_normal {color:#000000; font-size:10;}

  19. Стили для редактора сообщений с bb кодами:

    div.amiroTEdDiv{}
    div.amiroTEdDivEditor{display: block;}
    div.amiroTEdDivPreview{border: 1px solid black; display: none; overflow: auto;}
    img.amiroTEdCtrl{border: 0px; cursor: pointer;}
    select.amiroTEdCtrl, input.amiroTEdCtrlButton{margin-bottom: 4px; width: auto;}
    img.amiroTEdSep{border: 0px;}
    img.amiroTEdSmile{border: 0px;cursor: pointer;}


    select.amiroTEdCtrl, input.amiroTEdCtrlButton, textarea.amiroTEdCtrl{font-family: Arial; font-size: 10px; font-weight: normal; font-variant: normal; text-decoration: none; color: #000000;}

    div.amiroTEdDivResize{height: 4px; margin-top: 1px; background-color: #d4d0c8; background-repeat: no-repeat;background-position: 50% 0%; border-bottom: 1px solid #808080; margin-bottom: 1px; cursor: s-resize;}

    span.amiroTEdMore{cursor: pointer;height: 25px;font-family: Arial;font-size: 16px;font-weight: bold;font-variant: normal;text-decoration: underline;color: #000000;}

    BLOCKQUOTE.edQuote {border: 1px dotted gray;padding: 5px;}

    PRE.edCode{margin:5px 0px 5px 16px;width: 500px;overflow: auto;border: 1px dotted gray;padding: 5px;}

    /* To change control width uncomment and change next values */
    div.amiroTEdDivPreview, div.amiroTEdDiv, textarea.amiroTEdCtrl, div.amiroTEdDivResize{
    /*width: 600px !important;*/
    }
    textarea.amiroTEdCtrl{
    /*height: 250px !important;*/
    }
    /* } Text editor styles */


    .blog IMG {margin:3px;border:#ff0000 0px solid;}

Все форматирование самого блока макета (именно блока, а не содержания внутри блока), такое как отступы, цвет фона или фоновая картинка, необходимо задавать через стиль макета в соответствующем включаемом файле стилей (css). Если необходимо поменять какой-либо стиль для конкретного макета, то можно переопределить его в файле стилей макета.

Например, на внутренних страницах отступ в нижнем блоке 20px а на главной 10px. Эти отступы прописываются в стилях макета:

internal.css:

#lay_f3 {padding-bottom:20px}

home.css:

#lay_f3 {padding-bottom:10px}

Версия для печати

Установка и настройка Руководство пользователя Интеграция дизайна Разработчикам (API)
 2000 – 2021 © Amiro.CMS Все права защищены.