-
AuthorPosts
-
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 #144562Is 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 Friendnickwigzell
- 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 #318865I 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 Friendkalibs112
- 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 #319231Hi 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 Friendergohost
- 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 #319250sounds 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 Friendnickwigzell
- 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<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 Friendkalibs112
- 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 #320828chk 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 Friendnickwigzell
- 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 #322543As 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 Friendpadunic
- 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<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 Friendnickwigzell
- 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 #322933Hi 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>
November 9, 2009 at 4:33 am #322989I 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 Friendnickwigzell
- 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 #323005Hi 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>
November 12, 2009 at 3:04 am #323347Hi 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 Friendkidi
- 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 #329832Hello,
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.
micrantha Friendmicrantha
- 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 #329852Hello 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,
Micrantha1 user says Thank You to micrantha for this useful post
kidi Friendkidi
- 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 #329862Hello 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 !
AuthorPostsThis 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
Jump to forum