Adding links to Discourse header


(James Cook) #1

I noticed that the Sitepoint forums have links within the Discourse header itself.

How was this achieved? I came across a post that suggested adding links above the header and then using CSS to position them so it looks like they’re part of the Discourse header. I’d prefer not to do it this way but to add markup directly in the normal header if possible.

I was thinking a plugin, but I can only add markup where a plugin outlet exists right?


How to customise the header with a plugin?
(cpradio) #2

We use a plugin where we override the entire header template.

Specifically


Why is the large middle blankspace in the header not configurable?
#3

Was it this one you meant @jamesmarkcook. This is the one we use and works quite well


(James Cook) #4

Thanks very much for the heads up. I’ll adapt this for my needs :thumbsup:


(cpradio) #5

Just be warned, it makes upgrading a chore from time to time, as you are in charge of your header entirely and you can break it. So unless you have a staging server that you can test against for upgrades, I’d find a different route.


(James Cook) #6

Ok thanks for the warning. I’ll have a think :thinking:


(cpradio) #7

Feverbee also has header links that I helped them out with, they are using this code:

<script type="text/discourse-plugin" version="0.2">
api.decorateWidget('home-logo:after', helper => {
    const showExtraInfo = helper.attrs.minimized;
        if(!showExtraInfo) {
            return helper.h('ul.nav-link-container', [
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://www.feverbee.com/resources', 
                        text:'RESOURCES',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://experts.feverbee.com/', 
                        text:'DISCUSSIONS',
                        target:'_self'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://sprint.feverbee.com/', 
                        text:'EVENTS',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://ondemand.feverbee.com/', 
                        text:'TRAINING',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com/consultancy', 
                        text:'CONSULTANCY',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com/about-us', 
                        text:'ABOUT',
                        target:'_blank'
                    })
                ]),
                helper.h('li', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com', 
                        text:'HOME',
                        target:'_self'
                    })
                ])
            ]);
        }
});
</script>

With CSS to taste.

@import "theme_variables";


// header stripe shadow
.d-header {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
padding-bottom: 3px;
border-bottom: 1px solid #D45000;
}


.badge-wrapper.box span.badge-category {
    padding: 0 6px 2px;
}


// header links
.mobile-view .hidden-for-mobile { 
    display: none; 
}
.add-header-links {
    margin-left: 0 !important;
}

@media screen and (max-width: 940px) {
    .nav-link-container li:nth-child(1) {
        display: none;
    }
}
@media screen and (max-width: 830px) {
    .nav-link-container li:nth-child(2) {
        display: none;
    }
}
@media screen and (max-width: 743px) {
    .nav-link-container li:nth-child(3) {
        display: none;
    }
}
@media screen and (max-width: 650px) {
    .nav-link-container li:nth-child(4) {
        display: none;
    }
}
@media screen and (max-width: 525px) {
    .nav-link-container li:nth-child(5) {
        display: none;
    }
}

.nav-link-container {
    display: inline;
    li { 
        display: inline-block;
        float: right;
        a {
            color: rgb(255, 255, 255);
            text-decoration: none;
            text-align: center;
            font-family: 'Open Sans'; 
            line-height: 48px;
            min-width: 90px;
            font-size: 15px;
            padding: 0 1em;
        }
    }
}

Need help in customizing header in latest discourse verison
Why is the large middle blankspace in the header not configurable?
(Pad Pors) #8

this one works well as well:


(Pad Pors) #9

in the FeverBee site the links go into a drop-down menu as the screen gets smaller. i tried these codes and couldn’t produce it. do you know how i can produce it?


(cpradio) #10

I haven’t a clue to what you are referring to… can you explain what it is they are doing in a way I can reproduce it and see it? As When I shrink the window on desktop, it isn’t doing anything for me.


(Pad Pors) #11

here is the page header in the large scale:

here is the header when i resize the page (you can see the 3-lines menu in the right):

and here is the image when you click on this three-line menu:

the links has gone into this menu. i hope i could explain what i meant. when i used the above codes, after i shrink the window the header becomes little bit noisy (as a result of no-space condition):


(cpradio) #12

That’s their main website and not Discourse though. The code I helped them with was for Discourse only, which doesn’t scale down to that menu either.

In short, you would need minimally add more HTML. You would have to have a menu (that is hidden at larger viewports) plus the horizontal menu which is visible at larger viewports. Then as the viewport shrinks your CSS media queries should hide the horizontal menu and make the menu visible.

This is a good read of the concept behind what their main site is doing


(Pad Pors) #13

many thanks for the good link :smiley:


(James Cook) #14

Have you noticed issues with older versions of Safari not displaying the link text?

If so, are you aware of any workarounds?


(cpradio) #15

I unfortunately do not have any old versions of safari laying around. So I can’t say that I have. Though I can’t think of any reason for that to occur, The HTML it outputs isn’t anything special and utilizes CSS 1 standard properties.

However, if you used that code as written, pay close attention to the “hidden-for-mobile” class, maybe it is being treated as mobile?


(James Cook) #16

Thanks for the reply.

The links are definitely being inserted, but the text attribute is being ignored, or not inserted for some reason.

Safari

Chrome

I’m don’t really have much knowledge around Ember and wasn’t sure if this was an Ember issue or a Discourse issue.


(cpradio) #17

If you have a way to recreate it, can you debug it? I’m thinking this is the location

text would be the propname you want to stop the debugger on. I wonder if trying to set it via element['text'] = value is not happy with the older version of safari.