To add styling to your apps, navigate to the My Apps page in the side menu. Click Manage on the app you would like to edit, and move to the Styling tab.


You have the ability to add styling using hex colour values, logos, and progressive web app features. 

For the bold we also include advanced styling options with custom CSS styling for your Apps and Forms. 

Custom CSS allows for more specific styling options. See the Image below for how these can be used to style your forms library.



Progressive Web App Settings


These are used to add an app name, splash screen title, and an icon to your progressive web apps. 

The splash screen is made up of the highlight colour (background), icon (centered), and the splash screen name.

The icon must be a 192 x 192 pixels png. This will scale to the device.



Advanced Styling


To add CSS styling to your organisation open the forms tab and then the Library Styling tab. 

Here you are able to add the Foreground Colour, Highlight Colour, Contrast Colour as well as the Banner Image. 


You are also able to add your own Advanced Styling. To use the Advanced Styling press the 'EDIT CSS' button. 

This will open an editor box which will allow you to input CSS code. To see the class References, press the 'CSS REFERENCE GUIDE' button. 

To save and view your CSS code use the 'SAVE' button, and then open the forms library. 



Now lets have a look at a basic form with zero styling.




Pretty simple right, lets see what we can do with the same form and some CSS. 




Looking much more interesting. If you want to try these for yourself just copy the example code below and past it into the CSS section of your forms library.


Example 1


.ob-radio__input-label:hover, .ob-checkbox__input-label:hover {
 color: #2e87fb !important;
}

.is-light.ob-button {
    background-color: #2e87fb !important;
    border-color: transparent;
    color: #363636;
}

.ob-button {
  display: inline-table;
  background-color: #5993fb !important;
  border-radius: 20px;
  padding: 2px !important;
}

.ob-button {
width: 35%;
}

.ob-heading__text {
  margin-top: 20px !important;
  padding: 5px !important;
  text-align: center;
  color: #2e87fb !important;
}
  
.button.is-success, .is-success.ob-button, .is-success.bm-button {
    background-color: #2e87fb;
}
  
.form-list .div__header {
    background-color: white !important;
    box-shadow: none !important;
}
  
.forms-renderer {
   background-color: #2c2c2c !important;
}

.select select {
    background-color: #424242 !important;
    border-radius: 20px;
    border-style: hidden;
    color: white !important;
}

.label {
  color: white !important;
}

.ob-repeatable-set .ob-repeatable-set__container > .ob-button_remove {
  width: 35px !important;
  margin-bottom: 10px !important;
}

.ob-repeatable-set > .ob-repeatable-set__container {
  background-color: #787b88 !important;
  border-radius: 8px !important;
}

.ob-repeatable-set > .ob-button__add {
}

.modal-card-body {
    color: black !important;
}

.ob-searchbar {
  background-color: white !important;
}

.input {
    background-color: #424242 !important;
    border-radius: 20px;
    border-style: hidden;
    color: white !important;
}
  
.forms-renderer .ob-buttons-submit {
    justify-content: center !important;
}

  .button.is-success.is-inverted, .is-success.is-inverted.ob-button {
    background-color: #fff;
    color: black !important;
  }
  
.forms-renderer .ob-element:not(:last-child) {
    margin-bottom: 1rem;
}

.ob-button-submit, .ob-button-submit-cancel, .ob-button-save-draft {
    min-width: 100% !important;
    border-radius: 20px !important;
    margin-right: 0px !important;
}

.searchbar::placeholder {
    color: white;
    opacity: 1;
}

.forms-renderer .ob-buttons-submit {
    margin-top: 1.5rem !important;
}

.forms-renderer {
  font-size: 1rem;
  color: white !important;
}


Example 2


.form-list .searchbar {
  background-color: transparent !important;
}
  
body {
  background: white !important;
  background-size: cover;
  width: 100%;
}
  
.form-list .div__header {
  background-color: transparent !important;
  box-shadow: none !important;
}

.forms-renderer {
  background-color: transparent !important;
}

.ob-radio {
  overflow: hidden;
  padding: 3px;
}
    
.ob-radio > .ob-label {
  clear: both;
  margin-right: 5px !important;
  display: inline-table;
  width: 50%;
}
    
.ob-radio__button {
  display: inline-table;
  margin-bottom: 2px !important;
  width: 100%;
}
    
.ob-buttons-radio {
  display: inline-table;
  margin-bottom: 10px !important;
  float: right;
  width: 50%;
}

.ob-checkbox {
  overflow: hidden;
}

.ob-checkbox > .ob-label {
  clear: both;
  margin-right: 5px !important;
  display: inline-table;
  color: black !important;
  width: 50%;
}
    
