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.
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
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
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
Copy link to clipboard
Copied
That's a helpful idea for me. Very appreciate your sharing.
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
Copy link to clipboard
Copied
Thanks a lot. I have used this way. It works well.
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"):
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:
Copy link to clipboard
Copied
Nice! Thank you for sharing!
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
Your example is exactly what I want to achieve: a cleanly formatted text block for notes, etc.
I have loaded your SCC in RoboHelp 2022.3.93 and have come to the conclusion that notes work, but the other options do not.
Can you help with this?
Note: I am not a programmer, so it isn't easy to understand what is happening.
Copy link to clipboard
Copied
Stefan is a staff member and whilst Adobe staff sometimes help (obviously), they don't necessarily follow the forum.
By SCC I assume you mean CSS and you have got Notes working. Give us an example from the others and let us know how it is failing. If you need to add a screenshot, please use the photo icon to insert images within the post. Seeing an image inline with the text makes it easier for anyone answering or viewing the post.
________________________________________________________
My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.
Copy link to clipboard
Copied
Hi Peter,
I have more in detail looked at the dita.style.notescss file again and see that it is not complete. The note option is complete, but the rest is not. By copying those blocks for the note option, the other options now also work.
I still have one remaining question. How do I add "Font Awesome 5 Free" fonts to RoboHelp?
Thanks in advance for your help.
Copy link to clipboard
Copied