Change in the sidebar

Question

Hello!

Wondering what the piece of code I can use to change the look of my sidebar for example how "categories" "tag clouds" and so put themselves in boxes? Right now many of them flush with the box (right), has been the center but it was not pretty. Does not own any idea what it might be to change, it is in the style sheet or in the sidebar for example?

Using this theme: http://wp-themes.com/colors/?TB_iframe=true

have tested with padding like this: .widget { margin-bottom:12px; padding: 5px; }

but without success.

Suggestions on how I can fix this? I am a noob in this is also not very good at English but give it a try anyway. ;)

Style.css

     Sidebar Styles
====================================================================================================  ========================================
*/
#sidebarLayout {width:228px; float:left; margin-left:15px; margin-top:1px;}
.widget { margin-bottom:12px;}
.wdTitle {height:38px; width:228px; background:url(layout/wdTitleBg.png);}
.wdTitle h2 {color:#FFFFFF; font-size:10pt; font-weight:400; line-height:34px; margin-left:15px;}
.wdContent {background:#e1e5e7; width:227px; margin-left:1px; padding-bottom:30px; padding-top:3px;
line-hight:100%;}
.wdContent li:hover {no-repeat;}
.wdContent li {line-height:15px; height:35px; padding-left:25px; margin:1.5px 0px;}
.wdContent ul li ul { display:none; }
.wdFooter {height:4px; background:url(layout/wdFooterBg.png); width:227px; margin-left:1px;}
.wicon {width:34px; height:24px; background:url(layout/widgetIcon.png) no-repeat; float:left; margin-right:2px;}
/* 

Sidebar.php:

    <div id="sidebarLayout">

<div class="widget">
 <div class="wdTitle">
  <h2>Sök?</h2>
 </div>
 <div class="wdContent">
  <div class="icon" id="searchIcon"></div>
   <?php get_search_form(); ?>
  </div>
 <div class="wdFooter"><!-- .wdFooter for design only --></div>
</div>

<!-- <?php if ( function_exists('wp_tag_cloud') ) : ?>
<div class="widget">
 <div class="wdTitle">
  <h2>Etikettmoln</h2>
 </div>
 <div class="wdContent">
  <div>
   <div id="etikettmoln">
    <?php $tags = wp_tag_cloud('orderby=count&order=RAND'); ?>
   </div>
  </div>
 </div>
 <div class="wdFooter"></div>
</div>
<?php endif; ?> -->

 <?php if(!function_exists("dynamic_sidebar") || ! dynamic_sidebar('sidebar')) : ?><?php endif;?>
</div>

I use Wordpress for those of you who did not understand it.

Thanks for any help!

Answer 1

To change what your theme looks like, you must modify the style.css file in the theme's directory.

I would add

.wdContent > div { padding: 5px;}

to the style.css file in your theme directory and it will put a 5px border round your cloud.

You might also find the line that reads

.wdContent {background:#e1e5e7; width:227px; margin-left:1px; padding-bottom:30px; padding-top:3px; line-hight:100%;}

and change the padding-bottom to 3px like the padding-top

I my view those changes will improve things a bit.