Hi all
I am trying to adjust the height of my header to accommodate a new logo. I went into admin/view/stylesheet/stylesheet.css and change header height to 100px from 40px, but this didn't do anything. Am I missing something here? Is there another setting I should be changing somewhere? I've tried to search the forums without much luck (apart from this http://forum.opencart.com/viewtopic.php ... ize+header which doesn't really explain things.
Any advice would be really appreciated. TIA.
Anthony
Look at your catalog/view/theme/default/template/common/header.tpl file this file is where all the hearder and horizontal menu stuff is. Look at your catalog/view/theme/default/stylesheet/stylesheet.css this is where you'll find all the associated header id div classes for the header. The div2 class holds the logo. You'll need to play with these header div classes to get the positions and heights you want. The header #header in the css is the container for all the other header div classes. The div1 class contains the div2(logo) and div3 (language and search ).
header.tpl
CSS header class
If you need more help post here and I'll sort it out for you.
header.tpl
Code: Select all
<div class="div1">
<div class="div2"><a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $store; ?>" alt="<?php echo $store; ?>" /></a></div>
<div class="div3"><?php echo $language; ?><?php echo $search; ?></div>
</div>
<div class="div4">
<div class="div5"><a href="<?php echo $home; ?>"><img src="catalog/view/theme/default/image/icon_home.png" alt="" /><?php echo $text_home; ?></a><a href="<?php echo $special; ?>"><img src="catalog/view/theme/default/image/icon_special.png" alt="" /><?php echo $text_special; ?></a>
<?php if (!$logged) { ?>
<a href="<?php echo $login; ?>"><img src="catalog/view/theme/default/image/icon_login.png" alt="" /><?php echo $text_login; ?></a>
<?php } else { ?>
<a href="<?php echo $logout; ?>"><img src="catalog/view/theme/default/image/icon_logout.png" alt="" /><?php echo $text_logout; ?></a>
<?php } ?>
<a href="<?php echo $account; ?>"><img src="catalog/view/theme/default/image/icon_account.png" alt="" /><?php echo $text_account; ?></a></div>
<div class="div6"><a href="<?php echo $checkout; ?>"><img src="catalog/view/theme/default/image/icon_checkout.png" alt="" /><?php echo $text_checkout; ?></a><a href="<?php echo $cart; ?>"><img src="catalog/view/theme/default/image/icon_basket.png" alt="" /><?php echo $text_cart; ?></a></div>
</div>
Code: Select all
#header {
position: relative;
}
#header .div1 {
height: 97px;
}
#header .div2 {
position: relative;
top: 21px;
left: 15px;
}
#header .div3 {
background: url('../image/search.png') no-repeat;
width: 250px;
height: 62px;
position: absolute;
top: 15px;
right: 0px;
padding-top: 5px;
padding-left: 17px;
}
#header .div4 {
padding-left: 10px;
padding-right: 10px;
height: 40px;
background: url('../image/header.png') repeat-x;
}
#header .div4 img {
float: left;
margin-right: 5px;
}
#header .div4 a {
padding: 12px 0px 12px 0px;
margin-left: 10px;
margin-right: 10px;
display: inline-block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
}
#header .div5 a {
float: left;
}
#header .div6 a {
float: right;
}
I have another question.
I want to change the colour of the informational bar that contains the "Home", "Special Offers", "Log in", "Account", etc buttons on it. I cannot see any way of doing this in the stylesheet.css file. As well as this, it appears that there are many shades of colours that make up this bar (using my colour picker software). The bar I am talking about is obviously on the default template, so it is presently a red colour.
Any ideas?
Thanks.
Anthony
I want to change the colour of the informational bar that contains the "Home", "Special Offers", "Log in", "Account", etc buttons on it. I cannot see any way of doing this in the stylesheet.css file. As well as this, it appears that there are many shades of colours that make up this bar (using my colour picker software). The bar I am talking about is obviously on the default template, so it is presently a red colour.
Any ideas?
Thanks.
Anthony
Yea, same files as you just used to adjust your header logo, but in this case you want div4.
look for this in the css stylesheet;
currently an image is used as color for this div. You can make a new image or turn off the image and add a color like this;
look for this in the css stylesheet;
Code: Select all
#header .div4 {
padding-left: 10px;
padding-right: 10px;
height: 40px;
background: url('../image/header.png') repeat-x;
}
Code: Select all
#header .div4 {
padding-left: 10px;
padding-right: 10px;
height: 40px;
background-color: #FFFFFF; /*USE WHAT EVER HEX COLOR YOU WANT HERE*/
/*background: url('../image/header.png') repeat-x;*/
}
Who is online
Users browsing this forum: No registered users and 4 guests
