Brand header theme component

theme-component
(David Kingham) #59

For those interested I was able to sort of achieve this, it’s not intelligent for what page you’re on, but for most, it will do the trick. Change the (2) to whatever position your forum button is

.b-header .nav-pills > li:nth-child(2) {
	background-color: #35373e;}

and if you would like the pill to extend to the top and bottom

.b-header .nav-pills>li>a {
padding: 13px 12px;
}

.b-header .contents {
	margin: 0px !important;
}

This achieves…

4 Likes
(Vinoth Kannan) split this topic #60

6 posts were split to a new topic: How to use brand header html in my WordPress site

(Craig Davison) #61

@vinothkannans in certain situations the screen looks like this:

This screenshot comes after someone deletes their account. I think it was also apparent on the email confirmation screen

Brand header theme component breaks page layout on static and no_ember pages
(Craig Davison) #62

To clarify, it seems this issue happens on all 404 pages

(Vinoth Kannan) #63

@davisonio - you created another bug report here. Please avoid duplicates. I will check the issue.

1 Like
(Sam Saffron) #64

I think we should probably spend some time and rewrite this so it no longer leans on the plugin interface and works on 404 pages and other pages without ember.

5 Likes
Brand header theme component breaks page layout on static and no_ember pages
TypeError: Discourse._registerPluginCode is not a function
(Vinoth Kannan) #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
Brand header theme component breaks page layout on static and no_ember pages
(David Kingham) #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";
}
4 Likes
(David Kingham) #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?

(Taylor) #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
(David Kingham) #70

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

1 Like
(Taylor) #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
(David Kingham) #72

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

1 Like
(Craig Davison) #73

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

(Vinoth Kannan) #74

It’s not yet done. I may work on this in coming weeks.

5 Likes
(Ronny) #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.

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

thanks

(Daniela) #76

What version of Discourse do you have?

4 Likes
(Ronny) #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

(Vinoth Kannan) #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
split this topic #79

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