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 Customise 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 (centred), and the splash screen name.

The icon must be a 192 x 192 pixels .png. 


Advanced Styling


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 app.




Some CSS Examples




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;
}