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

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.


How to Use CSS Manager

Opening CSS Manager

In EASYProcess under the Web Application tab is the link to the CSS Manager.

 

This will open up the following page:

Using the CSS Manager

To know what you want to edit in the CSS Manager you should go to the Application website. From there right click on what you want to change. A popup menu will appear and choose “Inspect Element” if you are on Firefox or choose “Inspect” if you are on Google Chrome.

In the inspector windows that pops up you will see HTML code with a line selected. That line corresponds to the element you selected on the page. On the selected line you will see it contains the class used (for example: “class=”Section-Default-GridHeaderRowCell”). This is what you will need to find what to edit in the CSS Manager.

An example of the Firefox inspector

An example of the Google Chrome inspector

In the CSS Manager on the left side there is the Work With Web Control Skins for Selected CSS list. In the list you can find Section. Expanding it will reveal a few subcategories where one of them is called Default.

If you select Default a list will appear under Skin Elements in the Selected Skin section. If you scroll down you will find one called GridHeaderRowCell. Select that and then you can edit that element. Under Style/Sting String is where you will edit it. You can either manually type it or use the right section to say choose the Font, Layout, Background, etc from an easy-to-use UI.

To use the right hand section just select the tab that you want at the top and go through each attribute and choose how you want it. You can see that the CSS gets automatically put into the Style/Skin String box.

After you have made those changes click on Save Skin to save your changes and to have the changes take effect on the site click on Generate CSS.

Table Cells

When working with cell of a table you have three options to edit it. The first is to edit the first cell, edit the last cell, and then all the rest together with just cell. The second option is to edit the general element which in the screenshot below is just GridCell. The last option is a mix of the two.

Note: If you use the last option be aware that if you have same parameters in both the general one and specific cells, the specific cell parameters override the general one.

CSS Selectors

There are some exceptions to the standard way of applying CSS using the CSS Manager. An example of one is the menu bar. When you right click and go to the inspector for a part of the menu bar you find that the class is only called menu-bar. To edit this expand CSS Selectors in the Work With Web Control Skins for Selected CSS list. If the class already exists then select it and you can edit it under Style/Skin String.

If it is not there then select CSS Selectors and click on the plus button to add it. Select Class (.) and then type in the name exactly as it appears in the inspector. Then you can select it and edit it.

Combinators

Another special case is editing the style of cells in the header row that contain links. If you go to the inspector for that cell and then expand what’s inside that class you will see an a tag.

To edit these go to their class, in this case it is Section-Default-GridHeaderRowCell. Right click on GridHeaderRowCell and add a combinator. Type “a” and then click add. Select the “a” to begin editing it.

In some cases like the filter panel on the item menu you need to create a combinator, but be more descriptive with the name. If you go to the inspector on the filter menu you will see that class=”LeftMenu-Panel”, but if you look a little above it then you will see class=”Section-Default-ContentCell.

In the CSS Manager web control skin list there is nothing called LeftMenu. So you must follow the Section-Default-ContentCell path and under ContentCell create a combinator for LeftMenu-Panel. You would name it exactly as it is in the inspector expect you need to add a period in front of it since it is a class.

With this you will also see that some of the elements have a tag on them like a or h4. In this case we have a tag of h4 for the category names.  

To add a combinator for the h4 tag you would right click on ContentCell again and click add. Then type in the class name with the period in front. After the class name add a space and type in the tag or in this case h4. Now you can select that element and edit it.


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