CMS Bitrix Site Manager - интеграция (шаблон, структура, навигация) 4

bitrix трудност:

видян: 14873

Управление на стиловете

Информацията в този раздел дава представа за основните цели и способи на ползване на таблици каскадни стилове (CSS) на сайта.

Съдържание на главата:

    * Използване на каскадни стилове

    * Работа със стилове във визуалния HTML-редактор

    * Пример на таблица стилове за шаблона на сайта

    * Механизъм на реализация

Използване на каскадни стилове

Каскадните стилове представляват съвкупност от правила, прилагани за оформяне на определени елементи на страниците на сайта. Технологията на каскадните стилове (CSS) позволява съхраняване на цялата информация за разпределението на страницата, използваните на нея шрифтове, цветове, стилове за оформяне на меню и т.н. в определено място (един или няколко файла).

Използването на CSS опростява задачата по оформянето на страницата на сайта. Освен това, при промяна на дизайна на сайта или негови отделни елементи няма необходимост от редактиране на всяка страница: достатъчно е просто да се измени съответната таблица стилове.

Така, например, може да се измени оформянето на форума (шрифт, цвят на елементите и др.) В дадения пример стиловете за форума се задават отделно от стиловете на общия шаблон на сайта.

.forumborder {background-color:#CACBBD;}
.forumhead {background-color:#EAEBE2;}
.forumbody {background-color:#FBFBF9;}
.forumbodytext {font-family: Arial, Helvetica, sans-serif; font-size:smaller; color:#000000;}
.forumheadtext {font-family: Arial, Helvetica, sans-serif; font-size:smaller; color:#000000;}
.forumtitletext {font-family: Arial, Helvetica, sans-serif; font-size:smaller; color:#000000;}

.postsep  {background-color: #9C9A9C; height: 1px}

.forumquote {font-family: Arial, Helvetica, sans-serif; font-size:8pt; color: #000000; background-color: #FBFBF9; border : 1px solid Black;padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; text-indent: 2pt;}
.forumcode {font-family: Arial, Helvetica, sans-serif; font-size:8pt; color: #333333; background-color: #FBFBF9; border : 1px solid Black; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; text-indent: 2pt;}
…

.forumborder {background-color:#96C0FA;}
.forumhead {background-color:#A9CAF7;}
.forumbody {background-color:#D7E6FB;}
.forumbodytext {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 80%;
	color:#042A69;
}
.forumheadtext {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 80%;
	color:#011B46;
…

Каскадните стилове се настройват отделно за всеки шаблон на сайта, използван в системата, и се поставят в папки съответстващи на шаблоните на сайта. Каскадните стилове за представяне на вътрешното съдържание на страниците на сайта се съхраняват във файлове от вида styles.css в папката на съответния шаблон. Допълнителните таблици стилове, например, стиловете за форума, могат да имат имена от вида: forum.css.

Забележка: В продукта е добавен механизъм, позволяващ да се осъществява разделно съхраняване на стилове:

стиловете, използвани в шаблона за дизайна, се съхраняват отделно във файл template_styles.css.
стиловете, използвани при оформяне на съдържанието на страниците (стилове на сайта), се съхраняват във файл styles.css. Стиловете от този файл се показват в падащия списък със стилове при редактиране на страници във визуалния редактор.

Формирането на таблици стилове за сайта (файл styles.css) става на страницата за редактиране на шаблона за дизайна на вложка Стилове за сайта. Важен елемент при създаване на таблиците стилове за страници е създаването на имена на стиловете. Имена трябва да се създават само за тези стилове, които се планира да се ползват при редактиране на страници в режим на визуален HTML-редактор (секция Описание на стилове).

Стиловете ще са достъпни във визуалния редактор от падащия списък под имената, определени в дадената форма. Зададените тук имена ще се съхранят във файла <идентификатор_на_шаблона>/.styles.php (файл с имена на стилове).

Създаването на таблици стилове за шаблона на дизайна (файл template_styles.css) става на вложка Стилове на шаблона форма за редактиране на шаблона на сайта

Страници: «6 7 8 9 10 11 12 »

Сподели урока:

CMS Bitrix Site Manager - интеграция (шаблон, структура, навигация) 4

Управление на стиловете

Използване на каскадни стилове

Регистрирайте се, за да добавите коментар