Cleaner style suggestion

This forum is for all Flare issues related to styles, stylesheets and XML.

Cleaner style suggestion

Postby kel322 on Thu Feb 11, 2021 1:36 pm

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;
}
kel322
Propeller Head
 
Posts: 26
Joined: Tue Jan 03, 2017 12:56 pm

Re: Cleaner style suggestion

Postby doloremipsum on Thu Feb 11, 2021 4:09 pm

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).
neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit - sed saepe cum dolor apud multos callidos mutuetur, reduci potest.
doloremipsum
Sr. Propeller Head
 
Posts: 170
Joined: Mon Aug 26, 2019 2:11 pm

Re: Cleaner style suggestion

Postby Chicago_HPT on Fri Feb 19, 2021 8:44 am

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
Chicago_HPT
Sr. Propeller Head
 
Posts: 108
Joined: Sun Feb 03, 2013 6:01 pm

Re: Cleaner style suggestion

Postby kel322 on Fri Feb 19, 2021 8:45 am

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: ';
}
kel322
Propeller Head
 
Posts: 26
Joined: Tue Jan 03, 2017 12:56 pm

Re: Cleaner style suggestion

Postby doloremipsum on Sun Feb 21, 2021 3:37 pm

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: ';
}
neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit - sed saepe cum dolor apud multos callidos mutuetur, reduci potest.
doloremipsum
Sr. Propeller Head
 
Posts: 170
Joined: Mon Aug 26, 2019 2:11 pm

Re: Cleaner style suggestion

Postby kel322 on Wed Feb 24, 2021 6:53 am

Thanks again! I haven't tried it yet, but I would never have thought of writing it that way.
kel322
Propeller Head
 
Posts: 26
Joined: Tue Jan 03, 2017 12:56 pm


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: Google [Bot] and 32 guests