Note: To prevent your custom CSS from conflicting with the SFU Common Look & Feel stylesheet, add "custom-" to the front of each class name. For example, if you wish to create a new class called ".subheading", name it ".custom-subheading".

To apply a custom stylesheet, navigate to the DAM in AEM and locate your department's folder. If you're planning to manage a lot of assets (images, documents, scripts and stylesheets) you might want to create sub-folders at this point; creating a "css" folder within your departmental folder will make it easier to find and update in the future.

Upload your custom .css file to the AEM server by selecting New > File and browse to the file's location on your local machine. Once uploaded, you will see the .css file in the list of assets in your sub-folder. You may wish to activate the file at this point — .css files need to be activated like all other assets and pages.

Applying your style sheet

Stylesheets that apply to every page in your site can be loaded via the Site Configration page. If your site already has a stylesheet in place, contact your Site Admin to have your styles added to the master css file.

To apply classes to elements, drag a component from the sidekick or double-click on an existing component to open it. Each component contains a 'CSS Class' field in which you can assign a custom class to that component.

You can also apply classes to elements within components such as paragraphs (<p>) and lists (<ul>, <ol>). Click on the source edit button to view the content in HTML format. Apply classes to these elements as you would in a standard HTML document. For example, change <p> to <p class="custom-large"> to apply your .custom-large class.

To make further edits to your CSS file, you can either make the changes locally and re-upload them to the DAM, or make the changes directly to the file in AEM. To make the changes to the file in AEM, right-click the asset in the DAM and choose Edit.

For page-specific styles

It is possible to apply a stylesheet to an individual page. Generally, it is best practice to keep all of your styles in one single stylesheet and load it via the Site Configration page. In some cases, you may want to override the default styles, which is where a page-specific stylesheet comes in handy. You will add the stylesheet to the DAM, and link to it from the page via the Page Properties dialogue box. In the Sidekick, click on the page tab and select Page Properties... In the Page Properties dialogue box, click on the Advanced tab. Click on the arrow next to "Custom Stylesheets and Javascript". In the stylesheet field, click on the magnifying glass to navigate to the style sheet you uploaded to the DAM. (The path will look something like /content/dam/sfu/yoursitename/css/yoursitename.css) Now your custom styles will be applied to the page.

Back to top