Top
Top
LibraryEASYProcess Training GuideChapter 6: CSS
Intro to CSS
Style Property in WebParts

Intro to CSS

The CSS Manager can be accessed by going to “Web Application” → “CSS” in the EASYProcess top toolbar. With this tool, a user can easily decide styling with an EASYProcess UI, while EASYProcess builds the CSS file for the site to use which will give the desired results.

1) CSS and Skin Management

This panel is used to create, edit, and delete CSS and Skins.

A Skin determines how an individual element will look (e.g., buttons, labels, sections).

CSS file is a collection of Skins that decide how the entire site will look. A single CSS filecan be selected at one time for a site to use.

A CSS File is generated with all the information EASYProcess needs to applied the selected styles. The CSS File generated for a CSS filehas the following naming convention:

EP_[CSSFileName]_System_DoNotChange.css

It is saved to the Web Server’s “Website” folder under “Styles” in a system themes folder. This is done so that no CSS Files are manually edited and EASYProcess is always used to manipulate the CSS code.

Within this “CSS and Skin Management” panel, you can Add/Edit CSS files. Selecting a different CSS file will populate the “Work with Web Control Skins” area with the Skins defined for selected CSS file. See below a “Button” and its three defined skins:

 

2) Skin Element Management

Once a Skin under a “Web Control” or “CSS Selector” is selected, the “Skin Element Management” panel is populated with the corresponding information. The “Skin” is the actual CSS class that is defined in the resulting CSS File.

After selecting a specific Skin Element (or property of the Skin) for the selected Skin, the Style/Skin String will be populated with the Skin Element’s associated style string and a preview will show in the Preview Skin area.

After a Skin Element is selected in the Skin Element Management area, you will need to use the Style Editor (explained next) to edit/create the style string to assign to the element.

When developing a WebPart, Web Controls such as Button or Section will have a “Skin Id” drop down list to select one of the defined skins. Below is an example of selecting a skin for a Button and Section from the WebPart design page.

Button

Section

3) Style Editor

The Style Editor is a tool which creates the style string to be used by other areas in EASYProcess. It provides the user with an easy-to-use user interface to select certain styling options. As options (bold, underline, margin) are chosen in the Style Editor, EASYProcess generates the CSS Style string to achieve the selected options.

This tool is embedded in the CSS Manager screen and is used to generate the style string which is placed in the Skin Element (CSS class) for the selected CSS file.


Style Property in WebParts

The Theme chosen as the EASYProcess Application Default will point EASYProcess to a single CSS File which will decide how the entire site will look.

When developing a WebPart, you may want to apply additional styling to a web control such as a button, label, or section. If you want this styling to be saved for use in all webparts across the EASYProcess Application, you would create a new Skin and select it from the “SkinId” property in the WebPart Design Page. However, if this is a style you want applied only to this one web control and not saved use everywhere, you could put the style string in the “Style” property instead.

All of the Web Controls you can create a skin for also have an override ability at the WebPart level. This is called the “Style” property and when on the WebPart Design page, the selected Web Control will have a Style property which accepts a style string.

The Style string will be used as priority. Each property in that string will be used instead of the property as defined in the CSS File. For example, if the CSS File defines Labels as black, 12pt sans-serif font, you can put a green color in the style and it will use green color, 12pt sans serif font.

The Style Editor is available in the WebPart Design Page in order to easily build the style string for the Web Control style property. In a section, webpart, label, etc, the style property can be expanded and you could type your own CSS or click the ellipses to open this menu and have EASYProcess generate it for you.

Below the Style Editor is a Preview area to show the style string generated and a preview of the text once the style is applied.

 Clicking “Save” inserts the generated style string into the static value text area for the Style property being edited.


Powered by EASYProcess (© 2019 K-Rise Systems, Inc).