@vinothkannans Great component!
One small issue. Currently, if a header link is internal to a site (e.g. to a particular category), if it is tapped in the responsive menu, the responsive menu will stay open. The expected behaviour is that the menu would close.
Is anyone else having problems with the YouTube icon? It is the only one that wonāt show up in the headerā¦
See the following:
It should be the first icon, just to the left of the Twitter iconā¦ If you hover, youāll get the link, just not see the graphic.
Until this is fixed, you could try adding fab-youtube in the setting : svg icon subset
@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.
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:
Any assistance would be appreciatedā¦ I would prefer to have no highlighting, or just bold the text
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.
OK, sorry for missing that. Fixed!
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.
@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 - #4 by vinothkannans while I was searching for the root cause of this issue, thanks for that!
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 https://github.com/discourse/discourse-brand-header/pull/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 - #7 by amotl.
This step can be omitted completely as soon as Almost void Discourse object instance will sneak through some safeguards will be fixed.
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.
Both are already fixed in below commits. Thanks for your report and excellent help. Please donāt create duplicate posts for the same issue.
https://github.com/discourse/discourse/commit/59e5af466bdcdccc5aefc167061fe1c9276e624c
https://github.com/discourse/discourse-brand-header/commit/a67f081d3a2cb1e69ac8fb56dda74f221398122d
Ha, that was quick. Thankās a bunch!
Is it possible to get a YouTube icon? I can use Github, Twitter and Facebookā¦ But not YouTube.
You should add fab-youtube in the custom font awesome icons theme setting.
Youāre a legend. Thank you for your help.
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!
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>
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?
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.
Yup that did the trick as well. Thanks for being patient with me for seemingly simple solutions!
