Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

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


  #1  
Old Aug 11, 2009, 09:47 AM
vasantib
 
3 posts · Aug 2009
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
Attached Thumbnails
Click image for larger version

Name:	Logo.jpg
Views:	924
Size:	18.6 KB
ID:	218  
  #2  
Old Aug 11, 2009, 09:50 AM
juggledad's Avatar
juggledad
 
23,626 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
at ATO->Header Image->Header Image: Alignment you can choose the alignment you want
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 12, 2010 at 02:44 PM.
  #3  
Old Aug 11, 2009, 10:45 AM
vasantib
 
3 posts · Aug 2009
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
  #4  
Old Aug 11, 2009, 01:07 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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>
  #5  
Old Aug 11, 2009, 06:19 PM
vasantib
 
3 posts · Aug 2009
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
  #6  
Old Aug 11, 2009, 06:48 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
  #7  
Old Jan 2, 2010, 01:14 AM
drunk8gods
 
12 posts · Jan 2010
Quote:
Originally Posted by Flynn
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?
  #8  
Old Jan 2, 2010, 04:56 AM
juggledad's Avatar
juggledad
 
23,626 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What version of Atahualpa and WP?
what is the url?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Jan 2, 2010, 10:01 AM
drunk8gods
 
12 posts · Jan 2010
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.
  #10  
Old Jan 3, 2010, 04:35 PM
drunk8gods
 
12 posts · Jan 2010
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.
  #11  
Old Jan 3, 2010, 05:05 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Look at "ATA>Style & edit HEADER AREA>Logo Image:Styling". You can put margins in there to move the image where you need to.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #12  
Old Jan 3, 2010, 05:08 PM
drunk8gods
 
12 posts · Jan 2010
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?
  #13  
Old Jan 3, 2010, 05:35 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #14  
Old Jan 3, 2010, 06:19 PM
drunk8gods
 
12 posts · Jan 2010
Quote:
Originally Posted by lmilesw
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?
  #15  
Old Jan 3, 2010, 06:28 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #16  
Old Jan 3, 2010, 06:33 PM
drunk8gods
 
12 posts · Jan 2010
Quote:
Originally Posted by lmilesw
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.
  #17  
Old Jan 3, 2010, 08:24 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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 {
padding-bottom:20px;
}
.tagline {
display:block;
margin:25px -300px -20px -565px;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #18  
Old Jan 3, 2010, 09:26 PM
drunk8gods
 
12 posts · Jan 2010
Quote:
Originally Posted by lmilesw
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 {
padding-bottom:20px;
}
.tagline {
display:block;
margin:25px -300px -20px -565px;
}
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.
  #19  
Old Jan 3, 2010, 09:44 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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".
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #20  
Old Jan 3, 2010, 10:19 PM
drunk8gods
 
12 posts · Jan 2010
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.
  #21  
Old Jan 4, 2010, 05:07 AM
juggledad's Avatar
juggledad
 
23,626 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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 {
background: #cccccc;
}
to match the color of the tag background
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #22  
Old Jan 4, 2010, 07:18 AM
drunk8gods
 
12 posts · Jan 2010
Quote:
Originally Posted by juggledad
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 {
background: #cccccc;
}
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.
  #23  
Old Mar 12, 2010, 08:49 AM
mirjamijtsma
 
19 posts · Mar 2010
Send a message via Skype™ to mirjamijtsma
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/

Last edited by mirjamijtsma; Mar 17, 2010 at 08:12 PM. Reason: url changed

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to make logo area on beside or overlay header image? phuongnv Header configuration & styling 16 Mar 17, 2011 06:09 PM
Setting Up Adsense in the Header/Logo Area bill_g Atahualpa 3 Wordpress theme 2 Jan 18, 2010 01:06 PM
How to Switch the Logo Area and Header Image tim5046 Header configuration & styling 1 Jun 2, 2009 12:43 PM
adding more than one pic/logo to the header area PJK Header configuration & styling 1 May 31, 2009 06:50 PM
Putting a image background in the header's logo area kirinafa Header configuration & styling 2 Feb 18, 2009 04:08 PM


All times are GMT -6. The time now is 12:52 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.