CSS and Skin 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:
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.
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.
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).
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.
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.