Need help? Check out our Support site, then


Add border to Widget headers

  1. 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 www.craftywife.com.

  2. 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?

  3. 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.

  4. 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!

  5. Thank you, jsmutek! It worked perfectly!

  6. You're welcome! :)

Topic Closed

This topic has been closed to new replies.

About this Topic