Adding Lines to Widget Title

  • reemrazik

    (@reemrazik)


    10 years, 5 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!

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

    (@reemrazik)

    10 years, 5 months ago

    Nevermind – figured it out

    La La Lisette

    (@northernbellediaries)

    10 years, 5 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.

    Thread Starter reemrazik

    (@reemrazik)

    10 years, 5 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!

    La La Lisette

    (@northernbellediaries)

    10 years, 5 months ago

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

    Question: are you using the Metro Theme?

    Thread Starter reemrazik

    (@reemrazik)

    10 years, 5 months ago

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

    La La Lisette

    (@northernbellediaries)

    10 years, 5 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.

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