Highlight paragraph without changing styles in it

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Dave1975
Propeller Head
Posts: 53
Joined: Thu Sep 15, 2016 4:25 am
Location: Belgium

Highlight paragraph without changing styles in it

Post by Dave1975 »

Hi there

I'm trying to find out how I can apply a yellow background to a paragraph that holds already a number of styles, without changing those styles. The purpose is to indicate items that still need rework. Example below shows a P.body that will eventually be replaced by an image and the p.caption that goes with it.

<p class="Body" >Add drawing CX500 Duplex + most common pre/post device</p>
<p class="Caption_next" >X + CX500 Duplex + Y</p>

I experimented with divs, spans and generic styles and getting the text to be highlighted is easy, but I always end up loosing the style p.captionnext which gets replaced by a p.body.

Is there a way to select a chunk of text, paragraphs etc.. and then apply a CSS element "highlight" to it without touching the existing styles?

I know I could simply us local formatting but I rather stick to the CSS.

any thoughts are appreciated.

thanks

David
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Highlight paragraph without changing styles in it

Post by ChoccieMuffin »

Have you tried creating a div that only has the background highlight colour and nothing else, and then putting that div around stuff you want to highlight? You should end up with:

<div class=highlight">
<p class="Body" >Add drawing CX500 Duplex + most common pre/post device</p>
<p class="Caption_next" >X + CX500 Duplex + Y</p>
</div>
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Dave1975
Propeller Head
Posts: 53
Joined: Thu Sep 15, 2016 4:25 am
Location: Belgium

Re: Highlight paragraph without changing styles in it

Post by Dave1975 »

I was going to say that I tried that and it didn't work but luckily I gave it another try :lol:

CSS:
div.highlight
{
background-color: #ffff00;
}

This time it worked. Not sure what went wrong earlier but it's fine now.

Thanks!

regards

David
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Highlight paragraph without changing styles in it

Post by ChoccieMuffin »

You might have just shoved it in a div, rather than your div.highlight.

Anyway, it's working now, so that's got to be a good thing on a Wednesday. :)
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
doloremipsum
Sr. Propeller Head
Posts: 290
Joined: Mon Aug 26, 2019 2:11 pm

Re: Highlight paragraph without changing styles in it

Post by doloremipsum »

For future reference: the Flare UI won't do it, but if you jump over to the text editor you absolutely can apply a second style class to an element without affecting the first. Just find the class="caption_next" bit and add the other class, for class="caption_next body".
in hoc foro dolorem ipsum amamus, consectimur, adipisci volumus.
ChrisBradley
Propeller Head
Posts: 55
Joined: Thu Dec 13, 2007 12:24 pm

Re: Highlight paragraph without changing styles in it

Post by ChrisBradley »

You can also add a generic class to your stylesheet and be able to highlight portions of a paragraph or individual items in a list:

CSS:
.highlight
{
background-color: #ffff00;
}

You can also select the generic style for DIV tags.
Madcap Advanced Developer
Post Reply