Public Forums 71,145 posts

[gaylepetrie Friend gaylepetrieJoin date: April 2006Posts: 27Downloads:0Uploads:7]

#133381

hi,
i am trying to centre the logo image and change background of header area to white (#ffffff).

anyone know which part of the template css i need to amend. i have tried but i cannot get it to be centred on the page.

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#270801

Hi !
1.you can control position of logo by way below :
Open template.css file in templates/ja_purity/css folder , find following code section at about line 956 :


h1.logo a {
background:transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
height:80px;
position:relative;
width:208px;
z-index:100;
}


change to :


h1.logo a {
background:transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
height:80px;
position:relative;
width:208px;
z-index:100;
left:500px;
}


About background color of header , you change it following some steps below :
1.Open template.css file in templates/ja_purity/css folder , find following code section at about line 923 :


#ja-headerwrap {
background:#333333 none repeat scroll 0 0;
color:#CCCCCC;
height:80px;
line-height:normal;
}


change to :


#ja-headerwrap {
background:#FFFFFF none repeat scroll 0 0;
color:#CCCCCC;
height:80px;
line-height:normal;
}


2. find following code section at about line 935 :


.ja-headermask {
background:transparent url(../images/header-mask.png) no-repeat scroll right top;
display:block;
height:80px;
position:absolute;
right:-1px;
top:0;
width:602px;
}


change to :


.ja-headermask {
top;
display:block;
height:80px;
position:absolute;
right:-1px;
top:0;
width:602px;
}


3. Open index.php file in templates/ja_purity folder, find following code section at about line 112 :


<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">


change to :


<div id="ja-header" class="clearfix">


[gaylepetrie Friend gaylepetrieJoin date: April 2006Posts: 27Downloads:0Uploads:7]

#270899

thankyou!! for the help

h1.logo a {
background:transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
height:80px;
position:relative;
width:208px;
z-index:100;
left:500px;
}

is there a way to make the image be the centre of a users screen rather than the fixed dimension in from the left?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#270922

Hi !
You can do it following way below :
open index.php file in templates/ja_purity folder , find following code section at about line 119 :


<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>


change to :


<center>
<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>
</center>


[gaylepetrie Friend gaylepetrieJoin date: April 2006Posts: 27Downloads:0Uploads:7]

#271068

thankyou.

works perfectly

[yaniesbe Friend yaniesbeJoin date: March 2009Posts: 2Downloads:0Uploads:0]

#296532

<em>@hainn84 80363 wrote:</em><blockquote>Hi !
You can do it following way below :
open index.php file in templates/ja_purity folder , find following code section at about line 119 :

change to :


<center>
<h1 class="logo">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
</h1>
</center>

</blockquote>

I change as suggested for my website but It does’t work (using wide screen/16″).
Can you check here : http://www.coin4education.com
I have changed the width of logo become 920 px

Appreciate for your advise…

[spenchase Friend spenchaseJoin date: January 2011Posts: 31Downloads:0Uploads:3]

#465029

Hello,

:((I am having the same problem. I need to change the header color (purple) to an image background; I’ve tried using the ja-purity instructions, but it did not work. here is my website; http://www.adtechwomen.com Any clues

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#465428

I could not access your site because you have need username/password access. But if you want to change header color to image background

<blockquote>Open templates/ja_purity_ii/css/template.css</blockquote>

From
<blockquote>#ja-header { background: #333 position: relative; z-index: 10; }</blockquote>

Change to
<blockquote>#ja-header {
background: url(../images/header3.jpg);
position: relative; z-index: 10;
}</blockquote>

If you have still error please send PM me the details access your site. I will check directly on your site

[Author]

Posts