I have successfully created 2 custom widget areas in my header for a logo (left) and a login widget (right). The statement for that is:

<?php bfa_widget_area('name=logoLogin&cells=2&align_1=9& align_2=4&width_1=500&width_2=190&before_widget=<d iv id="%1$s" class="header-widget%2$s">&after_widget=</div>'); ?>

I now decided that I need another row under this to hold 2 other widgets. When complete, the top row is logo image and to the right, a text area. Under this is to the left, a larger text area and to the right of that, the login widget.

The problem is that the new widget areas (for the second row) appear to the right of my layout - and in line with the bottom of my top row widget areas. The problem seems it may be a vertical sizing issue whereby the new widget areas don't have room underneath the first 2 (the first row) so they are being pushed out to the right.

The statement I'm using is the following (and I've tried using areas 7 and 5 as well as these, 8 & 4)

<?php bfa_widget_area('name=logoLogin&cells=4&align_1=9& align_2=3&align_3=8&align_4=4&width_1=500&width_2= 300&width_3=610&width_4=190&before_widget=<div id="%1$s"class="header-widget %2$s">&after_widget=</div>'); ?>

Has anyone run into this? I guess I need to override the height property? I also expanded my layout width way out as a test and no change so that's not the problem..

Thanks
Thomas

The align property is the text alignment in the cells and not the positioning of the cells. For instance if you wanted to have the text in all the cells aligned in the center at the top you would just use &align=1 but if you wanted to have a particular cell's text aligned differently then you would also use &align_1=9 for example if you wanted to align the first cell's text on the top left.

I your case I would try creating two separate two cell widget areas. I have done this with success.

Larry - Thanks..worked like a charm. In reading over the examples, I do see how "align" refers to what is inside the cell but it seems to indicate that align_1, align_2, etc. up to to align_9 dictates the position of the cell as a whole in relation to the other cells (and not the position of the text or whatever is inside the cells as "align" does). That's why I thought that choosing 9 & 3 for the first row and then 8 & 4 for the second (row) would work (using "align_").

Anyway, it's totally working now but do I have the concept of align_(1-9) correct? I think I'm missing something..

Thanks!
Thomas

Remember, each new widget area can contain more than one widget. It is an area.
If you use align it sets all areas that way, if you only have two cells, you can only use align_1 and align_2

OK - Thanks all - The next related issue though is one that is always cropping up and I'm not quite getting it and I'm really frustrated that I can't seem to find the answer with some basic searches. This could be a new thread..In fact I think there needs to be a sticky on this. I don't know where to put it so as it relates to the next issue I'm facing with regard to this post, I'll put it here.

Once you graduate from the basic menus in ATA and forage onward to do more customization, this is a ubiquitous issue with regard to ATA - that is "fireflying" CSS on pages and converting that code to CSS Inserts in ATA. I'm seriously frustrated because I know these are simple rules that exist somewhere but after the many accumulated hours of hunting for them - I just don't have any more time to waste. I don't have a full day to devote to reading through w3schools, every related ATA post, etc. - I'm really baffled that there isn't more on this somewhere - could be me though - I may be missing something.

Example:
I would like to add a border on one or more of the new custom widgets in the previous posts. Here is the info on one of the widget areas (and thanks Juggledad - you helped me realize that in fact it is an area that can hold multiple widgets so that helped)

td id = "headertop_2"
textwidget div id = text-6
class = header-widgetwidget_text

I realize the table data encompasses the widget and I have this great snippet from a Juggledad post:

"when you create a CSS Selector and use a class (ie 'div.widget') you assign the styling to ALL div's with that class. if you want to isolate the style to one element, you need to be more specific. You can use the id (ie 'div#execphp-3') - note the use of teh '#'? that indicates the ID vers the class that uses a period."

I have tried:

td#headertop_2 {
border: 2px #cccccc;
}

#headertop_2 {
border: 2px #cccccc;
}

div#text-6 {
border: 2px #cccccc;
}

#text-6 {
border: 2px #cccccc;
}


div#headertop {
border 2px: #000000;
}

div#textwidget {
border 2px: #cccccc;
}

and others

nothing..

I can't tell you how great my life would be if someone could provide me with the basic rules to translate found code to inserts - I would be a very happy camper.

Thanks
Thomas

What is the URL for your site? That would help figure this out.

you should specify the style. Try

td#headertop_2 div#text-6 {
border: 2px solid #cccccc;
}

CSS is tricky, there is no one solution, just like any other language, the more you use it, but better you become and more you know how to use it.

Larry - Thanks. I was getting ready to send you a link when I saw Juggledad's post which of course worked! I had tried a statement that was so close to that..

Thanks JD!