[SOLVED] Center Header Widget?
 

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

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

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
(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:
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.

Hey Juggledad, I'm not really sure where to put this. In themes > style.css, or css.php ?

the CSS goes in ATO->Add HTML/CSS Inserts->CSS Inserts

Thanks, I put it there and re-activated the theme a couple of times. Maybe it will take a little time to show up?

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;
}

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

julia, I don't see the css insert. Where did you put it and what did you exactly use (please do a copy/paste)

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!

your widget is header_widget but in the CSS it is Header_Widget

Change the CSS so it is all lowercase

Ok, everything is lowercase but all on the right...and not in the center.

Could it be something else?

thanks

it's because you are using a big image is a small space. Change the 'width:30%;' to 'width:80%;'

It works! Thank you

Fantastic! Thanks Juggledad....Donation is in!

Chris