Wordpress Themes - WP Forum at BFA - [SOLVED] How to center the logo image?

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - [SOLVED] How to center the logo image? (http://forum.bytesforall.com/showthread.php?t=7578)

essdeeay

Jun 14, 2010 11:24 AM

[SOLVED] How to center the logo image?

How can I center the logo image? I've disabled lots of the extras around it. An example of the site is here:

http://www.rowyerboat.com/stmichaels...ess/?page_id=2

Many thanks,
Steve :)

lmilesw

Jun 14, 2010 11:45 AM

In the Logo Area Styling box add

HTML Code:

text-align:center;

essdeeay

Jun 14, 2010 01:10 PM

Thanks Larry - that's one of the things I tried but it doesn't work.

Steve

juggledad

Jun 14, 2010 01:15 PM

add a CSS Insert

HTML Code:

.logo {padding-right:30%; padding-left: 30%;}

lmilesw

Jun 14, 2010 01:40 PM

Quote:

Originally Posted by essdeeay (Post 34361)

Thanks Larry - that's one of the things I tried but it doesn't work.

Steve

After I posted I realized it was an image and may not work. So glad JD is here to bail me out.

lmilesw

Jun 14, 2010 01:59 PM

I tried the padding right and left and it didn't work for me in Firefox but the following did. Not sure about the other browsers.

HTML Code:

.logo {margin:0px auto 20px auto !important;width:500px;}

The width is needed for the margin auto to work.

essdeeay

Jun 14, 2010 02:24 PM

Thanks juggledad, but that doesn't work as intended either.

The theme is fluid, so a fixed padding doesn't seem to make sense, but I did try the CSS text-align attribute in the manner you suggested, which only works for IE, but not Firefox. This seems to be a moot point, but I can't figure out how to use the .logo INSERT to cater for all browsers.

Do you have any suggestions?

Many thanks,
Steve

essdeeay

Jun 14, 2010 02:26 PM

Quote:

Originally Posted by lmilesw (Post 34367)

I tried the padding right and left and it didn't work for me in Firefox but the following did. Not sure about the other browsers.

HTML Code:

.logo {margin:0px auto 20px auto !important;width:500px;}

The width is needed for the margin auto to work.

Hi Larry,

When the theme is fluid, how do I know what to set the width to?

Steve

lmilesw

Jun 14, 2010 02:29 PM

The width if for the image as that is what you are styling and your image is 500px.

essdeeay

Jun 14, 2010 02:32 PM

Thanks Larry!

That worked a treat. And thank you for the explanation about the width - that was very useful. It works for me in IE/FF/Chrome.

Thank you again,
Steve :)

juggledad

Jun 14, 2010 02:38 PM

give this a try, it should work

HTML Code:

.logo {display:block !important; 

    margin-left: auto !important;

    margin-right: auto !important;

    }

using the width will change the size of the text displayed

essdeeay

Jun 14, 2010 02:43 PM

Thank you juggledad - that also works just a treat!

Steve :)

lmilesw

Jun 14, 2010 02:49 PM

I was unaware of display:block for working with margin:auto Much better than width especially since I had the width of the image wrong.

All times are GMT -6. The time now is 06:33 PM.