Avocados Lab

It may happen that you want something more in terms of styling than we offer. You can use custom CSS section to achieve such things. We are including some examples below.

This feature requires you to have basic CSS knowledge, it's very easy thing to learn! Head over to this tutorial and trust me you will be proud of yourself at the end.

1. Visit "Design & Validator" tab once you open an app.

2. Click on "Custom" tab (last tab)

3. Write your own CSS and hit "Save" when done. 

Notes:

1. You might need to add "!important" in certain cases to override default values.

2. Live validator won't show changes you add to Custom CSS section.

Samples

- Change title font family

#rbz-app-title-text {
    font-family: Quantico,sans-serif;
}

- Remove top padding from section

#rbz-zipcode-check-section {
    padding-top: 0;
}

.rbz-valid-zipcode {
    background-color: #77d277;
    padding: 10px;
}

.rbz-invalid-zipcode {
    background-color: #e67474;
    padding: 10px;
}

Note that app be default pulls font information from your active theme so you don't need to configure that anywhere. If you feel need of changing font, you can change it through Custom CSS.