Centre logo image and change background of header area - JoomlArt
T3 Framework & 9 templates updated to Joomla 3.6.0 More Details!
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • gaylepetrie Friend
    #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
    #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
    #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
    #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
    #271068

    thankyou.

    works perfectly

    yaniesbe Friend
    #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
    #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
    #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

Viewing 8 posts - 1 through 8 (of 8 total)

This topic contains 8 replies, has 5 voices, and was last updated by  Ninja Lead 3 years, 11 months ago.

You must be logged in to reply to this topic.