Iconified Header Links

theme-component

(Joe) #1

This is a theme component that will allow you to add linked icons to the Discourse header easily.


Github repository link

https://github.com/hnb-ku/discourse-header-links

Demo:

https://theme-creator.discourse.org/theme/Johani/header-links


Samples

Desktop

Mobile


This component includes a theme setting that allows you to add as many links as you want, determine their icons, and decide which devices they show up on!


The pattern for links is as follows:

Title,Icon,URL,View,Target

Title is… well…the title you want the link to have.

URL is where you want the user to go when they click. Include protocol like https://
Alternatively, as @dnsmichi pointed out, you can also use relative links like /c/staff

Icon can be any FontAwesome 4.7 icon name without the fa- part

View can have one of three values:

vdo:
Desktop only

vdm:
Mobile and desktop

vmo:
Mobile only


Target can be:

self
Opens link in the same tab

blank
Open link in a new tab


How do I install this?

follow the official theme installation guide here:

Then add the component to your theme as a theme component and you’re all set!


Credits

This is based on @techAPJ’s awesome tutorial here: Add new link on header beside search icon

and on @vinothkannans’s Brand header theme which was a great reference for the structure of this component.


How are theme setting fields created?
Navigation - Add custom menu items
Generic URL for private messages?
Login Required activated - after successfull login it transfers you to nonexisting page
Add new link on header beside search icon
(Hakan) #2

just show it in desktop mode, only the mobile show parts are not working well. Either it’s all working at all


(Daniel Nevoigt) #3

Very nice addon, helps a lot when some buttons have to be aplied additionally.
One question I have. Is there a way to open the links in a extra window? At the moment all links are opening in the same browser window. I have the option enabled actually in settings, to open all links on blank.


(Joe) #4

You specify which devices the links show on using this part of the string:

Check the instructions in the op and let me know if you’re still having issues.


Now there is. This is very good idea. I added the ability to decide the target of the link. Check the op for the updated instructions :sunflower:


(Daniel Nevoigt) #5

Great @Johani, thank you very much :slight_smile:


(Fellowship Forums) #6

This is a great theme. Thanks!

Although I am having slight issues.

My input is “Feedback, pencil, Comments & Feedback - Fellowship Forums - ERM, vdm, self”. I am not able to the FA icon, and it also opens in a new tab.

You can see how its working for yourself by visiting my forum: www.fellowshipforums.com


(Joe) #7

The only thing you need to change there is to remove the spaces after the commas. So instead of this:

Feedback, pencil, https://www.fellowshipforums.com/c/commentsandfeedback, vdm, self

You use this:

Feedback,pencil,https://www.fellowshipforums.com/c/commentsandfeedback,vdm,self


(Jeff Atwood) #8

Hmm, why isn’t this tolerant of spaces after a comma? It should be.


(Joe) #9

Done :tada:

White-space before or after commas is not an issue now.


(Michael Friedrich) #10

Many thanks for this nice addition :heart:

You can use relative URLs here too, which avoids long config strings and allows to change the VHost in the future. I’m a friend of having the FAQ prominently linked in the header since our community is more of Q&A with many details collected beforehand.

Modified my previous custom header to using this theme, works like a charm :+1:



(Jorge Assunção) #11

I’m on v2.0.0.beta9 and after install, with no errors, i can´t see the theme setting anywhere…


(Joe) #12

Noted, no Discourse errors while installing the theme.

Are you seeing any errors in the browser console?


(Jorge Assunção) #13

No, no errors on the console…


(Joe) #14

I would love to help here @j_assuncao

However, I just tried to install the theme on my test install v2.0.0.beta9 +73 - no plugins - and I can see the settings right away. The leads me to believe that there’s something else at play on your end, maybe.

Any further information you can provide would help.


(Jorge Assunção) #15

I´ve made a new install of discourse last night. No errors during install and still no settings…

This can be my mistake, so were are those settings suppose to be??


(Joe) #16

As soon as the theme is installed you should see the settings on the theme page like so:

And just to be sure, you’re installing the theme like this, right:

How do I install a Theme or Theme Component?


(Jorge Assunção) #17

Shame on me! I was installing the theme the wrong way. Sorry…


(Colin Marshall) #18

Thanks for the great component!

Is there a way to make it so the icons from this component always appear to the left of all the other icons? When used in conjunction with the quick messages plugin, the icons end up to the right of the quick message icon:

30%20AM

From an organizational standpoint, I think it makes the most sense to put the social icons to the left of all the other icons.


(Joe) #19

I believe this occurs because both the plugin and the theme are modifying the same widget, but the plugin is loaded first.

I don’t believe there’s a way to resolve this “conflict” in either the plugin or the theme, however it might be possible to do it with CSS using the order property.

Is your site public? If you share a link I can take a look.


(Colin Marshall) #20

Thanks! That was enough info for me to get a solution. I did this:

.d-header-icons {
  display: flex;
  flex-direction: row;
  
  // target iconified header links to come first
  li.vdo,
  li.vdm {
    order: -1;
  }
}