CSS property for adding text to a style, like "NOTE:"
CSS property for adding text to a style, like "NOTE:"
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
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.
You learn something new every day if you're not careful.
-
- 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:"
Haven't had a chance to try this, but maybe worth a whirl--try mc-label in the Unclassified section.
Until next time....
Kevin Amery
Certified MAD for Flare
Kevin Amery
Certified MAD for Flare
Re: CSS property for adding text to a style, like "NOTE:"
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.KevinDAmery wrote:...try mc-label in the Unclassified section.
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.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: CSS property for adding text to a style, like "NOTE:"
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
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.
You learn something new every day if you're not careful.
Re: CSS property for adding text to a style, like "NOTE:"
LTinker, you win the stuffed teddy bear again. Thanks, this worked.
Matt
Matt
Matt F
You learn something new every day if you're not careful.
You learn something new every day if you're not careful.
-
- Senior Propellus Maximus
- Posts: 2089
- 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:"
Just in case there's a consolation prize...mattf wrote:LTinker, you win the stuffed teddy bear again. Thanks, this worked.
Matt
I'm doing something similar for comment topics: 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.
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
-
- Senior Propellus Maximus
- Posts: 2089
- 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:"
You need before and after pseudo elements: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
Code: Select all
p.note:before{
content: "Note: ";
}
p.note:after{
content: "[end note]";
}
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
Re: CSS property for adding text to a style, like "NOTE:"
I thought it was tied into them somehow, but I couldn't remember how.SteveS wrote:You need before and after pseudo elements:
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: CSS property for adding text to a style, like "NOTE:"
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.
Thanks Steve. You get the stuffed Koala Bear.
Matt F
You learn something new every day if you're not careful.
You learn something new every day if you're not careful.
-
- Senior Propellus Maximus
- Posts: 2089
- 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:"
Had the Lie/ Bos Cascading Style Sheets - Designing for the Web book open in front of me at the time...LTinker68 wrote:I thought it was tied into them somehow, but I couldn't remember how.SteveS wrote:You need before and after pseudo elements:
Steve
Life's too short for bad coffee, bad chocolate, and bad red wine.
-
- 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:"
Cheater....SteveS wrote:Had the Lie/ Bos Cascading Style Sheets - Designing for the Web book open in front of me at the time...
Until next time....
Kevin Amery
Certified MAD for Flare
Kevin Amery
Certified MAD for Flare
Re: CSS property for adding text to a style, like "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.You need before and after pseudo elements:
p.note:before{
content: "Note: ";
}
p.note:after{
content: "[end note]";
}
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.
You learn something new every day if you're not careful.
Re: CSS property for adding text to a style, like "NOTE:"
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.mattf wrote:How do folks generally feel about using browser detection "if" code?
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.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: CSS property for adding text to a style, like "NOTE:"
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.
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.
You learn something new every day if you're not careful.
Re: CSS property for adding text to a style, like "NOTE:"
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.
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.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: CSS property for adding text to a style, like "NOTE:"
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.
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.
You learn something new every day if you're not careful.
Re: CSS property for adding text to a style, like "NOTE:"
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.
did this for caution, tip, warning, danger, and example.
just an idea.
Flare: I bought it ... so that means I can break it, right?
Re: CSS property for adding text to a style, like "NOTE:"
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.
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.
You learn something new every day if you're not careful.
Re: CSS property for adding text to a style, like "NOTE:"
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.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.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: CSS property for adding text to a style, like "NOTE:"
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 :-/
ho hum :-/
Flare: I bought it ... so that means I can break it, right?
-
- 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:"
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.mattf wrote:How do folks generally feel about using browser detection "if" code?
New Book: Creating user-friendly Online Help
Paperback http://www.amazon.com/dp/1449952038/ or https://www.createspace.com/3416509
eBook http://www.amazon.com/dp/B005XB9E3U
Paperback http://www.amazon.com/dp/1449952038/ or https://www.createspace.com/3416509
eBook http://www.amazon.com/dp/B005XB9E3U
-
- 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:"
Oh, here we go again...RamonS wrote: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.mattf wrote:How do folks generally feel about using browser detection "if" code?
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....
Kevin Amery
Certified MAD for Flare
Kevin Amery
Certified MAD for Flare
-
- 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:"
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.
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.
New Book: Creating user-friendly Online Help
Paperback http://www.amazon.com/dp/1449952038/ or https://www.createspace.com/3416509
eBook http://www.amazon.com/dp/B005XB9E3U
Paperback http://www.amazon.com/dp/1449952038/ or https://www.createspace.com/3416509
eBook http://www.amazon.com/dp/B005XB9E3U
-
- Propeller Head
- Posts: 29
- Joined: Thu Apr 10, 2008 11:17 am
Re: CSS property for adding text to a style, like "NOTE:"
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: ';
}
Re: CSS property for adding text to a style, like "NOTE:"
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
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.
You learn something new every day if you're not careful.