Custom CSS Style Definitions
Custom CSS Style Definitions Overview
The usual method to override the default CSS is to perform source edits on the element, context, condition, or property set. However, this method has certain limitations – it requires knowledge of XSLT to make changes in multiple places and it locks the element for edits in Arbortext Styler.
To replace the CSS generated for an element, context, condition, or property set,Arbortext Styler allows you to create a custom CSS style and directly associate it with the HTML element generated.
Creating Custom CSS Styles
Custom CSS style definitions are a stylesheet component and are available on CSS Styles tab.
To create a custom CSS style definition, you can either:
• Click > in Arbortext Styler; or
• Click on the CSS Styles tab
in Arbortext Styler and then click Insert CSS Style.
Inserting a new CSS Style adds a new definition called NewCSSStyle. To rename the definition, right-click and select Rename.
To edit the CSS style definition, you can either:
• Click > ; or
• Select the CSS style definition and press Enter; or
• Right-click the CSS style definition and select Edit CSS Style.
The HTML CSS Editor opens. New definitions include a CSS comment, /* CSS declaration block */. This can be removed or left as is. You can then add your own CSS code as though it would appear in a CSS stylesheet between braces following a selector.
You must save the definition before closing the HTML CSS Editor.
The edited CSS style definitions are highlighted in the list for quick reference.
Using Custom CSS Styles
After the CSS style definition has been created, you can associate it with the HTML tag which is generated during publishing.
To do this,
1. For the element, context or condition, select the HTML Tag styling category.
2. Click Add to add an HTML attribute. The Add HTML Attribute dialog box opens
3. In the HTML attribute box, select class.
Under Value, CSS Style is now available.
4. Select the CSS style definition in the box.
To apply more than one definition, click Text and type the names of the CSS style definitions required.
After the attribute values have been set, click OK to apply the changes. The HTML Tag category Attributes are updated:
Creating Output With Custom CSS Styles
HTML output does not require any changes to apply the new CSS style definitions. The CSS style definitions are included in the HTML output as follows:
• When you publish with external CSS files, the custom CSS style definitions appear at the bottom of the CSS styles generated by Arbortext Styler.
• When you publish with internal CSS, the custom CSS style definitions appear in a separate <style> block within the <head> section of the HTML file after the generated style block.
The element to which CSS style is applied has the class attribute set to the value specified in the HTML Tag category.
