Skip to main content
P
prashant_tech_wordsmith
Participant
September 7, 2023
Question

Admonition styles for RH 2020 (and above)

  • September 7, 2023
  • 3 replies
  • 718 views

Hi all,

 

I am trying to create an admonition style such as Warning, Info Text, Tips, etc for online help. Initially, I tried using Div style but unfortunately the style did not get applied in the topic. Next, I tried paragraph style. I was successful in creating close to what I needed, but I am unable to add an image/icon for Note, or Warning, before the text. I created the ":before" pseudo class inside paragraph style and added an image from the Background > Image Path parameter of <p> style, but the image does not show up before the text.

Attached below are samples (sample 1, sample 2) of what I am trying to achieve. Sample 3 is what I have created in RH2022. Can someone please help me with some ideas to add to move forward? 

    This topic has been closed for replies.

    3 replies

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    October 2, 2023

    Oh that's pretty cool!

     

    I also found an example of how to get the look without using fieldset. There's some question of whether it should be used outside of a web form, in case that's important for your organisation.

     

    https://www.webmasterworld.com/html/3915579.htm

    (If you don't want the border around the label/caption/legend in this example, remove the border from the span  definition.)

    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    September 7, 2023

    Stefan's method that @Amebr has pointed you to is the correct method and the way you are trying to set up.

     

    What I have found is using the style in your third image (blue background with a blue border as a p tag class) and then dragging an image to it is quicker.

     

    You will find examples in the About RoboHelp sample project along with the images and p.emphasis styles that you are free to use if you want.

    ________________________________________________________

    My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

     

    Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.
    K
    KarenMinOR
    Inspiring
    September 22, 2023

    I do my admonitions slightly differently. Although they don't follow your style, I figured it might be helpful to see other techniques. Here's the HTML for the topic:

    <fieldset class="attn_note">
	<legend>Note</legend>
	<p class="attn_note">This is the text of my note.</p>
	<ul>
		<li>This note can include bulleted or numbered lists.</li>
	</ul>
</fieldset>

     And the CSS for the note:

    fieldset.attn_note {
  border: 2px solid var(--blue);
  padding: 10px 25px 25px 25px;
  border-radius: 5px;
  color: var(--blue);
  font-style: normal;
  margin-bottom: 10px;
  page-break-inside: avoid;
}
fieldset.attn_note legend {
  background-color: white;
  color: var(--blue);
  padding: 5px 10px;
}
fieldset.attn_note li {
  color: var(--blue);
}
p.attn_note {
  color: var(--blue);
  font-style: normal;
  margin: 0 0 0 0;
}
p.attn_note a {
  color: var(--blue) !important;
}
p.attn_note a:hover {
  color: black !important;
}

    I have similar definitions for warnings, cautions, and tips. I also use this fieldset style for examples.

    In the PDF output, the legend is a "heading" within the box rather than inserted in the boundary like with the HTML output.

    Hope this helps!

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    September 7, 2023

    I can't really tell what your screenshots relate to, as there is no explanation of what each image is. Please also include images using the Insert Photo icon as seeing all the images at the same time as the text makes understanding and answering questions much easier.

     

    Unless all your note/warning/info boxes will contain only one paragraph, you want to use a div style.

     

    This code shows one example of what the div style should look like. It's for FontAwesome but the principle is the same for using an image (with url('your/image/relative/path.png') as the content value)

    https://community.adobe.com/t5/robohelp-discussions/font-awesome-icons-in-robohelp/m-p/9384062#M118646

     

    Check if your styles looks something like that posted by Stefan. You can post your code and we can take a look at it as well.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices