Is there a guide on how to customize discourse (css)?


(Juan Manuel Formoso) #1

When I create a new customization I’m greeted with a textarea for me to input a stylesheet.

How can I see which css classes I need to define? Should I just look at the original in the codebase and change that?


(Kris) #2

Right now the easiest way to find what you need is by using an inspector (such as the developer tools built in to Chrome or Firefox) to find the classes that correspond to the elements you want to style.

You can certainly look at the original codebase to accomplish the same as suggested above, but I wouldn’t recommend changing it - any changes to the base will likely cause you headaches when you update your install. All style customization really needs to happen in the customize admin section.

We hope to soon have an “easy styler” built in to the customization tab that will let you quickly change the basic colors without knowing any CSS. There’s some discussion about that here.

I definitely plan on writing some sort of guide to the basic elements that most people will want to restyle, but I’m holding off on that right now until things settle a bit more (there’ve been a fair amount of style changes in the past few weeks!)… this will likely come around the time Discourse hits 1.0 (it’s at 0.9.9 right now).


(Craig Oda) #3

Thanks for posting this. I was just looking for this type of information. I may give the customizations a go later on today or tonight.

I didn’t know about the inspector. I just popped it open and suddenly see a whole new world open to me. Wow.


(Ricardo Viteri) #4

Would you consider writing the guide?


#5

No guide released yet?


(Jeff Atwood) #6

You could be the first to write one! :wink:


#7

Shouldn’t really be necessary – it’s pretty easy to do. Are you stuck on something in particular?


(Rick M) #8

I added a style for .lightbox-wrapper to try to center images in posts, but I’m not seeing that style rule applied anywhere in the resulting page. Is there more I need to do than simply create a new style (/admin/customize/css_html/1/css)?


(Mittineague) #9

Did you miss enabling it? (a checkbox lower right)


(Rick M) #10

Thanks! That was it!


(Sam Saffron) #11