So, post-vdom’ing of the header, this old code: {{#unless showExtraInfo}} Join us! About SiH {{/unless}} doesn’t work, so I’ve replaced it with: note: this code works fine as of, like, early May? anyway my comments below can be ignored api.decorateWidget('home-logo:after', helper => { const showExtraInfo = helper.attrs.minimized; if(!showExtraInfo) { return helper.h('div#header-links', [ helper.h('a#recruiter', { href:'/t/joining-sih/494', text:'Join Us!' }), helper.h('a#about', { href:'/c/guild-news-announcements/about-the-guild', text:'About SiH' }) ]); } }); Which almost works (some css needed to reposition div#header-links, but nbd), except that my links just refresh the page. I realize this is less a Discourse specific question and probably more a “Yuun’s making a dumb syntax error” question, but I’d appreciate it if someone could give it a look over nonetheless. :sweat: Thanks in advance, generous stranger. :slight_smile: Clarification: my links don’t refresh the page, they just always go to the home page. The hover text for each link is correct, but I guess it’s being overridden by the home logo’s href?

This is the correct approach. You are using the plugin api and decorateWidget which is the way you should modify things. Why is positioning the links tough? Are they not appearing in the right place in the DOM? If not maybe I can add something to make them easier to insert in the right place.

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.

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.

I haven’t played around with it much, but this should get you started: 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!' }), ]); } }); div#test-links { display: inline; float: left; }

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?

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.

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; } [image]

This is my code in the “Customize → ” section. The Link to an external site (not discourse site) doesn’t work. The links should open https://example.com/index.html, but it opens https://example.com/forum/index.html I found a thread with this bug, but it’s closed. Maybe @eviltrout can help. 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' }) ]); } });

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.

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 [image] Yuun: const showExtraInfo = helper.attrs.minimized; if(!showExtraInfo) { [image] BenRoe: const showExtraInfo = helper.attrs.topic; if(!showExtraInfo) {

Adding header links post vdom upgrade

Product Support

codinghorror (Jeff Atwood) June 11, 2017, 7:54pm 24

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

Topic		Replies	Views
Adding links to Discourse header Product Support	16	5946	September 13, 2016
Help us test the new header code! Feature performance	27	11312	May 11, 2016
Use decorateWidget to add text link to header Development	5	741	December 22, 2023
Create hyperlink from home logo Product Support	2	256	June 26, 2024
Links into the header block Development	1	893	August 3, 2022

Adding header links post vdom upgrade

Related topics