Skip to main content
Known Participant
April 27, 2011
Question

Style for a Note/Tip

  • April 27, 2011
  • 1 reply
  • 2225 views

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.

This topic has been closed for replies.

1 reply

RoboColum_n_
Legend
April 27, 2011

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
Inspiring
April 27, 2011

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
Inspiring
April 27, 2011

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