Custom StyleSheet

The "css" property in the configuration file or the command-line allows to specify a custom StyleSheet for the HTML result.

Correspondance from elements to CSS selectors

The tool generates HTML elements from each element defined in the syntax. For example, the pre and source elements will both generate a corresponding "pre" element in HTML.

Usage

This custom StyleSheet will modify the generic StyleSheet generated for the wiki. For example, it allows to modify or add specific StyleSheet rules properties.

For example, the "figcaption" rule specifies the size and font type of image captions:

   figcaption {
     font-size: 13px;
     font-style: italic;
   }

The following rule defined in the custom CSS file will ensure that image captions will be defined in bold rather than italic:

   figcaption {
     font-style: bold;
   }

Note that the specific StyleSheet rules will not have any effect on the PDF generation.

List of useful style classes to customize

• "noteLink": superscripts links to notes in the page
• "glossaryTitleLink": links in glossary words
• "note": notes in the page
• "boxed": boxed text (when boxes are limited to the boxed text)
• "boxedUnlimited": boxed text (when boxes go to right of the page)
• "div.left": the left div content
• "div.right": the left right content
• "div.middle": the middle content containing the article content
• "div.bottom": the bottom div content containing the footer content
• "div.bottomAdditional": the bottom div additional content for the footer
• "div.middleWithImage" and "div.middleForIDXWithImage" : the div for the background
• "div.captionbox": the div for messageBox captions
• "div.captionboxMiddle": the div for messageBox captions when put on the border
• "div.captionboxError" : the div for error messageBox captions
• "div.captionboxMiddleError": the div for error messageBox captions when put on the border
• "iframe.header": the top iframe from the top header text
• "infobox": the table used for the infobox content
• "infoboxcaption": the infobox caption
• "infoboxtitle": the infobox properties titles
• "infoboxvalue": the infobox properties values
• "figcaption": the images caption
• "code.background": the background style for the code and source elements. See code, pre and source background
• "pre.background": the background style for the pre elements. See code, pre and source background
• "caption": the tables caption
• "blockquote": the blockquotes

Adding custom styles for elements

It is possible to define custom styles for elements by specifying a "class" attribute for the element.

The list of elements which can have custom styles are:

• title
• chapter
• div
• img
• table
• tableHeader
• cell
• ul
• ol
• li
• pre
• source
• code
• blockquote
• term

Custom styles inheritance

Some elements inherit their custom styles from their parent element if they don't have custom styles themselves:

• tableHeader: inherit its custom styles from its parent table if it has no custom styles
• cell: inherit its custom styles from its parent table if it has no custom styles
• ul: inherit its custom styles from its parent ul or ol if it has no custom styles
• ol: inherit its custom styles from its parent ul or ol if it has no custom styles
• li: inherit its custom styles from its parent ul or ol if it has no custom styles

For example in the following table the header and cells will all have the "myTable" custom style:

   <table class="myTable">
      <tableHeader>
         <column>first column</column>
         <column>second column</column>
      </tableHeader>
      <row>
         <cell>name</cell>
         <cell>value</cell>
      </row>
      <row>
         <cell>name2</cell>
         <cell>value2</cell>
      </row>
   </table>

For example in the following list all the child lists and list items will have the "myList" custom style:

   <ul class="myList">
      <li>First item</li>
      <li>Second item</li>
      <ul>
         <li>Third item</li>
         <li>Fourth item</li>
      </ul>
   </ul>

Custom styles example

For example for a red title:

   <title title="the title" class="red" />

If you use a Custom StyleSheet with the following rule, this title will appear in red:

   h2.red {
     color: red;
   }

Examples

Increasing the header height

If you add a lot of content in the header, you may need to increase the header height. For example:

   iframe.header {
   height: 100px;
   }

Changing the font of table captions

You can change the font of table captions with:

   caption {
     font-weight: italic;
   }

Changing the color of titles

You can change the color of first-level titles with:

   h2 {
     color: red;
   }

Customizing the background position

You can repeat the background image and put the first one at the top with:

   div.middleWithImage, div.middleForIDXWithImage {
     background-position: top !important;
     background-repeat: repeat!important;
     background-size: contain !important;      
   }      

Support in DOCX and PDF generation

There is a limited level of support for the custom CSS in the PDF or DOCX generation. See PDF custom CSS support and DOCX custom CSS support for more information.