Custom Header Logo

[Deleted member 745]

Hi,

I have tried adding a custom logo on my website but it does not show right - it's dimensions are 465 x 100 and you can see it here but its not showing right it's to small.http://chatfreaks.net/community/

​

Thanks for any help.​

 

[Victor]

Sorry I was wrong as usual it's ok not using at the moment and I figured it out on my own thanks

 

[ijeffers]

I'm trying to center my logo on in the header, but can't work out what bit I need to change.

Any hints?

 

[Paul B]

I'm trying to center my logo on in the header, but can't work out what bit I need to change.

Any hints?

Try this.

#logo img {
height:35px;
margin-left:auto;
margin-right:auto;
vertical-align:middle;
}

Essentially just add these lines to the #logo img CSS
margin-left:auto;
margin-right:auto;

And remove this one from #logo
float:left;

 

[ijeffers]

Try this.

#logo img {
display:block;
height:35px;
margin-left:auto;
margin-right:auto;
vertical-align:middle;
}

Essentially just add these lines to the #logo img CSS
display:block;
margin-left:auto;
margin-right:auto;

So my head css now has

        #logo img
        {
            vertical-align: middle;
                        /*height: 35px;*/
                        display:block;
                        margin-left:auto;
                        margin-right:auto;
        }

because I commented out the height to make it slightly larger, but still it keeps aligning the logo to the left

 

[Paul B]

because I commented out the height to make it slightly larger, but still it keeps aligning the logo to the left

Apologies, I missed out a step - you need to remove the float:left from #logo.
Please see my edit above.

 

[ijeffers]

So my head css now has

        #logo img
        {
            vertical-align: middle;
                        /*height: 35px;*/
                        display:block;
                        margin-left:auto;
                        margin-right:auto;
        }

because I commented out the height to make it slightly larger, but still it keeps aligning the logo to the left

Got it!

Probably a better way to do it, but had to comment out the float: left in the #logo class to do it.

 

[ijeffers]

Apologies, I missed out a step - you need to remove the float:left from #logo.
Please see my edit above.

ahh worked it out at the same time.

Cheers Brogan!

 

[Carlos]

Dave browse too:

Appearance -> Styles Properties -> Header and Navigation

Make sure your style is selected above all the settings and you can choose the logo dimensions there.

I hope this helps!

When I did the steps to get there it shows this:

THIS is handy for cases where you add a new image to the background in that header...but the logosize doesn't look editable there. I'll give dragonfly's edit a try.

 

[Nick]

When I did the steps to get there it shows this:
View attachment 4214
THIS is handy for cases where you add a new image to the background in that header...but the logosize doesn't look editable there. I'll give dragonfly's edit a try.

You can't change the logo size within the settings. If the "height of header logo" option is set to a value lower than that of the actual logo image, the logo image will be resized to that value.

 

[Russ]

Ya apparently as stated before which I didn't know about some of the CSS options weren't finalized.

 

[Darfuria]

What's the best way of adding padding/margin above and below the logo? My logo image is 60px high, therefore #logo and #logo img have a height of 60px, but if I increase the height of #logo or add margin/padding, it causes the positioning of the navigation/top corners/breadcrumbs to mess up, which isn't easily fixed.

 

[3rd AnGle]

Styles & Templates/ Templates/header.css

find this class...

#logo img
{
vertical-align: middle;
/*height: 35px;*/
}


and either adjust the height to your logo size, or as I have done.. comment it out.

Used this, the logo size increased, but now this happened. The slogan didn't appear. Do i need to tweak something?

 

[D37]

Used this, the logo size increased, but now this happened. The slogan didn't appear. Do i need to tweak something?

You need to make the "height" large in the settings, header / navigation settings.

 

[anotheralias]

I can't edit the styles right now to confirm, but I'm pretty sure that adding height to the logo/header area displaces the arrows/chevrons in the breadcrumb area.

 

[Lawrence]

What's the best way of adding padding/margin above and below the logo? My logo image is 60px high, therefore #logo and #logo img have a height of 60px, but if I increase the height of #logo or add margin/padding, it causes the positioning of the navigation/top corners/breadcrumbs to mess up, which isn't easily fixed.

Appearance -> Styles -> Style Properties Groups -> Settings -> Height of Header Logo

This setting will change the height of the area your logo resides. If your logo is 60px hight, use 80px for Height of Header Logo to give a 10px space above and below your logo.

 

[3rd AnGle]

You need to make the "height" large in the settings, header / navigation settings.

Thank you D37 and anotheralias.... It worked.

 

[Darfuria]

Appearance -> Styles -> Style Properties Groups -> Settings -> Height of Header Logo

This setting will change the height of the area your logo resides. If your logo is 60px hight, use 80px for Height of Header Logo to give a 10px space above and below your logo.

This just stretches the image, because the height is applied to #logo img.

 

[Lawrence]

This just stretches the image, because the height is applied to #logo img.

On my test site the logo was not stretched. I test everything before I reply here.

 

[Darfuria]

On my test site the logo was not stretched. I test everything before I reply here.

Strange... could you screenshot the value you changed in the ACP?

 

[Lawrence]

Strange... could you screenshot the value you changed in the ACP?

It is exactly as I posted above. That was the only change I made to the style. I do not post a potential answer until tested first. The height is set to 150px.

The height is applied here:

#logo
{
display: block;
float: left;
line-height: @headerLogoHeight;
height: @headerLogoHeight;
vertical-align: middle;
}

and not contained here:

#logo img
{
vertical-align: middle;
height: 35px;
}

Now replace the float:left in #logo with text-align: center and you have a centered logo with equal spacing above and below (using 150px height for that container in my example), as shown here: