How to show custom header only for home page?

Hi everyone, I’m new to Discourse and appreciate all the info that’s on here.

I would like to have a custom header on the home page (of Discourse). Currently I’m accomplishing this by putting HTML code in the After Header setting of the Custom Header Links component (because I’d like to add some links). However, this means that my header shows up on every page. How can I adjust my settings so that the custom header is only on the home page? Or, maybe using the After Header is not the right thing to do for my use case.

Thanks.

1 Like

I think the simplest way (assuming you’re not a developer) would be to add a class to the body tag when you’re on the homepage, and use some CSS to hide the custom links theme component.

If you create a new theme component (admin > customize > themes > install) and then add this to the </head> section, you’ll then get the class “homepage” on the body tag. Note that below I’m assuming your homepage is “/latest” — if you’re not using /latest you’ll want to change it to “/categories” “/top” or whatever your homepage is.

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url) => {
    if ((url === "/") || (url === "/latest")){
     document.querySelector("body").classList.add("homepage")
    } else { 
     document.querySelector("body").classList.remove("homepage")
    }
  });
</script> 

Then if you switch over to the CSS tab theme in your component, you can add this to hide the header links everywhere except the homepage:

body:not(.homepage) { 
  .d-header .header-buttons {
    display: none;
  }
}
4 Likes

Thank you @awesomerobot, that worked for me! I had to tweak it just a tiny bit (specifically, I had to use the id selector #banner for the display: none). I’m actually a developer but I’m completely new to Discourse so this method is great.

3 Likes

oh glad it was useful, I overlooked the part where you said

HTML code in the After Header setting of the Custom Header Links component

So it sounds like you’re directly editing the Custom Header Links component.

When you import a theme or theme component from an external source like github, and then edit it locally, your changes will be overwritten if you ever update that theme component.

You might want to move everything you added out of the After Header section of the Custom Header Links component, and move it to the After Header section of the component you just created so you don’t have to worry about it.

Also, as you’re working on customizations a bit more this guide might be helpful Developer’s guide to Discourse Themes

4 Likes