Using the CSS

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 stiles and etc. in one or several exact files.

Using the CSS simplifies the page designing. More over, 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.

Note: The Bitrix Site Manager includes a mechanism allowin to store CSS file separatly:

site template CSS can be stored in the template_styles.css file;
CSS used for site content can be stored in the styles.css files.

This mechanism allows to avoid overloading of stiles list that is available in WYSIWYG editor mode.

Stylesheets customization is implemented in the Edit template form:

Settings -> System settings -> Sites -> Site templates.

Integration