History: 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:
{CODE()}
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;
}
{CODE}