Post by Boppe » 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.

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by cyclops12 » Mon Oct 31, 2016 1:49 am

What would you do with the cart button ??

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by Boppe » 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.

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by cyclops12 » Mon Oct 31, 2016 5:14 am

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

header.JPG (34.56 KiB) Viewed 2308 times

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

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by Boppe » 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?

Attachments

Header2.jpg

Header2.jpg (69.75 KiB) Viewed 2300 times

Header1.jpg

Header1.jpg (54.72 KiB) Viewed 2300 times


Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by cyclops12 » 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

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by Boppe » 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?

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by cyclops12 » Tue Nov 01, 2016 3:16 am

Yes so it looks like this
header.JPG

header.JPG (33.5 KiB) Viewed 2278 times

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

Is that what you wanted

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by Boppe » 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.)

Attachments

Newheader1.jpg

Newheader1.jpg (48.09 KiB) Viewed 2269 times

Newheader2.jpg

Newheader2.jpg (116.17 KiB) Viewed 2269 times


Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by cyclops12 » Wed Nov 02, 2016 2:24 am

Hmm not sure that is possible.

someone else might know better though ;)

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by Boppe » 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.

Active Member

Posts

Joined
Mon Apr 29, 2013 10:09 pm

Post by cyclops12 » Wed Nov 02, 2016 3:30 am

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

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by LeeH » 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

Newbie

Posts

Joined
Sat Jun 04, 2016 5:38 pm

Post by cyclops12 » 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

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by LeeH » 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

Newbie

Posts

Joined
Sat Jun 04, 2016 5:38 pm

Post by cyclops12 » Wed Nov 23, 2016 5:51 pm

This post may help

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by loukiad » 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?

New member

Posts

Joined
Fri Oct 28, 2011 11:45 pm
Who is online

Users browsing this forum: No registered users and 26 guests