Display Content in the Editor Only

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

In this tutorial, you'll learn how to display content in the editor only by associating different CSS properties to the editing and publishing stylesheets. This method could be useful to guide a casual author during the editing process.

Add the tag to the styles list

Once you have decided on which name you'll give to your tag, follow these steps to create a new style file first:

  1. Right-click on the Styles button above the editor;
  2. From the popup menu, select styles.custom.xml;
  3. Once the file is open for editing, add the style below to the group of your choice;
  4. Save and close the file.
XML
<style>
<name xml:lang="en">Editor Only</name>
<name xml:lang="fr">Éditeur seulement</name>
<description xml:lang="en"/>
<description xml:lang="fr"/>
<elt>div</elt>
<attr>
<name>class</name>
<value>editor-only</value>
</attr>
</style>

You can then apply this style around selected content through the Styles button dropdown.

Add the style to the publishing stylesheet

To add the selector to the publishing stylesheet, follow these steps:

  1. Select the Content tab;
  2. Click on the small e button at the left of the Stylesheet drop down list;
  3. From the popup menu, select the stylesheet that's shown in the drop down list;
  4. If prompted for a program to open the file, choose Notepad;
  5. Add the style below anywhere in the stylesheet; (1)
  6. Save and close the file;
  7. Click again on the small e button at the left of the Stylesheet drop down list;
  8. From the popup menu, select “Reresh the editor” from the drop down list.

(1) All stylesheets that are installed with Tópico already have this selector.

CSS
div.editor-only {display:none;}

Add the style to the editor stylesheet

To add the selector to the publishing stylesheet, follow these steps:

  1. Select the Content tab;
  2. Click on the small e button at the left of the Stylesheet drop down list;
  3. From the popup menu, select the file styles.editor.css;
  4. If prompted for a program to open the file, choose Notepad;
  5. Add the style below at the bottom of the stylesheet; (1)
  6. Save the file.

(1) All stylesheets that are installed with Tópico already have this selector.

CSS
div.editor-only {display:block; color:Maroon;}

You can define as many styles as you want and include them in the same way.

Completely removing content from the publication

Using a stylesheet selector just hides the content from the view. The full content still resides in the output file behind. To completely remove the content from the output files, you'll need just one more pattern to your template.

  1. Select the Collection tab
  2. Click on the small e button at the left of the Template drop down list;
  3. From the popup menu, select the template that's shown in the drop down list;
  4. If prompted for a program to open the file, choose Notepad;
  5. Add the (empty) template below at the bottom of the file; (1)
  6. Save the file.

(1) Most templates that are installed with Tópico do not have this template. Make sure you insert the template before the closing </xsl:stylesheet> tag.

XSLT
<xsl:template match="//xhtml:div[@class='editor-only']" mode="import">
</xsl:template>

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

59 / 194