Help with Searchbox
-
- Posts: 12
- Joined: Mon Oct 18, 2021 6:07 pm
- Has thanked: 5 times
Help with Searchbox
Apologies if this question seems silly, I noticed the searchbox in my header is not middle centred like the search by price box next to it. This looks odd and I need help with positioning it correctly. I'm not savvy with this stuff so any help is appreciated.
You do not have the required permissions to view the files attached to this post.
-
- VIP Member
- Posts: 1996
- Joined: Mon Oct 07, 2019 4:39 am
- : Buy Me A Beverage
- Has thanked: 26 times
- Been thanked: 175 times
Re: Help with Searchbox
I don't have the answer but where did the 'search by price' come from? It is not a core module.
The core search is vertically centred on a fresh install so something modified on your shop is changing that.
Is the core search centred if you remove the 'search by price'? If so, I guess the issue is caused by the 'search by price'.
-
- PhoenixCart Developer
- Posts: 1184
- Joined: Sat Dec 21, 2019 8:08 am
- : Buy Me A Beverage
- Has thanked: 38 times
- Been thanked: 102 times
Re: Help with Searchbox
They are both using the same center class. But the search box is an input group meanwhile the search by price is a form group which possibly results in different heights.
You can adjust it manually by adding top margin with the class "mt-1" to "mt-5" in the first line of the template file.
example:
See also:
https://getbootstrap.com/docs/4.6/layou ... nd-padding
You can adjust it manually by adding top margin with the class "mt-1" to "mt-5" in the first line of the template file.
example:
Code: Select all
<div class="col-sm-<?php echo $content_width; ?> cm-header-shop-by-price align-self-center mt-3">
https://getbootstrap.com/docs/4.6/layou ... nd-padding
Public Phoenix Change Log Cheat Set on Google Sheets
https://docs.google.com/spreadsheets/d/ ... sp=sharing
Need Help?viewtopic.php?f=10&t=27
https://docs.google.com/spreadsheets/d/ ... sp=sharing
Need Help?viewtopic.php?f=10&t=27
-
- Posts: 12
- Joined: Mon Oct 18, 2021 6:07 pm
- Has thanked: 5 times
Re: Help with Searchbox
Thank you both for your kind reply.
Though the suggested change by @raiwa has positioned the shop by price form on the same level as the search form, they both are not vertically centred in the header. I can adjust the shop by price form to move up or down, and can centre it vertically but cannot do same for search form.
Still, it looks better than before but it'll be good to be able to centre both vertically.
Though the suggested change by @raiwa has positioned the shop by price form on the same level as the search form, they both are not vertically centred in the header. I can adjust the shop by price form to move up or down, and can centre it vertically but cannot do same for search form.
Still, it looks better than before but it'll be good to be able to centre both vertically.
You do not have the required permissions to view the files attached to this post.
-
- VIP Member
- Posts: 1996
- Joined: Mon Oct 07, 2019 4:39 am
- : Buy Me A Beverage
- Has thanked: 26 times
- Been thanked: 175 times
Re: Help with Searchbox
Check the code in that module to find its target, in this case, cm-header-search.bigbrandoh wrote: ↑Mon Oct 25, 2021 2:19 pmI can adjust the shop by price form to move up or down, and can centre it vertically but cannot do same for search form.
Using the target, any style you want can be added/changed in your user.css including margin e.g.
Code: Select all
.cm-header-search {
margin-top: auto;
margin-bottom; auto;
}
-
- Posts: 12
- Joined: Mon Oct 18, 2021 6:07 pm
- Has thanked: 5 times
Re: Help with Searchbox
Thanks @heatherbellheatherbell wrote: ↑Mon Oct 25, 2021 3:50 pm Check the code in that module to find its target, in this case, cm-header-search.
Using the target, any style you want can be added/changed in your user.css including margin e.g.Code: Select all
.cm-header-search { margin-top: auto; margin-bottom; auto; }
I could not find the cm-header-search in the code but no value set there. So I looked in my css file but nothing there either. I then added the css styling above and still no change.
I believe the issue is cuased by my new store logo. The size is width="385" height="68" but logo shipped with phoenix is width="300" height="88". My store logo height is lower than the phoenix logo height.
The searchbox position is vertically aligned when I change logo to the one that came with phoenix but replace it with my new logo and it goes out of position. My graphic designer did new logo with this size as it fits best with my site. How can I compensate for this lower height so searchbox gets positioned correctly?
-
- VIP Member
- Posts: 1996
- Joined: Mon Oct 07, 2019 4:39 am
- : Buy Me A Beverage
- Has thanked: 26 times
- Been thanked: 175 times
Re: Help with Searchbox
Look in the module template file https://github.com/CE-PhoenixCart/Phoen ... search.phpbigbrandoh wrote: ↑Mon Oct 25, 2021 8:44 pm I could not find the cm-header-search in the code but no value set there.
there will be nothing there until you put something there - it is for your use - read User Guide https://phoenixcart.org/phoenixcartwiki ... ET_UP_SHOP
So play with the margin settings until it looks the way you want it and remember to hard refresh yor brower to see the change - read User Guide.
I have played on a clean install demo and changed the default logo to be the same size as yours and savedbigbrandoh wrote: ↑Mon Oct 25, 2021 8:44 pm I believe the issue is cuased by my new store logo. The size is width="385" height="68" but logo shipped with phoenix is width="300" height="88". My store logo height is lower than the phoenix logo height.
The searchbox position is vertically aligned when I change logo to the one that came with phoenix but replace it with my new logo and it goes out of position. My graphic designer did new logo with this size as it fits best with my site. How can I compensate for this lower height so searchbox gets positioned correctly?
.cm-header-search {
margin-top: 9px;
}
in user.css and now see this; Notice that this change has vertically centred the element visually within the visible white space but the element was already vertically centred within its wrapper by default - it is top padding to the #bodyWrapper that creates extra white space at the top of header. Notice also that it is not now vertically aligned with the logo.
It is already positioned correctly, just not how you want it on your shop so you will have to play with the margins for things to look the way you want them on your shop.bigbrandoh wrote: ↑Mon Oct 25, 2021 8:44 pm How can I compensate for this lower height so searchbox gets positioned correctly?
You do not have the required permissions to view the files attached to this post.
-
- Posts: 12
- Joined: Mon Oct 18, 2021 6:07 pm
- Has thanked: 5 times
Re: Help with Searchbox
@heatherbell
I tried the css change but if had no effect. I finally get both the searchbox and the shop by price box to centre vertically by removing the "align-self-center" in both and replaced it with "mt-2". I had to test this in different browsers and this was what finally worked.
Many thanks for your help.
I tried the css change but if had no effect. I finally get both the searchbox and the shop by price box to centre vertically by removing the "align-self-center" in both and replaced it with "mt-2". I had to test this in different browsers and this was what finally worked.
Many thanks for your help.
You do not have the required permissions to view the files attached to this post.