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.