Page 1 of 1
Make search box smaller and move it to the right side.
Posted: Sun Oct 30, 2016 9:13 pm
by Boppe
Hi.
I'm building a new shop in OC 2.3.0.2. I don't like that search box in the header is so large and located in the center.
I've been reading the forum and also searched for extension to solve my problem. I've found no solution.
I want to:
1. Make the search box smaller.
2. Move the search box to the right side of the header
How can I solve this?
Thanks ladies and gentlemen.
Re: Make search box smaller and move it to the right side.
Posted: Mon Oct 31, 2016 1:49 am
by cyclops12
What would you do with the cart button ??
Re: Make search box smaller and move it to the right side.
Posted: Mon Oct 31, 2016 4:17 am
by Boppe
cyclops12 wrote:What would you do with the cart button ??
I would leave it were it is and I would like to put the search box below the cart button.
IMO the search button's size and location in 2.3.0.2 looks weird.
Re: Make search box smaller and move it to the right side.
Posted: Mon Oct 31, 2016 5:14 am
by cyclops12
As far as i am aware all 2. versions look the same......like this
header.JPG (34.56 KiB) Viewed 4744 times
Do you have an image of what you want it to look like ?
Re: Make search box smaller and move it to the right side.
Posted: Mon Oct 31, 2016 4:55 pm
by Boppe
I'll try to illustrate what I want to do.
The default version of OC 2.3.0.2 looks like Header1, see attachment.
I want it like Header2, see attachment.
* I want to leave the cart button where it is.
* I want to make the search box smaller.
* I want to move the search box below the cart button.
* Then I will make the logo larger.
How can I manage to achieve this?
Re: Make search box smaller and move it to the right side.
Posted: Mon Oct 31, 2016 6:07 pm
by cyclops12
goto catalog/view/theme/YOUR_THEME/template/common/header/tpl and find
Code: Select all
<header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="logo">
<?php if ($logo) { ?>
<a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
<?php } else { ?>
<h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
<?php } ?>
</div>
</div>
<div class="col-sm-5"><?php echo $search; ?>
</div>
<div class="col-sm-3"><?php echo $cart; ?></div>
</div>
</div>
</header>
Change it to
Code: Select all
<header>
<div class="container">
<div class="row">
<div class="col-sm-9">
<div id="logo">
<?php if ($logo) { ?>
<a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
<?php } else { ?>
<h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
<?php } ?>
</div>
</div>
<div class="col-sm-3"><?php echo $cart; ?></div>
<div class="col-sm-3"><?php echo $search; ?>
</div>
</div>
</div>
</header>
Then you can resize your logo to suit
Hope this helps
Re: Make search box smaller and move it to the right side.
Posted: Tue Nov 01, 2016 12:35 am
by Boppe
Hi cyclops12.
Thanks a lot for you taking time to help out.
Your suggestion will resize the search box and move it to the right side, below the cart button?
Re: Make search box smaller and move it to the right side.
Posted: Tue Nov 01, 2016 3:16 am
by cyclops12
Yes so it looks like this
header.JPG (33.5 KiB) Viewed 4714 times
Obviously once you resize the logo it will fill in across to the cart and search buttons
Is that what you wanted
Re: Make search box smaller and move it to the right side.
Posted: Tue Nov 01, 2016 4:24 pm
by Boppe
Wooow, thanks cyclops12! The search boc moved just where I wanted.
There is just one more issue I would like to solve.
Now the header looks this way, Newheader1.
The logo starts at the same height as the cart button. The logo stretches until a bit before the cart button starts.
I would like to change the header like Newheader2.
I want the logo image to start a bit higher than the cart button and cover the header all the way.
Is that possible?
P.S (To avoid the logo image to clutter the search box I'll make a white square on the position underneath the search box.)
Re: Make search box smaller and move it to the right side.
Posted: Wed Nov 02, 2016 2:24 am
by cyclops12
Hmm not sure that is possible.
someone else might know better though

Re: Make search box smaller and move it to the right side.
Posted: Wed Nov 02, 2016 3:16 am
by Boppe
cyclops12 wrote:Hmm not sure that is possible.
someone else might know better though

Thanks anyway, you have been very helpful.
Re: Make search box smaller and move it to the right side.
Posted: Wed Nov 02, 2016 3:30 am
by cyclops12
Your welcome, and hopefully someone may be able to help you with the last piece
Re: Make search box smaller and move it to the right side.
Posted: Tue Nov 22, 2016 4:53 am
by LeeH
Hi cyclops12
I have followed what you told Boppe to do but for some reason it has not worked for me. This is what my part of the 'header.tpi' looks like
<header>
<div class="container">
<div class="row">
<div class="col-sm-9">
<div id="logo">
<?php if ($logo) { ?>
<a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
<?php } else { ?>
<h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
<?php } ?>
</div>
</div>
<div class="col-sm-3"><?php echo $cart; ?></div>
<div class="col-sm-3"><?php echo $search; ?>
</div>
</div>
</div>
</header>
What should I be looking for. I'm on OC 2.3.0.2 and using the default template. The site is
www.webstersempawrium.uk
Regards
Lee
Re: Make search box smaller and move it to the right side.
Posted: Tue Nov 22, 2016 5:11 am
by cyclops12
Lee, have you gone into extensions/modifications and clicked the refreshed button
Also have you noticed the icons are not showing if you use www. infront of your url
Re: Make search box smaller and move it to the right side.
Posted: Wed Nov 23, 2016 3:35 pm
by LeeH
Hi cyclops
cyclops12 wrote:Lee, have you gone into extensions/modifications and clicked the refreshed button
Also have you noticed the icons are not showing if you use www. infront of your url
Thanks for that. I'm still getting my head around OpenCart. No I have not noticed the icons not showing. What do you think the problem is?
Regards
Lee
Re: Make search box smaller and move it to the right side.
Posted: Wed Nov 23, 2016 5:51 pm
by cyclops12
Re: Make search box smaller and move it to the right side.
Posted: Fri Jul 21, 2017 10:31 pm
by loukiad
Hello, I's been a while since you discussed that issue but I just found it really helpfull because it did 50% of the change I want to do...
I'm working with 2.3.0.2 and the default theme. I used cyclops12 code and the search field and cart button are now beautifullly alligned at the right side of the header.
My question is how can I put another image under those 2 (search & cart).??
Can someone please help me with that?