How to style sidebar widgets?

All of my sidebar widgets are perfect apart from the Tag Cloud widget.

It seems to be missing the thin grey border that the other widgets have and also there is no margin at the bottom of it.

Does anyone know how to fix it? Blog link is in my signature.

 

Can I see the sidebar.php code?

 

remove the widget and open your sidebar.php. add this code:

 

Just tried that and it didn't make any difference to the styling at all.

Also if I add the code to the sidebar.php file I can't add it in between the widgitized.

I would be happy if someone could just tell me how to add a 20px margin to the bottom of the whole tag cloud widget.

Any ideas?

 

May be because all others are having a list elements and they have styled for ul tag. May be u should follow addlinkurl and style it urself by CSS

 

If I see the code of sidebar.php I can help you!!!

You must add a class to the widget divs and set the padding-bottom of that!!

 

Here we go:

	<div id="sidebar">
		

<div id="r_sidebar">

<!-- Widgetized sidebar 2 --> 
<ul>
 <li>
  <?php if ( !function_exists('dynamic_sidebar') 
        || !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?> 
 </li> 
</ul>
		
	<ul id="sidebarwidgeted">
	
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Top') ) : ?>
	
		
		
	<?php endif; ?>
	
	</ul>

</div>

	</div> <!-- /sidebar-->

Code (markup):

 

I think you have to edit the default-widgets.php in the directory wp-includes

Find this class "class WP_Widget_Tag_Cloud extends WP_Widget" and edit the "function widget( $args, $instance ) {" of the class. Just add the style to the div so

echo '<div style="padding-bottom: 10px">';
wp_tag_cloud(apply_filters('widget_tag_cloud_args', array()));
echo "</div>\n";

Code (markup):

 

But if I edit the default-widgets.php file I will have to do it everytime I upgrade wordpress.

There must be a way to do this through the theme as others are not having the same problem.

 

So try this:

in the sidebar.php replace this

<ul>
 <li>    
  <?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>    
 </li>
</ul>

Code (markup):

to

<ul>
 <li>
    <div class="r_sidebar_widget">
  <?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>
    </div>
 </li>
</ul>

Code (markup):

and add in style.css the code

.r_sidebar_widget{
   padding-bottom: 10px;
}

Code (markup):

 

That would probably work but as I said above, if I manually add it to the sidebar.php file I won't be able to place it in between the widgets (where it is now)

 

Add

<?php
function add_padding_to_tag_cloud_bottom($text) {
 $text = '<div style="padding-bottom: 20px">'.$text.'</div>';
 return $text;
}

add_filter('wp_tag_cloud', 'add_padding_to_tag_cloud_bottom');
?>

Code (markup):

on the top of the sidebar.php file.

 

edit: i think @s_ruben solved it

 

Thank You so much that worked perfect!!!

Look: http://www.chrislowthian.co.uk

 

Welcome!!!!

 

Seems like all good stuff here!!!!

 

Hey,

Was wondering if you can help me again. I have added the RSS Widget to the sidebar and need help styling the title of it.

I need to:

- Remove the link from the title
- Turn the Text White
- Remove the RSS Image

Please take a look at what I mean: Technology and Computing Blog

 

I think it can be done only by editing the file default-widgets.php which is in the directory wp-includes and do that every time after updating the Wordpress. Just delete this code

if ( $title )
			$title = "<a class='rsswidget' href='$url' title='" . esc_attr(__('Syndicate this content')) ."'><img style='background:orange;color:white;border:none;' width='14' height='14' src='$icon' alt='RSS' /></a> <a class='rsswidget' href='$link' title='$desc'>$title</a>";

Code (markup):

 

Thank you that worked perfect

Have saved the code so I can re-apply each time I update wordpress