How do I get started hacking CSS on Discourse

(Sam Saffron) #1

Continuing the discussion from Badges feedback:

Best way to get started is just to “right click” and “inspect element”

I really want to write more, maybe someone else can help, need to run to dinner (feel free to edit this post)

Big Picture Features Poll
(PJH) #2

It was more about what CSS was needed, however even a cursory inspection doesn’t reveal data-badge-name as a thing to be used.

I supposed I could just blindly copy the stuff in @riking’s screenshot and stick it in a CSS file… somewhere? I’m guessing it’s something in /admin/customize/css_html

this is what I’ mean - I’m stumbling around thinking I vaguely know what needs doing, but I know I’m missing something, and just need a few pointers to start me off…

(PJH) #3

Hmm - Firefox quirk by the looks of it. Taking @sam’s gold medal here:

Inspect element reveals…

Nothing. View source on the other hand:

(James Milligan) #4

Look again at the end of the tag on your ‘Inspect’ screenshot - it’s there, just right at the end. Interesting that the order is switched, though.

(PJH) #5

Hmm Fair enough; couldn’t see for looking… (Well I tried the search funciton on that dialog and it didn’t return anything…)

Ok - so what do I need, and where do I need it to change the colour of a badge?

What I’ve tried so far:

  1. Went to [/admin/customize/css_html][1]
  2. Clicked + New to create a new stylesheet; gave it a name
  3. Copied and tweaked @riking’s css from his screenshot from [here][2] into the editor:
span.user-badge[data-badge-name="Someone didn't get the joke"] i::before {
    color: #ff0000;
  1. Clicked Save, leaving Do not include standard stylesheet and Enabled? unchecked.
  2. Clicked [preview][3]. (That will take you to the current version which at the time of writing had the above in. [Remove preview][4] link to reset it.)
  3. Waited for redirection to complete then went to [Someone didn’t jet the joke][5], and expected, but didn’t see, the badge to be red.

Anyway, did a bit more digging, and the 'Style Editor` (Firefox) seems to indicate that the CSS from #3 isn’t actually there, so tried checking enable and carried on from step 4. Same result.

How it’s been left for the moment:

[1]: Login to your account - What the Daily WTF? [2]: Badges feedback
[3]: Home - What the Daily WTF?
[4]: Home - What the Daily WTF?

(PJH) #6

Am I suffering from this?

(PJH) #7

It appears I was - putting the css into the ‘active’ customisation has changed the color of the icon as expected.

(Kris) #8

I can definitely put together a guide that covers the elements someone needs to style; there are a lot of them, and I’ve been familiar with Discourse for over a year now and still forget sometimes (so actually the guide would help me too.)

I’ve got a few things I need to get out of the way first, but I’ll put it on my list of things to do over the next week or so.

(Jeff Atwood) #9

I think we can let the community take that one; we have enough to do over the next 3 weeks without adding more to the plate and jeopardizing V1.0 launch.

(Erlend Sogge Heggen) #10

If anyone wants to take this on, here’s some inspiration: