Support » Themes and Templates » Adding Lines to Widget Title

  • reemrazik

    (@reemrazik)


    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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • reemrazik

    (@reemrazik)

    Nevermind – figured it out

    NorthernBelleDiaries

    (@northernbellediaries)

    Can you share how you found it out?

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

    reemrazik

    (@reemrazik)

    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!

    NorthernBelleDiaries

    (@northernbellediaries)

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

    Question: are you using the Metro Theme?

    reemrazik

    (@reemrazik)

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

    NorthernBelleDiaries

    (@northernbellediaries)

    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Adding Lines to Widget Title’ is closed to new replies.