Add border to Widget headers

  • Author
    Posts
  • #1958075

    coxa8c
    Member

    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.

    #1958151

    coxa8c
    Member

    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?

    #1958154

    jsmutek
    Member

    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.

    #1958158

    jsmutek
    Member

    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!

    #1958160

    coxa8c
    Member

    Thank you, jsmutek! It worked perfectly!

    #1958161

    jsmutek
    Member

    You’re welcome! :)

The topic ‘Add border to Widget headers’ is closed to new replies.