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
Highlight paragraph without changing styles in it
-
- Senior Propellus Maximus
- Posts: 2632
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Highlight paragraph without changing styles in it
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>
<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
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Re: Highlight paragraph without changing styles in it
I was going to say that I tried that and it didn't work but luckily I gave it another try
CSS:
div.highlight
{
background-color: #ffff00;
}
This time it worked. Not sure what went wrong earlier but it's fine now.
Thanks!
regards
David
CSS:
div.highlight
{
background-color: #ffff00;
}
This time it worked. Not sure what went wrong earlier but it's fine now.
Thanks!
regards
David
-
- Senior Propellus Maximus
- Posts: 2632
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Highlight paragraph without changing styles in it
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.
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
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
-
- Sr. Propeller Head
- Posts: 290
- Joined: Mon Aug 26, 2019 2:11 pm
Re: Highlight paragraph without changing styles in it
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.
-
- Propeller Head
- Posts: 55
- Joined: Thu Dec 13, 2007 12:24 pm
Re: Highlight paragraph without changing styles in it
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.
CSS:
.highlight
{
background-color: #ffff00;
}
You can also select the generic style for DIV tags.
Madcap Advanced Developer