Brand header theme component

Thank you very much! fa-bars is now visible.

A post was split to a new topic: Login with federated social networks

Re-posting:

Using Font Awesome for the icons to social services works great for commercial services, since most if not all of the prominent ones have their icons there. However, those of us using free / open source social services are (I think) less lucky.

Any suggestions about how to add icons for e.g. Riot.im / Matrix, Mastodon, GNUSocial, Diaspora, IRC…?

1 Like

You could do it via custom CSS.

For example if you add diaspora,https://diasporaurl.com in ‘icons’ theme setting then it will create a class as fa-diaspora for that menu. Then using custom css you can add appropriate icon to that class.

15 Likes

It works! @vinothkannans thank you very much.

Brand header theme featuring Riot.im and Mastodon (via icons & custom CSS) plus RSS via fa-rss:

2 Likes

Hi, Vinoth Kannan,
Thanks for building this.

Question: How this ‘links’ and ‘Icons’ work?

Image 1: I added a bunch of ‘links’&‘icons’ without knowing how it work

Image 2: Result

As you can see in the image you have to add URLs next to the link and icon names separated by comma (,).

7 Likes

Thank you very much!

Hey,
Is there a way to make it so links open in a new tab? Thanks!

There is a user setting to open links in new tab.

That’s been working for links in posts but not for links I added through this header.

Currently it doesn’t have option for it. You have to modify the theme component according to your need.

Confirming;

After installing this, it appears as though the header scrolls off the page. Is there a way to fix the header in place above the existing discourse header?

I am unable to reproduce it. Can you give me a screenshot?

Oh, sorry for the confusion - I’m asking for the intended behavior?

Locally I see the brand header scroll off the page as I scroll through a long thread.

Try changing the .b-header css style like below

.b-header {
  position: fixed;
}

You may require more CSS edits to achieve your goal.

2 Likes

Thanks Vinoth.

I found a couple of things help with this;

.b-header {
  position: fixed;
  z-index: 1001;
  height: $header-height;
}

.docked .d-header {
  margin-top: $header-height;
}

#main-outlet {
  padding-top: $discourse-content-padding + $header-height;
}

This causes the custom header to be static on scroll, and sit above the discourse header at all times.

The only disadvantage of this approach that I can see is the thread title appears in the discourse header a little later than normal, because of the additional static height of the header component.

Unsure of how to change this logic - its prolly in the bowels of discourse somewhere.

4 Likes

Would it be possible to add a font awesome icon next to the link similar to this?

1 Like

Currently it’s not possible. You need to do some changes in the component to achieve that.

6 Likes

There seems to be some overlap with the primary header, I tried to add a border and the primary header is covering it up. If I change the height to 47px in inspector I can see the border, but if I add this to the css it doesn’t work.

.b-header {
    background-color: #393F4D !important;
    border-bottom-style: solid;
    border-color: #feda6a;
    border-width: 1px;
    height: 47px;
}

Another request would be to have the current page highlighted, or at least give each button it’s own class so I could change the color of a single button.