Heading with horizontal lines on either side 2

Support
#1

I was using the css in this post:

It works on my sites with theme x, but not my site with pro. Any input.

Using a class: with-line and this code:

.with-line span {background: #fff; padding: 0 15px; }

.with-line {position: relative; z-index: 1;}

.with-line:after {border-bottom: 3px solid #4f47f6; content: “”; position: absolute; top: 45%; left: 0; right: 0; width: 95%; z-index: -1;}

#2

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

#3

The URL is:
carolcustomdesign.com

I would like to make the heading that says :“New to The Showcase” have the horizontal lines on either side.
Thank you

#4

Hi There,

Please use our Custom Headline shortcode for that (http://demo.theme.co/integrity-1/shortcodes/custom-headline/).

You can also use the custom headline element in your page builder as well and make sure to enable accent.

Hope that helps.

#5

When I use the shortcode, it overwrites the styling I have setup. So how do I keep the format I want, and just add the accent?

#6

Hi There,

Did you mean the font style? I see that the following CSS class has been applied for that text.
x-text-content-text-primary

You can simply assign that CSS class to your shortcode as well. Please follow the example below.

[custom_headline class="x-text-content-text-primary" type="left" level="h2" looks_like="h3" accent="true"]Custom Headline[/custom_headline]

Hope that helps.

#7

Yes, that’s exactly what I wanted. Is there anyway to change the styling of the accent or am I asking too much now? :slight_smile:

#8

Hi There,

Headline accent is a border, so you can style it as a border only, other than that will require a customization. You can use the custom CSS below to style the accent.

.h-custom-headline.accent span:before,
.h-custom-headline.accent span:after {
	border-color: red;
	border-width: 2px;
	border-style: solid;
}

border-color
border-width
border-style

Cheers!

1 Like
#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.