Styling Widget - Buttons

Elevate your splash form with custom styling.

Prerequisites: You must already be in edit mode with your splash page. (See Finding and Editing Your Splash Page.)

There are three types of settings in this section and have a color border to show which it is:

• WYSWYG: You can see the effect of these changes immediately as you make adjustments. (Image will have a solid green border.)
• SAVE: You must save the changes in the Configuration Panel before you can see the effects. (Image will have a dashed orange border.)
• PUBLISH: You must publish the page in order to see the effects. (Image will have a dotted cyan border.)

A splash page FORM is the border and the area inside the border.

1. Hover over the widget until you see the blue Edit button appear in the upper lefthand corner of the widget and click it. The Styling configuration panel will appear.

2. Click BUTTONS to expand the section.

3. Button Background Color - This setting allows you to customize the default background color.

4. Button Background Opacity - This setting allows you to customize the default background opacity.

5a. Button Background Image - This setting allows you to customize the image to be used for your button.

5b. Click Choose. If the image is already in your Media Library then click your desired image and click Select Image.

If the image is not in your Media Library, then click the Upload files tab and follow the instructions for adding the image to your Media Library. Once that is done, then proceed as described at the beginning of this step.

We recommend a maximum pixel size of 240x65 for a button.

IMPORTANT: Do not use an image URL from another website domain, by clicking From URL, as this may cause issues with the splash page loading. If you do need to use external images, be sure to add those domains to your Walled Garden Settings on your network.

6. Button Hover Background Color - This setting allows you to customize the background color when a guest hovers over the button.

If you choose to use a custom background image for your button, this setting will have no effect when the page is displayed.

7. Button Hover Background Opacity - This setting allows you to customize the default button background opacity.

If you choose to use a custom background image for your button, this setting will have no effect when the page is displayed.

8. Button Font - This setting allows you to use one of three custom fonts for the buttons on your form. If none is chosen, the default font will be used.

To use a custom font, you first need to load it onto your splash page. For step-by-step instructions, refer to Custom Fonts.

9. Button Font Color - This setting allows you to customize the color of the button font.

Click inside the field to display the color pallete .

10. Button Hover Font Color - This setting allows you to customize the color of the button font when a guest hovers over the button.

11. Button Border Color - This setting allows you to customize the color of the button border.

12. Button Hover Border Color - This setting allows you to customize the color of the button border when a guest hovers over the button.

If you choose to use a custom background image for your button, this setting will have no effect when the page is displayed.

13. Button Border Size - This setting allows you to customize the size of the button border in pixels.

14. Button Border Radius - This setting allows you to customize the shape of the button border corners in pixels.

15. Button Shadow Size - This setting allows you put a shadow around your button.

16. Button Shadow Color - This setting allows you customize the color of the shadow around your button.

17. Button Shadow Offset X - This setting allows you to shift the shadow around your button to the right.

18. Button Shadow Offset X - This setting allows you to shift the shadow around your button down.