Full-width logo/banner

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

1 2 →

Author

Posts
nickwigzell Friend

nickwigzell
Join date:
August 2009
Posts:
32
Downloads:
0
Uploads:
0

Thanks:

15

Thanked:

2 times in 1 posts

September 24, 2009 at 3:15 pm #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

nickwigzell
Join date:
August 2009
Posts:
32
Downloads:
0
Uploads:
0

Thanks:

15

Thanked:

2 times in 1 posts
September 28, 2009 at 10:10 am #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
2 users say Thank You to nickwigzell for this useful post
1. kalibs112
2. ergohost
kalibs112 Friend

kalibs112
Join date:
September 2009
Posts:
68
Downloads:
0
Uploads:
2

Thanks:

22

Thanked:

3 times in 4 posts

September 30, 2009 at 11:50 pm #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

ergohost
Join date:
October 2008
Posts:
88
Downloads:
0
Uploads:
3

Thanks:

17

Thanked:

10 times in 1 posts

October 1, 2009 at 3:41 am #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

nickwigzell
Join date:
August 2009
Posts:
32
Downloads:
0
Uploads:
0

Thanks:

15

Thanked:

2 times in 1 posts

October 1, 2009 at 7:51 am #319265

@kalibs112 147100 wrote:<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

kalibs112
Join date:
September 2009
Posts:
68
Downloads:
0
Uploads:
2

Thanks:

22

Thanked:

3 times in 4 posts

October 18, 2009 at 3:21 am #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

nickwigzell
Join date:
August 2009
Posts:
32
Downloads:
0
Uploads:
0

Thanks:

15

Thanked:

2 times in 1 posts

November 4, 2009 at 12:38 pm #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

padunic
Join date:
September 2009
Posts:
63
Downloads:
0
Uploads:
1

Thanks:

5

Thanked:

2 times in 1 posts

November 8, 2009 at 1:30 pm #322932

@nickwigzell 151509 wrote:<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

nickwigzell
Join date:
August 2009
Posts:
32
Downloads:
0
Uploads:
0

Thanks:

15

Thanked:

2 times in 1 posts

November 8, 2009 at 1:54 pm #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

@padunic 152029 wrote:<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

apatelambit
Join date:
October 2009
Posts:
5
Downloads:
0
Uploads:
0

Thanks:

2

November 9, 2009 at 4:33 am #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

nickwigzell
Join date:
August 2009
Posts:
32
Downloads:
0
Uploads:
0

Thanks:

15

Thanked:

2 times in 1 posts

November 9, 2009 at 9:13 am #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

@apatelambit 152104 wrote:<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

apatelambit
Join date:
October 2009
Posts:
5
Downloads:
0
Uploads:
0

Thanks:

2

November 12, 2009 at 3:04 am #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

kidi
Join date:
March 2009
Posts:
134
Downloads:
0
Uploads:
44

Thanks:

28

Thanked:

2 times in 1 posts
January 20, 2010 at 8:44 am #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.
Attachments:
micrantha Friend

micrantha
Join date:
May 2007
Posts:
465
Downloads:
0
Uploads:
6

Thanks:

6

Thanked:

158 times in 148 posts
January 20, 2010 at 1:15 pm #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
1 user says Thank You to micrantha for this useful post
1. kidi
kidi Friend

kidi
Join date:
March 2009
Posts:
134
Downloads:
0
Uploads:
44

Thanks:

28

Thanked:

2 times in 1 posts
January 20, 2010 at 4:55 pm #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 !
Attachments:
Author

Posts

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

1 2 →

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

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

Quick Navigation

Site navigation

Full-width logo/banner

nickwigzell

nickwigzell

kalibs112

ergohost

nickwigzell

kalibs112

nickwigzell

padunic

nickwigzell

apatelambit

nickwigzell

apatelambit

kidi

micrantha

kidi

Important Notice :

Jump to forum

Categories