Trying to create Note Table style

[Ericam]

I am really struggling to replicate the note style used in the Flare documentation. I am new to creating .css. Can someone provide step by step instructions? I want it to look just like this.

note style.JPG

The most difficult part I am finding is how to have Note in bold and the rest of the text regular.

Thanks,
Erica

[stephgl]

Hi Erica,

By coincidence, I am making a "Tip" paragraph style right now too, and want to have that first word bold and in a different color.

I'm doing this by making two new styles. One is a new paragraph class that will use the Autonumber feature in order to automatically put the word "Tip" at the beginning of the paragraph when the style is applied. You don't have to actually include numbering with this feature. The second style will be a span class that gets applied to the word Tip only. But, it does not need to be applied separately each time, you can do that just once when setting up the Autonumber for the paragraph.

So, here are the steps:

1. add a span class for formatting the phrase "Note: " - this is where you would add the bold style to the font property.
2. add a p class for the note paragraph itself. In the Simplified view, click on the Properties dialog button, then click on Auto-number on the left.
3. In the top pane, type in the word Note: (probably followed by a colon and a space too).
4. On the bottom right, in the Span Class field select the one you just made in step 1.
5. You can then set Borders and Background properties for the paragraph too, using the other tabs on the left of the Properties dialog.

tip.jpg

[doc_guy]

Here is a link to a topic that shows you the stylesheet that Flare 4 writers used when developing the help system:

http://forums.madcapsoftware.com/viewto ... 46&start=0

Based on the style sheet, here are the settings they use for creating Notes:

Code: Select all

p.note
{
	border-bottom-color: #005b04;
	border-bottom-style: None;
	border-bottom-width: 1px;
	border-left-style: None;
	border-right-style: None;
	border-top-color: #005b04;
	border-top-style: None;
	border-top-width: 1px;
	color: #094600;
	font-size: 10pt;
	line-height: normal;
	text-align: left;
	font-family: Tahoma;
	padding-top: 6pt;
	padding-bottom: 6pt;
	padding-left: 6pt;
	padding-right: 6pt;
	border-bottom: solid 1px #000000;
	border-top: solid 1px #000000;
	border-left-width: 0px;
	border-right-width: 0px;
	background-color: #e3facb;
}

Based on this, it doesn't appear they are using the auto-number feature to prepend the word "Note:" to the beginning of the text. They must be adding it manually when they add a new note. That's too bad, because once you get it set up, it is so easy to use!

[Andrew]

We simply type "Note: " and "Tip! " and "Important! " in our docs. I'll have to look into autonumbering (though that would entail a bunch of retroactive edits).

[doc_guy]

It's not hard to to do a global search for "Note:" to remove all instances of the term. I can't think of a case, in my docs at least, where I'd use "Note:" (with the colon) when I wasn't using the note Class of <p>

Same for important, tip, etc.

It's a chance you can retroactively make and test in less than an hour. Then you are assured that future versions will all be exactly the same.

[Andrew]

Duh...good point. I've only been using the Find/Replace all day (broken xrefs). *head smack* (we need a forum emoticon for that)

Edit: perfect

[doc_guy]

Here you go:

(from my own server)



To copy, use (remove the spaces):

http://paulpehrson.com/blogimages/e/wallbash.gif[/i mg]

[Ericam]

Thanks so much! I will go try that now.

[doc_guy]

Let us know how it goes!

[Ericam]

Since I am a newbie to making styles I am still challenged. I made a p.note style and made it bold. But when I go to the auto-number window, and look for my span class it is not listed. See image. What am I missing? Help!

[doc_guy]

I'm not exactly sure what that span class selector does. But I don't set anything there.

[Ericam]

I think the span class selector is supposed to say notespan or something like that. Backing up, how do I create a span class for the word note? I was trying to follow these directions that stephgl gave me.

1. add a span class for formatting the phrase "Note: " - this is where you would add the bold style to the font property.
2. add a p class for the note paragraph itself. In the Simplified view, click on the Properties dialog button, then click on Auto-number on the left.

[LTinker68]

