Joomla Templates Club 406,261 posts

[jana1 Friend jana1Join date: February 2008Posts: 45Downloads:0Uploads:0 Thanks: 4]

#134815

Hi,

I have a logo that is 980 X 160 px.

I treide to expand the space for my logo with this tutorial here:
http://www.joomlart.com/forums/topic/expand-the-space-for-logo/

But it doesn’t work properly.
The attached pic shows what I mean.
I want to reach taht the Logo is in the top of the Menu.

This is the code in template_css.css which I changed:

<blockquote>#ja-header {
/* the first line is added to expand the place for logo*/
height: 160px;
line-height: normal;
position: relative;
padding: 20px 0 0;
z-index: 999;
}

/* Original CSS-Code for Logo*/
/*
h1.logo a {
width: 355px;
height: 38px;
display: block;
background: url(../images/logo.jpg) no-repeat center;
}
*/

/* CSS-Code to expand the place for Logo*/
h1.logo a {
width:980px;
display: block;
background: url(templates/ja_rutile/blue/logo.jpg) no-repeat;
position: absolute;
float:left;
height: 160px;
margin-top:1px
margin-bottom:1px;
}</blockquote>

I want that it looks something like this (which I made with Photoshop):

How can I solve my problem?? Maybe I have tho change the position of the main menu. But how???

Thanks

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#277049

Hi jana,
Your request is a little more complex because you are making the logo so big it pushes other things out of the way.

I have to go out now but I’ll have a try later on today. Can you post a live link to your site?

[jana1 Friend jana1Join date: February 2008Posts: 45Downloads:0Uploads:0 Thanks: 4]

#277062

Hallo Scotty,

Thank for your answer.

I can make the logo smaller if it helps to solve the problem.

What size will be good??

I hope you will be back soon. 🙂

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#277067

Well the page is only 970 wide anyway so resize it to 963x160 and undo all the .css changes you have made.

In template.css on line 769 find…

/* HEADER
--------------------------------------------------------- */
#ja-header {
line-height: normal;
position: relative;
padding: 20px 0 0;
z-index: 999;
}

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

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

and change to…

/* HEADER
--------------------------------------------------------- */
#ja-header {
line-height: normal;
position: relative;
padding: 0;
z-index: 999;
}

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

h1.logo a {
width: 963px;
height: 160px;
display: block;
background: url(../images/logo.jpg) no-repeat center;
}
I see you are using the blue colour scheme so we have to link to the logo image in templates/ja_rutile/css/colors/blue.css.

Find line 55…

h1.logo a {
background: url(../../images/blue/logo.jpg) no-repeat center;
}
and change the path to the new logo name if you’ve changed it.

That should be it.

2 users say Thank You to scotty for this useful post

1. jana1
2. islamskadrzavaa

[jana1 Friend jana1Join date: February 2008Posts: 45Downloads:0Uploads:0 Thanks: 4]

#277079

Dear Scotty, Well done!

It works GREAT.

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#277080

Happy to help!

[Author]

Posts