Joomla Templates Club 406,261 posts

[ash1111 Friend ash1111Join date: March 2008Posts: 70Downloads:0Uploads:9 Thanks: 12]

#134310

What is the maximum size of the logo space?

How big can I make it without it going over any of the borders?

Thanks

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#274876

With the way the demo template is set up…the logo currently has a 20 px left and right margin…so the maximum would be 900 px wide.

But then you are going to go behind your User3 and User4 unless you disable them.

The height is “Sky’s the Limit”

You’ll need to change your CSS code to reflect your width and height
in template.css (line 783)


h1.logo a {
background:transparent url(../images/logo.jpg) no-repeat scroll center center;
display:block;
height:38px;
width:355px;
}

Have fun.
John.

1 user says Thank You to John Wesley Brett for this useful post

1. foris

[ash1111 Friend ash1111Join date: March 2008Posts: 70Downloads:0Uploads:9 Thanks: 12]

#274877

Ok cool, so max 900… do you know how wide it could be also?

Thanks!

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#274878

I just updated my previous answer…look back up at it for a clearer explanation.

Thanks,
John.

[ash1111 Friend ash1111Join date: March 2008Posts: 70Downloads:0Uploads:9 Thanks: 12]

#274916

Thanks, although when I have it at 900px wide, it still doesn’t touch the edges? Any ideas?

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#274920

Oh, I’m sorry…I thought you didn’t want it to touch the edges. 😮

That’s simple enough…we’ve got to get rid of the margins on either side and widen the image.

Goto template.css (line 778)


h1.logo, div.logo-text {
margin:0 20px 20px;
padding:0;
}

And change the 20px to 0
Like so…


h1.logo, div.logo-text {
margin:0 0 20px;
padding:0;
}

And then you can have an image that will stretch from one side to the other at a width of 970px
If you want the logo to sit right on top of the menu below it with no space…then change the other “20px” to zero as well.

Dont forget to update the other CSS we mentioned in the previous post.

in template.css (line 783)


h1.logo a {
background:transparent url(../images/logo.jpg) no-repeat scroll center center;
display:block;
height:38px;
width:355px;
}

Have fun!
John.
——-
If this has been helpful, please click the “Thank You” button.

[jooleimon Friend jooleimonJoin date: May 2008Posts: 73Downloads:0Uploads:9 Thanks: 12 Thanked: 1 times in 1 posts]

#275962

I have a logo that is 650px by 70px. Please explain the steps that I need to carry out to place this new logo on the header.

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#275984

<em>@jooleimon 86705 wrote:</em><blockquote>I have a logo that is 650px by 70px. Please explain the steps that I need to carry out to place this new logo on the header.</blockquote>

Add your logo to the TEMPLATES > JA_RUTILE > IMAGES folder…calling it logo.jpg or whatever…and then update the following: template.css (line 783)


h1.logo a {
background:transparent url(../images/logo.jpg) no-repeat scroll center center;
display:block;
height:70px;
width:650px;
}

Have fun!
John.
——-
If this has been helpful, please click the “Thank You” button.</blockquote>

1 user says Thank You to John Wesley Brett for this useful post

1. jooleimon

[tversover Friend tversoverJoin date: March 2009Posts: 77Downloads:0Uploads:1 Thanks: 8 Thanked: 1 times in 1 posts]

#304655

Hi!

I have tried to do as you have explained this other guy. I’m trying to have a picture covering the whole white area on top. I manage to cover it on both sides, and in the bottom. But there is a strange white area (about 20 pixels) above the image. How can I get rid of it?

Thanks!

[Author]

Posts