-
Posts
-
Hi,
On the linked page we have a text block (example 1) with H6 text. In the Advanced Styling we set up the H6 with text color, font size and line height. Additionally we added the following to get the background color and opacity:
h6 { background: rgba(14, 76, 117, 0.3) !important; }
h6 { margin-bottom: .60em; !important; }However, we would like to have spacing of coloration between the lines/rows and not like this when it looks like one big background of color.
I know it can be done by backspacing every paragraph like we did it in example 2 but it doesn’t look so good because the spacing is only between paragraphs.
In short, we would like to have every row with its own background color and spacing between rows without any background color.
Anything we can add to quick CSS?
Thanks in advance
Hey santinimedia,
Well, the heading should not have so much text. Normally, one uses p tags, div, article, or section. There you can add a class and add a background that you need.
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaHi Victoria, thank you for the quick answer. What we are trying to achieve is the example 3 on the linked page. We’ve put the following in the quick css
.my-highlighted-text { background: rgba(14, 76, 117, 0.3) !important; } and added <span class=”my-highlighted-text”> to the text in question.
Yes, this solves our problem and we can resolve it in this way but… as the client would write the blog posts and he would use this functionality in the blog posts we wouldn’t want him to mess up something with the span class and insertions in the text editor. We think it would be more user-friendly if we could achieve the example 3 with customizing/customized headings.
In that way, the client could just mark the text in the text block with (for example) H6 and that would be it. If he starts adding span class well… he would most certainly f… it up from time to time.
So we need the way to create example 3 but with headings in text block.
I hope I was clear :)
Hi santinimedia,
Well, your client can just add a custom css class to the text block and the css will be applied to the text in it and there will be no need to override the heading tags.
It can be done here:
And so the css can be:
.my-highlighted-text .avia_textblock p { background: rgba(14, 76, 117, 0.3); }Best regards,
Victoria
- The topic ‘Highlighted heading text – with spacing without color between rows/lines’ is closed to new replies.