Best way to customize the header?

faq-material

(katherine) #1

I am looking to customize the header on my Discourse site. Specifically, I want to add another icon next to my logo that links to an external website. What is the best way to go about doing this?


Custom nav header like discourse.org
How to get a header like WD and CarTalk Forums?
Multisite Questions
(Jeff Atwood) #2

To return back to the main site, or some other reason?


(katherine) #3

I’m using Discourse as a discussion forum for an online course, and I want to give participants an easy way to link back to our external website that has information like the schedule and syllabus.


(Grif Peterson) #4

I’ve run into the same issue and there seem to be three options:

  1. Include a link next to the Discourse logo in the top left that links out of Discourse to our course homepage (As @kamcc as recommended)
  2. Adding a banner below the header, which is doable but not ideal.
  3. Adding a horizontal category (alongside categories, latest, top, etc) that links to an external page. I’m not sure anybody has attempted this before either.

(Jeff Atwood) #5

This is pretty easy with the CSS header customizations.

  1. Go to /admin (use the wrench menu)

  2. Select customize

  3. Add a new customization

  4. Select Header

  5. Paste in a simple header, like

     <div id="top-navbar">
     <span id="top-navbar-links" style="height:20px;">
       <a href="http://example.com">Home</a>
       <a href="http://example.com/about/">About</a>
       <a href="http://example.com/news/">News</a>
       <a href="http://example.com/products/">Products</a>
       <a href="http://blog.example.com/blog">Blog</a>
       <a href="http://forums.example.com/">Forums</a>
     </span>
     </div>
    
  6. Tick the “enabled” checkbox

  7. Save

You’ll see it above the header like this:

And when you scroll down…

And when you scroll up, it will come back.

Style to taste of course.


Use Wordpress Header for Discourse
How can I add a text tagline bellow the header logo?
How to add header menu links
(BDub) #6

Exactly what I needed next :wink: thanks.


If you have a wide screen, the forum naturally centers itself and the header @codinghorror suggested tends to hug the hard left of your window.

Looking at the forum CSS for the existing header, I figured out how to make a simple addition that will lock your new navigation header just over the top-left of the logo. You can also easily move it over towards the center more by changing the max-width value. I also added some pipes to visually separate it a bit. Obviously you could do way better with some real CSS, but this might be just good enough for what I need.

<div id="top-navbar" style="max-width:1110px;margin-right:auto;margin-left:auto;">
<span id="top-navbar-links" style="height:20px;">
  <a href="http://example.com">Home</a> | 
  <a href="http://example.com/about/">About</a> | 
  <a href="http://example.com/news/">News</a> | 
  <a href="http://example.com/products/">Products</a> | 
  <a href="http://blog.example.com/blog">Blog</a> | 
  <a href="http://forums.example.com/">Forums</a>
</span>
</div>


(Jeff Atwood) #7

Pretty sure there is an easier way using existing classes there, I would not recommend hard coding sizes. Any recommendations @awesomerobot?


(BDub) #8

Thanks for keeping me honest :wink: I just copied the styles from the .container class. Since I’m not a web guy it didn’t occur to me that I should just try to apply the class="container" to that top div.

This will give the same output as my first post:

<div id="top-navbar" class="container">
<span id="top-navbar-links" style="height:20px;">
  <a href="http://example.com">Home</a> | 
  <a href="http://example.com/about/">About</a> | 
  <a href="http://example.com/news/">News</a> | 
  <a href="http://example.com/products/">Products</a> | 
  <a href="http://blog.example.com/blog">Blog</a> | 
  <a href="http://forums.example.com/">Forums</a>
</span>
</div>

(Jeff Atwood) #9

Now you are cooking with :fire:


(TheLoneCuber) #12

I’ve made a minor header mod to my Discourse install and it’s causing grief the user profile pop-overs. Has anyone else come across this issue?

I’ve added an image into the header (standard header only, not mobile). But now the user profile pop-ups appear offset below the user profile thumbnail by the height of the new header image. In my case the header image is 400px high, so the user profile pop-ups pop up 400px below the user profile, which means they actually appear off-screen on smaller viewports.

I’m using the latest Discourse version 1.1.0.beta7.


User card popup offset problem with custom header
(Jon Kragh) #14

Will the header customizations work for the mobile site, or hamburger menu?

I would like to link to my main site from the mobile discourse site, someplace in the mobile header.

When I choose Header or top for mobile it doesn’t seem to take effect.

Thanks!
Jon


(Kane York) #15

It’s probably being hidden by the static header. Try opening a new tab and appending ?mobile_view=1 to the URL.


(Jon Kragh) #16

OK cool - is there a way to customize that and/or the hamburger menu so I can give users a link back to my main site?


(Kane York) #17

I was giving you directions to how you could see & tweak the CSS on your desktop without having to deploy the changes every time :neutral_face:


(Lincoln) #18

Hi @Jon_Kragh,

Mobile version of top and footer (including CSS) is working right now.

I’ve fixed it in Fix customize HTML/CSS only show desktop code by linc01n · Pull Request #3187 · discourse/discourse · GitHub

Please upgrade your discourse to version later than (e9d5c5c).

Best,
Lincoln


(Matthieu) #19

I’m trying to customize our header but the result is not the same in the main page and the admin panel:

Here is the Header HTML:

<div style="background: #272727;">  

    <nav class="container" id="bar">
        <ul>
          <li>
            <a href="https://forum.poppy-project.org/tags/english" class="lang_sel_other">
              <img class="iclflag" src="https://www.poppy-project.org/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png" alt="en" title="English">
            </a>
          </li>
          <li> -</li>
          <li>
            <a href="https://forum.poppy-project.org/tags/fran%C3%A7ais" class="lang_sel_sel">
              <img class="iclflag" src="https://www.poppy-project.org/wp-content/plugins/sitepress-multilingual-cms/res/flags/fr.png" alt="fr" title="Français">
            </a>
          </li>
        </ul>
    </nav>

</div>  


and CSS:

nav#bar ul { 
    text-align: right;
    margin: 0px;
}

nav#bar ul li { 
    display: inline-block;
    color: #f4f4f4;
}

nav#bar {
    height: 20px;
}

Why the CSS is not working in the admin panel ?


CSS admin-contents reloaded
(Joe Seyfried) #20

Because it gets automatically disabled. See CSS admin-contents reloaded or CSS Clearfix for `admin-contents` … There seems to be a growing number of people who find this annoying…


(Jeff Atwood) #21

Customizations are not supported from within /admin. This is by design. Otherwise the customizations could make it impossible to admin the site…


(Kane York) #22

We know that, but the removal of the customizations is, ah, a bit buggy, and it’s regressed. That’s what people are complaining about.

Primary is that color schemes can still make the admin interface unreadable, especially without a pointer device.


(Matthieu) #23

Ok I understand, I modified the HTML to not use list so the missing CSS is less annoying.

Yet, why still keeping the custom header HTML in the admin ? It would be more coherent to ignore it also i.e. no modification of the admin page period.

Also, as a dummy user, it would have been really useful to have a note in the customization panel to explain the customization will not work properly on the admin page. I spent quite some time trying to figure out why the CSS was not working …

For example:

Modify CSS stylesheets and HTML headers on the site. Add a customization to start.
/!\ This customization will not affect the admin interface. This is by design. Otherwise the customizations could make it impossible to admin the site.