Add new link on header beside search icon


(Arpit Jalan) #1

: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

  1. Go to Admin
  2. Customize
  3. Themes
  4. Select the theme you wish to customize
  5. Edit CSS/HTML
  6. </head>
<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#home-button.icon', {
            href:'https://www.google.com/',
            title: 'Google'
        }, iconNode('arrow-circle-up')),
    ]);
});
</script>

(Props to @Yuun for above code)

Change href, title and icon (arrow-circle-up) as per your requirement. See the complete list of available Font Awesome icons here. If using an icon that isn’t already included in Discourse, please also add the icon to the svg icon subset site setting. (See this guide to Font Awesome 5 in Discourse for more details.)

Ensure the theme is enabled and you should be able to see the new icon linking to Google right next to search icon! :tada:

Desktop:

Mobile:

Debugging

If it’s not working, try:

  • Look for error message in Browser console
  • View page source and see the error in a <script type='text/discourse-js-error'> block

Iconified Header Links
Adding a custom Link/Icon to the discourse header
Customizing header
How can we Customizing Header?
[PAID] Looking for a custom design on my Discourse Forum
Plugin: add a menu icon (next to search)
Add button to top menu
Global navigation or links
Want to add button to top right of topic view
Optional Link to Main Site?
Babble - A Chat Plugin [ARCHIVE]
Drop Down menu just like envato's forums
Is there a setting to add Facebook, twitter , Instagram profile links?
Introducing Font Awesome 5 and SVG icons
Adding a link into the mobile header
Problems adding custom button to discourse
(Sebastian) #2

Hi. If I am unable to see the change (yes I cleared my browser cache), what would possible sources be to look for in terms of isolating the problem?


(Arpit Jalan) #3

To debug:

  • Look for error message in Browser console
  • View page source and see the error in a <script type='text/discourse-js-error'> block

(Sebastian) #4

hm, API 0.4 not supported, does your hack only work with the latest Discourse version? that would explain it :wink:


(Sam) #5

The script should still work with earlier API versions - just checked and version 0.1 seems okay. I don’t think decorateWidget has changed at all is why, I guess?


(Sebastian) #6

Hi.
After upgrading to latest Discourse, it works. However, I have two styling problems and one question.

  1. Added a help icon, it looks weird in the admin backend

    and on the front end, it doesnt haven the same hover effects as the other icons. Shouldn’t whatever buttons I add here, inherit their behavior?

  2. How does the javascript code look like for adding several icons


(Sam) #7
  1. CSS doesn’t always apply to the admin pages with rules that I don’t 100% remember. Anyway, don’t worry about it.

The hover effects are just more CSS.

i.home-button-icon {
    display: block;
    padding: 4px 3px 3px 3px;
    color: #999;
    transition: all linear .15s;
}

i.home-button-icon:hover {
    color: #222;
    background-color: #e9e9e9;
}

(that took me embarrassingly long to remember how to do!)

  1. You just need to duplicate the inner helper.h bit:
<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#home-button', {
            href:'https://www.google.com/',
            title: 'Google'
        }, helper.h('i.fa.fa-arrow-circle-up.home-button-icon')),
        helper.h('a#home-button', {
            href:'https://www.google.com/',
            title: 'Google'
        }, helper.h('i.fa.fa-arrow-circle-up.home-button-icon'))
    ]);
});
</script>

(Sebastian) #8

thanks, works like a charm : https://forum.spaghetti-western.net/


(Kiefer Davies) #10

Hi there, so I used the above CSS. But the home button, for whatever reason, redirects to forum.starwarshorizons.com/starwarshorizons.com, as opposed to my parent website starwarshorizons.com. Here’s the CSS:

<script type="text/discourse-plugin" version="0.4"> api.decorateWidget('header-icons:before', helper => { return helper.h('li', [ helper.h('a#home-button', { href:'https://www.starwarshorizons.com/', title: 'Home' }, helper.h('i.fa.fa-home.home-button-icon')), ]); }); </script>


#11

My users requested the possibility (not enforced, so then it should be user settings) to make an addition to mobile header, but so that it could be either unread or latest. How can I do this?


(Rafael dos Santos Silva) #12

You will need a plugin, that creates a user setting and adds the button the user wants (none, latest, unread).


#13

Thank you! With the my latest attempts on plugin creation, this might be the easier way to start. :slight_smile:

@Falco, if you have time for a quick reply: where should I start looking for (a) customizing user settings (I saw site settings in abbreviations plugin already; does it work the same way?); and (b) modifying the header with a plugin?


(Rafael dos Santos Silva) #14

Use the same code in this topic, just make it conditional like on signatures plugin.


(Martial) #15

Possible to use an image instead of a class ?

For example, there is no icon in Font Awesome for Teamspeak :grin:


(Алексей Копаев) #16

How to turn off the display on a mobile phone?


(Алексей Копаев) #17

And how can you bring to the desktop versions only those buttons?


(Daniela) #18

Are you talking about Versionin - Reference etc… buttons?
If so, I think you need to read this topic:

Can you explain better which buttons you don’t want on a mobile?


(Алексей Копаев) #19

How to bring this kind of such buttons only on the desktop? And on a mobile hide them?


(Daniela) #20

Ok, now I understand. Read the link I posted. If you don’t want those buttons on mobile skip the title CSS Mobile.

When you done it for desktop, check your site on mobile. If you see links on it simply add in your CSS Mobile tab:

div#top-navbar { /*the class of your menu, change it if you use something different*/
  display: none;
}

(Алексей Копаев) #21

How to make so that code hiding on a mobile phone?