Public Forums 71,145 posts

[xone Friend xoneJoin date: May 2010Posts: 2Downloads:0Uploads:0]

#150788

Hi,
I’ve some problem with background color of header … explane… My template is JA_purity_ii ver. 1.2.0 with date 02.02.2010… I’d like change the gery color by default in the header with other color and after put the logo in the centre of header… Please help me… I tryed to change some value into template.css by nothing changes… Thank you!:((

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#342262

Can you toss me a live URL please and I’ll be glad to take a look.

Thanks,
John

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#342502

Ok… you’ll have to go through several mods, as the template sets this in several places, including the background image and the “mask” over it.

(I wont be able to give you the line numbers as I use different code formating, but you should be able to find them yourself with little effort 🙂 )
NOTE: All changes are inside template.css

Set the background color of the header wrap


#ja-header {
background: #333; /* set background color here */
position: relative;
z-index: 10;
}


Set the color inside the .main class. You could only set this color and not the ja-header one, but that depends on your design. for now, go ahead and use the same background color. 🙂


#ja-header .main {
background-color: #333; /* set background color here */
background-position: top right;
background-repeat: no-repeat;
height: 80px;
}


Here, the template uses a mask that makes the header image look integrated into the background color. You can make another mask image yourself that has a gradient from your BG color to a transparent center. you can also delete this line and then delete the code responsible for placing a random image in the header (explained at the end of this post)


.ja-headermask {
background: url(../images/header-mask.png) no-repeat top right; /* delete this line if you like */
display: block;
height: 80px;
position: absolute;
right: -1px;
top: 0;
width: 602px;
z-index: 0;
}


For the centering of the Logo… you have to make a little mod that will delete the left positioning and set the margin to auto for both sides.


h1.logo, div.logo-text {
margin: 0 auto;
z-index: 1;
position: relative;
}


If you chose not to use a header image and delete the header mask gradient, then you can go inside layouts/blocks/header.php line 1 and replace the following block of code:


<div id="ja-header" class="wrap">
<div class="main" style="background-image: url(<?php echo $this->templateurl(); ?>/images/header/<?php echo $this->getRandomImage($this->templatepath().DS.'images/header'); ?>);">


Change to…


<div id="ja-header" class="wrap">
<div class="main">


Hope it helps 🙂

Peace,
Gabriel

1 user says Thank You to toymaker for this useful post

1. crypto2010

[Author]

Posts