Top
Top
LibraryEASYProcess Reference ManualCSS
CSS Manager Overview
CSS and Skin Management
Skin Element Management
Style Editor

CSS Manager Overview

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 is a collection of Skins and named selectors that decide how the entire site will look. A single css file can 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 has 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. 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 Theme’s 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.


CSS and Skin Management

CSS Management

This section controls the selected CSS file and provides controls to create a new CSS file, generate the CSS file for the selected CSS file, or to set the selected CSS file as the default for the portal.

Add New CSS

The “Add New CSS” button opens a window that allows creation of a new CSS that can either be empty or a duplicate of an existing CSS file:

Generate CSS

The “Generate CSS” button will generate the CSS file for the selected CSS file. This will (re)create the CSS file from scratch in case the file is missing, damaged, or out-of-date. Clicking this button is not required after each CSS file change, because saving changes also automatically generates the CSS.

Set As Default

The “Set As Default” button sets the current CSS file as the default CSS for the website. This is saved in the configuration variable: System → Website → Default → CSS file name.

Work with Web Control Skins

After selecting a CSS file from the “CSS Management” drop down list, the Web Control Skins area will become populated with the Skins defined for the selected CSS file.

Web Controls

This section is used for the selecting individual EASYProcess web controls and managing the skins associated with each web control. In the image above, see the listed Web Controls and the existing Skins defined for the “Button” Web Control.

CSS Selectors

Below the web controls, CSS selectors can be managed. This is for the purpose of applying styling to elements outside of the scope of web controls (e.g., table, tr, td, or div tags can be added to the selected css file through this feature).

Actions

Add New Skin/CSS selector

This button is for creating new web control skins or CSS selectors.

If a web control is selected (e.g., Button) when this button is clicked, a window opens asking for the new skin id to be created for that web control:

In the first example below, the Button has three Skins created: Default, LinkImage, and Mobile. In the second example, we have added a newly created Skin called “test” for the “Button” web control.

If the “CSS Selector” node or one of the selectors themselves is selected, then a window opens asking for the CSS selector to be created/edited:

  • General Element - the CSS selector will be created as is.
  • Class (.) -  the CSS selector will have a ‘.’ added to the beginning of the selector specifying that it is selecting an HTML tag with the class entered into the CSS selector.
  • Id (#) -  the CSS selector will have ‘#’ added to the beginning of the selector specifying that it is selecting an HTML tag with the id entered into the CSS selector.

Note: Class and id selectors can also be manually created as a general element, and CSS combinators can be manually added to any CSS selector type.

Duplicate Skin

This button is for duplicating an existing skin with a new skin id. This button only works if a web control skin is selected.

Delete Skin/CSS selector

This button is for deleting the currently selected skin or CSS selector from the currently selected CSS file.


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.

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

Skin Element Tree

Button

Section

This section allows the skin elements that EASYProcess uses for a particular web control skin to be selected for editing and preview styling for. This box also allows Combinators to be added, edited, or deleted to a particular skin element through right-click of the mouse.

Combinators

Combinators are added as additional CSS rule sets and can have their own styling apart from the skin element parent. Combinators are intended to allow styling using a particular skin element as a point of reference (e.g., targeting every text box that is a sibling to a button using the parent skin element).

“Add Combinator” opens this window and will be added to the end of the main selector as-is with a space added in between if needed (e.g., “child_tag” and “:hover” under “ButtonStyle” will generate as “ButtonStyle child_tag” and “ButtonStyle:hover” respectively):


“Edit Combinator” will open the same window as “Add Combinator” except with the name already populated by the selected combinator and allows changing the combinator name:

“Delete Combinator” will delete the selected combinator for the selected CSS file, web control, skin, and skin element.

Style/Skin String

Button

Section

This section is for the style string used for the selected skin element/combinator. This box is used as the declaration block in CSS styling and all styling entered in this box will be applied to the selected skin element or combinator.

The “Copy to Clipboard” button copies the full style string to the clipboard.

The “Preview” button updates the preview section with the style string currently in the text area without saving any changes. This can be used to view changes made without first committing those changes to the database or website.

Style Preview

Button

Section (Header Style)

This section shows a preview of what certain web controls will look like after the style string is applied through CSS.

The “Save Skin” button saves any changes made to the current skin elements and regenerates the CSS file.


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.

Style Editor in Themes

This tool is embedded in the Theme Manager screen and is used to generate the style string which is placed in the Skin Element (CSS class) for the selected Theme. As options are selected the Style String will reflect the changes and the Preview will display the preview for the selected options.

The various tabs and fields can be used to change specifics properties of the style string with an organized and visual representation of various common CSS properties.

It is possible to set a style that is not controlled from within the Style Editor. In this case the desired style string can be directly typed into the Style String area of the Skin Element Management panel. However, the next change made in the Style Editor would override this change. For that use, there are some checkboxes available above the Style Editor.

The checkboxes above the style editor are for disabling the style editor for an entire theme, specific skin element (property), or specific CSS selector. This is to help prevent the style editor from overriding the style string when the CSS declarations typed in are not recreatable through the Style Editor.

Style Property in WebParts

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