WordPress.org

Ready to get started?Download WordPress

Forums

shrink vertical white space in sidebar (19 posts)

  1. dianabyron
    Member
    Posted 1 year ago #

    How to shrink the massive vertical white spaces between the links/elements in the sidebar widget?
    So many people hate the giant white spaces in the WP themes I'm surprised they don't just code these out by default!
    Meanwhile, does anyone have the simplest way to do it? A way that won't clash with Standard Widget Extensions, or cover up text?

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    It would be helpful if you indicated what theme you are talking about. It's only because I saw your previous posts that I know you are referring to the 2012 theme.

    So many people hate the giant white spaces in the WP themes I'm surprised they don't just code these out by default!

    Actually, that is rarely raised as an issue here. Were you aware that, if you don't like the theme, there are over 1,500 other free themes to choose from?

    As it stands, you should never edit the Twenty Twelve theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First you need to create a child theme for your changes. Or install a custom CSS plugin.

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    In your Child Theme stylesheet or Custom CSS Manager plugin, add this;

    .widget-area .widget li {
     line-height: 0;
    }
  4. dianabyron
    Member
    Posted 1 year ago #

    Hi Esmi,
    Thanks. I do see a lot of questions about how to get rid of white space; perhaps because I'm trying to do it myself! I have looked at a lot of themes and I do love Twenty Twelve best (except for the long vertical white spaces).
    I have a child theme in place; I never touch the Twenty Twelve default files - that's one of the first things I learned and took to heart.
    I've only just entered the labyrinth of trying to figure out how to do CSS and php stuff. Generally people's posts contain code that I can copy, add my specs to and paste, then test in the child theme.
    Pressure is on to get content out there so my sites earn income to be able to support themselves, including the extremely time-consuming task of sitting here all day learning (which I love!). Otherwise I'd just hire people for the complicated stuff; impossible at present.

    And hi Andrew, I'll try your bit of code and see how I go. Thanks!

  5. dianabyron
    Member
    Posted 1 year ago #

    Andrew, just checking before I do what you've suggested.....
    In my child style.css I found the relevant spot.
    It has:
    .widget-area {
    margin: 24px 0 0;
    margin: 1.714285714rem 0 0;
    }
    Do I delete this and replace with your code, or add your code after/before my default code?

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Hi Diana - This is a good CSS reference site:

    http://www.w3schools.com/css/

    I'd also highly recommend using Firebug if you are not already doing so - for CSS work, in particular, it's very helpful.

    http://getfirebug.com

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You should not have any "default" code in the child theme - it should only contain changes you are making.

  8. dianabyron
    Member
    Posted 1 year ago #

    WPyogi, I added Firebug, but at the moment CSS looks like a totally foreign language to me. As is PHP, just learning a bit of html, know nothing about Javascript......
    It's like: "go learn Russian, Sanskrit, Polynesian and Latin before lunch time tomorrow"!
    I'm slowly creeping along, downloading a clean copy of whatever file I have to make changes to, saving it in a special folder on my desktop so I don't get confused, pasting/typing in changes, uploading it to child theme, checking if the website's gone belly-up, if so, replacing the original file that worked and retreating to where I got to before.... waiting on forums for someone wiser than me to help..... then creeping forward with the next little bit....documenting everything so I can retrace my steps when I have to.... and help some other newbie who runs into the same issue......and do it again with website #2.
    Today's challenge is shrinking that whitespace, and a few other basics....
    Meanwhile I've put your w3schools webpage in my bookmarks in a new folder called "Coding School" and will drop in for lessons as often as I can! Thanks for caring.

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Sounds like you are doing all the right things :). It's a lot to learn at first. The great thing about Firebug is that you can test changes to the CSS code in your browser - so that makes it much easier to try things before actually changing the code on your site.

  10. dianabyron
    Member
    Posted 1 year ago #

    Ah, that's cool! I will try it.....

  11. dianabyron
    Member
    Posted 1 year ago #

    Well, I tried to try it! The contents of my child style.css bears absolutely no resemblance to what comes in Firebug under CSS for my homepage - that has lots of stuff that starts with #wpadminbar. Can't see anything about widgets. Put it as a search term in the box but nothing comes up. Stuck now. Dunno where to go from here....

  12. dianabyron
    Member
    Posted 1 year ago #

    OK I tried a different tack and GOT IT! Opened a copy of child style.css and make a Text Edit copy of it as a kind of guidesheet to my experiments - went through and changed the font colour on different sections so I can find things quickly, bolded and coloured any changes I made and put a note of what it was before. Then go make the changes in the test style.css, upload and see what happens. I discovered that if I go to the section /* Sidebar */ and in the first "paragraph" change margin-bottom 3.428571429rem to 0.6rem, I get a nice, sensible reduction in vertical white space between the widget elements!
    My site, so you can see it:
    http://www.diannetrussell.com

    Now just got to figure out how to make the accordion function of Standard Widget Extensions plugin work in my text widgets and I'll be so happy I'll take some time off to go for a walk on the beach!

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    That's great - however, be aware that you are not using a child theme. Changing the name on twentytwelve really is not ideal because you won't be able to update the theme - and it's possible there may be changes that are important...

  14. dianabyron
    Member
    Posted 1 year ago #

    I AM using a child theme. That's where I'm doing all my changes.

  15. Looks like you've duplicated all of the CSS...

    http://diannetrussell.com/wp-content/themes/twentytwelve-child/style.css

    You've the template tag there (child theme) but copying the CSS wholesale like that makes it really tough to figure out what/where you've made changes.

    Have you considered using a basic style.css like this one?

    /*
    Theme Name: Twenty Twelve Child Theme
    Author: Self-Help WordPress User
    Template: twentytwelve
    */
    
    @import url("../twentytwelve/style.css");
    
    /* Your CSS changes goes after here */

    It will make figuring it out easier IMHO.

  16. dianabyron
    Member
    Posted 1 year ago #

    So do you mean that the child style.css just has the stuff I change and nothing else? So WordPress knows to go back and forth between TwentyTwelve and TwentyTwelve-child to get what it needs?
    And excuse my ignorance, but what's IMHO?
    thanks Jan

  17. esmi
    Forum Moderator
    Posted 1 year ago #

    the child style.css just has the stuff I change and nothing else?

    Bingo! :-)

    WordPress knows to go back and forth between TwentyTwelve and TwentyTwelve-child to get what it needs?

    Yep - it's clever like that. Seriously, though, the child's files always take precedence over the parent's - whether it's a stylesheet or a template file.

  18. dianabyron
    Member
    Posted 1 year ago #

    Ah ha! Now that does make things easier..... I'll go make a simple CSS and transfer my changes in and play with it until I get it correct....and experiments will take less time then...
    thanks Jan, thanks Esmi....

  19. esmi
    Forum Moderator
    Posted 1 year ago #

    No problem :-)

Topic Closed

This topic has been closed to new replies.

About this Topic