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 > Components from sidebar or follow this url for your site: https://yoursite.com/admin/customize/components
   

   

2. Click Install and Create New respectively.
   

   

3. Name your theme component and click Create new
   

   

4. Choose which themes to apply the component
   

   

5. Click Edit CSS/HTML
   

   

6. Add your CSS to one of these display options (Common, Desktop, or Mobile).
   

   

7. Click “Save” to apply your changes.
   

   

If you have multiple user-selectable themes, make sure to add your theme components to all relevant themes.

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 to respective selectors and add your CSS rule.
   

   

5. Copy the rule, paste it into your theme component’s CSS section and remove other rules.
   

   

It’s possible to apply styles only for Desktop or Mobile view by selecting respective tabs. Leave Common to apply both.

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 of above steps:

If your changes aren’t applied, check that:

• The theme component is enabled on your 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

Last edited by @hugh 2024-10-29T00:18:40Z

Last checked by @hugh 2024-10-29T00:18:45Z

Check document

Perform check on document:

[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