• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Admonition styles for RH 2020 (and above)

New Here ,
Sep 06, 2023 Sep 06, 2023

Copy link to clipboard

Copied

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? 

Views

295

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 07, 2023 Sep 07, 2023

Copy link to clipboard

Copied

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#M1186...

 

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 07, 2023 Sep 07, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 22, 2023 Sep 22, 2023

Copy link to clipboard

Copied

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.

KarenMinOR_0-1695401481101.png

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 01, 2023 Oct 01, 2023

Copy link to clipboard

Copied

LATEST

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.)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp