CSS management

Generally CSS is a group of rules defining layout of some page elements. The CSS technology allows to store all information about page layout, utilized fonts and colors, menu layout styles and etc. in one or several exact files.

Using the CSS simplifies the page designing. Moreover, if you change a site design you do not need to modify each site page. It may be enough to make necessary modifications in corresponding CSS files.

For example, using the CSS you can modify a forum layout (in this example forum CSS files are stored separately from the site template CSS).

.forumborder {background-color:#B8B8B8;}
.forumhead {background-color:#DDDDDD;}
.forumbody {background-color:#F5F5F5;}
.forumbodytext {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 80%;
	color:#000000;
}
.forumheadtext {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 80%;
	color:#011B46;
…

.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;
…

Stylesheets are uniquely customized for each site template in the system; each stylesheet set is stored in the folder of the corresponding template, as well as other files comprising the interface of the template. Stylesheets used in site templates are stored in the styles.css files. Additional stylesheets used for exact site elements (for example, for forum layout) a stored in files with such names as forum.css.

Separate CSS files storage

Bitrix software products features mechanism that allows to perform a separate storage of CCS files:

Styles, used in the site template are stored separately in the template_styles.css. file. It is the main CSS file of a template.
Styles, used when customizing the page content (site styles) are stored in the styles.css file. Styles that are stored in this file are displayed in the styles drop-down list when editing pages in the visual editor.

Designation of these files can be divided arbitrarily, depending on the context. Specifically, the styles that are responsible for content design not only for a template, but for the visual editor, can be stored in the styles.css file.

For example: corresponding display styles are defined for all headers on the site, i. e. they are used both to define page content and design of information block content, that is located outside the #WORK_AREA#. As a result, these header styles can be placed in both the template_styles.css and styles.css file. But because both of these files are connected to the template, all the header design styles must be placed only into the styles.css file, because it is connected to the page as well.

If headers must be modified when editing a page in the visual editor, then correspondingly the styles that are responsible for the site template design must be placed in the template_styles.css file, and for the visual editor - into the styles.css file.

Splitting styles between those two files must be done carefully. For example, the site background must be done in grey color, and the background color in the visual editor must be red - the background-color:#ccc; must be specified for the body tag inside the template_styles.css file; and for the same tag - background-color:#ff0000; must be defined in the styles.css file.

Files stored on the page site are connected as follows:

styles.css
template_styles.css

As a result, the body background will become grey at the site, because the style in the last connected template_styles.css file will supersede the style, defined in the styles.css file. The background in the visual editor will become red, because the visual editor content is the iframe that connects styles only from the styles.css file, and they are inserted directly into the head area via the <style> tag.

If to add the increase of priority via !important to the styles.css file, the style from this file will supersede the style, defined in the template_styles.css; the site background will become red as well, despite the fact that the file of template styles is connected last.

Site styles

The site stylesheet (the styles.css file) is customized at the design template edit page (Control Panel > Settings > System settings > Websites > Site templates) at the Site Styles tab. The important element when creating the stylesheet is the style name. The names must be created only for those styles that are planned to be used when editing pages in the visual HTML editor ((Format) section).

The styles will be available in the visual editor from the drop-down list under the names, defined in this form. The name that are specified here, will be stored in the /.styles.php file (file with style names).

Creation of design template stylesheet (the template_styles.css file) is performed in the Template styles tab of the site template edit form

Bitrix Framework

Separate CSS files storage

Site styles