Making custom CSS changes on your site

[Discourse]

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:

1. A brief introduction to CSS and key concepts
2. How to add CSS to your Discourse site using theme components
3. 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:

1. 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

  

2. 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.

3. 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:

1. Go to Appearance > Themes & components from the Admin navigation sidebar and click the Components tab. (Or follow this url for your site: https://yoursite.com/admin/config/customize/components)

   

2. Click Install then Create New

   

3. Name your theme component and click Create

   

4. 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.

5. Click Edit Code

   

6. Add your CSS to the CSS tab

   

7. Click “Save” to apply your changes.

   

Finding the right CSS selectors

Use browser inspection tools to find the correct CSS selectors:

1. Right-click on the element you want to modify.

2. Select “Inspect” from the context menu.

   

3. In the developer tools panel, locate the element selectors.

   

4. Click the respective selectors and add your CSS rule.

   

5. 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

Additional resources

• MDN CSS Documentation
• Chrome DevTools Documentation
• Freecodecamp
• Beginner’s Guide to Using Discourse Themes

[bloomexperiment (Tracey)]

Could this be made a wiki? The info under the heading Where Do I Add My CSS? needs updating, because there is no more Edit CSS/HTML button if you installed an existing theme — which is likely now if someone chose a theme through the newer Setup Wizard. Now we just use theme components that will be added to existing themes.

https://meta.discourse.org/t/make-css-changes-on-your-site/168101#where-do-i-add-my-css-5

I can update it once it’s made into a wiki.

[bloomexperiment (Tracey)]

Ok this is done now