Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

[SOLVED] Center Header Widget?


  #1  
Old Nov 30, 2009, 12:18 PM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
Hey guys,

This is how I set up my header area for now, but I'm a little stumped on how to center this widget.

%bar1 %image <?php bfa_widget_area('name= Header Widget'); ?> %pages %bar2

It's an add in the header. It's currently sitting on the left - could you let me know where in the theme options/which theme option... I can make the change so it is centered on my page.

Thanks,
Chris
  #2  
Old Nov 30, 2009, 01:52 PM
Julia
 
14 posts · Oct 2009
Hi,

I have the same problem.

I put this code
%logo <?php bfa_widget_area('name=My new widget area'); ?> %image

but the widget is at the left while I want it center.

Can somebody give me the exact code to put it to have the new widget centered in the logo area?

Thank you
  #3  
Old Nov 30, 2009, 02:56 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
When you only define one widget area (that's what you get when you use the minimal options) the widget area is the entire with of the section it is placed in. Since you have defined a widget in the header area, the widget area spans the entire width of the page.

But you want it centered and not spread across the page!! How do you do this? The answer...CSS!

You can use CSS on the new widget areas just like everywhere else, so lets say you added the following to the header area
HTML Code:
<?php bfa_widget_area('name=Header_Widget'); ?>
(NOTE: I named the widget with an underscore to make it easier to address it later)
And you want the widget to be in the center and only take up 30% of the page width, here is what you would code as your CSS Insert:
HTML Code:
div#header_widget {
width: 30%;
margin-right: auto;
margin-left: auto;
}
this will keep the widget centered and only take up 30% of the page space no matter how wide it is. You may want to make this a fixed width depending on what you are using the widge for. Have fun.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Nov 30, 2009, 03:21 PM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
Hey Juggledad, I'm not really sure where to put this. In themes > style.css, or css.php ?
  #5  
Old Nov 30, 2009, 03:38 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
the CSS goes in ATO->Add HTML/CSS Inserts->CSS Inserts
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Nov 30, 2009, 03:49 PM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
Thanks, I put it there and re-activated the theme a couple of times. Maybe it will take a little time to show up?
  #7  
Old Nov 30, 2009, 03:59 PM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
It's hasn't worked so far...the area in red......

div#header_widget {
width: 30%;
margin-right: auto;
margin-left: auto;
}


Has to be the same name as this right?

%bar1 %image <?php bfa_widget_area('name=Header Widget'); ?> %pages %bar2


So it wold look like this?

div#Header Widget {
width: 30%;
margin-right: auto;
margin-left: auto;
}
  #8  
Old Nov 30, 2009, 04:02 PM
Julia
 
14 posts · Oct 2009
Thanks, will surely donate.

However, now it's completly on the right side.

I did everything you said.
It used to be on the left side and now instead of being in the center, it's too far right.

www.alamodemontreal.com
  #9  
Old Nov 30, 2009, 04:18 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
julia, I don't see the css insert. Where did you put it and what did you exactly use (please do a copy/paste)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Nov 30, 2009, 04:36 PM
Julia
 
14 posts · Oct 2009
The insert I put is exactly the one you mentioned

div#Header_Widget {
width: 30%;
margin-right: auto;
margin-left: auto;
}

The name of my widget is also Header_Widget.

Now, it no longer at the right. The widget is sometime in the center and other times when I click on the page it's on the left.

Does it need time or is it a bug?

www.alamodemontreal.com

thanks!
  #11  
Old Nov 30, 2009, 05:10 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
your widget is header_widget but in the CSS it is Header_Widget

Change the CSS so it is all lowercase
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Nov 30, 2009, 06:15 PM
Julia
 
14 posts · Oct 2009
Ok, everything is lowercase but all on the right...and not in the center.

Could it be something else?

thanks
  #13  
Old Nov 30, 2009, 07:24 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
it's because you are using a big image is a small space. Change the 'width:30%;' to 'width:80%;'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Nov 30, 2009, 08:07 PM
Julia
 
14 posts · Oct 2009
It works! Thank you
  #15  
Old Nov 30, 2009, 09:48 PM
ChrisPanimation's Avatar
ChrisPanimation
 
68 posts · Nov 2009
Mississauga, ON
Fantastic! Thanks Juggledad....Donation is in!

Chris

Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
How can I get my logo in the center of the header area? vasantib Header configuration & styling 22 Mar 12, 2010 09:49 AM
[SOLVED] Center Text in Text Widget container kippiper Sidebars & Widgets 2 Nov 13, 2009 04:51 AM
[SOLVED] Can no longer set height of header image after adding header widget tfs Header configuration & styling 7 Oct 15, 2009 02:50 PM
Subscribe widget not opening in new window and won't center fredless Sidebars & Widgets 3 Jun 11, 2009 06:16 AM
help: trying to center a button in a text widget Shepherd Jim Sidebars & Widgets 2 Feb 15, 2009 07:45 PM


All times are GMT -6. The time now is 01:43 PM.


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