Adding Custom CSS
Site-specific (custom) stylesheets
To create styles and layouts specific to your site, you'll need to develop the stylesheet on your local machine and upload it to the AEM DAM (Digital Asset Manager).
Custom CSS/JS is not available in the horizontal template to ensure consistent user experience across all SFU websites. Please contact Communications & Marketing to discuss other options.
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