color-sidbarThe sidebars or widget areas in Artisteer all have a generic class assigned to them. This makes if difficult if not impossible to add additional style to just one widget area. An example would be if you wanted to create a theme that needed a unique header image for each widget area. There’s no way to isolate an individual widget.

Well, with just a small hack to the functions.php file you can add another class selector to every widget.

Find this bit of code in the functions.php…

if (function_exists('register_sidebars')) {
	register_sidebars(2, array(
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'
	));
}

And change it to this…

if (function_exists('register_sidebars')) {
	register_sidebars(2, array(
		'before_widget' => '<div class="widget_%2$s">' . '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->' . '</div>'
	));
}

What we’ve done is add a new class called “widget_%2$s”. The “%2$s” is WordPress code for the title of the widget. Now our Search widget is wrapper in a DIV named “widget_search” and our Category widget is called “widget_categories” etc.

The only thing left to do is create some CSS to add additional style to our newly named widgets. If you don’t do anything, the look won’t change.

Here’s the CSS to change the background color of each widget in the image above…

.widget_search .BlockHeader .l {
background-image:url();
background-color:#222E60;
}

.widget_categories .BlockHeader .l {
background-image:url();
background-color:#000000;
}

.widget_archives .BlockHeader .l {
background-image:url();
background-color:#FF4B33;
}

.widget_widget_meta .BlockHeader .l {
background-image:url();
background-color:#222E60;
}

If you are creating a header image with some fancy text in it and you don’t want to display the default text just add this additional CSS for each widget…

.widget_search .BlockHeader-text {
display:none;
}

I used Firebug in Firefox to locate the CSS for the block_header_image then added the new class in front of it to isolate it. The background image is empty because I had to override the default image to display a different color. You could just as easily put the path to a different image for each widget.

You now have the ability to change every aspect of just one widget with a very simple addition to the widget code.

Have fun and get stylin’

Comments are closed.

Awesome Themes



Genesis Framework for WordPress

Favorite Random Quotes

“A vote is like a rifle: its usefulness depends upon the character of the user.”

by Teddy Roosevelt