How can I get my logo in the center of the header area?
1 Attachment(s)
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 |
Quote:
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?
|
Quote:
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.
|
Quote:
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
HTML Code:
.logo { |
Quote:
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 HTML Code:
#my_logo { |
Quote:
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/ |
All times are GMT -6. The time now is 12:25 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.