How can I get my logo in the center of the header area?
 

Hi Flynn,

Please find attached an image of my header/logo area. As you can see, my logo is left aligned. I would like to get it to show in the center. Please advise.

Thank you in advance for your time and help.

Vasanti

at ATO->Header Image->Header Image: Alignment you can choose the alignment you want

Hi,

Thank you for a quick response.
Actually, I tried to change the alignment of the header image before and it did not work since its not the header image but a customized logo that I uploaded in place of the "huge-logo.gif through control panel. I am trying to get it in the center of the logo area.
Please advise.

Thanks,
Vasanti

In that case avoid the %logo tag and create your custom logo area with HTML & PHP in Style & Configure HEADER AREA -> Configure Header Area. Something like

<a href="/"><img src="..." style="margin:0 auto" alt="" /></a>

Flynn,

I am sorry, but I am not that tech savvy and am kinda lost after reading your instructions. I tried a couple of things based on your response and they obviously did not work. I am sorry, but I don't know how to do it. Any other ideas/suggestions/advise would be greatly appreciated.

Sincerely,
Vasanti

You can put HTML and PHP into the text area at Atahualpa Theme Options -> Style & Configure HEADER AREA -> Configure Header Area

Instead of using the "header item" %logo, which represents the logo area including the logo the blog title, the search box, etc., create your own logo area with HTML. For instance, put this into that text area

%pages
<a href="/"><img style="margin: 0 auto" src="/wp-content/themes/atahualpa342/images/my-logo.gif" alt="My site title" /></a><br />
%bar1 %image %bar2

Flynn,
I have attempted to use this html in the text box for the configure header area to center my logo, but the logo does not appear at all. The only modifications I have made was in the directory address, <img src = "/wp-content/themes/atahualpa/images/mrrd_banner.png"> The only item that appears is the alt text.

Any suggestions?

What version of Atahualpa and WP?
what is the url?

juggledad,

I'm using Atahualpa 3.4.4
Wordpress version 2.9

The url is http://www.mansruinrollerderby.com/wordpresstest/

Thanks for the help in advance.

What I'm trying to actually do is center the logo across the webpage and have the blog tagline underneath it. But if I can only get the the logo centered, then that's fine.

Is this at all possible?
Any help is greatly appreciated.

Look at "ATA>Style & edit HEADER AREA>Logo Image:Styling". You can put margins in there to move the image where you need to.

Thanks for the quick reply.

I will try this out. If I add margins, will the image remain centered when the page is viewed in different resolutions?

I just played around with some CSS and couldn't make it auto center so I would suspect that unless you set your site to a fixed width the answer would be no it will not stay centered. Is fixed width a possibility or is there a reason you want fluid?

lmilesw,
I want to try and keep the site at a fluid width to take users with different resolutions into account, including mobile phone users. Plus I'd have to resize all the rotating header files.

If I make the page a fixed width and get the logo centered, is there a way to have the tagline appear below the logo?

You could of course include the tagline as part of your logo image. I'm not sure what CSS will work in "ATA>Style & edit HEADER AREA>Blog Tagline". If you put your tagline back I can try some things with Firebug in Firefox which is a great way to text CSS if you haven't used it before.

I've added the tagline back into the header and have centered the logo (thanks for the fixed width suggestion, it fixed my centered issue).

I'll check out Firebug since I already am using Firefox. I'm a new user to css, wordpress and php so I'll give it a go and see what happens.

Thanks again for the help.

I took a look and realized that the logo and tag line are in the same row of a table so I had to do some weird CSS stuff but try the following in the CSS Inserts area in "ATA>Add HTML/CSS Inserts" and see what happens

Thanks for the code.
I added it to the CSS inserts and it didn't quite work.

I did find a bit of a workaround for the centered logo. I fixed my width to 1024px, so I made my logo 1024px wide and centered it.

Under the Header Area -> Style & edit Header Area -> Configure Header Area I have the following code:

%pages <a href= "/wordpresstest/"><img src ="http://www.mansruinrollerderby.com/wordpresstest/wp-content/uploads/2010/01/mrrdbanner.png"> </a>%logo %bar1 %image %bar2

I have left the "Show Logo Image" blank since I hardcoded it in the configure header area.

This has the logo centered and below the tagline, which is what I want. But, the tagline itself is still not centered.

I've played around with the Blog Tagline code and have made it 'almost' centered.

text-align:center;
margin: 0 0 0 285px;
padding: 0;
font-size: 1.0em;
font-weight: bold;
color: #666666;

I'm pretty much eye-balling the tagline as being 'centered', so is there a more precise way to center the text in the table?

Again, thanks for the help, it's been incredibly useful in helping me get comfortable with wordpress and this theme.

I would take off the period and move the tagline to the right about 10px. That should just about center it as I don't know of a way to auto center. CSS sometimes gives me a fit and honestly eye balling the centering works fine as I have seen sometimes where something is centered automatically and it looks "off".

I agree about removing the period at the end of the tagline. For all intents and purposes it looks centered.

Thanks again for all the help.

if you change your insert to

%pages <div id="my_logo"><a href= "/wordpresstest/"><img src ="http://www.mansruinrollerderby.com/wordpresstest/wp-content/uploads/2010/01/mrrdbanner.png"> </a></div>%logo %bar1 %image %bar2

you could add a css insert
to match the color of the tag background

juggledad,
Please stop reading my mind haha. Thanks for nipping my next question in the bud. Worked like a charm!

Thank you all for your help. I'm sure I'll have more once I delve deeper into this incredible theme.

Together with another thread I figured it out. Where Juggledad was working on a table problem in the header.

If you use this it works and your header will be centered.

<a href="/"><img class="aligncenter" src="/wp-content/themes/atahualpa342/images/my-logo.gif" alt="My site title" /></a><br />


Thank you all for pointing me into the right direction. With all the ideas from Flynn and Juggledad I was able to figure it out. I couldn't be happier!


You can see it works. Please surf to http://stonefencedrive.com/test/