When using the BLOX CMS, we want to ensure you first take advantage of the styling options built into the BLOX admin interface, before adding custom CSS to the site's style sheet. 

CSS changes per URL

Most CSS changes for your BLOX CMS website will be handled through Design / Blocks, in the Page customizations. You can change background colors, text colors, and link colors. For more information see Page customizations.

You can add custom CSS to your site through Design / Templates. You must have UTL access.

Adding custom CSS

If you cannot accomplish your CSS goals through Design / Blocks / Page customizations you can access the css.utl file to add custom CSS. We have basic steps listed below, and we have a doc with tips on how to add CSS to a specific page. See How to add custom CSS to specific pages.

Accessing Applications

From the dropdown in the the upper left choose Design / Templates

Components

CSS changes should be made in (Site templates/Flex) / Components / _Site / macros / css.utl

Global

CSS changes can be made in Site templates / Global skins / default / resources / styles / site.css

Using Global with Flex templates

If you are a Flex template site, but you only have access to your site's global folder (instead of components), verify that you have a Site templates / Global skins / default / resources / styles / site.css. This is where you put the CSS you wish to add to your site.

Then in Site templates / Global skins / default / includes add a file called site.css.inc.utl. In that file add the code below.

---

NOTE: To add a file right click on the folder you want to place the file in. Click New file. Enter the name of the file (in this case it is site.css.inc.utl, and must be spelled exactly like that for it to work). Click OK.

---

[%-

/**

* This file should only be used to load CSS files from global directory using cms.page.add_global_css()

* SITE_CSS is defined for you and will equal value inherited from CSS Instance on URL map.

* The CSS files MUST live in /global/resources/styles/

* Examples (which need to be uncommented to work):

if SITE_CSS == 'site1' then cms.page.add_global_css('site1.css');

if SITE_CSS == 'site2' then cms.page.add_global_css('site2.css');

*/

/**

* If you have a common CSS file that travels to all instances, you can explicitly load it outside a condition.

This is included by default, below. */

cms.page.add_global_css('site.css');

-%]

For more information see cms.page.add_global_css.

We have documentation on UTL in the Developer's Corner.