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

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

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
This post may help

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?