2.9.3 CSS Styling in FAB
Styling in FAB
Customize a FAB App with styling according to your company colors, banners, logo.
If you are unsure of what colors are available then use this link to pick the colour that you require.
This gives you the color by name and is more meaningful and readable than the hex value.
https://www.w3schools.com/colors/colors_names.asp
- Form Background Color
Nominate a Background Color at the Project level.
Result
A second example
Result
2. Set color and size on an Icon.
For the Color refer to the chart mentioned at the beginning of this document.
For the size use either em or pixels.
If you need to know more about the relationship between pixels and em
then use this link and test using the converter.
https://www.w3schools.com/cssref/css_pxtoemconversion.asp
3. Form background.
At the project level you can set a background Image.
In this example the background image has been stored as a MIME
object within a SAP BSP.
Hint: Choose light background images so that the data on the screen can be seen!
4. Styling a Form.
a. At the Page level of the FAB tree, right click and choose Add Style CSS.
b. Give the Style a name prefixed with a dot (.).
c. Go into the .sundryForm Definition and add content to your CSS Style file.
The content must be placed in the highlighted area below.
d. Use the tabs and enter the characteristics that you require or enter
them directly into the highlighted area. Always make sure that you have the correct
Class Highlighted, if not tab usage may not drop into the content area.
e. Use the CSS Styling on your form by entering the name of the selector that you want
to make use of on your Form Element (no (dot . required).
f. Result is lime background on the Form with a border and radius
as defined in step 4d.
