Editing and Adding Custom CSS

With Advantage CSP, you can customize every aspect of the frontend easily by customizing the CSS. There are three areas where you can add/edit custom CSS.

In Advantage CSP you can CSS in four ways

1. Global Level
2. Page Level
3. Zone Level
4. Module Level

Global Level

1. The easiest and most efficient way of adding global CSS elements is in the Global CSS file (global.css)
2. If the CSS you are trying to add is module or component specific you can add it to components.css

Page Level

If you are looking to edit the CSS at page level you will need to add the script referencing the CSS in the Advantage CSP Script Editor.

1. Go to Domain Settings
2. Go to Site
3. Go to Site Scripts
4. Click Add
   
   
   
   
5. Create a name to reference your script. 
6. Make it Active
7. Determine whether you want it to load at the top or bottom
8. Enter your script referencing your CSS 
   
   

Zone Level

If you would like to add CSS classes to the zone, follow the steps below. This action will override your default CSS.

1. Go to  Site Manager
2. Click on Edit 
3. Find the 'Gear Wheel'
   
   
   
   When you click on it you will be able to add custom classes to the zone, but you need to have these classes define in your CSS Stylesheet.
   
   
   

Module Level

To apply CSS on the module level click on a module and enter the CSS Class as shown below. This action will override your default CSS.

To add custom CSS to the content within the editor you'll need to first create the CSS in the Editor

1. Go to Domain Settings
2. Go to Configuration
3. Go to System
4. Go to Editor Settings
5. Go to the bottom where you see 'Apply Classes.
   
   
   
   
6. Click on 'Add'