Title: need simple CSS help
Last modified: August 19, 2016

---

# need simple CSS help

 *  [wildbug](https://wordpress.org/support/users/wildbug/)
 * (@wildbug)
 * [15 years, 10 months ago](https://wordpress.org/support/topic/need-simple-css-help-1/)
 * I am having trouble styling a widget. It seems like it should be pretty simple
   but I am not a programmer. Hoping someone can offer some guidance.
 * [**This is what I want it to look like.**](http://planetthrive.com/wp-content/uploads/2010/07/tabbedwidget.jpg)
 * [**This is what it currently looks like.**](http://planetthrive.com/) (scroll
   down to middle of right column)
 * Basically, I want the selected (active) content to share the background color
   with the hover and selected (active) tab. The whole things should sit on a background
   with a darker green color and rounded corners, which I want to create with a 
   [**bottom image**](http://planetthrive.com/wp-content/uploads/2010/07/tab_bottom.gif)
   and [**top image**](http://planetthrive.com/wp-content/uploads/2010/07/tab_top_2.gif).
 * Do I need to create new classes, and if so how/where do I put them? I tried a
   few different approaches but could not get it to work. Any help greatly appreciated.
 * I _think_ this is the bit of code in the php file that is related:
 *     ```
       $params[0]['before_widget'] = '<div id="tw-content-'. $widget_no .'-'. $id .'" class="tw-content">';
       				$params[0]['before_title'] = '<span style="display:none;">';
       				$params[0]['after_title'] =  '</span><h4 id="tw-title-'. $widget_no .'-'. $id .'" class="tw-title">' . $widget_title. '</h4>';
       				$params[0]['after_widget'] = '</div>';
       ```
   
 * Here are the related classes in the plugin’s CSS:
 *     ```
       /* General */
   
       .tw-content { display:block; float:left; margin-left:12px; width:95%; background-color:#b7d869; }
       .tabbed-widget { float:left; width:100%; border:none; } 
   
       /* Tabbed  */
   
       .tabbed-widget .ui-tabs-hide { display:none; }
   
       .tabbed-widget .ui-state-active a { font-weight:bold; text-decoration:none; background: #fa8d88;
       	color: #75ba3d;
       	padding: 0px 8px 0px 8px;
       	}
       .tabbed-widget .ui-tabs .ui-tabs-nav { float:left; width:100%; clear:both; margin: 0px 0px 0px 3px; padding:0; }
   
       .tabbed-widget .ui-tabs .ui-tabs-nav li { display:block; float:left; width:auto; }
   
       .tabbed-widget .ui-tabs li.ui-tabs-selected a { background: #fa8d88;
       	color: #75ba3d;
               font-weight: bold;
                text-decoration:none; }
   
       .tabbed-widget .ui-tabs .ui-tabs-nav li a:hover {
       	background: #fa8d88;
       	color: #75ba3d;
               font-weight: bold;
       	}
   
       .tabbed-widget .ui-tabs .ui-tabs-nav li a {
       	background: #75b93c;
       	color: #c2e047;
       	display: block;
       	font-family: Arial, Tahoma, Verdana;
       	font-size: 15px;
       	font-weight: bold;
       	padding: 3px 8px 3px 8px;
       	text-decoration: none;
       	}
       ```
   

The topic ‘need simple CSS help’ is closed to new replies.

## Tags

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 0 replies
 * 1 participant
 * Last reply from: [wildbug](https://wordpress.org/support/users/wildbug/)
 * Last activity: [15 years, 10 months ago](https://wordpress.org/support/topic/need-simple-css-help-1/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics