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