` tags) - Property: `color` - Value: `red` 1. **Cascade** : The last rule applied takes precedence. For example: ```css p { color: red; } p { color: green; } ``` The paragraphs will be green because it’s the last rule applied. 1. **Specificity** : More specific rules override less specific ones. For example: ```css 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. 1. Click Edit Code 2. Add your CSS to the CSS tab 3. 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](https://developer.mozilla.org/en-US/docs/Web/CSS) - [Chrome DevTools Documentation](https://developers.google.com/web/tools/chrome-devtools) - [Freecodecamp](https://forum.freecodecamp.org/) - [Beginner’s Guide to Using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) > Last edited by @southpaw 2025-11-17T18:54:52Z > > Last checked by @hugh 2024-10-29T00:18:45Z > > > **Check document** > > > > Perform check on document: ---
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](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. --- Ok this is done now 👍 --- Thank you. Thanks to this part, I finally got the answer I wanted. I needed a Discourse instance for various personal uses, so I installed it on a VPS a few days ago. The text color in read topic was displaying too faintly, so I was searching for a solution. I had no idea there was a custom CSS setting under the ‘Component’ section. I achieved the desired result with the following CSS. If anyone knows a better method, please leave a comment. ```css .topic-list-item.visited a.title:not(.badge-notification), .latest-topic-list-item.visited a.title:not(.badge-notification), .category-topic-link.visited a.title:not(.badge-notification), { color: #000000; } ``` 