Brand Header

theme-component
,
44

As you can see in the image you have to add URLs next to the link and icon names separated by comma (,).

7 Likes
45

Thank you very much!

46

Hey,
Is there a way to make it so links open in a new tab? Thanks!

47

There is a user setting to open links in new tab.

48

That’s been working for links in posts but not for links I added through this header.

49

Currently it doesn’t have option for it. You have to modify the theme component according to your need.

50

Confirming;

After installing this, it appears as though the header scrolls off the page. Is there a way to fix the header in place above the existing discourse header?

51

I am unable to reproduce it. Can you give me a screenshot?

52

Oh, sorry for the confusion - I’m asking for the intended behavior?

Locally I see the brand header scroll off the page as I scroll through a long thread.

54

Try changing the .b-header css style like below

.b-header {
  position: fixed;
}

You may require more CSS edits to achieve your goal.

2 Likes
55

Thanks Vinoth.

I found a couple of things help with this;

.b-header {
  position: fixed;
  z-index: 1001;
  height: $header-height;
}

.docked .d-header {
  margin-top: $header-height;
}

#main-outlet {
  padding-top: $discourse-content-padding + $header-height;
}

This causes the custom header to be static on scroll, and sit above the discourse header at all times.

The only disadvantage of this approach that I can see is the thread title appears in the discourse header a little later than normal, because of the additional static height of the header component.

Unsure of how to change this logic - its prolly in the bowels of discourse somewhere.

4 Likes
56

Would it be possible to add a font awesome icon next to the link similar to this?

image
image.png1058×111 8.04 KB

2 Likes
57

Currently it’s not possible. You need to do some changes in the component to achieve that.

6 Likes
58

There seems to be some overlap with the primary header, I tried to add a border and the primary header is covering it up. If I change the height to 47px in inspector I can see the border, but if I add this to the css it doesn’t work.

.b-header {
    background-color: #393F4D !important;
    border-bottom-style: solid;
    border-color: #feda6a;
    border-width: 1px;
    height: 47px;
}

image
image563×764 38.1 KB

Another request would be to have the current page highlighted, or at least give each button it’s own class so I could change the color of a single button.

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…

image
image1277×90 7.5 KB

4 Likes
60

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

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

45
Screen Shot 2018-07-13 at 14.55.45.png985×686 11.2 KB

62

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

63

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

1 Like
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