Add button to top menu

Development

AI-generated summary

The discussion revolves around adding a custom button to the top menu of a Discourse forum. PatrickH wants to add a ā€˜Premiumā€™ button with a different color, aligned to the right, replacing an existing icon. mikechristopher and SidV provide links to relevant guides. bts suggests using HTML/CSS for styling. cpradio and HAWK emphasize the need for more details, such as screenshots. cpradio provides a solution using JavaScript and CSS to create a button with text, which PatrickH confirms works. TerminalAddict shares a different approach, but cpradio clarifies it targets the navigation, not the header. TerminalAddict corrects this, showing code for the header menu. Hossein_Amerkashi asks about using external icons and opening links in new windows. Jane_Macky seeks help customizing a component for a button-like header link.

1

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

2
3

Almost, but i want to have this button: Premium

image
image1171Ɨ138 13.6 KB

4

Check here: (Superseded) Add header menu links

5

check, did this but there is no button ā€¦

6

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:

7

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.

8

Show us what youā€™ve got so far and weā€™ll help you tweak it. Weā€™re flying blind a bit hereā€¦

9

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

10

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

11

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-></body

<script>

  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;
    }
  });

 </script>
12

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.

13

My example adds to header menu, not to navigation

14

You are opening the NavItem class and your Weather example is on the navigationā€¦

15

oh :blush:

Maybe he wants

<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    return [
            helper.h('li', [
            helper.h('a#premium-button.icon', {
                href: '/link.html',
                title: 'Premium Content'
            }, helper.h('i.fa.fa-cloud.premium-button-icon.d-icon')),
        ])
    ];
});
</script>
16

Close, that is almost what he has now, I provided code that puts text there and makes it more ā€œbutton-ishā€ (just a few posts up) :wink: So now he has both ā€¦ one of the two should do what he wants.

17

Great @cpradio that works, many thanks!

18

Hi,

  1. How and where do you add the icons? I like to use external icons instead of fa
  2. Iā€™m trying to open an external link. Is there a way to add a target so that we use a different window?

Thanks

19

Iā€™m trying to achieve the same outcome Header Menu Link - text in button. I used the component from here: Custom Header Links - #66
Am not sure how to work with the component to customize based on this thread, any tips?