{"id":3365,"date":"2013-10-10T15:04:17","date_gmt":"2013-10-10T22:04:17","guid":{"rendered":"https:\/\/howtostg.wpengine.com\/"},"modified":"2023-07-18T05:43:22","modified_gmt":"2023-07-18T12:43:22","slug":"gradient-backgrounds-for-datapages","status":"publish","type":"page","link":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/gradient-backgrounds-for-datapages\/","title":{"rendered":"Gradient Backgrounds for DataPages"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3365\" class=\"elementor elementor-3365\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6b60c6cb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6b60c6cb\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7c40e3b9\" data-id=\"7c40e3b9\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-37e15914 elementor-widget elementor-widget-text-editor\" data-id=\"37e15914\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can add a background gradient to your DataPages. This article shows how to configure your gradient CSS and adding the gradient code to your Style.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1528237a elementor-widget elementor-widget-image\" data-id=\"1528237a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"548\" height=\"317\" src=\"https:\/\/howto.caspio.com\/wp-content\/uploads\/2021\/04\/background-samples.gif\" class=\"attachment-large size-large wp-image-31075\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-66f0e2b9 elementor-widget elementor-widget-text-editor\" data-id=\"66f0e2b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Steps to adding a background gradient:<\/h3><h4>Configure your gradient CSS<\/h4><p>To create a gradient background, select either the horizontal gradient CSS or the vertical gradient CSS. Replace <b>color1<\/b> with the gradient starting color (in hexadecimal) and <b>color2<\/b> with the gradient ending color in the appropriate CSS snippet:<\/p><p><strong>Horizontal gradient:<\/strong><\/p><pre class=\"prettyprint\">background: -moz-linear-gradient(top, #color1 0%, #color2 100%);\nbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#color1), color-stop(100%,#color2));\n<\/pre><p><strong>Vertical gradient:<\/strong><\/p><pre class=\"prettyprint\">background: -moz-linear-gradient(left, #color1 0%, #color2 100%); &#47;* firefox *&#47;\nbackground: -webkit-gradient(linear, left top, right top, color-stop(0%,#color1), color-stop(100%,#color2));\n<\/pre><h4>Edit your Style<\/h4><ol><li><p>In Caspio, navigate to the Styles listing, select a Style where you would like to add a gradient background, and click <b>Edit<\/b>.<\/p><\/li><li><p>Click the <b>Source<\/b> tab to view the CSS source.<\/p><p><img decoding=\"async\" class=\"aligncenter\" src=\"\/wp-content\/uploads\/2021\/04\/Gradient_backgrounds_for_datapages_1_n.png\" alt=\"\" width=\"835\" height=\"587\" \/><\/p><\/li><\/ol><h4>Add the gradient code to your style<\/h4><ol><li><p>For Submission Forms, add your gradient code to the .cbFormTable class. You can preview your form using the <b>Preview<\/b> button at the lower right.<\/p><p><img decoding=\"async\" class=\"aligncenter\" src=\"\/wp-content\/uploads\/2021\/04\/Gradient_backgrounds_for_fields_2.png\" alt=\"\" width=\"203\" height=\"101\" \/><\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"\/wp-content\/uploads\/2021\/04\/background-sample-300x287-1.gif\" alt=\"\" width=\"300\" height=\"287\" \/><\/p><p>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 \u201cbackground-color\u201d in your CSS source tab, or by customizing properties in the <b>Settings <\/b>tab.<\/p><\/li><li><p>For Tabular Reports, you can add a gradient to the header row .cbResultSetTableHeader class.<\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"\/wp-content\/uploads\/2021\/04\/sample-tabular-results-300x97-1.gif\" alt=\"\" width=\"300\" height=\"97\" \/><\/p><p>You can also apply gradients to List\/Gallery Reports by adding the CSS to .cbResultSetListViewTableOddCell and .cbResultSetListViewTableEvenCell giving you this result:<\/p><\/li><li><p>Click <b>Save<\/b><\/p><p><b>Please note:<\/b> This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio standard feature set. These solutions are provided \u201cas is\u201d 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.<\/p><\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>You can add a background gradient to your DataPages. This article shows how to configure your gradient CSS and adding the gradient code to your Style. 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":766,"menu_order":746,"comment_status":"open","ping_status":"open","template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"class_list":["post-3365","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Gradient Backgrounds for DataPages - Caspio Online Help<\/title>\n<meta name=\"description\" content=\"As for text areas and fields you may use gradient background for DataPages also by adding the specific code to the app&#039;s style. You may use only PNG images.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/gradient-backgrounds-for-datapages\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gradient Backgrounds for DataPages - Caspio Online Help\" \/>\n<meta property=\"og:description\" content=\"As for text areas and fields you may use gradient background for DataPages also by adding the specific code to the app&#039;s style. You may use only PNG images.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/gradient-backgrounds-for-datapages\/\" \/>\n<meta property=\"og:site_name\" content=\"Caspio Online Help\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/caspioinc\/\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T12:43:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/howto.caspio.com\/wp-content\/uploads\/2021\/04\/background-samples.gif\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/gradient-backgrounds-for-datapages\\\/\",\"url\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/gradient-backgrounds-for-datapages\\\/\",\"name\":\"Gradient Backgrounds for DataPages - Caspio Online Help\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/gradient-backgrounds-for-datapages\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/gradient-backgrounds-for-datapages\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/howto.caspio.com\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/background-samples.gif\",\"datePublished\":\"2013-10-10T22:04:17+00:00\",\"dateModified\":\"2023-07-18T12:43:22+00:00\",\"description\":\"As for text areas and fields you may use gradient background for DataPages also by adding the specific code to the app's style. You may use only PNG images.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/gradient-backgrounds-for-datapages\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/gradient-backgrounds-for-datapages\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/gradient-backgrounds-for-datapages\\\/#primaryimage\",\"url\":\"https:\\\/\\\/howto.caspio.com\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/background-samples.gif\",\"contentUrl\":\"https:\\\/\\\/howto.caspio.com\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/background-samples.gif\",\"width\":548,\"height\":317},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/gradient-backgrounds-for-datapages\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Create Applications\",\"item\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Apps With Bridge\",\"item\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Styles\",\"item\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Gradient Backgrounds for DataPages\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/#website\",\"url\":\"https:\\\/\\\/howto.caspio.com\\\/\",\"name\":\"Caspio Online Help\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/howto.caspio.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/#organization\",\"name\":\"Caspio Online Help\",\"url\":\"https:\\\/\\\/howto.caspio.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/howto.caspio.com\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/socmed_banner_image.jpg\",\"contentUrl\":\"https:\\\/\\\/howto.caspio.com\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/socmed_banner_image.jpg\",\"width\":640,\"height\":360,\"caption\":\"Caspio Online Help\"},\"image\":{\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/caspioinc\\\/\",\"https:\\\/\\\/x.com\\\/Caspio\",\"https:\\\/\\\/www.instagram.com\\\/thisiscaspio\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/89240\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/CaspioInc\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gradient Backgrounds for DataPages - Caspio Online Help","description":"As for text areas and fields you may use gradient background for DataPages also by adding the specific code to the app's style. You may use only PNG images.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/gradient-backgrounds-for-datapages\/","og_locale":"en_US","og_type":"article","og_title":"Gradient Backgrounds for DataPages - Caspio Online Help","og_description":"As for text areas and fields you may use gradient background for DataPages also by adding the specific code to the app's style. You may use only PNG images.","og_url":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/gradient-backgrounds-for-datapages\/","og_site_name":"Caspio Online Help","article_publisher":"https:\/\/www.facebook.com\/caspioinc\/","article_modified_time":"2023-07-18T12:43:22+00:00","og_image":[{"url":"https:\/\/howto.caspio.com\/wp-content\/uploads\/2021\/04\/background-samples.gif","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/gradient-backgrounds-for-datapages\/","url":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/gradient-backgrounds-for-datapages\/","name":"Gradient Backgrounds for DataPages - Caspio Online Help","isPartOf":{"@id":"https:\/\/howto.caspio.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/gradient-backgrounds-for-datapages\/#primaryimage"},"image":{"@id":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/gradient-backgrounds-for-datapages\/#primaryimage"},"thumbnailUrl":"https:\/\/howto.caspio.com\/wp-content\/uploads\/2021\/04\/background-samples.gif","datePublished":"2013-10-10T22:04:17+00:00","dateModified":"2023-07-18T12:43:22+00:00","description":"As for text areas and fields you may use gradient background for DataPages also by adding the specific code to the app's style. You may use only PNG images.","breadcrumb":{"@id":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/gradient-backgrounds-for-datapages\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/gradient-backgrounds-for-datapages\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/gradient-backgrounds-for-datapages\/#primaryimage","url":"https:\/\/howto.caspio.com\/wp-content\/uploads\/2021\/04\/background-samples.gif","contentUrl":"https:\/\/howto.caspio.com\/wp-content\/uploads\/2021\/04\/background-samples.gif","width":548,"height":317},{"@type":"BreadcrumbList","@id":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/gradient-backgrounds-for-datapages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Create Applications","item":"https:\/\/howto.caspio.com\/create-applications\/"},{"@type":"ListItem","position":2,"name":"Creating Apps With Bridge","item":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/"},{"@type":"ListItem","position":3,"name":"Styles","item":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/"},{"@type":"ListItem","position":4,"name":"Gradient Backgrounds for DataPages"}]},{"@type":"WebSite","@id":"https:\/\/howto.caspio.com\/#website","url":"https:\/\/howto.caspio.com\/","name":"Caspio Online Help","description":"","publisher":{"@id":"https:\/\/howto.caspio.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/howto.caspio.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/howto.caspio.com\/#organization","name":"Caspio Online Help","url":"https:\/\/howto.caspio.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/howto.caspio.com\/#\/schema\/logo\/image\/","url":"https:\/\/howto.caspio.com\/wp-content\/uploads\/2023\/01\/socmed_banner_image.jpg","contentUrl":"https:\/\/howto.caspio.com\/wp-content\/uploads\/2023\/01\/socmed_banner_image.jpg","width":640,"height":360,"caption":"Caspio Online Help"},"image":{"@id":"https:\/\/howto.caspio.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/caspioinc\/","https:\/\/x.com\/Caspio","https:\/\/www.instagram.com\/thisiscaspio\/","https:\/\/www.linkedin.com\/company\/89240\/","https:\/\/www.youtube.com\/user\/CaspioInc"]}]}},"_links":{"self":[{"href":"https:\/\/howto.caspio.com\/wp-json\/wp\/v2\/pages\/3365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howto.caspio.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/howto.caspio.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/howto.caspio.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howto.caspio.com\/wp-json\/wp\/v2\/comments?post=3365"}],"version-history":[{"count":0,"href":"https:\/\/howto.caspio.com\/wp-json\/wp\/v2\/pages\/3365\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/howto.caspio.com\/wp-json\/wp\/v2\/pages\/766"}],"wp:attachment":[{"href":"https:\/\/howto.caspio.com\/wp-json\/wp\/v2\/media?parent=3365"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howto.caspio.com\/wp-json\/wp\/v2\/tags?post=3365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}