Add a Background Gradient
This article explains how to add a background gradient to your form.
Steps to adding a background gradient:
Configure your gradient CSS
To create a gradient background, select either the horizontal gradient CSS or the vertical gradient CSS. Replace color1 with the gradient starting color (in hexadecimal) and color2 with the gradient ending color in the appropriate CSS snippet:
Horizontal gradient:
background: -moz-linear-gradient(top, #color1 0%, #color2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#color1), color-stop(100%,#color2));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#color1', endColorstr='#color2',GradientType=0 );
Vertical gradient:
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#color1), color-stop(100%,#color2)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#color1, endColorstr='#color2,GradientType=1 ); /* ie */
Open your Style
In the Caspio Bridge Explorer Window, open to the Styles view. Select the Style where you would like to add a gradient background and click the Edit button.
On the first screen of the Style Wizard be sure to check the checkbox for Show Advanced Options (CSS Source).
Add the gradient code to your style
Go to the last page of the Style Wizard. Click on the Source tab to view the CSS source.
For Submission Forms add your gradient code to the .cbFormTable class. You can preview your form using the preview button at the lower left.
If you still see a solid background color, be sure to remove all references to the background-color property in other CSS classes. Specifically if the form rows or cells have a background color, this color will be displayed over the gradient. You can remove this formatting by locating instances of “background-color” in your CSS source tab, or by using the Style Wizard’s Settings tab.
For Tabular Reports you can add a gradient to the header row .cbResultSetTableHeader class.
You can also apply gradients to List/Gallery Reports by adding the CSS to .cbResultSetListViewTableOddCell and .cbResultSetListViewTableEvenCell giving your this result:
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.
