Logo Help

Quote

Post by dartfrog » Tue Jan 20, 2015 7:47 pm

Hi All

hope I can explain this right and hope someone can help!!

I would like to use a full size logo that goes across the length of the page and that's height is a bit taller so it sits on the menu bar and touches the login bar how do i do this?

https://dartfrog-vivariums.co.uk/index. ... ommon/home

Thanks in advance :)
dartfrog
Newbie
Posts
16
Joined
Tue Jan 20, 2015 5:38 am
Top

Re: Logo Help

Quote

Post by opencarthow.com » Tue Jan 20, 2015 8:18 pm

dartfrog wrote:Hi All

hope I can explain this right and hope someone can help!!

I would like to use a full size logo that goes across the length of the page and that's height is a bit taller so it sits on the menu bar and touches the login bar how do i do this?

https://dartfrog-vivariums.co.uk/index. ... ommon/home

Thanks in advance :)
You can edit the file catalog/view/theme/default/template/common/header.tpl, find

Code: Select all

col-sm-4
change to

Code: Select all

col-sm-12

Our free extensions:
Advanced Layout System, Display Raw Product Description in Product List, Minimum Order Amount Requirement, Add to Wish List Redirect for Anonymous Customer

User avatar
opencarthow.com
Active Member
Posts
162
Joined
Fri Nov 28, 2014 10:41 am
Top

Re: Logo Help

Quote

Post by dartfrog » Tue Jan 20, 2015 9:42 pm

think I explained it wrong im wanting the logo to just be a background image as I need to have the seach box and shopping cart in same area.
I have added a mockup of the header im trying to make

Image
dartfrog
Newbie
Posts
16
Joined
Tue Jan 20, 2015 5:38 am
Top

Re: Logo Help

Quote

Post by fido-x » Thu Jan 22, 2015 6:25 pm

In your header template file (catalog/view/theme/default/template/common/header.tpl), at lines 70 to 87, you will find the following block of code:

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>
Replace with:

Code: Select all

<header>
  <div class="container">
    <div class="row" id="logo" style="background-image: url('<?php echo $logo; ?>');">
      <div class="col-sm-4"></div>
      <div class="col-sm-5"><?php echo $search; ?></div>
      <div class="col-sm-3"><?php echo $cart; ?></div>
    </div>
  </div>
</header>
This will provide the div with a background image.

Then, in your stylesheet (catalog/view/theme/default/stylesheet/stylesheet.css) at lines 125 to 127, find:

Code: Select all

#logo {
	margin: 0 0 10px 0;
}
And, replace with:

Code: Select all

#logo {
	margin: 0 0 10px 0;
	padding-top: 20px;
	min-height: 120px;
	background-repeat: no-repeat;
}
The padding in the top will put a bit of space above the search box and shopping cart so that they are not right at the top of the background image. Set the min-height value to the height of your logo.

There may be some "excess" space between the logo background and the nav-bar above it. To remove this space, change the margin for the #top definition in the stylesheet. At lines 80 to 86, you'll find:

Code: Select all

#top {
	background-color: #EEEEEE;
	border-bottom: 1px solid #e2e2e2;
	padding: 4px 0px 3px 0;
	margin: 0 0 20px 0;
	min-height: 40px;
}
Change:

Code: Select all

margin: 0 0 20px 0;
to:

Code: Select all

margin: 0;

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!

User avatar
fido-x
Expert Member
Posts
2644
Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia
Top

Re: Logo Help

Quote

Post by dartfrog » Thu Jan 22, 2015 11:44 pm

Thank you so much worked perfectly ;D ;D
dartfrog
Newbie
Posts
16
Joined
Tue Jan 20, 2015 5:38 am
Top

Re: Logo Help

Quote

Post by pnair39 » Wed Feb 11, 2015 10:48 am

I noticed that "https://dartfrog-vivariums.co.uk/index. ... ommon/home" LOGO is centered and height is larger.

How do I get the same affect, I followed the same steps however the entire logo does not show? What should I do to
correct it?
User avatar
pnair39
New member
Posts
41
Joined
Thu Dec 25, 2014 12:24 pm
Top

Re: Logo Help

Quote

Post by pnair39 » Thu Feb 12, 2015 6:39 am

Figured it out:

#logo {
margin: 0 0 10px 0;
padding-top: 20px;
min-height: 200px;
background-repeat: no-repeat;
}
User avatar
pnair39
New member
Posts
41
Joined
Thu Dec 25, 2014 12:24 pm
Top
Post Reply
Return to “Template Support”
Who is online

Users browsing this forum: No registered users and 11 guests