Header Search Theme

theme-component

(Anders Thengs Kristensen) #21

The way I would expect it to work would be that the header search bar would be suppressed if the normal search bar was open.


(Angus McLeod) #22

Yup. Turns out that’s the way it was originally designed. Just a small fix needed.


(Anders Thengs Kristensen) #23

I recently encountered a problem that if the header search bar is aligned right, the hamburger and user menu move relative to the results dropdown:



(Angus McLeod) #24

There’s been some recent work on the header scss. This is an updated version of the right alignment scss customisation that will work.

.header-search-enabled .contents {
   display: flex;
   justify-content: space-between;
    
   &:before, &:after {
     display: none;
   }
    
   .title {
     flex: 1 1 auto;
   }
    
   .search-header {
     float: right;
     margin-left: 0;
     margin-right: 10px;
   }
    
   .search-input {
     margin-right: 0;
   }
    
   .search-context {
     padding-top: 5px;
   }

   .results {
     right: 0;
   }
}

(François Douville) #25

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?


(Angus McLeod) #26

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.


(François Douville) #27

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.


Add a Sign up button (memberful purchase link) in header and disappear when log in
(Angus McLeod) #28

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


(Daniela) #29

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


(Angus McLeod) #30

Thanks :+1:

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

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


(Daniela) #31


Both on Chrome and FF


(Angus McLeod) #32

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


CSS logo issues in Desktop version after last upgrade
(Daniela) #33

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:


(Angus McLeod) #34

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

Minor style tweaks · angusmcleod/discourse-header-search-theme@3b2d66e · GitHub


(François Douville) #35

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


(Angus McLeod) #36

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.


(Gökhan Gurbetoğlu) #37

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.


(Angus McLeod) #38

This should be fixed now :+1:


(Gökhan Gurbetoğlu) #39

Yes, it is now showing correctly. Thanks!


(Anders Thengs Kristensen) #40

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