Defining styles for HTML articles in Content Station 9

The HTML Editor in Content Station is used for working on articles in HTML format.

The styles for formatting the text are defined through the componentDefs.xml file.

Paragraph styles

The paragraph styles that can be chosen from the formatting toolbar are defined by the <paragraphstyles> tags, each with their own <style> tag. The following attributes can be used:

• name. The name of the style, used to lookup the correct style definition in the style sheet. Make sure that this matches the style sheets name attribute listed under <style> (see Style sheets).
• label. The name of the style as it should appear in Content Station.

<paragraphstyles>
   <style name="para_head_style" label="Head"/>
   <style name="para_body_style" label="Body"/>
</paragraphstyles>

Character styles

The character styles that can be chosen from the formatting toolbar are defined by the <characterstyles> tags, each with their own <style> tag. The following attributes can be used:

• name. The name of the style used by the system. Make sure that this matches the corresponding character style used in InDesign or InCopy, so that the correct style is automatically applied when the article is placed on a layout that is set up with identically named character styles.
• label. The name of the style as it should appear in Content Station.

<characterstyles>
   <style name="char_head_style" label="Head"/>
   <style name="char_body_style" label="Body"/>
</characterstyles>

Style sheets

The style sheet that the HTML Editor uses to render the article in the editor is defined by the <stylesheets> tags. The style sheet should contain entries that match name attribute of the character and paragraph styles (see above).

Style sheets are defined per Publication Channel and the editor will lookup the style sheet using the articles current Publication Channel. If no style sheet is defined for the Channel, the style sheet defined under the default Brand will be used. For articles that are published to multiple channels you can switch between the style sheets in the editor.

The following attributes can be used:

• url. The absolute or relative path to the style sheet.
• label. The name of the style as it should appear in Content Station.
• channelid. The ID of the Publication Channel for which is should be used. Obtain the ID by opening the Publication Maintenance page and verifying the number following "channelid=" in the address bar of the Web browser.

<stylesheets>
   <stylesheet url="config/editor-styles/default.css" label="Default"/>
</stylesheets>

Configuration for all Brands versus configuration for specific Brands

The styles described above are themselves placed between the <brand> </brand> tags. These carry an ID by which you can define to which Brands the settings apply.

When only one Brand is defined, the ID is set to "default" and all settings are used across all Brands:

<brand id="default">

To make the settings specific to a Brand, we can replace "default" by the Brand ID:

<brand id="1">

Typically, you would have settings set up for a default Brand, plus additional settings for each specific Brand.

<brands>
   <brand id="default">
      <components>
         ...
      </components>
      <paragraphstyles>
         <style name="para_head_style" label="Head"/>
         <style name="para_body_style" label="Body"/>
      </paragraphstyles>
      <!-- List with available character styles. Label is shown in editor -->
      <characterstyles>
         <style name="char_head_style" label="Head"/>
         <style name="char_body_style" label="Body"/>
      </characterstyles>
   </brand>
   
   <brand id="1">
      <components usedefaults="false">
         ...
      </components>
      <paragraphstyles>
         <style name="para_head_style_web" label="Head"/>
         <style name="para_body_style_web" label="Body"/>
      </paragraphstyles>
      <!-- List with available character styles. Label is shown in editor -->
      <characterstyles>
         <style name="char_head_style_web" label="Head"/>
         <style name="char_body_style_web" label="Body"/>
      </characterstyles>
   </brand>
</brands>