Title: Widget CSS
Last modified: August 21, 2016

---

# Widget CSS

 *  [cubaton3](https://wordpress.org/support/users/cubaton3/)
 * (@cubaton3)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/widget-css-6/)
 * Hello, I’m creating my WordPress template from scratch, this is the first time
   I make a template from scratch so far I’ve been going very well, but I’m having
   problems on my widgets CSS, I’ve searched and searched over Google and WordPress
   support forum but I can’t seem to find anything that helps me.
 * I want to style my theme Widgets or Sidebar, I want to put the title of the widget
   a background and the container of the widget a background, please help me.
 * This is my sidebar registration on functions.php
 *     ```
       // Sidebar Widget
       if ( function_exists('register_sidebar') )
       register_sidebar(array('name'=>'Widgets',
       	'before_widget' => '<li>',
       	'after_widget' => '</li>',
       	'before_title' => '<h3>',
       	'after_title' => '</h3>',
       ));
       ```
   
 * This is my sidebar.php
 *     ```
       <div id="sidebar">
          <ul>
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?><?php endif; ?>
          </ul>
       </div>
       ```
   
 * This is my CSS for the sidebar
 *     ```
       #sidebar, h3 {
       	color:#FFF;
       	background-color:#191919;
       	height:auto;
       	width:340px;
       	float:right;
       }
   
       #sidebar a {
       	color:#F7F7F7;
       	text-decoration:none;
       }
       #sidebar a:hover {
       	color:#CCC;
       }
   
       #sidebar li, ul {
          list-style: none;
       }
       ```
   
 * Please help me, thanks.

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [ronangelo](https://wordpress.org/support/users/ronangelo/)
 * (@ronangelo)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/widget-css-6/#post-4574484)
 * You should add a class on the widgets and their titles
 *     ```
       register_sidebar( array(
          'id' 		=> 'widgets_sidebar',
          'before_widget'      => '<li id="%1$s" class="widget %2$s">',
          'after_widget' 	=> '</li>',
          'before_title' 	=> '<h3 class="widget-title">',
          'after_title' 	=> '</h3>') );
       ```
   
 * Call it like this on the template:
 *     ```
       <div id="sidebar">
          <ul>
             <?php if ( is_active_sidebar('widgets_sidebar') ) : ?>
                <?php dynamic_sidebar('widgets_sidebar'); ?>
             <?php endif; ?>
          </ul>
       </div>
       ```
   
 * Then you can add background like this (just a sample):
 *     ```
       #sidebar .widget {
           background: #FFF;
       }
   
       #sidebar .widget .widget-title {
           background: #333;
       }
       ```
   
 *  Thread Starter [cubaton3](https://wordpress.org/support/users/cubaton3/)
 * (@cubaton3)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/widget-css-6/#post-4574633)
 * Thanks a lot, you did really help me, im glad, really, THANKS!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Widget CSS’ is closed to new replies.

## Tags

 * [background](https://wordpress.org/support/topic-tag/background/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [title](https://wordpress.org/support/topic-tag/title/)
 * [widget](https://wordpress.org/support/topic-tag/widget/)

 * 2 replies
 * 2 participants
 * Last reply from: [cubaton3](https://wordpress.org/support/users/cubaton3/)
 * Last activity: [12 years, 3 months ago](https://wordpress.org/support/topic/widget-css-6/#post-4574633)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics