在顶部菜单添加按钮

开发
1

我想在顶部菜单中添加一个按钮（使用不同的颜色），如果可能的话，请将其右对齐。
我该如何操作？

1 个赞
2
7 个赞
3

Almost, but i want to have this button: Premium

image
image.png1171×138 13.6 KB

4

Check here: How to add header menu links

1 个赞
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:

3 个赞
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.

1 个赞
8

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

2 个赞
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 个赞
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>
1 个赞
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>
2 个赞
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.

4 个赞
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

我想实现同样的效果：头部菜单链接——按钮内显示文本。我使用了来自这里的组件：Custom Header Links - #66
我不确定如何根据该主题帖中的内容来定制该组件，有什么建议吗？

20

此主题已在 2332 天后自动关闭。不再允许回复。