V2 Heading Backgrounds

[dabigcheeze]

Can someone explain how to get a V2 Heading background text color to only go as far as the text and not continue to cover the entire block element? It is completely useless if the background does not truncate at the end of the text itself.

There should be some mechanism for using display: inline; I would think.

Thanks.

[Prasant]

Hello @dabigcheeze,

Thanks for asking.

You have the option to set the width of V2 Headline element in correlation with the background. Please take a look at the following screencast. https://screencast.com/t/gsRu4oT0S

Thanks.

[dabigcheeze]

That is NOT an effective solution since the background is still not related to the actual text width but the container that the text is within. Please look into this and recommend a more useful solution. The whole point of having a background text color is that it is actually the text’s background and not the container.

Kyle

[jumar]

Hello,

Thanks for writing in!

For us to be on the same page, please see image below:

Kindly let us now if this is what you meant.

Best,

[dabigcheeze]

Here is a screen cap of what I’m hoping to achieve in V2 Headings. The top is your previous approach and the bottom is a V2 text element with some custom CSS I’ve written. Id’ much rather use a V2 Headline vs do manual code all the time.

[nabeel]

Hi again,

You can do this with CSS very easily, just add the a class for example bg-text to your V2 Headline element (see screenshot)

Then add the following code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.bg-text .x-text-content-text-primary {
    padding: 10px !important;
    display: inline !important;
    background: #b12323;
}

You can change the background color as per your need. You can reuse the class to other Headline elements by just giving them the same class.

Alternatively, there is another simple solution that will do the trick, use Headline element’s background color and set padding and then just add the code in your Customizer:

.x-text-headline {
    display: inline-block !important;
}

Hope this helps!