Gradient Backgrounds for Fields
2 minutes to readTo create a gradient background in your Text Fields and Text Areas, you will need to use an online tool to create a gradient .png file and then add it to our style.
- First 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 Background-style dropdown menu. Choose the colors for Gradient from and Gradient to dropdowns. The tool will update the sample form so you can see what the gradient will look like in real time.
When you have found an appropriate looking gradient, you can click on the blue Your Image button in the right column. Save the image.
- Next, 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.
- Next, update your DataPage Style. Navigate to the Styles listing, select the style of your DataPage and click Edit.
- Click 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:
background: url(Gradient URL) repeat-x #FFFFFF;
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.
- You can preview the gradient by clicking Preview near the lower right hand corner of the Style wizard. Click Save to save your Style.
Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio 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.
