Ever wonder how to get the effect of having a border around a widget, while leaving a gap for a widget title like this:
It’s actually a lot simpler than you would think!
The code below is for Genesis, but you can adapt it for any other theme. Just add the following to your theme’s CSS. Make sure to change the class selectors to match those used in your theme!
|
1 2 3 4 5 6 7 8 9 10 11 |
.sidebar .widget { background-color: #fff; border: 2px solid #000; } .widget-title { background: #fff; margin-top: -60px; padding: 15px 10px; text-align: center; } |
The negative number for margin-top is where the magic happens. The greater the negative number, the higher the widget title will be pulled upwards. This, combined with setting the background color of .widget-title, is essentially what gives the desired effect.
Love, love this tutorial! Is this also applicable to Blogger?
Yes! I’m not too familiar with Blogger, but for the first bit of code, change .sidebar .widget to .widget. For the second part, change .widget-title to .widget h2. I *think* that should work. Again, I’m not too familiar with Blogger, so you might have to play around until you find the correct classes to apply the settings to.
I’m having a hard time getting the desired effect of the title being settled between the top line, creating that boxed effect. My titles are completely blocking out the top line of the box. What do I need to do? Thanks!
This is so pretty! I am so bad at coding for WordPress but your posts are always so helpful!
Thanks so much for sharing this! I used it for my blog redesign and I love it! Thanks again 🙂
Can you please do an html e-course or something. You have talent! People need your tips & tricks!
So pretty!!!
How can I add this to a single widget (on Blogger)? Thanks for your help!! 🙂
Hi Noemi. I’m really not that familiar with Blogger, but you’d have to find out what the class is for a widget title and use that instead of .widget-title. Same goes for the actual widget itself, which you’d have to sub in for .sidebar .widget. You can use a browser extension called Firebug to help you find the classes.