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:
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.
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.