Generate Small Content Snippets

Insert a warning element

To insert a warning that will serve as the starting point, follow these steps:

1. Type some text in a new (or existing) topic;
2. Select the whole paragraph (triple click);
3. Click on the Style button above the editor;
4. From the popup menu, select style.custom;
5. From the Styles dropdown list, select Warning.

Create your generated content snippets

A stylesheet selector already exists for this tag in all Tópico default stylesheets, showing its content proheminently enough in your publication (and in the editor window). Now what if your client asks if you could add the word "Warning" at the top left of all the warnings in the collection. There are already over 90 warnings. Going through each of them manually would long and prone to error.

In Tópico, you can setup a small generated content snippet and create a stylesheet selector for inserted elements to slove this challenge, within minutes.

Follow these steps to create a generated snippet:

1. Select the Advanced tab;
2. Add the following entries to the Generated content grid.

This new "warninglabel" div will be inserted before all <div class="warning"> in all your published topic.

Add a CSS style for the generated content

The other important thing to do is to setup the stylesheet selector that will make this new content fit within the existing publication. In the context of this document, the following selector did the trick.

To add a selector for your new tag, follow these steps:

1. Click on the small e button at the left of the Stylesheet drop down list;
2. From the popup menu, select the stylesheet that's shown in the drop down list;
3. If prompted for a program to open the file, choose Notepad;
4. Find place in the stylesheet for your selector;
5. Add the following selector.

div.warning_label {margin-left:24px; margin-bottom:-28px; padding:4px; 
        color:#8B0000; font-weight:bold;}

In the above selector, the margin-bottom property was set to a negative number to compensate for the large top margin that is defined for the original warning div.

Once you have published the collection one last time and uploaded the text content of the publication to your web server, you're now ready to ask your client to refresh his browser to see the change.