Example Styles

AppBuilder uses classes and elements in customstyles.css.

The priority value is (a,b,c,d), a=0,b=0. For the style to take effect, do not make the style’s priority lower than the default UI5 style. The priority level of the selector is decided in Point of combination of selectors. The priority is calculated by (a,b,c,d).

Style attribute = a
Number of ID attributes = b
Number of classes = c
Number of element names = d

For example, if there is a combination of the following selectors in index.html:

<body>
  <article>
    <p>This is <span id="red">paragraph</span>.</p>
  </article>
</body>

And this combination of selectors in customstyles.css:

article p span{
   color: blue;
 }
 #red{
   color: red;
 }

The paragraph becomes a red character because #red(0100) is bigger than article p span(0003).

The !important Rule

There are some circumstances when you may want to apply a specific style for an element but the same style for that element has also been declared elsewhere in the style sheet or in the document.

For example, there is an anchor tag with embedded styles:

<a style="color: #border: 1px solid #156E8E; background-color: #389ABE;">This is a link</a>

And there is also a separate style for that anchor tag in the style sheet:

a {  
    border: 1px solid #333;  
    background-color: #555;  
}

In this example, you can use the !important rule to force the browser to use the styles in the style sheet instead of the one in the element:

a {        
border: 1px solid #333 !important;         
background-color: #555 !important;     
}

The !important rule indicates that this style is the most important and must be applied over the other styles, even when it is directly embedded in the element.

Button Background

The default button background style is defined in the library.css file.

.sap-ios .sapMBtnDefault{   
              linear-gradient(top,#ffffff 0,#f0f0f0 100%)   
}

The priority value is (0,0,2,0), so to make new added classes take effect, make the new style priority no lower than the default. The following is defined in customstyles.css and its priority is (0,0,2,0).

.sap-ios .greenBG {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); 
}

If the priority is same, the style that is loaded later takes higher priority. In this example, the customstyles.css is loaded later than library.css, so what is defined in the customstyles.css take priority.

The Bar Background

The bar control’s default style is defined in library.css and has the priority value (0,0,2,1):

.sap-ios .sapMBar:not(.sapMBarTranslucent) {
webkit-linear-gradient(top, rgb(140, 140, 140) 0px, rgb(64, 64, 64) 100%);
}

.sap-ios .greenBG will not take effect, because its priority is (0,0,2,0). You can change it to have the priority (0,0,3,0):

.sap-ios .sapUiView .greenBG{
webkit-linear-gradient(top, rgb(205, 235, 142) 0%, rgb(165, 201, 86) 100%);
}

The !important Rule

If you want to apply the new styles and do not want to touch details of the class's structure, you can use the !important rule, for example:

.greenBG{
webkit-linear-gradient(top, rgb(205, 235, 142) 0%, rgb(165, 201, 86) 100%) !important;
}