Cleaner style suggestion

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
kel322
Propeller Head
Posts: 34
Joined: Tue Jan 03, 2017 12:56 pm

Cleaner style suggestion

Post by kel322 »

Hello,
I'm trying to figure out a way to clean up our stylesheet and simplify some of the div tag styles that we use for notes. A lot of the notes are for our print manuals, but they are sometimes used in our online help. The notes got a little bit out of control and have multiplied since originally set up.

For an example, we have a few different categories of notes, one being "warning". Within our warning notes, we have a general warning and then we have more specific warnings, such as heavy, electric shock, pressure, etc. All of the divs within the warning category are the same except for the iso pictogram. I would like to figure out a way to consolidate the categories, so that the background color, border, padding, etc., cascades down into the more specific warnings, so that I don't have to repeat all of the attributes.

I'm fairly familiar with CSS and typically work within the text editor to make changes. I'm just a bit rusty and having a block on this one!

Code: Select all

div.NoteWarningGeneral
{
	background-color: #FDEEDE;
	background-image: url(Warning-General.png);
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 45px;
	border-left: solid 4px #EF8B22;
	padding: 15px 12px 15px 65px;
	margin-bottom: 6px;
	page-break-inside: avoid;
}

Code: Select all

div.NoteWarningHeavy
{
	background-color: #FDEEDE;
	background-image: url(Warning-Heavy.png);
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 45px;
	border-left: solid 4px #EF8B22;
	padding: 15px 12px 15px 65px;
	margin-bottom: 6px;
	page-break-inside: avoid;
}
doloremipsum
Sr. Propeller Head
Posts: 290
Joined: Mon Aug 26, 2019 2:11 pm

Re: Cleaner style suggestion

Post by doloremipsum »

I would typically do something like this:

Code: Select all

div.warning1, div.warning2
{
    [common attributes]
}

div.warning1
{
    [unique attributes 1]
}

div.warning2
{
    [unique attributes 2]
}
I've discovered it's not a good idea to put distinctive attributes directly on the div modifier, because it tends to show up in lots of other places (esp online output).
in hoc foro dolorem ipsum amamus, consectimur, adipisci volumus.
Chicago_HPT
Sr. Propeller Head
Posts: 133
Joined: Sun Feb 03, 2013 6:01 pm

Re: Cleaner style suggestion

Post by Chicago_HPT »

Another variation on dolormipsum's suggestion might be to keep the single, general warning style as you have it but then edit the specific warning styles to only include changes or additions. Then, for each div that you're styling, apply both the general and the specific styles. The main issue with this approach is that Flare does not [yet!?] allow you to apply more than one style from the GUI. :cry: :x You need to add the additional style manually in the Text Editor, or create a macro. But if you're comfortable with doing either, it is an option.

For example:

Code: Select all

<div class="NoteWarningGeneral NoteWarningHeavy">This is warning content.</div>
As long as the general warning style is first in the CSS, it should take precedence and then all the attribute changes/additions in the specific styles would override the general style.

Cheers,
-jeff
kel322
Propeller Head
Posts: 34
Joined: Tue Jan 03, 2017 12:56 pm

Re: Cleaner style suggestion

Post by kel322 »

Much thanks @doloremipsum,
I ended up grouping the div tags in the way that you suggested, and it's saving a lot of space in our stylesheet.

Related to this, we use auto-text to insert "warning", "important", etc. depending on the type of note it is. It is set up using p:first-child selector. I had assumed that I could also group these in the same way as I did with the divs, but that does not seem to work (see example below).
Any suggestions on this issue?

Code: Select all

div.warning1, div.warning2 p:first-child 
{
     mc-auto-number-format: 'WARNING: ';
}
doloremipsum
Sr. Propeller Head
Posts: 290
Joined: Mon Aug 26, 2019 2:11 pm

Re: Cleaner style suggestion

Post by doloremipsum »

It's not quite smart enough to read that line the way you want it to. I believe you'd have to write:

Code: Select all

div.warning1 p:first-child, div.warning2 p:first-child
{
     mc-auto-number-format: 'WARNING: ';
}
in hoc foro dolorem ipsum amamus, consectimur, adipisci volumus.
kel322
Propeller Head
Posts: 34
Joined: Tue Jan 03, 2017 12:56 pm

Re: Cleaner style suggestion

Post by kel322 »

Thanks again! I haven't tried it yet, but I would never have thought of writing it that way.
Post Reply