I want to add a button (with a different color) to the top menu, and if possible align right How can i do this ?

Try changing the following api.decorateWidget('header-icons:before', function (helper) { return helper.h('li', [helper.h('a#home-button.icon', { href: 'https://forum.webwinkelcommunity.nl/t/wordt-donateur/2171/1', title: 'Wordt Donateur' }, helper.h('i.fa.fa-arrow-circle-up.home-button-icon.d-icon'))]); }); to api.decorateWidget('header-icons:before', function (helper) { return helper.h('li', [helper.h('a#home-button', { href: 'https://forum.webwinkelcommunity.nl/t/wordt-donateur/2171/1', title: 'Wordt Donateur', text: 'Wordt Donateur' })]); }); With the following CSS a#home-button { border: 1px solid #000; padding: 5px; border-radius: 3px; position: relative; display: block; margin-top: 5px; } Screenshot: [image]

[תמונה] (Superseded) Add new link on header beside search icon Site Management mega This feature is now available as a dedicated theme component. Want to add a new link right next to search icon on header? Follow below steps: Add this JavaScript code to your site theme Go to Admin Customize Themes Select the theme you wish to customize Edit CSS/HTML const { iconNode } = require("discourse-common/lib/icon-library"); api.decorateWidget('header-icons:before', helper => { return helper.h('li', [ he…

Almost, but i want to have this button: Premium [image]

Check here: (Superseded) Add header menu links

check, did this but there is no button …

You’ll have to customize a bit with HTML / CSS to get exactly the look you’re going for. If you have a reference button you want to copy you can often get most of the way there by inspecting using something like Chrome web tools and copying existing styles. Lots of tutorials you can follow + modify as well! Definitely a bit of a learning curve but imo fun to figure out how this stuff works :slight_smile:

Screenshots would be really helpful. It is hard to tell if your theme component is just not active or if you put the code in the wrong place.

Show us what you’ve got so far and we’ll help you tweak it. We’re flying blind a bit here…

this is the forum: https://forum.webwinkelcommunity.nl/ and instead of the bleu arrow icon i want a button with Premium (or Donateur)

This should do it: ( demo: https://www.mcrides.co.nz I have a “Weather” link ) You’ll need to style it with css. customize->theme-> Discourse.ExternalNavItem = Discourse.NavItem.extend({ href : function() { return this.get('href'); }.property('href') }); I18n.translations.en.js.filters.premium = { title: "Premium", help: "Premium account" }; Discourse.NavItem.reopenClass({ buildList : function(category, args) { var list = this._super(category, args); if(!category) { list.push(Discourse.ExternalNavItem.create({href: '/my/link.html', name: 'premium'})); } return list; } });

But that adds it to the Navigation, not the header… But I guess it isn’t obvious which he wants, as his initial posts says “top menu” which refers to the navigation, but his screenshot and example of where his icon is… is in the header.

הוסף כפתור לתפריט העליון

מפתח

mikechristopher 18 בינואר,‏ 2018,‏ 1:52pm 2

נושא		תגובות	צפיות
How can I add a new button to the topbar? Product Support	1	972	3 ביולי,‏ 2022
How to add a button to the header area? Development	17	892	15 ביוני,‏ 2024
Use decorateWidget to add text link to header Development	5	752	22 בדצמבר,‏ 2023
How to add new button in different color UX	3	1469	4 באוקטובר,‏ 2018
Custom Buttons with own functions Product Support	6	1346	15 באוקטובר,‏ 2020

הוסף כפתור לתפריט העליון

נושאים קשורים