Full-width backgrounds and fixed-width content

A newly installed Tiki site has a left column and center or main column, and a right column can also be activated. The side columns are normally used for navigation or other information that displays on every page (though this can be configured, of course). To easily have a page, such as the site homepage or a splash page, that has no side columns, and some content such as background images goes the full width of the browser window, here is an easy method, available since Tiki 15.

1. On tiki-admin_categories.php, make a new category "Full_width_content".
2. On tiki-admin.php?page=category, activate "Provides the current categories to Smarty templates", and select "Full_width_content".
This will add a CSS class to the body tag of pages in this category, and CSS rules in tiki_base.css will cause the side columns to not display, and will override the standard container div rules.
3. Then container divs, grid divs and other content can be input in the wiki page. Content directly in the page data will be full-width. Container-class divs can be added to provide content areas that are centered in the page and the default Bootstrap container width.

These are the relvant CSS rules in tiki_base.css:

cat_Full_width_content > .container, .cat_full_width_content > .container, .cat_Full_width_content .middle.container, .cat_full_width_content .middle.container, .cat_Full_width_content .layout_social > .container, .cat_full_width_content .layout_social > .container { width: 100%; padding-left: 0; padding-right: 0; } .cat_Full_width_content #row-middle.row, .cat_full_width_content #row-middle.row { margin-left: 0; margin-right: 0; } .cat_Full_width_content #col1, .cat_full_width_content #col1 { padding-left: 0; padding-right: 0; } .cat_Full_width_content .content-area, .cat_full_width_content .content-area { padding: 0; } .cat_Full_width_content .catblock, .cat_full_width_content .catblock, .cat_Full_width_content .wikitopline, .cat_full_width_content .wikitopline, .cat_Full_width_content .wikiactions_wrapper, .cat_full_width_content .wikiactions_wrapper, .cat_Full_width_content #page-bar, .cat_full_width_content #page-bar { padding-left: 15px; padding-right: 15px; }

Page last modified on Wednesday 04 of April, 2018 07:55:13 GMT

Switch Theme


Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config