Post by clickmyoffer » Sun Oct 26, 2014 6:03 am

Is there a tutorial on how to effectively make room for a larger logo using the current 1.5.x default template? The logo supplied is only 50 pix high and really doesn't do much for my site. I guess perhaps moving the menu bar down would be a consideration but would it break the core code? I'm finding the whole image user features a very hard learning curve. If you can point me in the right direction it would be appreciated.

Thanks

Dave

Please Remember This Life's Lesson
"The Problems We Have Created Cannot Be Solved
At The Level Of Thinking That Created Them"


User avatar
Newbie

Posts

Joined
Thu Oct 23, 2014 2:11 am
Location - Maple Ridge, British Columbia, Canada

Post by uksitebuilder » Sun Oct 26, 2014 7:09 pm

All that is required is a change to the stylesheet.css file

By default, the header is set to 90px high

The default OC logo is 50px high and is positioned 25px from the top of the header and 15px from the left

So, a choice needs to be made on if you want your logo to be exactly to the top of the header or like the default logo with a 25px margin above it.

Trial and error with the following will get you the desired result.

In you catalog/view/theme/default/stylesheet/stylesheet.css file

If you want a gap (margin) above or to the left of your logo edit the following pixel values:

Code: Select all

#header #logo {
	position: absolute;
	top: 25px;
	left: 15px;
}
if you don't want a gap (margin) then set to 0.

--

Now you need to set the height of the header to allow for your logo height plus any top gap (margin) and maybe also a gap (margin) below your logo

Again trial and error on this

find and change the height pixel value

Code: Select all

#header {
	height: 90px;
	margin-bottom: 7px;
	padding-bottom: 4px;
	position: relative;
	z-index: 99;
}
As you can see, the header height is set to 90px by default
This allows for the logo image height which is 50px
This allows for the top margin set in the fist block of code above of 25px
Therefore it also lets there be a margin below the logo of 15px (90px header height minus top margin 25px minus logo image height 50px = Gap at bottom 15px)

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom
Who is online

Users browsing this forum: No registered users and 2 guests