Annoying grey spacers in Nishita sidebar.

  • Unknown's avatar

    Can anyone help provide html code to add to my CSS customization which will remove the grey spacer bars which separate the widgets in my sidebar … I’m with Nishita … see http://www.pairodox.wordpress.com … thanks very much. David

    The blog I need help with is: (visible only to logged in users)

  • Hi there,

    Sure thing!

    .widget-title {
    	border-bottom: none;
    }

    That should do it. You might want to then adjust some of the padding vaules you’ve given to the widgets.

    Let me know if you have further questions!

  • Unknown's avatar

    Whow! Hey there Eurello … many, many thanks … I can’t wait to try this … and, since you brought it up … how about that code for widge padding?
    You’ve hit the nail on the head here … the reason I’m messing with them today is because they seem miss aligned and weird looking. That’s why I asked about getting rid of the spacers … perhaps it’s just the padding. If you’ve got a minute … perhaps you could pass that code along as well. Then I’ll have lots to play with this evening. Thanks a million. d

  • Sure thing! You currently have this snippet in your custom CSS:

    .widget-title {
    	margin-top: 30px;
    	padding-top: 0;
    	margin-bottom: 0;
    	padding-bottom: 10px;
    }

    That means that you’ve applied a 30px margin to the top of each widget title area, and 10px of padding to the bottom of each widget title area. You can adjust any of those four numbers bigger or smaller until everything is spaced the way you want it to be, but note that that’s for the widget titles specifically.

    To space out the entire widgets from each other, use:

    .widget-area .widget {
        padding-bottom: 0px;
    }

    Again, adjust that number until it looks as you wish.

    Play around with that a bit, and let me know what you think. :)

  • Unknown's avatar

    Hey there Eurello … you’re the best … thanks for the help. While I’ve got ya … I have another, broader question. I hate bothering you folks there at WP and would like to be able to make these modifications myself. I don’t even know how to phrase the difficulty I’m having … how do you know the code for the particular area you’d like to tweek? For example, let’s say I wanted to add a bit of padding around the title to each of my posts … see how they’re boxed … let’s say I’d like to five the words a bit of breathing room. Like how the heck do I know where to begin with that? What do I call that? And, how do I find out? Is there someway I can review the entire script (I’m not sure that’s the right term) for my site that I can look over and kinda take my best shot as to where the code for the padding in that box might be? I mean, how does one begin to really be able to use CSS if they can’t figure what terms to use to refer to certain configurations? Do you understand what I’m getting at? Anyway … if this one is just way too big for you to address, please accept my thanks for the widget-fix and we’ll forget about this other issue. D

  • Not at all! I’m sorry I didn’t mention some resources sooner. :)

    This is a series on our blog, The Daily Post, teaching our users basic CSS. This is meant for a beginner and goes over exactly what you’re talking about, how to identify the selectors that you need to target:

    http://dailypost.wordpress.com/2013/06/21/css-intro/
    https://dailypost.wordpress.com/2013/07/25/css-selectors/
    http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

    To cut right to how to find a selector, check out this support document:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    We have additional learning resources listed in our other CSS support articles:
    http://en.support.wordpress.com/custom-design/css-basics/
    http://en.support.wordpress.com/custom-design/editing-css/

    That should get you started! :)

  • The topic ‘Annoying grey spacers in Nishita sidebar.’ is closed to new replies.