Style for a Note/Tip

[elissag]

In RoboHelp 9, is there a way to create a style for a Note and/or Tip that looks like the following:

NOTE: text text text

I'm trying to get the style to automatically add the word "Note" or "Tip" when it is applied. And I also want the body of the entire tip/note to be shaded.

Thanks.

[RoboColum_n_]

I'm not a style sheet expert but from what I know I don't believe you can do what you want without creating two styles. The issue you have is that part of your "style" is bolded and part isn't. As such it would require a style for each part. If you adopted this approach the shading wouldn't be an issue as you could add the shading to each one.

---

The RoboColum(n)

@robocolumn

Colum McAndrew

[Willam_van_Weelden]

Hi,

Yes you can with css, only not through the RoboHelp css editor.

You do indeed need to create two styles, but in RoboHelp you only select a single one. Simply create a paragraph called "note" and the css takes care of the rest.

You accomplish this using the :before selector. For instance:

p.note {

     /* Styling for the regular text */

}

p.note:before {

     content:"Note: "; /* Text to insert */

     font-weight: bold;

}

This will insert the bold text "Note: " before every paragraph with the class "note". You can also add shading using the text-shadow declaration. That doesn't work with all browsers though.

Alternatively you can create an image and add that to the note paragraph to show an image of the text. That way you can add any styling you like, for example:

p.note {

     background: transparent url(note.png) no-repeat left top;

     padding: 0 0 0 20px; /* Paragraph indents 20 pixels on the left side. Make sure this value is larger than the horizontal image size */

}

If you like, I can email an example file.

Greet,

Willam

[MergeThis]

Willam, I can't get this content to appear at all, in Design mode, Preview mode, or WebHelp output (RH 8, IE 7). The W3 CSS site mentions the need for a DOCTYPE with IE 8, but each topic has one of those.

Leon

[Guest]

Would this also work when generating Word/PDF? Or does this apply to Web Help only?

[Guest]

I just tried it.

@MergeThis: The inserted text will only be displayed in the generated HTML output.

The inserted text will not be displayed in a generated Word output .

[Willam_van_Weelden]

Hi,

@MergeThis: Leon, I can't get it to work on IE7 too. Since w3schools said it should work and all the topics have a DTD, I didn't test it on IE7. IE8 works fine.

@kgebert: This is WebHelp only, output only. The RoboHelp WYSIWYG won't show it. Inserting the text is a CSS rule, so I'm not surprised it isn't in the printed doc. If I have to create printed documentation I go for FrameMaker, so in RoboHelp I think only of HTML output. Sorry about that. If you want it to work in print output and things like eBooks etc, you may want to consider using variables, as dawny1313 suggested.

Greet,

Willam

[Guest]

I considered it a good idea to use a UDV for this, but I found, that styles applied to this UDV in the editor get lost when switching to HTML editing mode and switching back to Design mode.

This is what I've done:

1. I defined a UDV called NoteText and assigned the value "Note: "
2. I replace the text "Note: " by the UDV.
3. As the text should appear in bold I applied a Character Style to the UDV.
4. The text "Note: " appeared in bold.
5. I saved the topic.
6. I switched to HTML editing mode.
7. Coming back to design mode, the applied Character Style had been removed. The UVD was not displayed in bold anymore.

Is this a bug? Or am I on the wrong track?

[Willam_van_Weelden]

Hi,

Did you apply the styling to the UDV itself, or did you insert the UDV in the topic and then applied the styling? It's much easier to open the UDV definition and apply the styling there. If you ever decide you want the UDV to be italic instead of bold, you can simply change the UDV to update all your topics.

Greet,

Willam

[Guest]

Thanks for the hint, Willam. I didn't know that it was possible to define formatting on the UDV itself.

[elissag]

Hi,

I'm working with the solution that you suggested. Unfortunately, I'm a newbie to CSS and am having some difficulty and can't figure out what I'm donig wrong. This is the code that I'm using:

P.Tip {
/* tip text*/
}
P.Tip:before {
content:"TIP:";/* Text to insert*/
font-family: Arial, sans-serif;
font-size: 11pt; font-weight:bold
background-color: #EFEFEF;
x-next-class: ;
x-next-type: P;
}

Any suggestions?

[MergeThis]

If this is the actual css code:

P.Tip {
/* tip text*/
}

the line with /* tip text*/ is where you're supposed to insert the css style options for the "after" (the actual content of the Tip), usually stuff like indenting, borders, shading, etc.

...unless, of course, you placed that line to hide your actual styles from inquiring minds. If so, then never mind!

Good luck,

Leon

[dawny1313]

I do exactly that with a User Defined Variable NOTE:

Then I created a style "Button" which I have marked as BOLD.

I indicate all buttons (Click Start. Press Help. etc.) as bold so rather than using inline style bold, I created a style.

If I ever want to change them to Italic or Red or some other style, I can change the style "Button" to something else. It would change my NOTES, though, too, but that's what I've done.

dawntreader/judy