How to reduce vertical space between widgets in sidebar

CSS is totally theme and site specific so you can’t use CSS from other threads unless you have an identical site (unlikely). You need to use a browser tool like Firebug to find the CSS code that is creating those spaces – and then copy that code to the file above – and make the changes there.

For example, in this case, Firebug shows this CSS:

#sidebar .widget-container {
    background: url("../images/left-dot.png") repeat-x scroll left bottom transparent;
    margin: 0 0 45px;
    padding: 0 5px 35px 19px;
}

So you can copy the part you want to change:

#sidebar .widget-container {
    margin: 0 0 45px;
}

and adjust the 45 to what you like.

For additional help you may need to contact the theme developers as commercial themes aren’t supported here.

Your CSS is not in style.css, it’s in css/style.php. I would look inside your theme folder, then into css folder, and you’ll find it.

@import url("css/style.php");

Thank you so much for finding out the code for me. But my css/style.php contains only the following code.

<?php
header( "Content-type: text/css" );

$files = array();
$files[] = 'style.css';
$files[] = 'responsive.css';

foreach($files as $file) :
    $content = @file_get_contents( $file );
    echo minify( $content );
endforeach;

function minify( $code ) {
	$code = preg_replace( '#\s+#', ' ', $code );
	$code = preg_replace( '#/\*.*?\*/#s', '', $code );
	$code = str_replace( '; ', ';', $code );
	$code = str_replace( ': ', ':', $code );
	$code = str_replace( ' {', '{', $code );
	$code = str_replace( '{ ', '{', $code );
	$code = str_replace( ', ', ',', $code );
	$code = str_replace( '} ', '}', $code );
	$code = str_replace( ';}', '}', $code );

	return trim( $code );
}
?>

Couldn’t find these lines which you’ve quoted:

#sidebar .widget-container {
    background: url("../images/left-dot.png") repeat-x scroll left bottom transparent;
    margin: 0 0 45px;
    padding: 0 5px 35px 19px;
}

Please help.

Do not change the style.php file. Re-read my post above – this in particular:

copy the part you want to change

You need to copy that to style.css – the file you posted in your first post – then change it there – it will override the existing CSS.

Thanks again for the guidance.
I reduced the margin 45x to 5x. But this only seems to reduce the top, not the bottom margins on the sidebar for the widgets.
HEre are the before and after photos. Can you please advice?

Try putting the padding line in there and adjusting that:

#sidebar .widget-container {
    margin: 0 0 45px;
    padding: 0 5px 35px 19px;
}

The 35 is the bottom one – so try changing that.

Can’t thank you enough. It worked. Heartfelt thanks. ??

You’re welcome – and I’m glad to see your site is all better now too :)!