Brand Header

theme-component
,
65

Sure, I will try to improve it to support no_ember pages too. But in that case somehow we should have access to the theme_settings.

6 Likes
67

For anyone that wants to add fontawesome icons here is a simple css solution.

.b-header a::before{
      padding-right: 8px;
      font-family: "FontAwesome"
    }

.b-header .nav-pills > li:nth-child(1) a::before{
	content: "\f015";
}

.b-header .nav-pills > li:nth-child(2) a::before{
	content: "\f086";
}

.b-header .nav-pills > li:nth-child(3) a::before{
	content: "\f1ea";
}

.b-header .nav-pills > li:nth-child(4) a::before{
	content: "\f005";
}

.b-header .nav-pills > li:nth-child(5) a::before{
	content: "\f187";
}

.b-header .nav-pills > li:nth-child(6) a::before{
	content: "\f05a";
}

.b-header .nav-pills > li:nth-child(7) a::before{
	content: "\f0e0";
}
6 Likes
68

I really need to have only one of the links open in a new tab, I do not have the skills to modify this plugin myself, so can anyone tell me if there is a way to overide the html to add target="_blank" to that link?

69

@davidkingham I would try adding the following code to the </head> section of your main theme or in a new component:

<script>
    $(function() {
        $("[title='Archive']").click(function(e){ 
            e.preventDefault(); 
            var url = $(this).attr('href'); 
            window.open(url, '_blank');
        });
    });
</script>

Whenever possible you want to avoid modifying the remote theme itself. This ensures you can get the latest updates and that those updates donā€™t overwrite your customizations.

5 Likes
70

Thank you! Unfortunately it does not seem to work even though it shows up when I inspect it

image
image.png1604Ɨ718 82 KB

1 Like
71

No problem. I had edited my post very soon after I posted it because I noticed that the original code did just what you are describing. Can you confirm that you are using the code that is currently displayed in my post above?

3 Likes
72

That makes sense, I had copied the code from the email, this works brilliantly. Thank you so much!

1 Like
73

The CSS for this still loads on no_ember pages causing page rendering errors. e.g. https://eurodiscover.eu/404

74

Itā€™s not yet done. I may work on this in coming weeks.

5 Likes
75

Hi. Iā€™ve install Brand Header Theme Component.
But I dontā€™ find any theme setting.

in below upload button, there is no setting to configure it.

Screenshot%20at%20Sep%2020%2017-08-34
Screenshot at Sep 20 17-08-34.png961Ɨ632 52.8 KB

Could you help me to find out how to configure it?

thanks

76

What version of Discourse do you have?

4 Likes
77

Iā€™m very newbie in Discourse.
how do I know the version is?
my hosting is nodechef.com. So they help me to install discourse.

I see the library, there is a plugin like docker manager in github, it can help me to upgrade the latest version in discourse.

Iā€™m still research how to install plugin. Should I use linux command to install it or may be there is another way to install through UI like wordpress plugin?

thanks

78

If you navigate to the admin dashboard FORUM.EXAMPLE.com/admin of your forum it will show you the current version of Discourse.

1 Like
79

8 posts were split to a new topic: Need Discourse hosting provider recommendations (currently using Nodechef)

83

iā€™ve slightly edited the css of the Brand header theme component changing backgound and font to fixed colours!

what will happen when the component is updated? will my changes be overridden?

PS by the way thanks for this component! itā€™s all we need to integrate disocurse with a website menu! Good work!

PS2 may be add to the first post the info about personalizing links like linkname,www.linkpath.com i had to scroll a little to find how to do it!

84

Yes, unless you make the changes in another stylesheet

85

ehm iā€™m not so good! how do i do that?

86

Write your changes creating a new stylesheet , not on the one imported from Github.
E.g. to add a background to the brand name I can add

# brand-text-logo {
     background: red;
}

creating a new theme component, for example ā€œChanges to Brand Headerā€ and adding it to the main theme(s).
If you want to overwrite an existing value just add !important at the end of the line, e.g

# brand-text-logo {
     background: red !important;
}

Your stylesheet will not be overwritten and will always work (unless some class you use is modified for some reason)

5 Likes
87

How can we make this component to be compatible with RTL websites?

88

Few CSS customization can make this RTL compatible. I will work on it.

4 Likes