Widget area IDs in which AW is effective

I am referring to this field, of course:

Widget area IDs in which AW is effective (optional, comma delimited)

When you use this parameter, the ‘Class of Widgets’ parameter is still effective. And ‘text-8’ might fail, because it will act as ‘#text-8 .widget’ selector. You should put IDs of parent container for this parameter.

You can use the ‘Custom Widget Selectors’ parameter, instead. It’s a selector string for your widgets, like:

#secondary .widget, #content-sidebar .widget

Maybe, ‘#text-8, #linkcat-452’ will work for you. Additionally, when you use ‘Custom Widget Selectors’, you need to style heading icons by yourself like below.

#text-8 .hm-swe-expanded
{
    background: url(https://server/wp-content/plugins/standard-widget-extensions/images/minus.gif) no-repeat left center;
}

#text-8 .hm-swe-collapsed
{
    background: url(https://server/wp-content/plugins/standard-widget-extensions/images/plus.gif) no-repeat left center;
}

I’m trying to change the GUI and make these things more understandable in the future release.

After more than a week of silence, I’d like to mark this as resolved.

While your suggestions here have helped me to get the collapsing in my theme to work, I can’t figure out how to get the heading icons styled. I’ve tried your solution here, as well as those on your plugin website, with some adaptations.
I’m using WooThemes Canvas with a Widget Area.
Any help on how I could get those heading icons to show would be greatly appreciated! Thank you.

Thank you for still using my plugin.

If you could show me your site, I would be able to give you more details. If you don’t like disclose it in a public forum, you can contact me via e-mail (blogger323 at gmail.com) or twitter (@blogger323).

If anyone stumbles across this and finds this useful, here’s a css snippet to use FontAwesome icons instead of image ones. Just choose none in the Header Icons option and this snippet to your theme’s custom CSS (This example assumes you already have FontAwesome enqueued):

.hm-swe-collapsed:after {
  font-family: FontAwesome;
  font-size: 16px;
  float: right;
  content: "?";}
.hm-swe-expanded:after {
  font-family: FontAwesome;
  font-size: 16px;
  float: right;
  content: "?";}

If you want to use ASCII instead of unicode characters, you can find the respective codes on the FontAwesome icon page for your chosen icon and use it with a backslash like so (as above, but in ASCII):

.hm-swe-collapsed:after {
  font-family: FontAwesome;
  font-size: 16px;
  float: right;
  content: "\f196";}
.hm-swe-expanded:after {
  font-family: FontAwesome;
  font-size: 16px;
  float: right;
  content: "\f147";}

Enjoy!