Cascading Style Sheets

Cascading Style Sheets

CSS is a system designed to allow the style of a web site to be separated from the content itself.

CSS folder

Style Name	Description
article_styles.css	This stylsheet contains classes used in article body. They are available in WYSIWYG editor through styles drop down.
compress.php	Merges CSS files into single output and compress it using gzip where possible.
dhtml_menu.css	Stylesheet for horizontal navigation (DHTML menu).
forms.css	Stylesheet used in forms across system.
layout_default.css	This stylsheet contains set of Vivvo site layouts.
lightbox.css	Stylesheet for lightbox image gallery.
print.css	Stylesheet for print-friendly pages.
rotating_headlines.css	Stylesheet for rotating headlines box.
style.css	This is main stylesheet. It contains most of Vivvo frontend styles.
ticker.css	Stylsheet for news ticker.

article_styles.css

You can use this stylesheet to make custom styles for your article body.

Creating custom article style

Create a new class in your article_styles.css:

.highlight_text {
    padding: 5px;
    background: #FFFDD1;
    border: 1px solid #FAEBAB;
}

Go to your admin/js/tinyMCE_config.php file and assign this newly created class to tinyMCE on theme_advanced_styles line:

theme_advanced_styles : "Highlight text=highlight_text;Highlight right=quote_right;Highlight left=quote_left;Image right=right_image;Image left=left_image",

where Highlight text is the name that will appear in styles drop down list, and highlight_text is the name of the class you created.

layout_default.css

This stylesheet contains set of predefined layouts for your Vivvo site:

Layout Name	ID	Description
default layout	layout_default	Default three column layout
two column	layout_two_column	Simple two column layout
three columns	layout_three_columns	Three column layout with identical width of left and right column
equal	layout_equal	Three column layout with identical width of all three columns
equal rights	layout_equal_rights	Three column layout with identical width of right and center column
non equal	layout_non_equal	Three column layout (similar to default, only with different values of column widths)

Quick layout change

To quickly change your layout from default to equal right columns layout for example, you need to edit the id of <body> tag in your frame templates.

Default:

<body id="layout_default">

Equal right columns layout:

<body id="layout_equal_rights">

You can also download predefined layouts from our Resource center or via remote tab in your administration Layout section.

As of version 4.5 Vivvo CMS minifies and caches CSS files which are served trough compress.php. This helps lower server load and improves responsiveness of your page. By default file is cached for an hour.

While this is helpful on production servers you may want to disable it on your development server (where you frequently change CSS/JavaScript). To do so just add following line to your conf.php file:

define('VIVVO_COMPRESS_CACHE_LIFETIME', 0);