WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to reduce vertical space between widgets in sidebar (10 posts)

  1. loveinindia
    Member
    Posted 1 year ago #

    My site Love in India uses theme TrulyMinimal.
    I want to reduce space between widgets in right sidebar, to save precious above-the-fold space. I've tried following instructions here and here. But I can't find any of the code snippets mentioned in my style.css, which contains only the following lines of code:

    /*
    Theme Name: TrulyMinimal
    Theme URI: http://www.flarethemes.com/theme/trulyminimal/
    Description: TrulyMinimal is a highly customizable minimalistic theme fully focused on typography.
    Version: 1.1.4
    Author: FlareThemes
    Author URI: http://www.flarethemes.com
    
    Tags: light, white, one-column, left-sidebar, right-sidebar, fixed-width, custom-colors, custom-menu, editor-style, featured-images, full-width-template, theme-options, translation-ready
    
    License: GNU General Public License v2.0
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */
    
    @import url("css/style.php");

    Can anyone please help?
    Thank you.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  3. Phil
    Member
    Posted 1 year ago #

    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");

  4. loveinindia
    Member
    Posted 1 year ago #

    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.

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

    copy the part you want to change

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  7. loveinindia
    Member
    Posted 1 year ago #

    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?

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  9. loveinindia
    Member
    Posted 1 year ago #

    Can't thank you enough. It worked. Heartfelt thanks. :)

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic