Header Search Theme Component

Great theme thank you.

When I am log in, it’s perfect (use the right aligment) :

But when I am log out, is it possible to move the bar in the left side of my “sign in” button? And also, it seems like the “log in” button is a little bit too high…

EDIT : i adjust the high of my button. For the search bar, I know that I have to write this :

.header-search-enabled .contents .search-header {     
margin-right: 170px;
}

but how to display only for non-log in users?

Thanks for the report.

You just need the right alignment CSS I posted above. Don’t add any extra margins (that’s probably what’s causing the button overlap in that screenshot).

There was a slight issue with the flex-box alignment with the login / signup buttons in that right alignment CSS, which I’ve updated.

I tested the right alignment with the custom sign up text you’re using in the french locale on my sandbox.

4 Likes

Yes this is exactly what I wrote.
But it is a custom button. Maybe it doesn’t detect it. I have a SSO with Memberful and I had to add my button to the header.

PM me with the details of how you added the button to the header and I can help you get the alignment right.

3 Likes

Hey @angus, also a small fix for those who use dark themes or non-white headers, thanks :wink:

PS here the issue .title .search-header => padding-top: 5px

4 Likes

Thanks :+1:

I’ve taken the opportunity to move the right alignment CSS into the theme and make right alignment a theme setting.

https://github.com/angusmcleod/discourse-header-search-theme/commit/8f8646a17274416fc6d852d1240cc99f47ae52ee

If you are using right alignment please remove the custom CSS you were using for this and just use the setting.

Screenshot%20at%20Mar%2031%2017-22-50

8 Likes


Both on Chrome and FF

5 Likes

Ok I’m pretty sure I’ve got it right this time :sweat_smile: Thanks!

https://github.com/angusmcleod/discourse-header-search-theme/commit/6171f30e37ad72dd1294743cf208d34f85824a03

5 Likes

Another alignment fix between the 2 elements:

Maybe you want add a margin-top: .2em to the .header-search-enabled.align-right .contents .search-header element

:rofl:

5 Likes

:+1: It’s an issue with nested flexboxes.

https://github.com/angusmcleod/discourse-header-search-theme/commit/3b2d66e2d6490cf6aae568f1318bb63a31c7334c

9 Likes

I tried this new theme

And because it is .btn, it affect the search button as well and it is not good looking

14

It won’t be bad if I could change also the typing section, but for now it is two different part. Would be great if I could do something like this

unsplash

or this

facebook

Well that’s not really the fault of this theme :slight_smile:

You can apply some custom css on your site to exclude the search button from border-radius being applied by the Discourse Button Styles theme.

I’m not sure what you mean here? You can change the placeholder text of the search input in Customize > Text. You can currently achieve the Unsplashed or Facebook look if you want. You just need to apply the right CSS.

5 Likes

This seems to be broken after the latest updates. Rightmost icons appear a bit shifted to the top when “align right” is enabled, as shown in the screenshot.

image

And when a search term is entered, search results appear shifted to the top.

4 Likes

This should be fixed now :+1:

https://github.com/angusmcleod/discourse-header-search-theme/commit/d9d967ceee2f8daaca6f4ed4edc414e561287e4f

6 Likes

Yes, it is now showing correctly. Thanks!

3 Likes

This happened some time ago, but I haven’t gotten around to reporting it until now.

3 Likes

Same here. I can repro this on theme creator and discourse development.

3 Likes

@angus perhaps the component needs to be improved? In light of recent changes:

https://github.com/discourse/discourse/commit/58fe45ffd95dc89bf008eeef28509a4fbc72263b

There is some strange behavior in the drop-down menu.

7 Likes

Broken.

1 Like

Thanks @Stranik and @nexo. I’ve added support for the new event added by https://github.com/discourse/discourse/commit/58fe45ffd95dc89bf008eeef28509a4fbc72263b.

https://github.com/angusmcleod/discourse-header-search-theme/commit/94276e5bef25255496529e1287105bf11353d0d5

The theme will continue to work with older Discourse versions as well.

8 Likes