CSS (Cascading Style Sheets) is a style sheet language used for determining how the HTML of your Engage site should be displayed.
In Engage, clients can make tweaks to the CSS of the Theme they are using by adding updated CSS to the “Extra CSS” section of the Themes page.
To identify the the CSS determining how and element is displayed you can use the “Inspect Element” tool in both Firefox and Chrome.
To use this tool right click on the element and select “Inspect element” – in the example below we are using Chrome.
This will open a panel on the bottom of your browser screen. On the right side of the panel you will see the styles assigned to that element.
For this example, we will update the color of the button from blue to grey. To see a preview of the change in real time, click the style you want to change (in this case the hex color used in the button background).
You will replace the existing color with your new color. In the image below you’ll see that the hex color has been changed to #666 (grey) and the buttons are now displaying that color in your browser. It is important to note that changing the CSS will impact the way an element is displayed throughout the site.
To add the updated CSS to your Engage site, copy the element info that you would like to change. In the case of our example, it will be:
.button {
background-color: #666;
}
Visit the Themes page of your Engage admin and scroll to the “Extra CSS” field and paste your updated CSS language into the space.
Return to the top of the page and click the publish button or preview link. Refresh your page to see the changes to your site. If you do not see the changes reflected, you may need to add “!important” to the element to force the browser to read it. In the case of our example, it would be:
.button {
background-color: #666 !important;
}
See below for text files containing extra CSS to make some commonly requested updates in Engage.
