Joomla Templates Club 406,261 posts

[pierotemplate1 Friend pierotemplate1Join date: January 2010Posts: 11Downloads:0Uploads:0 Thanks: 3]

#151225

Please, another logo question:

in template.css we can read:

#ja-header .main {
height:95px;
position:relative;

and then:

h1.logo a {
background:url(“../images/logo.png”) no-repeat scroll left center transparent;
display:block;
height:43px;
width:128px;

Well, if we change height in header p.e. 150pix and logo p.e. 130 pix the logo will be not centered but rather ‘bottomed’, in other words is not possible have perfect center logo, WHY?! The logo seems to have a cylinder on his head! 😀

thanks in advance! 😎

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#344189

pierotemplate1;179317Please, another logo question:

in template.css we can read:

#ja-header .main {
height:95px;
position:relative;

and then:

h1.logo a {
background:url(“../images/logo.png”) no-repeat scroll left center transparent;
display:block;
height:43px;
width:128px;

Well, if we change height in header p.e. 150pix and logo p.e. 130 pix the logo will be not centered but rather ‘bottomed’, in other words is not possible have perfect center logo, WHY?! The logo seems to have a cylinder on his head! 😀

thanks in advance! 😎

The height of the logo should match the height of the layer with a few pixels for padding, also if you change the logo size be sure to keep it proportional or it will look too high and narrow or to squashed and fat depending on what you change. Perhaps a link to the site would help me understane the effect better?
Cheers Shannon

1 user says Thank You to uniquebiz for this useful post

1. pierotemplate1

[pierotemplate1 Friend pierotemplate1Join date: January 2010Posts: 11Downloads:0Uploads:0 Thanks: 3]

#345254

Thanks for your suggests, site is http://www.chetango.it, I put in template.css this (modify margins and dimension of logo):

*************
h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1; }

h1.logo, div.logo-text { float: left; z-index: 1; }

/* Logo Image —*/
h1.logo { margin: 0px 0 0 15px; }

h1.logo a {
background: url(../images/logo.jpg) no-repeat left;
display: block;
height: 156px;
width: 750px;
}

h1.logo a span { position: absolute; top: -1000px; }

/* Logo Text —*/
div.logo-text { margin-top: 8px; }

div.logo-text h1 a {
color: #fda40a;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}

**************

thanks and happiness to all friends of joomlart and users!

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#345261

The only way to truly centering the logo is adjusting the width to the actual logo (image) width and then adjusting the margins (left and right) to “auto” Height doesn’t really matter. It might be necessary to delete floats if present.

Here… an example… http://www.joomlart.com/forums/showthread.php?p=179572

Peace,
Gabriel

[Author]

Posts