Title: Help – Sidebar, CSS and Theme
Last modified: August 19, 2016

---

# Help – Sidebar, CSS and Theme

 *  [clcintx](https://wordpress.org/support/users/clcintx/)
 * (@clcintx)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/help-css-and-theme/)
 * I’ve downloaded a wordpress template and for some reason they have disabled the
   sidebar widgets. I have the widgets showing up and somewhat configured but can’t
   get them to look the way I want in the CSS & stylesheets. I would like for the
   featured section over on the left to look like the categories section at the 
   bottom. THANKS!!
 * Here is the blog [http://funkidsonlinegames.com/](http://funkidsonlinegames.com/)
 * Here is the stylesheet
 *     ```
       /* =======================================================================================================================
       =RESET
       ========================================================================================================================*/
   
       html,body,div,span,applet,object,iframe,
       h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,
       abbr,acronym, address,big,cite,code,del,
       dfn,em,font,img,ins,kbd,q,s,samp,small,
       strike,strong,sub,sup,tt, var,dd,dl,dt,
       li,ol,ul,fieldset,form,label,legend,
       table,caption,tbody,tfoot,thead,tr,th,td
       {
       	margin: 0;
       	padding: 0;
       	border: 0;
       	font-weight: normal;
       	font-style: normal;
       	font-size: 100%;
       	font-family: inherit;
       	text-align: left;
       }
   
       table
       {
       	border-collapse: collapse;
       	border-spacing: 0;
       }
   
       ol,ul
       {
       	list-style: none;
       }
   
       q:before,q:after, blockquote:before,blockquote:after
       {
       	content: "";
       }
   
       a
       {
       	text-decoration: none;
       }
   
       /* =======================================================================================================================
       =CLEAR FLOATS
       ========================================================================================================================*/
       .container:after,
       .main:after,
       .column:after,
       .sub-container:after,
       .navigation:after,
       .masthead-container:after,
       .search-container:after
   
       {
       	content: ".";
       	display: block;
       	clear: both;
       	height: 0;
       	font-size: 0;
       	line-height: 0em;
       	visibility: hidden;
       	overflow: hidden;
       }
   
       /* =======================================================================================================================
       =GLOBAL STYLES
       ========================================================================================================================*/
   
       body
       {
       	background: #46381d url(images/body.jpg) repeat;
       	color: #333;
       	font-family: "lucida sans unicode", "lucida grande", verdana, arial, helvetica, sans-serif;
       }
   
       h1, h2, h3, h4, h5, h6, ul, ol, dl,
       pre, p, blockquote, table, img
       {
       	padding-bottom: .5em;
       }
   
       h1, h2, h3, h4, h5, h6, strong, em
       {
       	font-weight: bold;
       }
   
       h1, h2, h3, h4 {
       	font-family:Georgia, Times, serif;
       }
   
       h1
       {
       	font-size: 1.6em;
       }
   
       h2
       {
       	font-size: 1.5em;
       }
   
       h3
       {
       	font-size: 1.4em;
       }
   
       h4
       {
       	font-size: 1.3em;
       }
   
       a:link, a:visited
       {
       	color:#a6431c;
       }
   
       a:hover, a:focus
       {
       	color:#828415;
       }
   
       p
       {
       	font-size: 1em;
       }
   
       /* =======================================================================================================================
       =LAYOUT
       ========================================================================================================================*/
   
       .container {
       	background:url(images/container_bg.jpg) repeat-x;
       	position:relative;
       }
   
       /* =search */
       .search-container {
       	width:990px;
       	height:39px;
       	float:right;
   
       }
       .search {
       	background:url(images/search_container.gif) no-repeat;
       	float:right;
       	width:380px;
       	height:28px;
       }
   
       .search div {
       	margin-left:100px;
       }
   
       .search input.txt {
       	background:transparent;
       	border:0;
       	width:200px;
       	vertical-align:middle;
       	margin-right:15px;
       	color:#888;
       }
   
       .search input.btn {
       	vertical-align:middle;
       }
   
       /* end search */
   
       .masthead-container {
       	height:302px;
       	background:url(images/boy.jpg) no-repeat left top;
       	width:990px;
   
       }
   
       /* =logo */
   
       h1.logo {
       	float:left;
       	margin:20px 0 0 284px;
       	width:305px;
       	background:url(images/logo.png) no-repeat;
   
       }
   
       h1.logo a {
       	display:block;
       	width:305px;
       	height:75px;
       	text-indent:-999em;
       	overflow:hidden;
       }
   
       /* end logo */
   
       /* =tools */
   
       .tools {
       	width:300px;
       	padding:26px 0 0 30px;
       	float:right;
       }
   
       .tools li {
       	list-style:none;
       	float:right;
       }
   
       .tools li a {
       	display:block;
       	text-indent:-999em;
       	overflow:hidden;
       }
   
       .tools li.rss {
       	padding-right:15px;
       }
   
       .tools li.rss a {
       	background:url(images/rss.gif) no-repeat;
       	width:65px;
       	height:65px;
       }
   
       .tools li.rss a:hover {
       	background-position:0 -65px;
       }
   
       .tools li.email a {
       	background:url(images/email.gif) no-repeat;
       	width:76px;
       	height:66px;
       }
   
       .tools li.email a:hover {
       	background-position:0 -66px;
       }
   
       /* =left content */
   
       .asides {
       	width:365px;
       	float:left;
       	margin-bottom:10px;
       }
   
       /* =navigation */
   
       .asides .navigation {
       	background:url(images/navigation_bg.gif) repeat-x top;
       	height:57px;
       	margin-bottom:10px;
       	position:relative;
       }
   
       .asides .navigation .edge-nav {
       	background:url(images/nav_edge.png) no-repeat;
       	width:41px;
       	height:57px;
       	position:absolute;
       	bottom:0;
       	right:0;
       }
   
       .asides .navigation li {
       	float:left;
       }
   
       .asides .navigation a {
       	height:57px;
       	display:block;
       	text-indent:-999em;
       }
   
       .asides .navigation a.home {
       	background:url(images/home.gif) no-repeat;
       	width:71px;
       }
   
       .asides .navigation a.about {
       	background:url(images/about.gif) no-repeat;
       	width:73px;
       }
   
       .asides .navigation a.archives {
       	background:url(images/archives.gif) no-repeat;
       	width:95px;
       }
   
       .asides .navigation a.contact {
       	background:url(images/contact.gif) no-repeat;
       	width:83px;
       }
   
       .asides .navigation a.home:hover,
       .asides .navigation a.about:hover,
       .asides .navigation a.archives:hover,
       .asides .navigation a.contact:hover {
       	background-position:0 -57px;
       }
   
       /* =column one */
   
       .asides .one {
       	background:url(images/asides.jpg) repeat;
       	width:340px;
       	margin:0 10px;
       	padding:10px 0;
       }
   
       /* =featured */
   
       .asides h2.featured {
       	background:url(images/featured_h2.png) no-repeat;
       	text-indent:-999em;
       	display:block;
       	padding:0;
       	margin-left:10px;
       	height:34px;
       }
   
       .asides .featured-post {
       	padding:10px;
       }
   
       .asides .featured-post h2 a {
       	background:url(images/dash_green.gif) repeat-x bottom;
       	color:#c6c80e;
       	display:block;
       	padding-bottom:6px;
   
       }
   
       .asides .featured-post h2 a:hover {
       	background:url(images/dash_orange.gif) repeat-x bottom;
       	color:#f46229;
   
       }
   
       .asides .featured-post p {
       	color:#bfba8b;
       	font-size:.8em;
       	line-height:1.5em;
       }
   
       .asides .featured-post p.meta {
       	font: .7em georgia, times, serif;
       	color:#9d986c;
       	letter-spacing:1px;
       }
   
       .asides .featured-post p.more a {
       	background:url(images/arrow_orange.gif) no-repeat 0 5px;
       	padding-left:15px;
       	color:#f46229;
       }
   
       .asides .featured-post p.more a:hover {
       	background:url(images/arrow_lightgreen.gif) no-repeat 0 5px;
       	color:#c6c80e;
       }
   
       .asides .featured-post img {
       	width:300px;
       	padding:6px;
       	background:#6f5931;
       	border:2px dashed #826a3e;
       }
   
       .main {
       	margin:0;
       	float:left;
       }
   
       .column {
       	float:left;
       }
   
       /* = main column */
   
       .content {
       	float:left;
       	position:relative;
       	top:-150px;
       	margin-bottom:-140px;
       	width:613px;
       	padding:6px;
       	background:#fefced;
   
       }
       .container .edge {
       	background:url(images/two_edge.png) no-repeat;
       	position:absolute;
       	z-index:10;
       	left:926px;
       	top:152px;
       	width:64px;
       	height:60px;
       }
   
       .edge-alt {
       	background:url(images/two_blue_edge.png) no-repeat;
       	position:absolute;
       	z-index:20;
       	left:-6px;
       	bottom:-6px;
       	width:68px;
       	height:61px;
       }
   
       /* =column two */
   
       .content .two {
       	background:#f2f0de url(images/two_bg.jpg) repeat-y right;
       	padding:6px;
       	width:601px;
       	position:relative;
       }
   
       .content .two h2 a {
       	background:url(images/dash_brown.gif) repeat-x bottom;
       	color:#a6431c;
       	display:block;
       	padding-bottom:4px;
       }
   
       .content .two h2 a:hover {
       	color:#828415;
       }
   
       .content .two p {
       	font-size:.8em;
       	color:#45371b;
       	line-height:1.5em;
       	padding-bottom:20px;
       }
   
       .content .two p.meta {
       	color:#737b7f;
       	font:.9em georgia, times, serif;
       }
   
       .content .two p.more {
       	background:#e2e0ca;
       	display:inline;
       	padding:2px 6px 4px 6px;
       	font-size:.8em;
       }
   
       .content .two p.more:hover {
       	background:#f1e4dd;
       }
   
       .content .two p.more a {
       	background:url(images/arrow_green.gif) no-repeat 0 5px;
       	padding-left:15px;
       	color:#777907;
       }
   
       .content .two p.more a:hover {
       	background:url(images/arrow_red.gif) no-repeat 0 5px;
       	color:#a6431c;
       }
   
       .content .two h2.pagetitle {
       	padding-left:15px;
       }
   
       .content .two .entry {
       	margin-bottom:15px;
       	margin-left:110px;
       }
   
       .content .two .entry-extended {
       	padding:0 15px 15px 15px;
       	margin-bottom:30px;
       	width:570px;
       }
   
       .content .two .entry-extended li.cat-item {
       	padding-top:6px;
       	padding-left:10px;
       }
   
       .content .two .entry-extended .postmetadata p {
       	padding-bottom:0;
       }
   
       .content .two .entry-extended  p.meta {
       	padding-bottom:5px;
       }
   
       .content .two .entry-thumb {
       	width:82px;
       	height:82px;
       	padding:6px;
       	background:#dcd8c5;
       	border:1px solid #bcb99e;
       	float:left;
       }
   
       .content .two .entry-thumb img {
       	width:82px;
       	height:82px;
       	padding:0;
   
       }
   
       .content .navigation {
       	margin-top:50px;
       	margin-left:110px;
       }
   
       /* =commentlist */
   
       ol.commentlist li {
       	background:#e2e0ca;
       	background:url(images/commentlist.gif) repeat;
       	font-size:.8em;
       }
   
       ol.commentlist li.alt {
       	background:#e0e5d6;
       	background:url(images/commentlist_alt.gif) repeat;
       	margin-bottom:10px;
   
       }
   
       ol.commentlist li p {font-size:.9em !important; clear:left; padding:10px 20px 10px 40px;}
   
       img.avatar {float:left; margin-right:10px;}
   
       /* =contactform */
   
       form {font-size:.8em;}
       input {margin-bottom:5px;}
       input.short {margin-left:4px;}
       legend span {color:#888;}
       textarea {margin-bottom:10px;}
       fieldset label {float:left;}
   
       /* =below the fold */
   
       .sub-container {
       	float:left;
       	clear:both;
       	width:100%;
       }
   
       /* =first sub column */
   
       .sub-container .one {
       	width:342px;
       	margin-left:10px;
       }
   
       .sub-container ul li {
       	padding-bottom:20px;
       }
   
       .sub-container li ul {
       	background:none;
       	padding:0 0 10px 0;
       }
   
       .sub-container li {
       	padding:2px 12px;
       	font-size:.8em;
       }
   
       .sub-container li ul li {
       	padding:2px 12px;
       	font-size:100%;
       }
   
       .sub-container ul li ul li a {
       	background:url(images/dash_grey.gif) repeat-x bottom;
       	display:block;
       }
   
       .sub-container .category a {
       	color:#b4bdc2;
       	padding-bottom:4px;
       }
   
       .sub-container .category a:hover {
       	color:#fff;
       }
   
       .sub-container .category {
       	background:url(images/categories.jpg) no-repeat bottom;
       	padding-top:10px;
       	width:342px;
       	position:relative;
       	border-top:1px solid #333;
       }
   
       .sub-container .category .edge-cat {
       	background:url(images/cat_edge.png) no-repeat right bottom;
       	height:46px;
       	width:43px;
       	position:absolute;
       	bottom:0;
       	right:1px;
       }
   
       .sub-container .category li h2 {
       	background:url(images/categories_h2.gif) no-repeat;
       	width:140px;
       	height:27px;
       	text-indent:-999em;
       	overflow:hidden;
       }
   
       .sub-container .category ul {
       	padding:0;
       	height:20em;
       }
   
       .sub-container .category li ul {
       	background:none;
       }
   
       /* =second sub column */
   
       .sub-container .two {
       	width:288px;
       	margin-left:10px;
       }
   
       .sub-container .discussed {
       	background:url(images/discussed.jpg) no-repeat bottom;
       	padding-top:10px;
       	position:relative;
       	border-top:1px solid #333;
       }
   
       .sub-container .discussed .edge-dis {
       	background:url(images/green_edge.png) no-repeat right bottom;
       	height:45px;
       	width:44px;
       	position:absolute;
       	bottom:0;
       	right:0px;
       }
   
       .sub-container .discussed h2 {
       	background:url(images/discussed.gif) no-repeat;
       	width:201px;
       	height:22px;
       	padding-bottom:15px;
       	text-indent:-999em;
       	overflow:hidden;
       }
   
       .sub-container .discussed ul {
       	padding:0;
       	height:20em;
       }
   
       .sub-container .discussed li ul {
       	background:none;
       }
   
       .sub-container .discussed a {
       	background:url(images/dash_lightgreen.gif) repeat-x bottom;
       	color:#ece9d7;
       	padding-bottom:4px;
       }
   
       .sub-container .discussed a:hover {
       	color:#333;
       }
   
       /* =third sub column */
   
       .sub-container .three {
       	width:332px;
       	margin-left:10px;
       }
       .sub-container .links {
       	background:url(images/links.jpg) no-repeat bottom;
       	padding-top:10px;
       	position:relative;
       	border-top:1px solid #333;
       }
   
       .sub-container .links .edge-links {
       	background:url(images/red_edge.png) no-repeat right bottom;
       	height:48px;
       	width:50px;
       	position:absolute;
       	bottom:-1px;
       	right:0;
       }
   
       .sub-container .links h2 {
       	background:url(images/links.gif) no-repeat;
       	width:200px;
       	height:27px;
       	text-indent:-999em;
       	overflow:hidden;
       }
   
       .sub-container .links ul {
       	padding:0;
       	height:20em;
       }
   
       .sub-container .links li ul {
       	background:none;
       }
   
       .sub-container .links li ul li {
       	padding: 2px 12px;
       }
   
       .sub-container .links a {
       	background:url(images/dash_rose.gif) repeat-x bottom;
       	color:#ece9d7;
       	padding-bottom:4px;
       }
   
       .sub-container .links a:hover {
       	color:#333;
       }
   
       .copyright {clear:both; float:left; padding:12px; color:#8c6e31; font-size:.8em; }
       ```
   

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

 *  Thread Starter [clcintx](https://wordpress.org/support/users/clcintx/)
 * (@clcintx)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/help-css-and-theme/#post-1392400)
 * this is the code for that left column
 *     ```
       <div class="asides">
       	<div class="navigation">
       		<div class="edge-nav"></div>
   
       		<?php include ('navigation.php'); ?>
   
       	</div><!-- end navigation -->
       	<div class="column one">
       			<h2 class="featured">Featured</h2>
   
       		<ul>
       			<?php 	/* Widgetized sidebar, if you have the plugin installed. */
       					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
       			<li>
       				<?php include (TEMPLATEPATH . '/searchform.php'); ?>
       			</li>
   
       			<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
       			<li><h2>Author</h2>
       			<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
       			</li>
       			-->
   
       			<?php if ( is_404() || is_category() || is_day() || is_month() ||
       						is_year() || is_search() || is_paged() ) {
       			?> <li>
   
       			<?php /* If this is a 404 page */ if (is_404()) { ?>
       			<?php /* If this is a category archive */ } elseif (is_category()) { ?>
       			<p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>
   
       			<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
       			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
       			for the day <?php the_time('l, F jS, Y'); ?>.</p>
   
       			<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
       			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
       			for <?php the_time('F, Y'); ?>.</p>
   
       			<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
       			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
       			for the year <?php the_time('Y'); ?>.</p>
   
       			<?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
       			<p>You have searched the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
       			for <strong>'<?php the_search_query(); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p>
   
       			<?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
       			<p>You are currently browsing the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives.</p>
   
       			<?php } ?>
   
       			</li> <?php }?>
   
       			<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
   
       			<li><h2>Archives</h2>
       				<ul>
       				<?php wp_get_archives('type=monthly'); ?>
       				</ul>
       			</li>
   
       			<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>
   
       			<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
       				<?php wp_list_bookmarks(); ?>
   
       				<li><h2>Meta</h2>
       				<ul>
       					<?php wp_register(); ?>
       					<li><?php wp_loginout(); ?></li>
       					<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
       					<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
       					<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
       					<?php wp_meta(); ?>
       				</ul>
       				</li>
       			<?php } ?>
   
       			<?php endif; ?>
       		</ul>
   
       	</div><!-- end column -->
       </div><!-- end asides -->
       ```
   
 *  Thread Starter [clcintx](https://wordpress.org/support/users/clcintx/)
 * (@clcintx)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/help-css-and-theme/#post-1392672)
 * I’ve made a little progress, but it just has me stumped – is there a good place
   to quickly find a freelancer to fix it??

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

The topic ‘Help – Sidebar, CSS and Theme’ is closed to new replies.

 * 2 replies
 * 1 participant
 * Last reply from: [clcintx](https://wordpress.org/support/users/clcintx/)
 * Last activity: [16 years, 3 months ago](https://wordpress.org/support/topic/help-css-and-theme/#post-1392672)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics