Removing style for a WordPress widget in Artisteer

April 1, 2010

All I want to do is put an image on the bottom-right of my page, in the sidebar. Within WordPress, if I add the Text widget to my sidebar, it takes on the Artisteer theme’s style. This is by design. But, I don’t want any style at all. I just want the image to appear, centered.

How can I strip out the CSS style from a particular widget, then?

  1. Check the Artisteer theme file functions.php for this code:

    if (function_exists(‘register_sidebars’)) {
         register_sidebars(3, array(
              ‘before_widget’ => ‘<div id=”%1$s” >’.'<!— BEGIN Widget —>’,
              ‘before_title’ => ‘<!— BEGIN WidgetTitle —>’,
              ‘after_title’ => ‘<!— END WidgetTitle —>’,
              ‘after_widget’ => ‘<!— END Widget —>’.'</div>’

    <div id=”%1$s”> This code will give the widget’s containing DIV element an id value for use in the theme’s CSS. The value, here, is generated by WordPress and corresponds to the widget being used.    

  2. Add a widget to your page with the content to be displayed. In my case, I just put in some HTML for an image using the “Text” widget.
  3. View the source of your HTML and find the DIV container that references the widget. Mine looks like this:  <div id=”execphp-6″>
  4. Open the CSS file in the WordPress “Appearance” editor and jump to the bottom. Add style properties for the specific widget. With Artisteer, there are automatically-generated properties that need to be overrided. By referencing the id for my widget and the class for the Artisteer style, I can force my own style to display like this:

    div#execphp-6 {
         text-align: center;

  5. div#execphp-6 .art-Block-cc {
        background-color: #ababab;
        bottom: 0px;
        top: 0px;
        right: 0px;
        left: 0px;
        padding: 0px;

It took me way too long to figure this out, but it works well and I am very happy!! Now I can add style-free or custom-styled widgets wherever I want.