Styling new widget areas
 

For a new widget area written like this:

<?php bfa_widget_area('name=Header Widget Area&cells=1&align=8&width_1=470'); ?>

How do I write the correct CSS insert to add margin-left:40px; ?

Basically, I don't want the widget ALL the way to the left (as set by align=8) and want to make some space on the left.

If you look into the source code you'll see the ID's and classes of the various elements

<div id="header_widget_area" class="bfa_widget_area">

</div>

You can apply the styling on the ID

div#header_widget_area {
...
}

or the class

div.bfa_widget_area {
...
}

Thank you Flynn for the help.

I was able to write the correct CSS insert like so:

div#text-8 {
margin-left: 40px;
}

I read the source code as you suggested and found that the new widget area feature is not using the widget names for the div IDs -- instead it is using "text-2", "text-3", etc.

Was it intended to be that way? If not, hopefully this is a helpful heads-up.

EDIT: After more thought, the "text-#" div ID is because I am using text widgets inside the new widget areas right? I tried calling #header_widget_area and it didn't work...

You can set a margin-left on the widgets or a padding-left on the widget are.

Both widgets and widget area should have ID's.

The ID of the widget is completely different from that of the widget area.

The ID of the widget will be set by the widget itself. The ID of the widget area will be built from the parameter that you used with the function bfa_widget_area(...)

But should be all in the source code of a browser-rendered page. I also suggest that you use Firebug, a very useful Firefox plugin

I need to stylize my newly added widgets as well. Which code file in the Editor section do you find the coding for the widget? Header.php? css.php?

You have to add a CSS insert in ATO (Atahualpa Theme Options) > Add HTML/CSS Inserts.

Thanks Wimbeldon. Worked perfectly!