CSS Examples

When you create a RunMyProcess web interface, you can manipulate its css : Implementation tab > Stylesheet > Design icon

You can select either a default .css (with borders, full widget) or a custom CSS that your create on your own.

You can also download existing customized css, upload them into your RMP account and plug them to your webforms :

Here are examples of customized CSS classes you can embed into your stylesheets :

Example 1

To make this, add the following code in your css :

.gwt-TabBar .gwt-TabBarItem {
background: #bdd3d6;        /* background colour of the non-selected tabs */
color: black;           /* font colour of the tab labels*/
}
.gwt-TabBar .gwt-TabBarItem-selected {
background: #7BA8AE;   /* background colour of the selected tab */
}
.gwt-TabPanelBottom {
border-color: #7BA8AE;     /* border colour of the selected tab*/
}

Example 2

To get this style for your tabs, use this css

Example 3

To get this style for your tabs, use this css

Example 4

To get this style for your tabs, use this css

Example 5

Ex : you use a widget array with 2 columns.
CSS class of the first header is array-column-header1 and 2nd is array-column-header2.
To put a red background on the 1st header and a yellow background on the second header, use the following script:

Code

document.getElementsByClassName('array-column-header1')[0].style.cssText = "background-color: red";  
document.getElementsByClassName('array-column-header2')[0].style.cssText = "background-color: yellow";