Here is how you can separate first widget from the rest. Add this code to Appearance >> Theme Options >> Other >> Custom CSS
.well {
background-color: transparent;
padding: 0;
border: none;
}
#secondary .widget {
background-color: #fff;
padding: 20px;
border: 1px solid #DADADA;
border: 0;
margin-bottom: 0;
}
#secondary .widget:first-child {
margin-bottom: 30px;
}
Let me know if this helps.
Thank you so much, that does the trick indeed! At the risk of asking too much: is there any way to do the same thing for the first two widgets? As in Widget1+Widget2 – seperation – Widget3+Widget4+etcetera
Then you can try to replace this part of my above give code:
#secondary .widget:first-child {
margin-bottom: 30px;
}
With code like this:
#secondary .widget:nth-child(3) {
margin-bottom: 30px !important;
}
Let me know if this helps.
You’ve been more than helpful so far, I appreciate it immensely. I’m very much in the trial-and-error phase of learning CSS, so would you mind explaining to me what your latest suggestion does? The #secondary .widget:first-child is pretty straightforward, but now we’re using variables and there’s suddenly a (3), and I can’t seem to grasp it entirely.
Never mind, I just suck at maths. I figured out how to manipulate the (3) to do what I need it to do. Thanks again for your help.
