Help with Searchbox

Ask the community for help and support.
Post Reply
bigbrandoh
Posts: 12
Joined: Mon Oct 18, 2021 6:07 pm
Has thanked: 5 times

Help with Searchbox

Post by bigbrandoh »

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.

Untitled.jpg
You do not have the required permissions to view the files attached to this post.
heatherbell
VIP Member
VIP Member
Posts: 1996
Joined: Mon Oct 07, 2019 4:39 am
Has thanked: 26 times
Been thanked: 175 times

Re: Help with Searchbox

Post by heatherbell »

bigbrandoh wrote: Mon Oct 25, 2021 3:27 am I'm not savvy with this stuff
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'.
raiwa
PhoenixCart Developer
PhoenixCart Developer
Posts: 1184
Joined: Sat Dec 21, 2019 8:08 am
Has thanked: 38 times
Been thanked: 102 times

Re: Help with Searchbox

Post by raiwa »

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:

Code: Select all

<div class="col-sm-<?php echo $content_width; ?> cm-header-shop-by-price align-self-center mt-3">
See also:
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
bigbrandoh
Posts: 12
Joined: Mon Oct 18, 2021 6:07 pm
Has thanked: 5 times

Re: Help with Searchbox

Post by bigbrandoh »

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.
Untitled.png
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.
heatherbell
VIP Member
VIP Member
Posts: 1996
Joined: Mon Oct 07, 2019 4:39 am
Has thanked: 26 times
Been thanked: 175 times

Re: Help with Searchbox

Post by heatherbell »

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.
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;
}
Which is the equivalent of the Bootstrap class my-auto that will work in many cases to vertically align an element within its wrapper.
bigbrandoh
Posts: 12
Joined: Mon Oct 18, 2021 6:07 pm
Has thanked: 5 times

Re: Help with Searchbox

Post by bigbrandoh »

heatherbell 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;
}
Thanks @heatherbell

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?
heatherbell
VIP Member
VIP Member
Posts: 1996
Joined: Mon Oct 07, 2019 4:39 am
Has thanked: 26 times
Been thanked: 175 times

Re: Help with Searchbox

Post by heatherbell »

bigbrandoh wrote: Mon Oct 25, 2021 8:44 pm I could not find the cm-header-search in the code but no value set there.
Look in the module template file https://github.com/CE-PhoenixCart/Phoen ... search.php
bigbrandoh wrote: Mon Oct 25, 2021 8:44 pmSo I looked in my css file but nothing there either.
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
bigbrandoh wrote: Mon Oct 25, 2021 8:44 pmI then added the css styling above and still no change.
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.
bigbrandoh 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?
I have played on a clean install demo and changed the default logo to be the same size as yours and saved
.cm-header-search {
margin-top: 9px;
}
in user.css and now see this;
Screenshot 2021-10-26 075143.jpg
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.
bigbrandoh wrote: Mon Oct 25, 2021 8:44 pm How can I compensate for this lower height so searchbox gets positioned correctly?
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.
You do not have the required permissions to view the files attached to this post.
bigbrandoh
Posts: 12
Joined: Mon Oct 18, 2021 6:07 pm
Has thanked: 5 times

Re: Help with Searchbox

Post by bigbrandoh »

@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.

Untitled.jpg
You do not have the required permissions to view the files attached to this post.
Post Reply