CSS Guide HOWTO?


(Ricardo Viteri) #1

Is there a guide to customize Discourse via the Customization Panel?

I would really appreciate some pointers.

Thanks.


(Jeff Atwood) #2

Can you give some examples of what you want to do? This is not extensibility, it is just common web CSS…


(Ricardo Viteri) #3

I’d like to change font types, colors, etc. But I don’t have a template.


(Jeff Atwood) #6

I recommend using developer mode in your browser f12 in most browsers, and finding the CSS styles you wish to override.

The elements panel is what you want.

If you want to change the body font you can simply change it everywhere, or you can target post bodies, post titles, etc.


(Ricardo Viteri) #7

Hi, Will this method survive upgrades?


(Jeff Atwood) #8

You have to take the CSS you used there and put it in Admin, Customize, CSS.


(Mittineague) #9

It depends on the specifiicty of your selectors and what (unpredictable) changes happen.

For example, something like
body { color: #efefef; }
should be relatively “permanent”. But something like

div#suggested-topics > div.topics > div.ember-view > table.topic-list > tbody > tr > td a { text-decoration: none; }

is a lot more likely to “break”

I +++ codinghorror’s suggestion to use dev tools. They make it a lot easier to pinpoint what you’re interested in and you can see what your changes look like right away without a lot of editing and uploading.


(Ricardo Viteri) #10

Would adding something like this
body { color: #efefef; }
Be enough to make the change or does one need to input a specific syntax?


#11

Eh, this isn’t specific to Discourse at all, it’s just general stuff

You can learn the basics of CSS at websites like Codecademy or similar.


(Kane York) #12

Nothing special required, plain CSS works.

If you know what SCSS is, you can use that too.