Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


How to create a note template that can be reused in multiple topics?

New Here ,
Jun 10, 2021 Jun 10, 2021

Copy link to clipboard

Copied

I'd like to make some notes in my help documents like the example attached. Those notes has same indicator image,backgrouand and tile but with different contents. Is there some way to create such a template that can reused across multiple topics?

 

I tried "Snippet". Used a singel table cell as the basic element but cannot modified the content.

Views

120

Likes

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

correct answers 2 Correct answers

Engaged , Jun 10, 2021 Jun 10, 2021
Hi,My process might not be very elegant, but maybe it works for you, too.I created a topic where I put my table, icons, etc. and a dummy text. Then, whenever I need such a note, I copy the code from my template topic and adjust the text.As far as I know, snippets serve to reuse the complete content of it. No way I know of to adjust parts of a snippet. Maybe someone with more RH experience has a more efficient way to reuse notes and the like.Best regardsKarin

Likes

Translate

Translate
Adobe Community Professional , Jun 10, 2021 Jun 10, 2021
Karin's method is what a lot of people do. The other solution is insert the snippet, then right click on it and select convert to text. ________________________________________________________ See www.grainge.org for free Authoring and RoboHelp Information

Likes

Translate

Translate
Engaged ,
Jun 10, 2021 Jun 10, 2021

Copy link to clipboard

Copied

Hi,

My process might not be very elegant, but maybe it works for you, too.

I created a topic where I put my table, icons, etc. and a dummy text. Then, whenever I need such a note, I copy the code from my template topic and adjust the text.

As far as I know, snippets serve to reuse the complete content of it. No way I know of to adjust parts of a snippet. 

Maybe someone with more RH experience has a more efficient way to reuse notes and the like.

Best regards

Karin

Likes

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
New Here ,
Jun 11, 2021 Jun 11, 2021

Copy link to clipboard

Copied

That's a helpful idea for me. Very appreciate your sharing. 

Likes

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
Adobe Community Professional ,
Jun 10, 2021 Jun 10, 2021

Copy link to clipboard

Copied

Karin's method is what a lot of people do. The other solution is insert the snippet, then right click on it and select convert to text.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Please use the Blue reply button at the top. It helps keep posts in order.

Likes

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
New Here ,
Jun 11, 2021 Jun 11, 2021

Copy link to clipboard

Copied

Thanks a lot. I have used this way. It works well.

Likes

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
Adobe Employee ,
Jun 11, 2021 Jun 11, 2021

Copy link to clipboard

Copied

I have done it for myself like this: First, I created a CSS with the styling of the notes. For the icons I simply use FontAwesome. I have attached the CSS for your reference.  I have multiple note types like note, information, attention, caution, danger, important, etc. The note heading text (here: "INFORMATION") is also autogenerated by the CSS.

 

Once set up, you can simply insert a div and assign the class "note" to it. This creates a basic note. You can then add the note type (here: "info"):

 

StefanGentz_2-1623402910689.png

 

What I find charming about this approach is, that the HTML source code in the topic is very slim, and the design of the notes can be centrally managed in the CSS.

 

HTML:

 

<div class="note info">
  <p>This is a placeholder for a simple note. This is a placeholder for a simple note.</p>
</div>

 

 

RESULT:

StefanGentz_1-1623402073388.png

 

 

Likes

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
Engaged ,
Jun 11, 2021 Jun 11, 2021

Copy link to clipboard

Copied

Nice! Thank you for sharing!

Likes

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
Participant ,
Jun 14, 2021 Jun 14, 2021

Copy link to clipboard

Copied

LATEST

That's how we do it also. This gives us the flexibility to easiy apply a "note" style to a regular paragraph, or to change a note to a tip (or warning or caution). This sample is for our PDFs. Our web output looks slightly different.

CSS:

/* Tips, Notes, Warnings, and Cautions */
p.attn_tip::before {
  color: green;
  content: "TIP: ";
  font-weight: bold;
  font-style: italic;
}
p.attn_tip {
  color: green;
  font-style: italic;
}
p.attn_tip a {
  color: green;
  font-style: italic;
  text-decoration: underline;
}

p.attn_note::before {
  color: blue;
  content: "NOTE: ";
  font-weight: bold;
  font-style: italic;
}
p.attn_note {
  color: blue;
  font-style: italic;
}
p.attn_note a {
  color: blue;
  font-style: italic;
  text-decoration: underline;
}

p.attn_warning::before {
  color: orange;
  content: "WARNING: ";
  font-weight: bold;
  font-style: italic;
}
p.attn_warning {
  color: orange;
  font-style: italic;
}
p.attn_warning a {
  color: orange;
  font-style: italic;
  text-decoration: underline;
}

p.attn_caution::before {
  color: red;
  content: "CAUTION: ";
  font-weight: bold;
  font-style: italic;
}
p.attn_caution {
  color: red;
  font-style: italic;
}
p.attn_caution a {
  color: red;
  font-style: italic;
  text-decoration: underline;
}

HTML:

<p class="attn_tip">This is an attn_tip (green). It uses the attn_tip class on the paragraph tag. </p>
  <p class="attn_note">This is an attn_note (blue). It uses the attn_note class on the paragraph tag. </p>
  <p class="attn_warning">This is an attn_warning (orange). It uses the attn_warning class on the paragraph tag. </p>
  <p class="attn_caution">This is an attn_caution (red). It uses the attn_caution class on the paragraph tag.</p>

Hope this helps!

Likes

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