I'm sooooo close to getting the new horizontal widget area set up on my homepage, BUT I cannot figure out how to style it.

Or rather, I thought I knew how to style it -- by adding css in the Add HTML/CSS Inserts page of A's Options -- but haven't been able to change the CSS. By process of elimination, I'm thinking my problem is that I'm not calling the new areas by the correct ID or class.

The 2 new widgetized cells are called intro_area 1 and intro_area 2 on the Widget page. (I used this to create them: <?php bfa_widget_area('name=intro_area&cells=2&align_1=8 &align_2=8&width_1=690&width_2=240'); ?>)


To style the first cell, I've tried inserting

div.intro_area 1
{border: dotted 1px #000000;
font-family: trebuchet, helvetica, verdana, sans-serif;
background color: #9999FF;
}

and

.intro_area 1{
border: dotted 1px #000000;
font-family: trebuchet, helvetica, verdana, sans-serif;
background color: #9999FF;
}

and

div.intro_area 1
.widget {
border: dotted 1px #000000;
font-family: trebuchet, helvetica, verdana, sans-serif;
background color: #9999FF;
}


What am I doing wrong?!?

Oops, forgot this: The site I refer to is http://theagnonschool.org.

The name becomes an ID=... so you need DIV#intro.....
Also your missing the underscore so the underscore so you have
intro_area
intro_area_1 and
intro_area_2

Oh, bless you Juggledad, for your quick reply.

So should it be ?:

div#intro._area 1
{border: dotted 1px #000000;
font-family: trebuchet, helvetica, verdana, sans-serif;
background color: #9999FF;
}

With no period between div & the ID?

yes and no period after the word 'intro' and an underscore between 'area' and '1'
like this

div#intro_area_1 {
border: dotted 1px #000000;
font-family: trebuchet, helvetica, verdana, sans-serif;
background color: #9999FF;
}

Arrggghhh! It's not working. Here's what I have in my CSS Inserts text area:

/*Style new widget areas on homepage*/
div#top_widget_2 {
border: dotted 1px #FFFFFF;
font-family: trebuchet, helvetica, verdana, sans-serif;
background color: #9999FF;
}

div#top_widget_1 {
border: dotted 1px #000000;
font-family: trebuchet, helvetica, verdana, sans-serif;
background color: #9999FF;
}

div#intro_area_1 {
border: dotted 1px #000000;
font-family: trebuchet, helvetica, verdana, sans-serif;
background color: #9999FF;
}

div#intro_area_2 {
border: dotted 1px #000000;
padding-right: 10px;
font-family: trebuchet, helvetica, verdana, sans-serif;
background color: #9999FF;
}


Is there a plugin or wordpress setting that is known to override or interfere with code placed in this section? I don't think I've ever been able to get any CSS I've placed here to work well.

I bad, they are not DIV's they are TD's so it should be td#intro.....

(...mumble...I veeerrrry bad...sigh)

LOL. And here I was smacking myself in the head for my (yet unspecified but undeniable) stupidity at not being able to make it work.

Thanks for checking back and giving me the fix for it.