Append CSS Class to Widgets

Topics: Controls, Themes
Aug 27, 2008 at 3:57 PM
Edited Aug 27, 2008 at 4:24 PM
Upon the release of 1.4.5, I've started to create a theme for my website. Needing to make some different styles for individual widgets, I dove into the code to see how to add additional properties to the widgets to maintain individual styles. Now you could just use the automatic naming of the classes that is built into BE (i.e class="widget tagcloud"; class="widget newsletter"...etc.), but I wanted more control over css classes.

So instead of: <div class="widget administration" id="widget19baa5f6-49d4-4828-8f7f-018535c35f94">
You could have: <div class="widget_admin administration" id="widget19baa5f6-49d4-4828-8f7f-018535c35f94">

Then you could create indivual styles in your css:
<style type="text/css">
  width: 240px;
  background: url(css/images/widget.png) 0 top no-repeat scroll;
  margin-bottom: 20px;
  width: 240px;
  background: url(css/images/widget_admin.png) 0 top no-repeat scroll;
  margin-bottom: 10px;

the following files need to be edited in order to make this happen:


I will be making a tutorial on my website (as soon as I get my website done!! :) ). I think this would be a good addition to a future release.