Joomla Templates Club 406,261 posts

[knuthubred Friend knuthubredJoin date: November 2008Posts: 9Downloads:0Uploads:0 Thanks: 5]

#136258

Hi all,
I’m using the Ja Rutile template and wonder if any have a good way to insert a image as background image in the header ? The image I want to use is 900 x 140 px. I want the image to fill the entire header. I want to keep the “shadow effect/border” that is already there.

I have tried to add #ja-headerwrap in the template.css with no sucess.
Also, I want to change the font color of the Top Menu.

Any good ideas ?

Cheers,
Knut
Norway

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#283066

Hi knuthubred !
You can do it following some steps below :
1. Copy background image to “templates/ja_rutile/images” folder.
2. Open template.css file , find following code section at about line 771 :


#ja-header {
line-height:normal;
padding:20px 0 0;
position:relative;
width:100%;
z-index:999;
}


change to :


#ja-header {
line-height:normal;
padding:20px 0 0;
position:relative;
width:100%;
z-index:999;
background:url(../images/[background image name]);
}


3 users say Thank You to Sherlock for this useful post

1. knuthubred
2. cjmicro
3. shultman

[knuthubred Friend knuthubredJoin date: November 2008Posts: 9Downloads:0Uploads:0 Thanks: 5]

#283092

Thanks so much! Do you know as well why I can’t show the logo in .png format ? I want the logo to be transparent. The corners of the Search button do the same.

Thanks,
Knut

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#283095

In the logo area on the css you will need to make sure it is using the url of the png file. Rutile uses a jpg, so you need to replace the url with your file, and may need to adjust the height/width too. This is below the header area previously mentioned by hainn.

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

Cheryl

1 user says Thank You to cjmicro for this useful post

1. knuthubred

[knuthubred Friend knuthubredJoin date: November 2008Posts: 9Downloads:0Uploads:0 Thanks: 5]

#283110

Chreyl,
I have done that. Replaced logo.jpg with logo.png and changed the template.css on the ftp but my transparent png file is not still visible ? is there any other places I have to make sure it is using the url of logo.png ? I’m frustrated.

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

Cheers,
Knut

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#283130

can you post the url?

[knuthubred Friend knuthubredJoin date: November 2008Posts: 9Downloads:0Uploads:0 Thanks: 5]

#283211

Unfortunately my web it’s temporary on my local server. I will see what I can do to publish it. Suggestions anyway ?

Thanks,
Knut

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#283222

is the logo there that you changed but it’s just not transparent, or the logo doesn’t show at all? is it still showing the old logo?

[knuthubred Friend knuthubredJoin date: November 2008Posts: 9Downloads:0Uploads:0 Thanks: 5]

#283225

The logo doesn’t show at all when I use the logo.png. Logo.jpg works fine but it’s not transparent so it does not looks good at all. I have no idea why this is happening.

Thanks,
Knut

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#283226

i am stumped, sorry. can you send me the png and i can try putting it on the header to test?
Cheryl

[knuthubred Friend knuthubredJoin date: November 2008Posts: 9Downloads:0Uploads:0 Thanks: 5]

#283228

You may download the image from this location: http://www.hubcom.no/logo.png

Knut

[knuthubred Friend knuthubredJoin date: November 2008Posts: 9Downloads:0Uploads:0 Thanks: 5]

#283278

Please find the logo at this location http://www.hubcom.no/logo.png

Knut

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#283288

Seems like you have to copy the new logo image to the images/color that you are using. Then also there is a css for each color, that’s where you have to change it.

So if you are using blue color, copy your logo.png to templates/ ja_rutile/images/blue folder and edit the logo area in templates/ja_rutile/images/css/colors/blue.css.

Not sure why it is in template.css at all, but I’m not an expert by any means!

PS I did this with your logo and it did work.

Cheryl

1 user says Thank You to cjmicro for this useful post

1. knuthubred

[knuthubred Friend knuthubredJoin date: November 2008Posts: 9Downloads:0Uploads:0 Thanks: 5]

#283321

Finally!

Thanks so much.
Knut

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#283352

sorry it took so long to figure out, but glad it’s all ok now.
Cheryl

[Author]

Posts