Style Sheet Builder

Style Sheet Builder

In this topic ...

How do I...
Specifying Inputs

Use the Style Sheet Builder to apply Cascading Style Sheets (CSS) to a specified page in a model. This Builder thus allows you to control the appearance of individual elements on a page. The Style Sheet Builder will automate the process of creating the <style> or <link> tags, and the Builder also allows you to profile segments of the CSS code. so we can present specific styles to different audiences.
The CSS code created by the Builder can be located in either the HEAD tag of a specified page (recommended) or it can be placed at a particular location on a page or set of pages. In addition, the Builder can either embed the CSS code directly in the page (as the body of a <style> tag), or it can create a reference to an external CSS file (using the <link> tag), depending on how you configure it. This latter technique is useful when you want to determine the style at execution time.

How do I...

Apply a CSS Style to a Page Segment

In the Builder select the "Explicit Page Location" Location Type. Use the Page Location control to select the tag on the page at which you want to insert the style. Select a CSS Source type that contains the style information we need and click OK. The Builder will insert the style at the appropriate location.
Profile a CSS Segment

There are a variety of ways we can present different styles based on a user's profile. The easiest is to profile the "CSS URL or File Location" input. For example, you might assign users in one profile CSS file "A" and users in another profile CSS file "B."

Specifying Inputs

This Builder takes the inputs described in the table below. For help on inputs common to many or all Builders such as those in the Properties and HTML Attributes input groups, see "Using the Builder Call Editor"

Input Name Description
Name Enter a name for this Builder call. The Designer displays this name in the Builder Call List.
Location Type Select a page location mechanism for the CSS information. We can choose:

Explicit page Location - To use the Factory's standard Page Location input to specify the page or pages on which this Builder call will act. See "Locating Control Builders on Pages" for detailed documentation about the Page Location input and page location syntax.
In HEAD Tag - To place the CSS information within a HEAD tag of a specific page.

Page Available when the Location Type is "In HEAD Tag".
Select a page in the model in which to embed the CSS information.
The CSS information will be applied to only this page.
Page Location Available when the Location Type is "Explicit page location".
Choose a page and control at which the CSS will be placed.
CSS Source Type Select the way you want to access the CSS source code. We can choose:

Specify Explicitly as Builder Input - To manually enter valid CSS code into this Builder.
Link to File/URL - To create a link to CSS code from a file or from a URL
Import from File/URL - To pull CSS code directly into the page from a file or a URL. NOTE: this method is recommended for models that will be used as services in the Syndication Factory

CSS URL or File Location Available when CSS Source Type is "Link to file/URL" or "Import from file/URL"
Use the picker to select a file under the servable content root, or type in an external URL.
CSS Source Available when CSS Source Type is "Specify Explicitly as Builder Input."
Use the text input area to enter valid CSS markup/code. The code you enter here will be used exactly as it appears.
Note: Use the picker widget to use an indirect reference as the source of the CSS code. This allows you to compute the style sheet code at execution time.
A typical CSS code entry might look as follows:
a:hover {font-family: verdana, helvetica, sans-serif; font-size:11px; font-weight:bold; text-decoration:none; color:#fff;padding-left:6px;}

Input Name	Description
Name	Enter a name for this Builder call. The Designer displays this name in the Builder Call List.
Location Type	Select a page location mechanism for the CSS information. We can choose: Explicit page Location - To use the Factory's standard Page Location input to specify the page or pages on which this Builder call will act. See "Locating Control Builders on Pages" for detailed documentation about the Page Location input and page location syntax. In HEAD Tag - To place the CSS information within a HEAD tag of a specific page.
Page	Available when the Location Type is "In HEAD Tag". Select a page in the model in which to embed the CSS information. The CSS information will be applied to only this page.
Page Location	Available when the Location Type is "Explicit page location". Choose a page and control at which the CSS will be placed.
CSS Source Type	Select the way you want to access the CSS source code. We can choose: Specify Explicitly as Builder Input - To manually enter valid CSS code into this Builder. Link to File/URL - To create a link to CSS code from a file or from a URL Import from File/URL - To pull CSS code directly into the page from a file or a URL. NOTE: this method is recommended for models that will be used as services in the Syndication Factory
CSS URL or File Location	Available when CSS Source Type is "Link to file/URL" or "Import from file/URL" Use the picker to select a file under the servable content root, or type in an external URL.
CSS Source	Available when CSS Source Type is "Specify Explicitly as Builder Input." Use the text input area to enter valid CSS markup/code. The code you enter here will be used exactly as it appears. Note: Use the picker widget to use an indirect reference as the source of the CSS code. This allows you to compute the style sheet code at execution time. A typical CSS code entry might look as follows: a:hover {font-family: verdana, helvetica, sans-serif; font-size:11px; font-weight:bold; text-decoration:none; color:#fff;padding-left:6px;}