Style Repository
|
| Previous Top Next |
Style Repository |
In the Style Repository sidebar (screenshot below), you can assign external CSS stylesheets and define global CSS styles for the SPS. Style rules in external CSS stylesheets and globally defined CSS styles are applied to Authentic View and the HTML output document. Note that for RTF, PDF and Word 2007 output, styles applied to certain selectors will be discarded (see Defining CSS Styles Globally for details); these rules are identified in the Style Repository (see screenshot below).
The Style Repository sidebar contains two listings, External and Global, each in the form of a tree. The External listing contains a list of external CSS stylesheets associated with the SPS. The Global listing contains a list of all the global styles associated with the SPS.
The structure of the listings in the Style Repository is as follows:
External
- CSS-1.css (Location given in popup that appears on mouseover)
- Media (can be defined in Style Repository window)
- Rules (non-editable; must be edited in CSS file)
- Selector-1
- Property-1
- ...
- Property-N
- ...
- Selector-N
+ ...
+ CSS-N.css
Global
- Selector-1
+ Selector-1 Properties
- ...
+ Selector-N
Precedence of style rules
If a global style rule and a style rule in an external CSS stylesheet have selectors that identify the same document component, then the global style rule has precedence over that in the external stylesheet, and will be applied. If two or more global style rules select the same document component, then the rule that is listed last from among these rules will be applied. Likewise, if two or more style rules in the external stylesheets select the same document component, then the last of these rules in the last of the containing stylesheets will be applied
Managing styles in the Style Repository
In the Style Repository sidebar you can do the following, using either the icons in the toolbar and/or items in the context menu:
Add: The Add icon 
adds a new external stylesheet entry to the External tree or a new global style entry to the Global tree, respectively, according to whether the External or Global tree was selected. The new entry is appended to the list of already existing entries in the tree. The Add command is also available in the context menu. For more details about using external stylesheets and global styles, see Working with CSS Styles. Note that an external CSS stylesheet can also be added or a stylesheet removed via the Design Overview sidebar.
Insert: The Insert icon 
inserts a new external stylesheet entry above the selected external stylesheet (in the External tree) or a new global style entry above the selected global style (in the Global tree). The Insert command is also available in the context menu. For more details about using external stylesheets and global styles, see Working with CSS Styles.
Move Up/Down: The Move Up icon 
and Move Down icon 
move the selected external stylesheet or global style respectively up and down relative to the other entries in its tree. These commands are useful for changing the priority of external stylesheets relative to each other and of global style rules relative to each other. The Move Up and Move Down commands are also available in the context menu. For more details about how to change the precedence of styles, see Working with CSS Styles.
Views of global style properties: The properties of a global style can be displayed in one of three views: (i) by property group; (ii) all properties sorted alphabetically; (iii) properties with values defined, sorted alphabetically. The view can be changed for each style individually. To change the properties view of a global style, select that style and click one of the View icons in the Style Repository toolbar: Grouped 
; List All 
; and List Non-Empty 
. These commands are also available in the context menu under the View Mode item.
Toggle Important: Clicking the Toggle Important icon 
sets the CSS value !important on or off for the selected CSS rule.
Reload All: The Reload All icon 
reloads all the external CSS stylesheets.
Reset: The Reset icon 
deletes the selected external stylesheet or global style.
Expand/Collapse All: All expandable items in both the External and Global trees can be expanded and collapsed with one click using the Expand All and Collapse All commands in the context menu, respectively.
Editing CSS styles in the Style Repository
The following editing mechanisms are provided in the Style Repository:
| • | You can add and remove a CSS Stylesheet, and you can specify the media to which each external CSS stylesheet applies. How to do this is explained in the section External CSS Stylesheets. |
| • | Global styles can have their selectors and properties directly edited in the Style Repository window. How this is done is described in the section Defining CSS Styles Globally. |
See also:
Design Overview, for another view of the external stylesheets in a design.
Working with CSS Styles, for a complete description of how to work with CSS styles and how to use the Styles sidebar to define CSS styles locally on components.
Styles sidebar, for a description of how to use the Styles sidebar.
|