.ob-checkbox__button {
  display: inline-table;
  margin-bottom: 2px !important;
  width: 100%;
}

.ob-buttons-checkbox {
  display: inline-table;
  margin-bottom: 10px !important;
  float: right;
  width: 50%;
}

.is-primary.ob-button, .is-primary.ob-button:hover{
    background-color: lightblue !important;
    border-color: transparent;
    color: #363636 !important;
}

.is-light.ob-button {
    background-color: whitesmoke;
    border-color: transparent;
    color: #363636;
}

.ob-buttons-radio .ob-button-radio-container .ob-button {
  background-color: rgb(255,255,255,0.5);
  border-color: #acb1b5;
  color: #363636;
}

.ob-heading__text {
  margin-top: 20px !important;
  padding: 5px !important;
  font-weight: 400;
  text-transform: uppercase;
  color: #94999d;
}
  
.button.is-success, .is-success.ob-button, .is-success.bm-button {
  background-color: #acb1b5;
}
    
  .form-list .div__header {
    background-color: transparent !important;
    box-shadow: none !important;
  }
    
  
  .ob-information__content {
    margin-bottom: 0px !important;
    padding-bottom: 0px;
    padding: 3px !important;
    margin: 4px !important;
    width: 50%;
  }


.is-primary.ob-button:focus:not(:active) {
    background-color: lightblue !important;
  }

.select select {
  background-color: rgb(255,255,255,0.5) !important;
  border-style: outset;
}

.input {
  background-color: rgb(255,255,255,0.5) !important;
  border-style: outset;
}

.label {
  color: #3d3f40 !important;
}
  
.forms-renderer .ob-buttons-submit {
  justify-content: center !important;
}
    
.button.is-success.is-inverted, .is-success.is-inverted.ob-button {
  background-color: #fff;
  color: black !important;
}
    
.forms-renderer .ob-element:not(:last-child) {
  margin-bottom: 1rem;
}
    
.ob-button-submit, .ob-button-submit-cancel {
  margin-right: 3px !important;
}


Example 3


.is-primary.ob-button, .is-primary.ob-button:hover{
    background-color: #29466a !important;
    border-color: transparent;
    color: #eef5ee !important;
}

.is-light.ob-button {
    background-color: #eef5ed;
    border-color: transparent;
    color: #0b1823;
}

.ob-radio > .label {
  clear: both;
  padding-top: 8px !important;
}

.ob-buttons-radio {
  display: inline-flex;
  margin-bottom: 10px !important;
  justify-content: center;
}

.button.is-success, .is-success.ob-button, .is-success.bm-button {
    background-color: #29466a;
  color: #eef5ee;
}

.ob-information__content {
  background-color: transparent !important;
}

.ob-signature > .label {
  width: 100% !important;
}

.ob-signature > .control {
  width: 100% !important;
}

.ob-button__clear, .ob-button__done {
  margin-left: 15px !important;
}

.ob-repeatable-set .ob-repeatable-set__container {
    position: relative;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.ob-repeatable-set .ob-repeatable-set__container > .ob-button_remove {
    position: absolute;
    top: 0rem;
    right: 0rem;
    max-width: 10px;
    border: 0;
}

.ob-information {
background-color: transparent !important;
}

.ob-form__element.ob-heading {
  background-color: transparent !important;
}

.forms-renderer .ob-heading__text {
  margin-top: 0px;
  background-color: transparent !important;
  text-align: center;
  color: #0a1723;
}

.ob-label {
  font-size: 14px !important;
  display: inline-flex;
  width: 35%;
}

.control {
  display: inline-flex;
  width: 65%;
  float: right !important;

}

.input {
  border: none !important;
  border-bottom: 2px solid #29466a !important;
  border-radius: 0px !important;
  background-color: transparent !important;
}

.ob-form__element {
  overflow: hidden;
  background-color: rgb(255,255,255,0.3);
  border-radius: 0px;
  padding: 5px;
  margin: 4px;
}

.button.is-success.is-inverted, .is-success.is-inverted.ob-button {
  background-color: #fff;
  color: black !important;
}
    
.forms-renderer .ob-element:not(:last-child) {
  margin-bottom: 1rem;
}

.forms-renderer {
  font-family: "Arial" !important;
  padding: 15px !important;
  background-color: #b8d1f1;
  color: #0a1723;
}

.forms-renderer .label {
    font-size: 1rem;
}

.ob-button-save-draft {
   display: none;
}

.button.is-success, .is-success.ob-button {
    background-color: #a1e0ab;
    border-color: transparent;
    color: #363636;
}

.forms-renderer .ob-buttons-submit {
  margin-top: 2rem;
  float: right;
}