Applying Styles
THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO
To markup your content, select the text you want to tag and then select the style from the drop down list that's found at the upper left of the editor window. The default style list contains the mostly used HTML tags.
Common HTML elements/tags
| Style | Tag | Description |
|---|---|---|
| Heading 2 and 3 | h2 to h3 | Headings are used to label your page into a hierarchical construct of content chunks. The h1 and h2 headings are available by defualt in the drop down list since they're the ones you'll most likely use. |
| Address | addr | The Addreess style |
| Block Quote | blockquote | The blockquote tag is to be used for quotes only! |
| Div | div | A block level element often use as a wrapper for some content. |
| Pre | pre | The pre tags keeps the manual line breaks in the published page. |
| Abbr | abbr | Abbreviation |
| Acronym | acronym | Acronym |
| Cite | cite | Citation |
| Code | code | Computer, machine or whatever type of code you want it to be. |
| Dfn | dfn | Definition |
| Kbd | kbd | Keyboard |
| Quote (en) | quote xml:lang="en" | Short quote (in English) |
| Quote (fr) | quote xml:lang="fr" | Short quote (in French) |
| Samp | samp | Sample |
Selecting a style list
The Styles button at the top left of the editor window lets you define your own styles that make it easier to insert your personal markup tags.
Here's a list of the tags found in the default version of styles.custom, a file that is present in the default collection. This file can be customized to define your own tags for each collection you create.
| Style | Tag | Description |
|---|---|---|
| Highlight | span class="highlight" | Higlight some running text inside a paragraph or a whole paragraph. |
| Indent Left | p class="indent" | Indent the left side of a paragraph. |
| Example | div class="example" | Insert a div element of class example |
| Tip | div class="tip" | Insert a div element of class tip |
| Caution | div class="caution" | Insert a div element of class caution |
| Warning | div class="warning" | Insert a div element of class warning |
| Hidden | div class="hidden" | Insert a div element of class hidden |
| Editor only | div class="editor-only" | Insert a div element of class editor-only |
Creating a custom style list
Style list files are saved in the root folder of the collection, along with the master file and the insert.xml file. You can edit the styles.custom.xml file, the styles.html.xml file or create a new one of your own. Try this.
- Open the file styles.custom.xml and save it as styles.new.xml;
- Modify existing groups and tags to define your custom styles;
- Save the new file.
- Restart Tópico
When you click on the Styles button, you'll see your new style list ready to be selected.
Note: You can name your file as you wish, as long as the file name starts with "styles".
Learn how to define new styles and styleshset selectors in this tutorial.
THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO