CSS property for adding text to a style, like "NOTE:"

This forum is for all Flare issues related to styles, stylesheets and XML.
mattf
Sr. Propeller Head
Posts: 277
Joined: Thu Feb 09, 2006 5:35 pm
Location: Next to the window

CSS property for adding text to a style, like "NOTE:"

Post by mattf »

Hi all,
I'm creating a NOTE style and I want to add text to the style. I know I've seen this done, where instead of writing "NOTE:" or "Example:" you can put that word in the style itself so it gets included automagically. What is the css property? I can't find it and I can't SEARCH for it because searches online and in the Flare help return instances of actual notes in regard to styles, not information about styling notes.

Thanks!

Matt
Matt F
You learn something new every day if you're not careful.
KevinDAmery
Propellus Maximus
Posts: 1985
Joined: Tue Jan 23, 2007 8:18 am
Location: Darn, I knew I was around here somewhere...

Re: CSS property for adding text to a style, like "NOTE:"

Post by KevinDAmery »

Haven't had a chance to try this, but maybe worth a whirl--try mc-label in the Unclassified section.
Until next time....
Image
Kevin Amery
Certified MAD for Flare
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: CSS property for adding text to a style, like "NOTE:"

Post by LTinker68 »

KevinDAmery wrote:...try mc-label in the Unclassified section.
Just tried that and it didn't work. I also tried the "content" property in the unclassified category, and although it worked in the XML Editor, it didn't work in the online output. It's either not supported by the browsers yet or it's a print-only function.

However, you can do this by creating a custom <p> class and setting the mc-auto-number-format (under AutoNumber category) to NOTE: (include a space). That worked in IE, FF, and Word output.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
mattf
Sr. Propeller Head
Posts: 277
Joined: Thu Feb 09, 2006 5:35 pm
Location: Next to the window

Re: CSS property for adding text to a style, like "NOTE:"

Post by mattf »

Kevin,
Tried it, but no dice. Thanks for the response. The search continues. My web guy here says he has never seen such an animal, but I swear that I've run across it, just can't remember where (and not necessarily in Flare).

-Matt
Matt F
You learn something new every day if you're not careful.
mattf
Sr. Propeller Head
Posts: 277
Joined: Thu Feb 09, 2006 5:35 pm
Location: Next to the window

Re: CSS property for adding text to a style, like "NOTE:"

Post by mattf »

LTinker, you win the stuffed teddy bear again. Thanks, this worked.

Matt
Matt F
You learn something new every day if you're not careful.
SteveS
Senior Propellus Maximus
Posts: 2087
Joined: Tue Mar 07, 2006 5:06 pm
Location: Adelaide, far side of the world ( 34°56'0.78\"S 138°46'44.28\"E).
Contact:

Re: CSS property for adding text to a style, like "NOTE:"

Post by SteveS »

mattf wrote:LTinker, you win the stuffed teddy bear again. Thanks, this worked.

Matt
Just in case there's a consolation prize...

I'm doing something similar for comment topics:
comment.JPG
I then apply a conditional tag (called, funnily enough, "comment") that gets excluded from everything except my review target.
You do not have the required permissions to view the files attached to this post.
Image
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
SteveS
Senior Propellus Maximus
Posts: 2087
Joined: Tue Mar 07, 2006 5:06 pm
Location: Adelaide, far side of the world ( 34°56'0.78\"S 138°46'44.28\"E).
Contact:

Re: CSS property for adding text to a style, like "NOTE:"

Post by SteveS »

mattf wrote:Kevin,
Tried it, but no dice. Thanks for the response. The search continues. My web guy here says he has never seen such an animal, but I swear that I've run across it, just can't remember where (and not necessarily in Flare).

-Matt
You need before and after pseudo elements:

Code: Select all

p.note:before{
content: "Note: ";
}
p.note:after{
content: "[end note]";
}
HTH
Image
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: CSS property for adding text to a style, like "NOTE:"

Post by LTinker68 »

SteveS wrote:You need before and after pseudo elements:
I thought it was tied into them somehow, but I couldn't remember how.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
mattf
Sr. Propeller Head
Posts: 277
Joined: Thu Feb 09, 2006 5:35 pm
Location: Next to the window

Re: CSS property for adding text to a style, like "NOTE:"

Post by mattf »

Wow, I was just checking in before dashing off to catch a bus and it looks like this has been solved in several additional ways. I'll have to study this later, but I think the pseudo stuff is what I was originally looking for.

Thanks Steve. You get the stuffed Koala Bear.
Matt F
You learn something new every day if you're not careful.
SteveS
Senior Propellus Maximus
Posts: 2087
Joined: Tue Mar 07, 2006 5:06 pm
Location: Adelaide, far side of the world ( 34°56'0.78\"S 138°46'44.28\"E).
Contact:

Re: CSS property for adding text to a style, like "NOTE:"

Post by SteveS »

LTinker68 wrote:
SteveS wrote:You need before and after pseudo elements:
I thought it was tied into them somehow, but I couldn't remember how.
Had the Lie/ Bos Cascading Style Sheets - Designing for the Web book open in front of me at the time...
Image
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
KevinDAmery
Propellus Maximus
Posts: 1985
Joined: Tue Jan 23, 2007 8:18 am
Location: Darn, I knew I was around here somewhere...

Re: CSS property for adding text to a style, like "NOTE:"

Post by KevinDAmery »

SteveS wrote:Had the Lie/ Bos Cascading Style Sheets - Designing for the Web book open in front of me at the time...
Cheater....
Until next time....
Image
Kevin Amery
Certified MAD for Flare
mattf
Sr. Propeller Head
Posts: 277
Joined: Thu Feb 09, 2006 5:35 pm
Location: Next to the window

Re: CSS property for adding text to a style, like "NOTE:"

Post by mattf »

You need before and after pseudo elements:

p.note:before{
content: "Note: ";
}
p.note:after{
content: "[end note]";
}
Steve, Firefox 2.0 honored this and even allowed me to add "font-weight: bolder", but IE 7.0 will have none of it, doesn't even show the content. This blows, because most of my users will probably be on IE. I'll have to use the auto-number, no bold.

How do folks generally feel about using browser detection "if" code?

Matt
Matt F
You learn something new every day if you're not careful.
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: CSS property for adding text to a style, like "NOTE:"

Post by LTinker68 »

mattf wrote:How do folks generally feel about using browser detection "if" code?
It's a PITA having to do it, but no real objections to doing it. I'm not sure how you'd incorporate it into Flare, though. First, the WebHelp output is in a frameset, so I'm guessing the browser detection would have to be put into the frameset page which means you'd have to modify that page after building the output. Unless the browser-specific code was just in the stylesheet, in which case that would be easier and wouldn't require any post-build modifications.

Also keep in mind that IE6 and IE7 aren't exactly compatible with each other either. For instance, I'm pretty sure IE7 recognizes max-height/min-height and max-width/min-width, but IE6 doesn't. So for some things, IE7 and FF are comparable and IE6 isn't, and for other things, IE6 and IE7 are comparable but FF isn't.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
mattf
Sr. Propeller Head
Posts: 277
Joined: Thu Feb 09, 2006 5:35 pm
Location: Next to the window

Re: CSS property for adding text to a style, like "NOTE:"

Post by mattf »

Thanks Lisa,
Good to remember. And the likelihood is, my audience is always a version or two behind. Still, I can never be sure, and the chance of the word "NOTE: " being missing from the note is not something I can risk. If it were some aesthetic thing, sure, but in this case I have to retreat to your original idea of the auto-numbering format trick... which still works, I just can't use font-weight in it (rats!).

Or I could just put in a disclaimer saying that if you view this help in IE, you're on your own. :)
Matt F
You learn something new every day if you're not careful.
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: CSS property for adding text to a style, like "NOTE:"

Post by LTinker68 »

Is it not showing up in IE? The before/after/content is apparently browser-specific, but the auto-numbering method is a Flare feature; I don't think it's standard HTML. So Flare is actually dynamically adding the content as if it were regular text, so in the final output, it will be just text.

That said, it probably wouldn't be a bad idea to put at the bottom of your "home" page in the online help that says the help is best viewed in Internet Explorer 7 or Firefox 2.0 (or whatever). Just make sure to conditionalize that text so that it doesn't appear in your print output. :wink:
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
mattf
Sr. Propeller Head
Posts: 277
Joined: Thu Feb 09, 2006 5:35 pm
Location: Next to the window

Re: CSS property for adding text to a style, like "NOTE:"

Post by mattf »

Sorry, I probably wasn't clear...

The auto-number trick works fine, precisely because it is not browser dependent. As you say, it's a Flare thing, and they just "take care of it" at output time. The added content "NOTE: " that I put in the auto-number format property did show up correctly in IE and Firefox.

The generated content (before/after pseudo classes) work in Firefox and Opera, but they do not work in IE 7 (I didn't try it in IE 6).

So...

I'm using the auto-number method, since it will work in both Firefox and current IE.
Matt F
You learn something new every day if you're not careful.
DurtyMat
Sr. Propeller Head
Posts: 224
Joined: Wed Aug 22, 2007 8:09 am
Location: ClrH2o, Fl

Re: CSS property for adding text to a style, like "NOTE:"

Post by DurtyMat »

i did something a little different for this one, when i ran into the same problem (actually i was on another support issue and decided to throw this in) i created an image of "NOTE: " and put it in the background-image tag followed by setting the "repeat" to none then padded the text from the left margin to fit just beyond the colon. worked for me, especially since my "note" style has 15 different variations (don't ask...please :'() it kept the image and applied it to each different variation.

did this for caution, tip, warning, danger, and example.

just an idea.
Flare: I bought it ... so that means I can break it, right?
mattf
Sr. Propeller Head
Posts: 277
Joined: Thu Feb 09, 2006 5:35 pm
Location: Next to the window

Re: CSS property for adding text to a style, like "NOTE:"

Post by mattf »

DurtyMat,

You definitely get the award for most innovative approach. Brilliant. When browsers don't properly support CSS, genius arises.

Danger? I want to work where you work. I only go as high as Warning, and if users blow off the warning they only lose data, not lives.
Matt F
You learn something new every day if you're not careful.
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: CSS property for adding text to a style, like "NOTE:"

Post by LTinker68 »

DurtyMat wrote: i created an image of "NOTE: " and put it in the background-image tag followed by setting the "repeat" to none then padded the text from the left margin to fit just beyond the colon.
Nice solution. Just out of curiosity, do the images stay in place when output to Word? Word doesn't accept custom bullet images when they're specified in the stylesheet in Flare, so I'm curious if it brings in the background image as you've specified it.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
DurtyMat
Sr. Propeller Head
Posts: 224
Joined: Wed Aug 22, 2007 8:09 am
Location: ClrH2o, Fl

Re: CSS property for adding text to a style, like "NOTE:"

Post by DurtyMat »

i just created a quick word output with my "note" solution and they didnt appear...i guess you could put "Note:" as a conditional snippet inside of the note and have it display in printed documentation only BUT that might be an extra step that was probably trying to be avoided by the OP....

ho hum :-/
Flare: I bought it ... so that means I can break it, right?
RamonS
Senior Propellus Maximus
Posts: 4293
Joined: Thu Feb 02, 2006 9:29 am
Location: The Electric City

Re: CSS property for adding text to a style, like "NOTE:"

Post by RamonS »

mattf wrote:How do folks generally feel about using browser detection "if" code?
I think that is the wrong approach. It only applauds those who intentionally and maliciously make a browser that intentionally and maliciously ignores web standards. Why should I break my neck to fix something that someone else intentionally and maliciously goofed up? Make sure your code adheres to W3C standards, the rest is just bad software.
KevinDAmery
Propellus Maximus
Posts: 1985
Joined: Tue Jan 23, 2007 8:18 am
Location: Darn, I knew I was around here somewhere...

Re: CSS property for adding text to a style, like "NOTE:"

Post by KevinDAmery »

RamonS wrote:
mattf wrote:How do folks generally feel about using browser detection "if" code?
I think that is the wrong approach. It only applauds those who intentionally and maliciously make a browser that intentionally and maliciously ignores web standards. Why should I break my neck to fix something that someone else intentionally and maliciously goofed up? Make sure your code adheres to W3C standards, the rest is just bad software.
Oh, here we go again...

Problem with that approach is that when customers complain to your support staff and word gets back to your manager, is you manager going to beat up Microsquish, or you? Personally, I prefer the approach that won't show up on my performance review...
Until next time....
Image
Kevin Amery
Certified MAD for Flare
RamonS
Senior Propellus Maximus
Posts: 4293
Joined: Thu Feb 02, 2006 9:29 am
Location: The Electric City

Re: CSS property for adding text to a style, like "NOTE:"

Post by RamonS »

I'm just saying that stuff like this just rewards those who generated the problem in the first place. It's like saying thank you with card and a bow for having to do extra work just so that one can continue to support a cruddy product. This is the stuff we laugh about in Dilbert cartoons and think it's nuts. Then just wait until IE8 comes out. Supposedly, this time around it will adhere to standards by default and thus breaking all the IE only sites.
The only time when I adjusted to what was in common use is when SP2 for XP came out and basically broke anything that had dynamic page content. I used FlashHelp and WebHelp locally as well as offered updated versions online, customers could switch on the fly which version they want to use. That was nice. In the end I had to dumb it down to a fugly CHM. And that just because Microsoft is not capable of creating a browser that works right.
davidgolden99
Propeller Head
Posts: 29
Joined: Thu Apr 10, 2008 11:17 am

Re: CSS property for adding text to a style, like "NOTE:"

Post by davidgolden99 »

I created my note and tip boxes with <p> tags:
p.note
{
font-family: Verdana;
color: #003366;
font-size: 10pt;
font-style: inherit;
border: solid 1px #336699;
margin: 4px;
padding: 4px;
mc-auto-number-class: bold;
mc-auto-number-format: 'NOTE: ';
}
mattf
Sr. Propeller Head
Posts: 277
Joined: Thu Feb 09, 2006 5:35 pm
Location: Next to the window

Re: CSS property for adding text to a style, like "NOTE:"

Post by mattf »

david,
I had done mine pretty much the exact same way, though I had been chagrined that I couldn't get the word Note or Tip to be bold. After I saw your post I added your "mc-auto-number-class: bold;" line to my .css but the bold does not show up either in ouput or in the Flare editor. Did that work for you?

Matt
Matt F
You learn something new every day if you're not careful.
Post Reply