Most CSS changes, especially changing colors, you want to accomplish can be handled through the Page customizations in Design / Blocks. See Page customizations for more information. Color changes specifically can be handled through the General design, Header, Navigation, and Footer panels in Page customizations.

-----

If you need to edit CSS on specific pages, you will place the CSS changes in Design / Templates / Flex (or Site templates if you are using the Site templates library) / Components / _Site / macros / css.utl

New code should be added at the bottom of the css.utl file, ABOVE the closing [% end; %] tag.

-----

Using else it allows you to create changes on specific pages. In the example below...

[% else if skin == 'josephine_expo'; %]

If the URL has this value josephine_expo applied to the “Custom CSS instance” then the CSS listed below will be applied...

#site-top-nav-container {

background-color: #32bdb9!important;

}

#site-header-container {

background-color: #86d0cc !important;

}

If the URL does not have this value josephine_expo applied to the “Custom CSS instance” then the CSS is ignored and the next else if statement is processed to determine if it is a match...

[% else if skin == 'josephine'; %]

If the URL includes josephine then the CSS listed below will be applied...

#site-top-nav-container {background-color: #bb1628 !important;}

#site-header-container {background-color: #e31932 !important;}

#site-navbar-container {background-color: #bb1628 !important;}

#staticpage .mobile-options-holder .mobile-badges a {

display: block;

float: left;

}

Then close the else if statements with end.

[% end; %]

Tags