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.


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.


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.


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

Note about caching

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:

devdoc/css.txt · Last modified: 2010/05/05 17:08 by damir
Except where otherwise noted, content on this wiki is licensed under the following license:CC Attribution-Noncommercial-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki