Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • nickwigzell Friend
    #144562

    Is there an easy way to put a full-width logo/banner in the header?

    I’ve followed Scotty’s excellent tip (thanks, Scotty!) on how to put a full banner in the header area (http://www.joomlart.com/forums/topic/how-to-place-a-full-banner-in-the-header-area/), but that width is restricted to 468x60px. My client wants one that will include the logo and branding and run full width (980px?).

    I’m a newbie to both Joomla and Teline III, but from what I can tell (using Firebug) the demo version I’ve installed has the logo inside the logo-text div, floated left, and the search module inside the ja-search div, floated right, both inside the inner clearfix div, which has 15px padding left and right.

    Is the answer to replace the current logo and search positions with a new one and, if so, how?

    Thanks in advance for your help

    Nick

    nickwigzell Friend
    #318865

    I think I’ve worked out how to do this, if anyone is interested.

    This assumes that you’ve already shifted the search module into the mega-item position by following Scotty’s instructions (http://www.joomlart.com/forums/topic/how-to-place-a-full-banner-in-the-header-area/).

    Disable any banner module that you’ve assigned to the search position (see link above). If the search position is empty, it seems to disappear or not to load, thereby clearing the way for a full-width logo gif.

    Go to Extensions/Template Manager/JA_Teline_III and in the basic settings on the right select Image under Logo Type and save the changes.

    Create a 950px x 62px image. The template is 980px wide (I think) but the container div surrounding the logo has 15px padding left and right. Save it as logo.gif and replace the default Teline 3 logo.gif in Templates/ja_teline_iii/images. I renamed the original logo.gif instead of overwriting it, just in case I needed it again.

    Open your template.css file and find these at about line 850:

    h1.logo {
    width: 265px;
    height: 62px;
    margin: 0;
    }

    h1.logo a {
    width: 265px;
    height: 62px;
    display: block;
    background: url(../images/logo.gif) no-repeat left;
    }

    Change them to this:

    h1.logo {
    width: 950px; /* was 265px*/
    height: 62px;
    margin: 0;
    }

    h1.logo a {
    width: 950px; /* was 265px*/
    height: 62px;
    display: block;
    background: url(../images/logo.gif) no-repeat left;
    }

    I’m not sure if this is the way it should be done, but it worked for me 🙂

    Nick

    kalibs112 Friend
    #319231

    Hi NickWigzell…thanks for this info..is there a way you could share your url so that I can have a look before I can tinker with my local site…I am more a newbie than yourself, m8…believe me.

    ergohost Friend
    #319250

    sounds interesting, I’m still messing with how to do the core content of my site using this template, still far from making it look the way I want but its nice to see people getting creative with it, will be handy to refer to later 🙂

    nickwigzell Friend
    #319265

    <em>@kalibs112 147100 wrote:</em><blockquote>Hi NickWigzell…thanks for this info..is there a way you could share your url so that I can have a look before I can tinker with my local site…I am more a newbie than yourself, m8…believe me.</blockquote>

    Sure, no worries, although there’s little or no original content up yet 🙂 – still finding my way round the template: http://frontrowfilms.co.uk/

    If it helps, it looks as if Hariorama has done something similar on his site: http://www.tierschutznews.ch/

    kalibs112 Friend
    #320828

    chk this from Nick…it works
    I think I’ve worked out how to do this, if anyone is interested.

    This assumes that you’ve already shifted the search module into the mega-item position by following Scotty’s instructions (http://www.joomlart.com/forums/topic/how-to-place-a-full-banner-in-the-header-area/).

    Disable any banner module that you’ve assigned to the search position (see link above). If the search position is empty, it seems to disappear or not to load, thereby clearing the way for a full-width logo gif.

    Go to Extensions/Template Manager/JA_Teline_III and in the basic settings on the right select Image under Logo Type and save the changes.

    Create a 950px x 62px image. The template is 980px wide (I think) but the container div surrounding the logo has 15px padding left and right. Save it as logo.gif and replace the default Teline 3 logo.gif in Templates/ja_teline_iii/images. I renamed the original logo.gif instead of overwriting it, just in case I needed it again.

    Open your template.css file and find these at about line 850:

    h1.logo {
    width: 265px;
    height: 62px;
    margin: 0;
    }

    h1.logo a {
    width: 265px;
    height: 62px;
    display: block;
    background: url(../images/logo.gif) no-repeat left;
    }

    Change them to this:

    h1.logo {
    width: 950px; /* was 265px*/
    height: 62px;
    margin: 0;
    }

    h1.logo a {
    width: 950px; /* was 265px*/
    height: 62px;
    display: block;
    background: url(../images/logo.gif) no-repeat left;
    }

    I’m not sure if this is the way it should be done, but it worked for me

    Nick

    nickwigzell Friend
    #322543

    As a follow-up, just thought I would let you know I’ve found out how to place a custom-width logo and banner in the header section.

    Instead of a full-width logo/banner, I wanted the logo on the left to be 600px, with a 350px banner ad to its right (950px is the space available, given there is 15px padding to left and right). I wanted both to be 100px deep.

    Open your template.css file and find this at about line 210:

    #ja-search {
    float: right;
    margin-top: 20px;
    }

    and change to:

    #ja-search {
    float: right;
    margin: 0; /* was margin-top: 20px */
    width: 350px; /* added to place banner next to logo */
    }

    This seems to give the search module position a fixed width, in this case 350px.

    Then go to line 842 and find these:

    h1.logo {
    width: 265px;
    height: 62px;
    margin: 0;
    }

    h1.logo a {
    width: 265px;
    height: 62px;
    display: block;
    background: url(../images/logo.gif) no-repeat left;
    }

    and change to this:

    h1.logo {
    width: 600px; /* was 265px*/
    height: 100px; /* was 62px*/
    margin: 0;
    }

    h1.logo a {
    width: 600px; /* was 265px*/
    height: 100px; /* was 62px*/
    display: block;
    background: url(../images/logo.gif) no-repeat left;
    }

    To make the images display, replace the original logo.gif with your new one and assign your new banner to the search position.

    If you want to see how it works on my development site, go here: http://frontrowfilms.co.uk/

    Nick

    padunic Friend
    #322932

    <em>@nickwigzell 151509 wrote:</em><blockquote>As a follow-up, just thought I would let you know I’ve found out how to place a custom-width logo and banner in the header section.

    Instead of a full-width logo/banner, I wanted the logo on the left to be 600px, with a 350px banner ad to its right (950px is the space available, given there is 15px padding to left and right). I wanted both to be 100px deep.

    Open your template.css file and find this at about line 210:

    #ja-search {
    float: right;
    margin-top: 20px;
    }

    and change to:

    #ja-search {
    float: right;
    margin: 0; /* was margin-top: 20px */
    width: 350px; /* added to place banner next to logo */
    }

    This seems to give the search module position a fixed width, in this case 350px.

    Then go to line 842 and find these:

    h1.logo {
    width: 265px;
    height: 62px;
    margin: 0;
    }

    h1.logo a {
    width: 265px;
    height: 62px;
    display: block;
    background: url(../images/logo.gif) no-repeat left;
    }

    and change to this:

    h1.logo {
    width: 600px; /* was 265px*/
    height: 100px; /* was 62px*/
    margin: 0;
    }

    h1.logo a {
    width: 600px; /* was 265px*/
    height: 100px; /* was 62px*/
    display: block;
    background: url(../images/logo.gif) no-repeat left;
    }

    To make the images display, replace the original logo.gif with your new one and assign your new banner to the search position.

    If you want to see how it works on my development site, go here: http://frontrowfilms.co.uk/

    Nick</blockquote>
    Hello, I tried your tips, but could not.

    I have a logo with 240X60 and a banner with 728×90 and would like to put one beside the other.
    Can you help?

    Best regards.

    nickwigzell Friend
    #322933

    Hi Padunic

    The first thing that occurs to me is that you won’t have enough space to place those two elements side by side unless you remove some of the left and right padding. 240px (your logo) + 728px (your banner) makes 968px and the available space is 950px. That could be why it didn’t work.

    There are two solutions, it seems to me. Either reduce the widths of your logo and/or banner until they add up to 950px, or adjust the padding to allow you a width of 968px.

    To do the latter, go to templates/ja_teline_iii/css/layout.css, find this at about line 23, and adjust the padding:

    .main .inner {
    /* We use liquid layout, so we need to insert a div which will create margin if need */
    padding-left: 15px;
    padding-right: 15px;
    }

    If it were me, I would alter the widths of your logo and/or banner rather than playing around with the template structure, unless you really know what you’re doing with css. I would also make the logo and banner the same height. Also, remember to change the h1.logo to the height of your graphics (see above).

    Hope that helps.

    Best

    Nick

    <em>@padunic 152029 wrote:</em><blockquote>Hello, I tried your tips, but could not.

    I have a logo with 240X60 and a banner with 728×90 and would like to put one beside the other.
    Can you help?

    Best regards.</blockquote>

    apatelambit Friend
    #322989

    I changed my logo in the CSS file and now both the CSS file and and template are unwritable. The logo changed from my image to a generic header, which just states my website name. I have changed the image file, but it will not load. If I change the basic settings from image to text it does change to what I typed, but when I change it back to image I get the generic header.

    To back up, I changed to a new web host and lost my image. I played around and could not get the right image to load, but I could get other random images to load. One day the random image logo disappeared and a generic header loaded. Now I can’t get any logo load. I asked my web host to help, but they could not figure it out…

    Any thoughts would be appreciated!!

    nickwigzell Friend
    #323005

    Hi apatelambit

    This is getting a little beyond my scope but it sounds like the problems you described in the first par occurred because your params.ini file (/templates/ja_teline_iii/params.ini) became unwritable for some reason. You would need to make it writable again by changing the permissions so you can regain control of the basic settings.

    On my system (Mac OS 10.5.8) I access the params.ini file on the web server using Transmit, choose Get Info, tick the read, write and execute permissions boxes and click the apply button.

    If you don’t have this kind of access, perhaps you can ask your web host to give it to you or change the permissions for you.

    Can you give me the url of your site so I can have a quick look?

    Best

    Nick

    <em>@apatelambit 152104 wrote:</em><blockquote>I changed my logo in the CSS file and now both the CSS file and and template are unwritable. The logo changed from my image to a generic header, which just states my website name. I have changed the image file, but it will not load. If I change the basic settings from image to text it does change to what I typed, but when I change it back to image I get the generic header.

    To back up, I changed to a new web host and lost my image. I played around and could not get the right image to load, but I could get other random images to load. One day the random image logo disappeared and a generic header loaded. Now I can’t get any logo load. I asked my web host to help, but they could not figure it out…

    Any thoughts would be appreciated!!</blockquote>

    apatelambit Friend
    #323347

    Hi Nickwigzell,

    Thank you, this narrows it down. This happened when I changed web hosts, so I will contact my web host or use my cpanel to see what options I have.

    My url is http://www.1stopmoms.com I still have alot of work, but you can take a look and see what you think. Thank you

    kidi Friend
    #329832

    Hello,

    This explain is fine if we don’t use any module position in the header.

    In my case, I would like stay with the search module (for a menu) and put my banner on background (see attached picture). Normaly it’s possible on a Div, but I didn’t find the div concerning in the Css file.
    And I’m not comfortable with this index.php for add something in he code.


    1. Ban-top
    micrantha Friend
    #329852

    Hello kidi,
    You could try adding your background image to div class=”main” within div id=”ja-header”.
    In template.css search for this rule:

    #ja-header .main { padding: 30px 0 10px;}
    This space also forms background of topbar, so you would have to position your image.
    (for generation of header code see file layouts/blocks/header.php)

    Good luck,
    Micrantha

    kidi Friend
    #329862

    Hello Micrantha,

    Thank you !

    Line 832 :

    #ja-header .main { padding: 30px 0 10px; background-color:#ffffff; background-image:url(http://www.mysite.com/templates/ja_teline_iii/images/ban-top.gif) }

    Concerning the header.php file, I don’t know what I can change. I’m not comfortable with PHP.

    The result is exactly what I expect. Just a litle thing… the 1px border of the top is ON the background. Not really nice design 🙂 I actually search for resolved this.

    Have a nice evening !


    1. ban
Viewing 15 posts - 1 through 15 (of 17 total)

This topic contains 17 replies, has 7 voices, and was last updated by  kidi 14 years, 9 months ago.

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