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.

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.

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.