Avoiding Repetitive Style Specifications

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Limits Tester
Jr. Propeller Head
Posts: 9
Joined: Mon Aug 21, 2017 8:48 am

Avoiding Repetitive Style Specifications

Post by Limits Tester »

Hello again,

I've got a second CSS question. Flare won't permit assigning multiple styles to an element (at least not from the Flare interface). Therefore I have to repeat a lot of classes with a different name to get a second styling element. Here is an example below. There are three paragraph styles:

p.One { margin-left: 25px}
p.Two { margin-left: 50px}
p.Three { margin-left: 75px}

Each of the first three p styles has a counterpart variation for KeepWithNext:
p.OneKeepWithNext {margin-left: 25px; page-break-after: avoid)
p.TwoKeepWithNext {margin-left: 50px; page-break-after: avoid)
p.ThreeKeepWithNext {margin-left: 75px; page-break-after: avoid)

There are many other variations of the first three styles as well. If anyone has mastered this dilemma, please share. Thanks as always for any assistance.

Linda
TWAnnie
Jr. Propeller Head
Posts: 9
Joined: Wed Jan 18, 2017 7:39 am

Re: Avoiding Repetitive Style Specifications

Post by TWAnnie »

Hi Linda,

You can apply two (or more) classes to the same element. I usually open the text editor, and type the two required class names separated by a space. For example, to add .class1 and .class2 to a <p>, your code would be:
<p class="class1 class2">Your text.</p>
In the Home ribbon, in the Style box, the paragraph will display as:
p.class1 class2
I've tried typing the classes directly in that box, but you have to be careful you don't overwrite everything, so I prefer to open the text editor.

In your case, you could have only 4 classes instead of 6:
- 3 for each margin-left setting (One, Two, and Three); you can keep the styles you have.
- 1 for the keep-with-next setting, for example:
.KeepWithNext {page-break-after:avoid}

You can then combine as necessary; for example:
<p class="One KeepWithNext">Left margin 25px and keep with next.</p>
<p class="Two">No keep with next on this paragraph, only left margin 50px.</p>
<p class="Three KeepWithNext">Left margin 75 px and keep with next.</p>

Extra tip: if you define the classes in your css as
.One
.Two
.Three
.KeepWithNext
instead of
p.One
p.Two...
you can apply the classes to any element, not just paragraphs.
Could be useful?
Good luck and good writing!
TWAnnie
Limits Tester
Jr. Propeller Head
Posts: 9
Joined: Mon Aug 21, 2017 8:48 am

Re: Avoiding Repetitive Style Specifications

Post by Limits Tester »

Thank you very much. I did not realize that Flare would recognize that. I will try it.

Linda
Post Reply