OpenCart Community

Posted: **Sun Oct 30, 2016 9:13 pm**

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.

Posted: **Mon Oct 31, 2016 1:49 am**

What would you do with the cart button ??

Posted: **Mon Oct 31, 2016 4:17 am**

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.

Posted: **Mon Oct 31, 2016 5:14 am**

As far as i am aware all 2. versions look the same......like this

header.JPG (34.56 KiB) Viewed 4750 times

Do you have an image of what you want it to look like ?

Posted: **Mon Oct 31, 2016 4:55 pm**

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?

Posted: **Mon Oct 31, 2016 6:07 pm**

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

Posted: **Tue Nov 01, 2016 12:35 am**

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?

Posted: **Tue Nov 01, 2016 3:16 am**

Yes so it looks like this

header.JPG (33.5 KiB) Viewed 4720 times

Obviously once you resize the logo it will fill in across to the cart and search buttons

Is that what you wanted

Posted: **Tue Nov 01, 2016 4:24 pm**

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

Posted: **Wed Nov 02, 2016 2:24 am**

Hmm not sure that is possible.

someone else might know better though

Posted: **Wed Nov 02, 2016 3:16 am**

cyclops12 wrote:Hmm not sure that is possible.

someone else might know better though

Thanks anyway, you have been very helpful.

Posted: **Wed Nov 02, 2016 3:30 am**

Your welcome, and hopefully someone may be able to help you with the last piece

Posted: **Tue Nov 22, 2016 4:53 am**

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

Posted: **Tue Nov 22, 2016 5:11 am**

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

Posted: **Wed Nov 23, 2016 3:35 pm**

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

Posted: **Wed Nov 23, 2016 5:51 pm**

This post may help

Posted: **Fri Jul 21, 2017 10:31 pm**

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?

OpenCart Community

Make search box smaller and move it to the right side.

Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.

Re: Make search box smaller and move it to the right side.