Table of Contents
- CSS changes per URL
- Adding custom CSS
- Page customizations - General design - Custom CSS Instance
- Block CSS classes
CSS (Cascading Style Sheets) allows you to define the look and feel of your website. One style sheet can be used to affect multiple pages, and allow the designer to place the required styles on one page, or sheet, instead of on every single page.
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.
From the dropdown in the the upper left choose Design / Templates...(Not sure how to access Blox CMS Applications? Click here)
CSS changes should be made in (Site templates / Flex / Zen) / Components / _Site / macros / css.utl
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 exacrly 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. */
For more information see cms.page.add_global_css.
We have documentation on UTL in the Developer's Corner.
This custom property adds a class to the block that you can target with CSS to change the appearance of the block, or customize block styles.
Location of the CSS class custom property in the block.
For a list of CSS classes and their functions, please see CSS classes (Flex).
Block CSS Class
The following classes can be applied via the block editor to change the look of the block. Due to the variations in blocks, they may not work or look good with all blocks.You can add multiple CSS, just place a space between the names. For Example: pad-top double-pad-bottom highlight-blue.
pad-top or double-pad-top
- This CSS gives extra padding at the top of the block.
pad-bottom or double-pad-bottom
- This CSS gives extra padding at the bottom of the block.
- This CSS will remove any border around the block.
float-left or float-right
- This CSS will allow the block to float to the left or right within the region.
highlight-blue, highlight-yellow, highlight-grey, highlight-red, highlight-dark, highlight-white
- This CSS will change the block's background color.