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.
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?
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?
Attachments
Header2.jpg (69.75 KiB) Viewed 3983 times
Header1.jpg (54.72 KiB) Viewed 3983 times
goto catalog/view/theme/YOUR_THEME/template/common/header/tpl and find
Change it to
Then you can resize your logo to suit
Hope this helps
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>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>Hope this helps
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.)
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.)
Attachments
Newheader1.jpg (48.09 KiB) Viewed 3952 times
Newheader2.jpg (116.17 KiB) Viewed 3952 times
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
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
Hi cyclops
Regards
Lee
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?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
Regards
Lee
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?
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?
Who is online
Users browsing this forum: No registered users and 309 guests
