Better Documentation of tabs in Admin > Customize > CSS/HTML?

Hi all – I’m curious if someone can clarify for me the tabs in Admin > Customize > CSS/HTML?

Here’s a screen shot of them:

So there’s:

  • CSS
  • Header
  • Top
  • Footer
  • < /head>
  • < /body>
  • Embedded CSS

Can someone clarify for me their definitions and usage?

I’ve successfully added the custom nav bar to my installation that I wanted, but it was mostly through trial and error and I would like to understand what this customize panel is really capable of!

5 Likes

Yep this is quite confusing as it exists. :frowning:

2 Likes

So there’s:

  • CSS - append styles to the global css document. This is where you can set homepage background, font changes, additional classes that you reference…
  • Header - appends code above the global navigation
  • Top - appends code after the global navigation header. Good for secondary nav
  • Footer - appends code before the close of the bottom div
  • < /head> - allows for additional code in the head section. This is where you can load javascript and the most powerful customizations of discourse to alter templates.
  • < /body> - appends code after everything is loaded. Could be used for additional tracking pixels.
  • Embedded CSS - if you want to load css inline. (Not really sure why this is needed, but perhaps if you are struggling to override other css, this can come in handy?)

That’s just for desktop. And then there’s a set for mobile as well.

CSS
Header
Top
Footer

Pretty much the same definitions as above, but since there’s no / head, the javascript template overrides need to be added to Header.

10 Likes

Maybe we could make a faux-preview of some sort, similar to Ionic:

5 Likes

Thank you! This is super helpful.

Yes, absolutely, something along those lines would be great.

3 Likes