Adding a Gradient Background to Fields

To create a gradient background in your Text Fields and Text Areas we are going to use an online tool to create a gradient .png file and then add it to our style.

Steps to adding a gradient background

1.  Create the gradient background file

You can create a gradient using any tool you would like.  The resulting image should be about 4 x 10 pixels.  If you would like to use an online tool, go to this website (http://www.formstylegenerator.com/). Under the first option “design.your backgrounds” select gradient from the dropdown menu.  Choose the colors for “Gradient from” and “Gradient to”.  The tool will update the sample form so you can see what the gradient will look like.

When you have found an appropriate looking gradient you can click on the blue “Your Image” button in the right column.  Save the image.

2.  Save the gradient to your web server

In order to use the gradient image in your DataPages you will need to host the image on your web server so it can be referenced.  Upload the image to your server and note the URL because you will need it later.

3.  Update your DataPage Style

In the Caspio Bridge Explorer window go to the Styles view.  Select the style of your DataPage and click the Edit button.  On the first screen click the checkbox for Show Advanced Options (CSS source).  Proceed to the settings page.  Click on the Source tab and select the Forms/Details section, Fields option.

Add the following line of CSS code to both the first and second object:

Replace “Gradient URL” with the address of the gradient image from step 2.

If your Gradient does not go to white then you will need to replace #FFFFFF with the “Gradient to” color from step one.

4.  Preview Your Style

You can preview the gradient by clicking the preview button near the lower left hand corner of the Style wizard.  Click Finish to save your Style.

Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.