Custom the template background

Forums    Joomla Templates Club    JA Teline III    JA Teline III v1    Custom the template background
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • barro Friend
    June 7, 2010 at 10:28 am #151637

    I do not know if somebody posed already this question : I would like to put images in background of the Web site in the (see the image). And if possible with links.
    Thank you for your answer

    1. image001
    phee Friend
    June 7, 2010 at 1:00 pm #346203

    I’m wondering too! I hope someone will be able to shine some lights for us!

    micrantha Friend
    June 7, 2010 at 2:33 pm #346208

    Hello,

    When you use default layout you can open ja_teline_iii/layouts/default.php.

    Look for the opening body-tag:

    <body id="bd" class="fs<?php echo $this->getParam(JA_TOOL_FONT);?> <?php echo $this->browser();?>">

    You see you can select body for example by body#bd{ }.
    Open file template.css to find this selector. You can load an image there.
    When you want to add a linked image you have to add it to code of file default.php

    Good luck,
    Micrantha

    barro Friend
    June 7, 2010 at 5:18 pm #346221

    Hi Micrantha
    Thanks for your answer but i don’t know to proced!!!:confused:

    micrantha Friend
    June 7, 2010 at 7:00 pm #346228

    Hello,

    For a css-image as background first put your image in templates/ja_teline_iii/images.
    Next open file template.css
    Find the rule

    body#bd {
    background: #f7f7f7;
    color: #000;
    }

    You can change these rules to load an image as background; for example:

    body#bd {
    background: url(../images/background.jpg) no-repeat 50% top;
    color: #000;
    }

    This code will center your image in the window.

    For an image as link you will have to add it as html-image in html-code of page.

    good luck,
    Micrantha

    micrantha Friend
    June 7, 2010 at 8:08 pm #346234

    Hello,

    And this is a possible code for a linkable html-image:
    First upload your image to templates/ja_teline_iii/images.
    (For example image is 1200x1800px)

    Next open layouts/default.php.
    find the line:

    <div id="ja-wrapper">

    change this to:

    <div id="ja-wrapper" style="position:relative; width:1200px; margin:0 auto">
    <a href="http://www.your-link.com" target="blanc"><img src="templates/ja_teline_iii/images/bg-test.jpg" style="position:absolute; width:1200px;height:1800px" /></a>

    But the linkable image is now covered by other wrap-divs.
    So you have to change width:
    Open layout.css and find this line:

    .wrap { width: 100%; clear: both; }

    change to:

    .wrap { width: 980px; margin: 0 auto; clear: both}

    Good luck,
    Micrantha

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

This topic contains 6 replies, has 3 voices, and was last updated by  micrantha 14 years, 5 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum

Important Notice :

New Unified Portal is live

Must Read

Jump to forum

Categories