====== 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. {{:devdoc:mce_custom_styles.png|}} ===== 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 **** tag in your [[devdoc:templates:frame_templates|frame templates]]. Default: Equal right columns layout: You can also download predefined layouts from our [[http://www.vivvo.net/resources/downloads/layouts/index.1.html|Resource center]] or via remote tab in your administration [[user_manual:layout|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: define('VIVVO_COMPRESS_CACHE_LIFETIME', 0);