Custom CSS for Discourse


(Mitchell Krog) #1

Hi folks, since I started using Discourse, I spent a lot of time customizing the CSS for the look and feel of my site.

I’m quite happy with the look and feel I have achieved so far but still tweaking things as us crazy CSS people tend to do.

I specifically want to be able to have alternating row colors between topics on the front page, I found someone’s CSS for Discourse that does that but then also lost it in my mess of a hard drive.

I’ve placed it on a GIST in case anyone wants to try it or even improve on it. (My own custom css for a Discourse Forum - Use it, change it and please send back any improvements · GitHub)

You must of course change the logo locations in the CSS but hope some of you can use or adapt this or come back with an even better improved version :slight_smile:


Share your custom CSS?
(Jeff Wong) #2

Have you already gotten alternating colors?

If not, you might be interested in the nth child selectors:
https://www.w3.org/Style/Examples/007/evenodd.en.html

Tiger striping fell out of fashion here as defaults but the CSS is easy enough to implement if you’re looking to do that :slight_smile:


#3

I run stripes.

// alternating colours in list views
.topic-list-item:nth-child(odd) {
    background-color: #f4f2f2;
}

(Mitchell Krog) #4

Awesome @HAWK thanks so much, that works a treat. I personally find alternating rows so much easier on my aging eyes :wink: updated my gist for anyone wanting the alternating row colors. @HAWK you rule !!!


#5

Agreed!

And you’re very welcome. :slight_smile:


(Mitchell Krog) #6

@HAWK what’s the mod for getting alternating colors on mobile view?


(Daniela) #7

The same trick, you need to copy and paste in the mobile css


(Mitchell Krog) #8

Thanks so much @Trash … can’t believe I’ve never seen that little mobile button for the mobile CSS :blush:


(Mitchell Krog) #9

Does anyone know where this code is being inserted into the CSS ?

/images/favicons/google_branding/logo_calendar_48px.png

With the latest 1.8.0.beta6 a link checker throws a 404 not found on that asset??