This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools.
Required user level: Administrator
Summary
This guide covers:
- A brief introduction to CSS and key concepts
- How to add CSS to your Discourse site using theme components
- Using browser inspection tools to find the right CSS selectors
Understanding CSS basics
CSS stands for Cascading Style Sheets. Here are three key concepts to understand:
- Structure: A CSS rule consists of a selector, property, and value.
p {
color: red;
}
-
Selector:
p(targets all HTML<p>tags) -
Property:
color -
Value:
red
- Cascade: The last rule applied takes precedence. For example:
p {
color: red;
}
p {
color: green;
}
The paragraphs will be green because it’s the last rule applied.
- Specificity: More specific rules override less specific ones. For example:
div p {
color: green;
}
p {
color: red;
}
Paragraphs inside divs will remain green because div p is more specific than p.
Adding CSS to your Discourse site
To add CSS to your Discourse site:
-
Go to
Appearance > Themes & componentsfrom the Admin navigation sidebar and click the Components tab. (Or follow this url for your site:https://yoursite.com/admin/config/customize/components) -
Click Install then
Create New -
Name your theme component and click Create
-
Choose the theme(s) where the component will be applied and click the green checkmark icon to save your selection
If you have multiple user-selectable themes, make sure to add your theme components to all relevant themes.
-
Click Edit Code
-
Add your CSS to the CSS tab
-
Click “Save” to apply your changes.
Finding the right CSS selectors
Use browser inspection tools to find the correct CSS selectors:
-
Right-click on the element you want to modify.
-
Select “Inspect” from the context menu.
-
In the developer tools panel, locate the element selectors.
-
Click the respective selectors and add your CSS rule.
-
Copy the rule, paste it into your theme component’s CSS section and remove conflicting rules.
For more specific selectors, you may need to copy the selector used in Discourse’s existing styles and modify it in your theme component.
Here’s a video demonstrating the above steps:
Troubleshooting
If your changes aren’t applied, confirm that:
- The theme component is enabled on all relevant themes
- Your CSS rule is specific enough to override existing styles
