Brand Header

Any errors in the browser console?

It’s hard. You may have to fork the repo and remove recent commit.

Edit: Also try by clearing the cache or use a different browser.

hello can you share your theme?

I moved to the new version of the theme and added all of my info and logos, but the brand logo images for mobile and main are not working. I have used Incognito so should not be a cache issue.

I pushed a fix and the logos are looking fine now.

4 Likes

Should the brand name setting make the website brand appear to the right of the logo in the brand header?

The brand name will be displayed in the brand header (like the example in OP) only if the logo image is not specified. If the brand logo URL is available than the name will get replaced with the logo image.

2 Likes

Thanks for the clarification. I am thinking I could snaphshot the logo with the type, finess it, and then insert that as a png to get around this. We are looking to make the forum header look like the website home page where the logo appears like this:
32%20PM

I am currently playing with code to add the logo and brand in your theme and then I’ve used Feverbees code to get me started on the header to get the header looking like this:

If you think this is not a wise use of your theme, please don’t hesitate to let me know.

You could achieve it with some CSS edits.

1 Like

I had some negative experiences using an afterheader with glitches after updates and making it work with plugins like babble. I think this could be a much cleaner user-friendly way to go about getting the look we are after. Thanks for making this.

1 Like

Glad we can help :slight_smile:

2 Likes

It would be useful if you were able to reorder the links / social links etc as if you want to add a new one in it auto appends to the end but then would have to remove all others if you want it second for example.

Otherwise - great work :slight_smile:

3 Likes

I am not sure I am applying CSS correctly. The UI leaves different options…

I got the desktop version styled as desired: https://la.confederac.io/

However, the mobile version is not taking the styles and, in fact, is not offering a menu at all.

Is this the intended behavior currently, or am I missing something?

PS: Also note how mobile site title in two lines leads to overlap with dropdown menu.

Actually, now I see that the burger icon is at the right indeed, but white, which means practically invisible. I’m unable to find the CSS selector to style that fa-bars. Can you help, please?

You can use the below code to change the fa-bars color

.b-header .panel > ul.icons [class^="fa fa-"] {
    color: #333;
}
5 Likes

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