2 replaced http://wordpress.stackexchange.com/ with https://wordpress.stackexchange.com/
source | link

I solved it using some CSS, similar to my trick to highlight my own widgetshighlight my own widgets. The sidebar drop areas are div's with the class widgets-sortable and they have the id of your sidebar. Your widgets are div's with class widget, and and id of the form widget-[global_counter]_[widget_key]-[widget_id]. You can combine these to highlight correct or wrong combinations.

For example, I have a sidebar called footer that should only contain wide widgets. These widgets are recognizable because their ID includes -wide-. I want these in green, and all other ones in red with a strike through.

add_action('admin_print_styles-widgets.php', 'print_widget_hint_style');
function print_widget_hint_style()
{
    echo <<<EOF
<style type="text/css">
/* Less specific rule for all widgets */
div.widgets-sortables[id*=-footer] div.widget .widget-title
{
    color: red;
    text-decoration: line-through;
}

/* More specific rule for correct widgets */
div.widgets-sortables[id*=-footer] div.widget[id*=-wide-] .widget-title
{
    color: green;
}
</style>
EOF;
}

I solved it using some CSS, similar to my trick to highlight my own widgets. The sidebar drop areas are div's with the class widgets-sortable and they have the id of your sidebar. Your widgets are div's with class widget, and and id of the form widget-[global_counter]_[widget_key]-[widget_id]. You can combine these to highlight correct or wrong combinations.

For example, I have a sidebar called footer that should only contain wide widgets. These widgets are recognizable because their ID includes -wide-. I want these in green, and all other ones in red with a strike through.

add_action('admin_print_styles-widgets.php', 'print_widget_hint_style');
function print_widget_hint_style()
{
    echo <<<EOF
<style type="text/css">
/* Less specific rule for all widgets */
div.widgets-sortables[id*=-footer] div.widget .widget-title
{
    color: red;
    text-decoration: line-through;
}

/* More specific rule for correct widgets */
div.widgets-sortables[id*=-footer] div.widget[id*=-wide-] .widget-title
{
    color: green;
}
</style>
EOF;
}

I solved it using some CSS, similar to my trick to highlight my own widgets. The sidebar drop areas are div's with the class widgets-sortable and they have the id of your sidebar. Your widgets are div's with class widget, and and id of the form widget-[global_counter]_[widget_key]-[widget_id]. You can combine these to highlight correct or wrong combinations.

For example, I have a sidebar called footer that should only contain wide widgets. These widgets are recognizable because their ID includes -wide-. I want these in green, and all other ones in red with a strike through.

add_action('admin_print_styles-widgets.php', 'print_widget_hint_style');
function print_widget_hint_style()
{
    echo <<<EOF
<style type="text/css">
/* Less specific rule for all widgets */
div.widgets-sortables[id*=-footer] div.widget .widget-title
{
    color: red;
    text-decoration: line-through;
}

/* More specific rule for correct widgets */
div.widgets-sortables[id*=-footer] div.widget[id*=-wide-] .widget-title
{
    color: green;
}
</style>
EOF;
}
1
source | link

I solved it using some CSS, similar to my trick to highlight my own widgets. The sidebar drop areas are div's with the class widgets-sortable and they have the id of your sidebar. Your widgets are div's with class widget, and and id of the form widget-[global_counter]_[widget_key]-[widget_id]. You can combine these to highlight correct or wrong combinations.

For example, I have a sidebar called footer that should only contain wide widgets. These widgets are recognizable because their ID includes -wide-. I want these in green, and all other ones in red with a strike through.

add_action('admin_print_styles-widgets.php', 'print_widget_hint_style');
function print_widget_hint_style()
{
    echo <<<EOF
<style type="text/css">
/* Less specific rule for all widgets */
div.widgets-sortables[id*=-footer] div.widget .widget-title
{
    color: red;
    text-decoration: line-through;
}

/* More specific rule for correct widgets */
div.widgets-sortables[id*=-footer] div.widget[id*=-wide-] .widget-title
{
    color: green;
}
</style>
EOF;
}