Go to the span tag in the stylesheet and create a class of the span, and set it to be bold. You'll then specify that new span class in the mc-auto-number-class field of the paragraph class. The paragraph class has another field called mc-auto-number-format, which is where you type the text "Note: " (without the quotes). You'll also have that paragraph class set to normal font (so that only the span is bold) and you'll set the background color and border designs on the paragraph class. So the paragraph class is the workhorse and the span class just has an assist.

[doc_guy]

Here is the code for how I do mine:

Code: Select all

p.Note
{
	font-size: 12.0pt;
	padding: 5px;
	font-style: italic;
	background-color: #ffffe0;
	border: dotted 1px #ff8c00;
	margin-bottom: 10pt;
	margin-top: 10pt;
	mc-auto-number-format: '{b}NOTE: {/b} ';
}

I don't us any span. I just use the p.note class.

[KevinDAmery]

Since I am a newbie to making styles I am still challenged. I made a p.note style and made it bold. But when I go to the auto-number window, and look for my span class it is not listed. See image. What am I missing? Help!

If you want to use the class in a span, you need to make it either a span class or a generic class, not a p class. In other words, it should be either span.note or .note, not p.note. If you make it p.note you will only see it when you select the entire p tag.

[LTinker68]

I don't us any span. I just use the p.note class.

Yeah, your example will work for simple formatting options like bold and italics. If you want to do something fancier to the "Note" portion of the paragraph then you'll have to use the span.

[stephgl]

Sorry to cause confusion!

Two styles are needed:
One is a p class to set up the entire paragraph's font, background, borders, etc. Also here, you use the Autonumber option to add the text that you want to have at the beginning of each paragraph that uses this style. But, you have to create this class second.

The other is a span class, and you have to create it first. This one only applies attributes to that autonumber text you are going to make for the p class I just described. This span class gets selected while you are setting up the p class, it's the lower-right field in the autonumber dialog. It is confusing, because you have to create this little span class before creating the p class that is going to use it.

[Ericam]

Thank you everyone! I got it to work!!!

[doc_guy]

Cool!

[stephgl]

Here is the code for how I do mine:

Code: Select all

p.Note
{
	font-size: 12.0pt;
	padding: 5px;
	font-style: italic;
	background-color: #ffffe0;
	border: dotted 1px #ff8c00;
	margin-bottom: 10pt;
	margin-top: 10pt;
	mc-auto-number-format: '{b}NOTE: {/b} ';
}

I don't us any span. I just use the p.note class.

Paul, that's neat! I didn't think of using formatting tags right inside the mc-auto-number-format field itself.

Since we are going to have multiple paragraph styles, for "Tip: " and "Caution: " and "Example: " etc. I think I may keep using the span class, so I can modify that part of them all at once.

[doc_guy]

I want different formatting for my "Important" text than I want for my "Note" text, so this option works really well for me. The format commands are displayed if you select the format option from the drop down:



You get everything from font to color to italics, to superscript and more. There are also a ton of other things like filename, extension, document title, etc. There is a drop-down option to "Show All" which will display all the options in one list.

[rmdavidson]

I've added a p.note class and span.note class to no avail. For some reason I see it in style.css, but nothing happens in my topic. It isn't changing a thing. I even opened style.css in the Internal Text Editor and pasted the text as shown for Flare's format directly into p.note which is shown so I know it is saving, but again nothing. After about 10 attempts doing things like changing background color to another then back again and resaving in the Simplified View then pasting into the editor I'm having to bite my tongue to keep my thoughts silent.

I'm doing this within an OL as bullet p bullet and even ended the list and put the paragraph between 2 lists and nothing. There are no other style sheets associated with this topic since it is one I started fresh unlike the old ones that have multiple external/embedded (which I'm trying to get rid of).

Ideas?

Robin

[LTinker68]

If you create a test project from scratch, does it work? If it does, then it narrows it down to something in the original project.

[rmdavidson]

I created a test one and selected MyFlareTemplates (which said none are selected) and added p.note in the Internal Text Editor and it refuses to change the background color or add border colors despite it being set in the Simple View (whichever one looks like Excel). It changes the font color though, which is more than what it does in my other project.

[rmdavidson]

I found it!! *headdesk* It was under non-print not default. I knew the code itself was right.

My thing is, this was for WebHelp, which is technically non-print...?

Robin