h3.widget-title:before help!

Sparkling
1

Hi Aigars!
I’m having a little problem implementing horizontal lines before and after widget titles to achieve something similar to this:
---------- WIDGET TITLE -----------
I’m using the following css but the lines just cross over the whole title and span through the whole widget area.

.widget-title{
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
h3.widget-title:before{
    position: absolute;
    width: 100%;
    content: " ";
    height: 7px;
    border-bottom: 1px solid #FFCC0D;
    border-top: 4px solid #FFCC0D;
    left: 0px;
    top: 35px;
    box-sizing: border-box;
}

I am trying to make the titles look like here:

Thank you in advance for any suggestions. My website is www.acuthecary.com

Lara

2

You need to wrap widget title with <span>, so you can style exactly like it is in example you provided.

Span allows to create a background for the title itself. See this CSS code from that theme demo:

.widget h4 span {
	background: #FFF;
	padding: 10px 20px;
	z-index: 1;
	position: relative;
}

Which means that they still have the line that goes from one side to another side of widget title area but title itself has background, so you just don’t see it anymore.

You need to edit this via functions.php where you should change this register sidebar function:

register_sidebar( array(
	'name'          => __( 'Sidebar', 'sparkling' ),
	'id'            => 'sidebar-1',
	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
	'after_widget'  => '</aside>',
	'before_title'  => '<h3 class="widget-title">',
	'after_title'   => '</h3>',
) );

To something like this:

register_sidebar( array(
	'name'          => __( 'Sidebar', 'sparkling' ),
	'id'            => 'sidebar-1',
	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
	'after_widget'  => '</aside>',
	'before_title'  => '<h3 class="widget-title"><span>',
	'after_title'   => '</span></h3>',
) );
3

Aigars, thank you so much! I just got a chance to implement what you suggested and it works great. I had to put the code into the parent functions because for some reason it doesn’t work in child theme’s functions but as long as it works, it’s great. Thank you again!