Joomla Templates Club 406,261 posts

[stabilia Friend stabiliaJoin date: November 2009Posts: 12Downloads:0Uploads:0 Thanks: 6]

#146122

Hi, getting my head around the ja rite template, looking good so far;)

Can you please tell me how to have a larger logo, the existing one is only 50px high, I need about double that.

I have all my fingers crossed that editing some code type stuff, CSS and all that malarky is not required.

😀

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

#324027

Well sorry…you’re going to have to uncross the fingers and get them dirty…but not too dirty.
Pretty simple really:

Goto template.css – Line 492
And adjust the following areas in red to match the size of your logo image:
And call your logo “logo.jpg” and replace it for the image in your JA Raite/images/ folder.

h1.logo a, h1.logo a:hover, h1.logo a:active, h1.logo a:focus {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/logo.jpg) no-repeat scroll 0 0;
display:block;
height:50px;
left:0;
position:absolute;
text-indent:-300%;
top:15px;
width:388px;
}

That will do it!
Have fun!
John.

[stabilia Friend stabiliaJoin date: November 2009Posts: 12Downloads:0Uploads:0 Thanks: 6]

#324137

Hi thanks for the reply, got my fingers dirty in some code stuff for the first time, like you say it was pretty simple really.

Unfortunately it didn’t work, tried resizing the logo and changing the height in the css file, it helped, but it still looks wrong. My logo is 79px high, if I make it any smaller it will disappear!!
🙂

Take a look

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

#324292

Whoa! Yes you do have a tight squeeze.
No problem. You’ve adjusted the height of the logo area…now you just need to adjust the area in which the logo sits….THE HEADER

In template.css – line 495
Adjust the area below in RED to read as follows…or any other size to your taste.


#ja-header {
height:100px;
position:relative;
z-index:99;
}

There you go!
Have fun!
John.

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

1. stabilia

[stabilia Friend stabiliaJoin date: November 2009Posts: 12Downloads:0Uploads:0 Thanks: 6]

#324375

Hi jbrett, top stuff thank you.

Seeing the solution you have kindly given, with hindsight it is obvious what to do, but me knows nothing about code and css.

Appreciate your help.

🙂

[Author]

Posts