Using the Style Sheet

You can create styles for the components you add to pages. You can configure a few basic styles such as border, stroke color, and fill color using the Property Inspector. To create any style for a component, you use the global style sheet, which is available in the Library. Styles specified in the global style sheet are available to every design in your project.

Some components use extensive pre-built styles. To modify these existing styles, you can use a browser add-on such as Firebug to discover the style of interest, and then include your modifications in the global style sheet. You can also display the ProtoShare style sheets by using your browser’s view source command while viewing designs in the Review interface.

To create new styles, follow these general steps:

1. Specify component ID and classes.
Open the Property Inspector for the component. The ID and class names are specified in the Mark-up section. Each component has at least one default class name Use the default class name, or specify your own class name or ID.

2. Open the style sheet.
Click the Stylesheets folder in the Library tab, then double-click the style sheet item to open it in the Editor.

3. Specify the styles.
Use the standard CSS syntax to specify the styles. Precede class names with a . (dot) and IDs with a # (pound).