Add border to Widget headers

coxa8c · Member · Jul 21, 2014 at 7:48 pm
Copy link

Add topic to favorites
I would like to add a border under the title of the sidebar widgets. Just a small line to separate the title from whatever is underneath.

I’m editing my blog using custom css. Thanks in advance!

The blog I need help with is: (visible only to logged in users)
coxa8c · Member · Jul 21, 2014 at 7:52 pm
Copy link
I figured out how to do it!
```
.side-widget h3 {
font-size: 2.8em;
font-weight: 400;
text-transform: lowercase;
text-align: center;
border: 1px solid #888;
margin-bottom: 15px;
color: #888;
```
However, I don’t really want to have a box, just a single line underneath the title. Is this possible?
jsmutek · Member · Jul 21, 2014 at 7:56 pm
Copy link
Hi coxa8c

Try –
.side-widget h3 {border-bottom: 1px solid #your-color-here}

Add some padding-bottom if you’d like to push the line down a bit. Ie:
```
.side-widget h3 {
    border-bottom: 1px solid #your-color-here
    padding-bottom: 10px;
}
```
Hopefully this helps.
jsmutek · Member · Jul 21, 2014 at 7:58 pm
Copy link
Note – I accidentally left out the semi-colon after the property value in the first line of my css – make sure to add it back in!
```
.side-widget h3 {
    border-bottom: 1px solid #your-color-here;
    padding-bottom: 10px;
}
```
Sorry about that!
coxa8c · Member · Jul 21, 2014 at 8:00 pm
Copy link
Thank you, jsmutek! It worked perfectly!
jsmutek · Member · Jul 21, 2014 at 8:00 pm
Copy link
You’re welcome! :)

No items found.