The Firebug add-on for Firefox is a great tool for figuring out things like this! (There are tools for every browser though) It’ll help pick the design apart and test out changes before actually making them.
Something like:
.widget-container-primary {
border-top: 1px dashed #000;
}
Would give you a line between each widget, but if you wanted something more customized or to have different borders around different widgets, you could play around and apply something similar to them.
Ex. The snippet below would give you a dashed line at the bottom of the “Other Women Liked:” list and the padding would give a little space between the list and the border
.wpp-list {
border-bottom: 1px dashed #000;
padding-bottom: 1em;
}
Hope that helps 🙂
Thanks for the superfast response SomewhatRounded!
I used your first CSS snippet and it gave me EXACTLY what I wanted, thanks a bunch.
The only thing I’m still struggling with is how to create a bit more padding between the widgets and the borders (see here., and the weird incremental jump each next widget makes to the right. I’m guessing something’s going wrong here in the PhP, but I really have no idea.
Any idea how I can fix this without having to create a childtheme?
FYI, this is the CSS I’m using now:
.widget-container-primary {
background: #f2f1ef;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
border-top: 1px dashed #000;
}
Glad it helped!
A child theme isn’t actually that hard to set up (there’s even a guide here)
It’s not actually the php, but the way the theme has the sidebar set up; with the padding applied to .widget-container-primary it’s causing that little nudge to the right because of how many things that css class is attached to.
The snippet I’d use would probably be: (and remove the padding from .widget-container-primary)
#sidebar ul {
background: none repeat scroll 0 0 #f2f1ef;
}
ul.xoxo {
padding: 0 10px;
}
Thanks again for responding so fast! I’m loving the support here and will definitely give you guys a stellar review once this is resolved.
Darn it, your code snippet doesn’t seem to do the trick though, as you can see, neither on adding the padding or removing the nudges to the right. Any idea what could be the problem?
Awesome!
I actually still see the left and right padding on the .widget-container-primary If you remove that it should look better
And now that I look at it again, if you change the padding to 20px instead of the 10 it might look a little closer to what you previously had (but without the nudging) 🙂
Thanks so much SomewhatRounded! Sorry about that, I read over the part in your earlier comment where you suggested I remove the padding on the .widget-container-primary code. Fixed it now
Two final requests, and then I’m done 🙂
1.Do you know what code I can use to get the same type of padding around the dashed line that currently exists between the ‘sign me up’ button and ‘follow me on facebook’, but then applied to all the other widgets? I’ve tried to play around with it myself but can’t seem to get it..
2. Is there a way for me to remove the dashed lined from above my profile picture? It’s not that crucial, but would look slightly nicer.
No problem, it’s a lot of information!
The first one is a bit tricky, for spacing at the bottom of your fb box you’ll have to edit the inline styles for the iframe (the css styling will likely be right in the space where you edit your widgets) If you add in:
margin-bottom: 10px; it’ll give you the space there (and if you change the height to 438px it won’t cut off your text at the bottom either 🙂
The others are a matter of finding the classes and/or ids for the widgets; the “Other Women Liked” list has a class of wpp-list, the second list doesn’t actually have a directly assigned class or id so you could either add one in your widget area (it would like something like <ul class="thislist">) or we can just work around it rather easily as well! And last, but not least, the bloglovin’ widget has the id text-2 (IDs have a ‘#’ and classes have a ‘.’)
If all of that was confusing, the code below should help 🙂
.wpp-list {
padding-bottom: 10px;
}
#categories-2 > ul {
padding-bottom: 10px;
}
#text-2 {
padding-top: 10px;
text-align: center;
}
(The text alignment isn’t necessary but just makes i look nicer)
For the dashed line above your profile picture there’s a pseudo element “first-child” that’ll do the trick;
.widget-container-primary:first-child {
border-top: none;
}
Tedah!
SomewhatRounded, I hereby designate you as my personal CSS tooth-fairy. Is there anywhere public I can write you a glowing testimonial??
I fixed the second part (remove dashed line above profile), but as you said, the first part of your response was a bit too techy for me to understand. I used the code you posted, but it didn’t result in increased padding. From your reply it sounds like its a bit of work-around and seeing as I’ll probably add more widgets in the future that’ll require the same kind of work-around, I’ve decided the current appearance is good enough for me 🙂
Thanks for your immediate tech-support, do let me know where I can recommend your services.
Glad I could help! Although I wasn’t quite as speedy this time 😛
I use the same username everywhere (same as my website) and I’m on here quite a bit if you need help with stuff (a lot of other helpful folks here too, of course! That’s one of the best things about WordPress)
The padding thing actually just looks like a copy & paste issue (sometimes when copying and pasting the symbols get switched around/changed), if you look in where you entered your css and change #categories-2 > ul to #categories-2 > ul it should clear that up!
The fb area can either be changed in the widget box, or you could add some iframe styling to the rest of your custom css
iframe {
height: 440px !important;
margin-bottom: 10px !important;
}
