WordPress.org

Ready to get started?Download WordPress

Forums

Adding Lines to Widget Title (7 posts)

  1. reemrazik
    Member
    Posted 8 months ago #

    Hi,
    So this is the very first time I'm coding my own wordpress theme and I'm having trouble finding the solution for something.
    I want to add lines on either side of the widget title to span the width of the sidebar.
    It would look something like this:
    ------ WIDGET TITLE ------

    Can anyone tell me what the code to do this is and where I should put it?

    Thanks!

  2. reemrazik
    Member
    Posted 8 months ago #

    Nevermind - figured it out

  3. NorthernBelleDiaries
    Member
    Posted 8 months ago #

    Can you share how you found it out?

    I'm trying to do the same with a test site but by using an image.

  4. reemrazik
    Member
    Posted 8 months ago #

    Sure. I actually didn't do it with an image. I put a span class around the widget titles.
    Basically I just put this code in the functions.php file:

    // Add span class to widget headlines
    add_filter( 'widget_title', 'metro_widget_title' );
    function metro_widget_title( $title ){
    	if( $title )
    	return sprintf('<span class="widget-headline">%s</span>', $title );
    }

    And then I added the following CSS:

    .widget h2 {
      margin-top: 3px;
      margin-bottom: 5px;
      line-height: 0.5;
      text-align: center;
      color: #a1a1a1;
      font-weight: normal;
      padding-bottom: 10px;
      padding-top: 12px;
      font-size: 17px;
    }
    .widget h2 span {
      display: inline-block;
      position: relative;
    }
    .widget h2 span:before,
    .widget h2 span:after {
      content: "";
      position: absolute;
      height: 5px;
      border-bottom: 1px solid #a1a1a1;
      top: 0;
      width: 50px;
    }
    .widget h2 span:before {
      right: 100%;
      margin-right: 15px;
    }
    .widget h2 span:after {
      left: 100%;
      margin-left: 15px;
    }

    You can see what it looks like at my site here: dinaxdesign.com
    Hope that helps!

  5. NorthernBelleDiaries
    Member
    Posted 8 months ago #

    Very nice site! And exactly what I was looking for!

    Question: are you using the Metro Theme?

  6. reemrazik
    Member
    Posted 8 months ago #

    Thanks!
    No, I created this theme from scratch.
    Took me forever, haha.

  7. NorthernBelleDiaries
    Member
    Posted 8 months ago #

    This site is gorgeous!

    Thanks so much for your help! All I did was replace h2 with h4 for my widgets and it looks beautiful.

    Great job.

Reply

You must log in to post.

About this Topic