...

Anchor
_Toc530383501
_Toc530383501

Manage the styling of your forms to give your application a more aesthetically pleasing style. To recap the steps in the video:

Hide the UID

Go into the configuration form for the grid UID
In Grid Settings set Hidden
Go into the configuration form for the field UID
In Style Settings set Hidden

Create an Area to hold action buttons

Right Click on the lower area of the screen, click on Open Palette, then click Basic Components.
Drag the Area onto the form
1. Note, if you can't see the Area right click and go to Find in Explorer
Enter the settings
1. Name: SimpleButtonHolder
2. Background Colour: #9b9b9b
3. Position Settings
  - Width: 100%
  - Height: 45px
  - Bottom: 0px
Use Find in Explorer to find the action buttons
Holding the Shift key and drag the buttons onto the SimpleButtonHolder area
Go into the configuration form for the area SimpleButtonHolder
Enter the settings:
1. Direction: Row Wrap
2. Justify: Flex End
3. Align: Center

Save your changes to see the results.

Update the style for the Delete button

Go into the configuration form for the button Delete
Open the section Style Settings
Set the Border Style to Solid
Set the Border Width to 3
Set a Border Colour
Set a Background Colour
Set a Text Colour

Save your changes, close and reopen the dashboard to see the results.

Update style for all buttons

Go into the configuration form for a button - you can use any button
Open the section Shared Styles
Open the shared style Button Style
Set the Border Style to Solid
Set the Border Width to 3
Set a Border Colour
Set a Background Colour
Set a Text Colour

Save your changes to see the results. All buttons will update to reflect the new style settings, other than the Delete button. The styling on the Delete button overrides the styling applied through the shared style Button Style.

Clear styles

Clear your style settings on the Delete button
Save your changes - the Delete button should now look at the same at the other buttons
Clear your style settings in the shared style Button Style
You should see the styling for all buttons return to the default

Create CSS property for a button

Open the configuration form for the button Delete
Go to the section CSS Properties
Press the + button to add a css style
Enter the settings:
1. CSS Tag: background-color
2. Value: #bdbdbd
3. State: Mouse Over

To access a colour picker within PhixFlow

Open the configuration form for an object on the edit form - you can use any object for this (button, button label, form, field, etc.).
Use the colour picker to choose a colour you like, copy and paste the # value into the Value field of the CSS property.
Close the other configuration editor making sure you do not save your changes.

Save your changes, close the dashboard and reopen it to review the result.

Create a Shared Style

Open the configuration form for the shared style Button
Drag the CSS property you created for the Delete button into the shared style
Click the + button to add another style
Enter the settings:
1. CSS Tag: padding-right
2. Value: 5px

Save your changes. You should now see the mouse over colour applied to all buttons

Create a specific style override

Open the configuration form for the button Delete
Go to the section CSS Properties
Press the + button to add a css style
Enter the settings:
1. CSS Tag: background-color
2. Value: red

Save your changes. You should now see the red mouse over colour applied to the Delete button.

Sort Order

Open the configuration form for the button Add
Set Order to 3
Open the configuration form for the button Update
Set Order to 2
Open the configuration form for the button Delete
Set Order to 1