Adding header links post vdom upgrade


(Clay Heaton) #7

I’m missing the big picture here – where can I find a link to all of the possible locations for the widgets? For instance, where is home-logo defined, etc?


(Robin Ward) #8

All widgets are within the folder discourse/widgets in the javascript directory. Some files contain more than one widget if they are smaller pieces that make up a bigger component.

The home-logo is here.


(Pad Pors) #9

is it possible to put something next to the search icon using this method?

i’ve tried changing user-notifications:after, and some other widget names. and it didn’t work.


(Sam) #10

I haven’t played around with it much, but this should get you started:

<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    const showExtraInfo = helper.attrs.minimized;
        if(!showExtraInfo) {
            return helper.h('div#test-links', [
                helper.h('a#test1', {
                    href:'/t/joining-sih/494', 
                    text:'Join Us!'
                }),
            ]);
        }
});
</script>
div#test-links {
    display: inline;
    float: left;
}

(Pad Pors) #11

that worked :smiley: thanks.


(Pad Pors) #12

in right to left language, i can’t bring the links to the position next to search and they go to the left side of user avatar instead.

i mean it doesn’t make any difference if i use header-icons:before or header-icons:after.

any idea how i may fix this?


(Sam) #13

Try using position: absolute and fiddling manually with the position, maybe?

I don’t know much about what changes going to RTL, but it’s worth a shot. The float: left above was just a quick thing to show it was possible to get the links there without much trouble.

e.g.:

div#test-links {
    position: absolute;
    left: -150px;
}

Puts them in a sorta correct place on my test forum.


(Ben) #14

I use Flexbox to positioning the Links. Maybe it’s useful for someone.

.d-header .title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

#header-links {
    max-width: 50%;
    font-size: 1.2rem;
    margin-left: 30px;
    margin-top: 4px;
}


(Ben) #15

This is my code in the "Customize -> </head>" section.
The Link to an external site (not discourse site) doesn’t work.

The links should open Example Domain, but it opens https://example.com/forum/index.html

I found a thread with this bug, but it’s closed. Maybe @eviltrout can help.

<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('home-logo:after', helper => {
    const showExtraInfo = helper.attrs.topic;
        if(!showExtraInfo) {
            return helper.h('div#header-links', [
                helper.h('a', {
                    href:'https://example.com/index.html', 
                    text:'Tracks'
                }),
                helper.h('a.active', {
                    href:'https://example.com/forum', 
                    text:'Forum'
                })
            ]);
        }
});
</script>

(Sam) #16

That’s odd, I just checked and as long as I include https:// any external links work fine for me, in both the home-logo:after and header-icons:before locations.


(Mykhailo Poliarush) #17

My links are showing all the time. How to make it hidden if i’m on topic page and there is text on center?

Both variants doesn’t work


(Sam) #18

Ah, that’s because the header icons widget doesn’t have a property that can be accessed that shows when topic info is being displayed (attrs.minimized for home-logo, attrs.topic for header). That’s a good point, I’d forgotten about that.

But maybe you can just use the home-logo:after decoration from the first post and reposition the links to be near the search bar anyway, right? Just fiddled around with a bit and wasn’t having much luck, but could just be failing at css. :slight_smile:


(Sam) #19

Okay, here we are. Try using header-buttons:before and helper.attrs.topic, that seems to be working okay.

Sometimes I might jump the gun a bit, so let me know if there are any issues. :slight_smile:

…not that I can necessarily do anything about them, I just like to be in the know.


(Mike) #20

Any chance of writing a new summary on this? Tried getting it together but failed… :frowning:


(Sam) #21

What did you try? The second chunk of code in the OP still should work just fine.


(Mike) #22

The scipt form @Ben worked for me, was just looking in the wrong place…
Any chance the older code for adding the “+ new topic” button next to the search icon can be combined with the code? I really would appriciate it!


(Joshua Lippiner) #23

This is great! But @codinghorror don’t you think the ability to edit / add links to the header area like this should be part of the theme customize? When I edit the “header” I kind of expected to be editing this area, but I was really editing the “before header” area. Just a thought.


(Jeff Atwood) #24

We wanted to add it to the setup wizard but ran out of time.


(Joshua Lippiner) #25

I would recommend adding it to the customize section for themes.


(Spacle) #26

Ive tried various options to add +New Topic Button to the header or at lease every page but it isn’t working… Please any work around on this?