Discourse default Font color

faq-material

(Jason C) #1

Hi there, I’m trying to figure out how I should go about changing the font colors for descriptions of categories. By default it is light grey and my users find it hard to read. If it needs to be done by css, can anyone give an example of the code I would need? Any help is appreciated.

Thanks,

-Jason.


(cpradio) #2

Can you provide a screenshot? It is hard to give you a suggestion without knowing exactly what you are talking about. A link to the site would be helpful too.


(Joshua Rosenfeld) #3

Assuming you’re talking about the text highlighted below, the CSS you need is:

.category-description {
    color: xyz;
}

(replacing xyz with the color value of your choice)

Don’t forget to enable the CSS customization after writing it.


(Jason C) #4

Thank you Joshua! That’s exactly what I was looking for. Edit: @jomaxro what is the command for the text “preview” you see underneath a topic. I would like to change that color as well. Also is there somewhere I can lookup these values myself?


(Joshua Rosenfeld) #5

Let me give you some advice: take advantage of your browser’s developer tools. You can use them to see the specific classes for all elements in the UI and play around with changing CSS right there. I’ve included some screenshots below of how I found the required CSS for your change (all images are from Chrome).

  1. Open Developer tools:

  2. Switch to the Elements tab and navigate in Discourse so you can see what you’re trying to change

  3. Click on the element selector and then click on the header, section, text, icon, etc. you wish to change.

  4. Look at the highlighted line in the elements pane. It will have a class, which is what you can use to target that element.

  5. Normally, that class can be used as the target like so:

.topic-excerpt {
    color: xyz;
}
  1. In this specific case, you can see that 2 classes are being used to target the topic-excerpt, so you’ll need to use both as well.
.topic-list .topic-excerpt {
    color: xyz;
}

CSS code that adjusts only one image size among category logo images
Wider and more compact theme?
How to change my about-us section?
Frontend customization
Hide sub categories AND titles in category view
First time Discourse'er
(Jason C) #6

wow, amazing! Great resource for noobs like me, I’m sure others will find your post to :smile: . Thank you.


(Stefano Costa) #7

This is so well written that I think it’s worth becoming a separate #howto topic :clap:


(Joshua Rosenfeld) #8

I appreciate that. If @team wants me to, I’ll clean up the images and make a #howto.


(Erlend Sogge Heggen) #9

Yes, please do so and link to it from here when that’s done and we’ll close this topic.