Custom CSS classes


(NomNuggetNom ) #1

I’ve recently been working on some custom CSS for my forum, and nearly every page needs to be modified. There are some tough spots I’ve found where elements have no unique classes or IDs and it makes styling them really tough. So I was hoping someone could throw them in here:

  • Not found page: although the header class is page-not-found, the background div is simply container.
  • Admin page: once again the background div is simply container.

Hopefully not too hard. If I knew how to do this I would submit a PR, but I don’t :(. Thanks!


(Jeff Atwood) #2

Here’s a tutorial:

  1. Fork A Repo - User Documentation

  2. Redirecting...

I suggest you try it, since these are simple text file edits.


(NomNuggetNom ) #3

Sorry, I meant I know how to submit a PR, I just don’t know where to change it. Discourse is a massive repo, I have no idea where to look for stuff :(.

EDIT: I believe I found the relevant file, not_found.html.erb, but I don’t know how I would modify it to make it work without breaking something.


(Jeff Atwood) #4

Oh, I see – the container is upstream of that markup, so you can’t really change it there anyway.

Why isn’t <div class="row page-not-found-topics"> good enough for your purposes?


(NomNuggetNom ) #5

I’ve had to rig up some complex CSS for solving this problem:

The main change is replacing the margin of most containers with padding so that they will appear white. So I need access to the container to fiddle with the margin and padding, but it is differrent on each page.

It’s really unfortunate that it’s such a pain to do, but I know that reworking it for just this would be a total pain.


(Jeff Atwood) #6

OK, @techapj can you add this to your list for next week? Try to get these css names in in the div container.


(Arpit Jalan) #7

Okay, added the class not-found-container for “404 Not Found” page div container:

https://github.com/discourse/discourse/pull/3168

Adding the custom class(es) for Admin page(s) might be a complex task, and will need more work/thought.


(Jeff Atwood) #8

Yeah, why do you need to theme the admin pages @NomNuggetNom ? That is not user facing stuff…


(NomNuggetNom ) #9

Thanks @techAPJ! :smile:


@codinghorror As I said earlier:

Without making these changes, it looks like this: