Brand header theme component

theme-component
(Vinoth Kannan) #92

@Steven yours is the correct solution actually. I think we don’t need a fix here. Instead of fab-youtube you can just use the word youtube itself.

(Jeremy M) #93

So I am currently looking at implementing this, and one of the things I am working at modifying is the highlight colors for the images, for instance:

image

Any assistance would be appreciated… I would prefer to have no highlighting, or just bold the text

1 Like
(Quim Gil) #94

Recently the icons disappeared. It might have been with the last upgrade of the Brand header theme, but I’m not sure. If you go to https://la.confederac.io, and hover over the icons area, you will see that the placeholders with links are there, but the icons are not visible.

We have two icons coming from a png using custom css, and a third consisting of a plain fa-rss icon.

In the CSS file, we have:

  .fa-mastodon {
    content: '';
    background:url("/uploads/default/original/1X/4db25fe29f8ec96b3f856d3529f651e7f0e5f3a7.png");
    width:28px;
    height:28px;  
    display:inline-block;
    margin: 2px;
    }
  .fa-riotim {
    content: '';
    background:url("/uploads/default/original/1X/0b4dfd5307061f81e183d836bae9cb6b55de48bc.png");
    width:28px;
    height:28px;  
    display:inline-block;
    margin: 2px;
    }

As far as I can tell, we haven’t touched anything. After the last theme upgrade we added our custom CSS again.

(Daniela) #95

Please read Introducing Font Awesome 5 and SVG icons

7 Likes
(Quim Gil) #96

OK, sorry for missing that. Fixed!

3 Likes
(Andreas Motl) #97

Hi there,

first things first: Thanks for conceiving and maintaining this excellent theme component, @vinothkannans! We started to lean on it recently and have been glad there was finally a flexible header component which we still missed about two years ago when configuring our first Discourse instance.

Introduction

@LittleLebowsky discovered some bugs on the account activation page on a site which uses the brand header theme component, so we started digging for the reason behind that and would like to share the outcome with you again.

We discovered some minor things which could be improved. It is about Brand header theme component breaks page layout on static and no_ember pages and might sound familiar to some of you already. @vinothkannans also already answered me at TypeError: Discourse._registerPluginCode is not a function while I was searching for the root cause of this issue, thanks for that!

Workaround

  1. We came up with an appropriate workaround which at least will assure the rendering will not break completely. It does so by effectively not displaying the brand header at all when not getting runtime-initialized. You can find the corresponding PR at Breaking page layout on "static" and "no_ember" pages by amotl · Pull Request #2 · discourse/discourse-brand-header · GitHub.

  2. Because the component is still attempted to get ill-initialized on static and no_ember pages, you might want to additionally apply this snippet to a custom theme component, which effectively makes plugin registration a noop, see also TypeError: Discourse._registerPluginCode is not a function.
    This step can be omitted completely as soon as Almost void Discourse object instance will sneak through some safeguards will be fixed.

Preliminary testing

If you want to try it out, you might want to use this repository with the designated branch name for importing the component:

Repository:  https://github.com/ip-tools/discourse-brand-header
Branch name: fix-broken-rendering

Hope this helps.

With kind regards,
Andreas.

2 Likes
(Vinoth Kannan) #98

Both are already fixed in below commits. Thanks for your report and excellent help. Please don’t create duplicate posts for the same issue.

FIX: call method only if it exists · discourse/discourse@59e5af4 · GitHub
FIX: Override core CSS styles only in ember pages · discourse/discourse-brand-header@a67f081 · GitHub

8 Likes
TypeError: Discourse._registerPluginCode is not a function
(Andreas Motl) #99

Ha, that was quick. Thank’s a bunch!

1 Like
(Craig) #100

Is it possible to get a YouTube icon? I can use Github, Twitter and Facebook… But not YouTube.

(Vinoth Kannan) #101

You should add fab-youtube in the custom font awesome icons theme setting.

10 Likes
(Craig) #102

You’re a legend. Thank you for your help.

5 Likes
(Jimmy) #103

Thanks for sharing this! However, as someone inexperienced myself, I wasn’t able to get the code snippet to work for all my links on my brand header. I basically copied and pasted the code multiple times for each link so it would open in a new tab. Since I know this is not the most efficient way of doing this, how can I set it so that all of the links on the header open in a new tab? Thanks!

(Taylor) #105

If you want every link in the Brand Header to open in a new tab, you can use the following code, however, it’s important to note that it’s usually considered better practice to allow users to chose whether they want to open a new tab or not.

<script type="text/discourse-plugin" version="0.8.13">
    $(function() {
        $(".brand-header a").click(function(e){ 
            e.preventDefault(); 
            var url = $(this).attr('href'); 
            window.open(url, '_blank');
        });
    });
</script>
11 Likes
(Jimmy) #106

Thanks for your help! I’ve decided to only use it for the social icons, but keep the rest of the links working. However, in my implementation, I noticed if the hamburger menu is used such as on mobile, it will now open just a blank page. How would I specifically change it so that if the hamburger is visible to not use that functionality or if on a mobile device to not open a new tab?

(Taylor) #107

It sounds like you have the script in the Common section of your theme component. If you place it in the Desktop section, it should only apply to the desktop view, and not the mobile view that includes the hamburger menu.

7 Likes
(Jimmy) #108

Yup that did the trick as well. Thanks for being patient with me for seemingly simple solutions!

2 Likes
(Michael Pinkard) #109

I am also seeing this issue for internal links, where the header does not disappear on mobile. Instead, the header slides right and leaves the main page opaque (I believe an overlay is being set), even if the header is folded back up.

Is there a fix for this?

(crazykumar) #110

Thanks @vinothkannans. Just to clarify to everyone like me, you need to do two things, I was trying to do all in one place in custom fonts icon with URL and it was not working.

  1. Add fab-youtube in the custom font awesome icons theme setting
  2. Now add the url 'youtube, ’ in the icons section for the URL.
2 Likes
(Sorin) #111

Hi there, an awesome component which makes a corporate forum so much better.
One question, can this be hidden completely on mobile browsers from css? The double burger menus seems confusing for some users.

Thank you.

(Vinoth Kannan) #112

Yes, you can hide it via below CSS

.mobile-view {
  .b-header {
    display:none;
  }
  .ember-application .d-header {
    margin-top: 0;
  }
}
6 Likes