{"id":2962,"date":"2013-10-10T15:04:17","date_gmt":"2013-10-10T22:04:17","guid":{"rendered":"https:\/\/howtostg.wpengine.com\/"},"modified":"2023-07-18T05:45:44","modified_gmt":"2023-07-18T12:45:44","slug":"replace-standard-buttons-with-images","status":"publish","type":"page","link":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/replace-standard-buttons-with-images\/","title":{"rendered":"Replace Standard Buttons with Images"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2962\" class=\"elementor elementor-2962\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-40e75e31 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"40e75e31\" 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-3c7118ea\" data-id=\"3c7118ea\" 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-1d6589e elementor-widget elementor-widget-text-editor\" data-id=\"1d6589e\" 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>If you have created a Report DataPage with a details page, by default, the details link will be a hypertext link. Although this is suitable for most applications, you can also replace this text with an image. You will need to upload images to your web server in order to reference their location.<\/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-63742fd elementor-widget elementor-widget-image\" data-id=\"63742fd\" 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=\"632\" height=\"274\" src=\"https:\/\/howto.caspio.com\/wp-content\/uploads\/2021\/04\/replace-links-with-images1.gif\" class=\"attachment-large size-large wp-image-31087\" 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-6d1ce9ae elementor-widget elementor-widget-text-editor\" data-id=\"6d1ce9ae\" 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<ol><li>Navigate to the Styles listing. Select the Style you would like to change and click <b>Edit<\/b>.<\/li><li>Under the Results Page subheading, locate the section called <strong>Record Actions<\/strong>\u00a0and select the third element type called <b>Image Actions<\/b>.<\/li><li>You can enable any or all of the image actions in this section. Check <b>Custom Images <\/b>and insert the URL of the image into the field to the right. The image should be located on your web server and the URL should begin with http:\/\/or https:\/\/.<\/li><li>You can preview the image replacement inside of the Style wizard by clicking\u00a0<b>Preview<\/b>. Click\u00a0<b>Save<\/b>\u00a0to save your Style.<br \/><img decoding=\"async\" class=\"aligncenter\" style=\"border: 1px solid lightgray;\" src=\"\/wp-content\/uploads\/2016\/11\/Replace_links_to_records_with_images_1.png\" alt=\"Replace_links_to_records_with_images_1\" width=\"781\" height=\"282\" data-no-retina=\"\" \/><\/li><\/ol><p>If you do not have a standard set of icons, you can <a href=\"http:\/\/www.iconfinder.com\/\" target=\"_blank\" rel=\"noopener\">search for icons<\/a>. This site allows you to filter by icons allowed for commercial use.<\/p>\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>If you have created a Report DataPage with a details page, by default, the details link will be a hypertext link. Although this is suitable for most applications, you can also replace this text with an image. You will need to upload images to your web server in order to reference their location. Navigate to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":766,"menu_order":763,"comment_status":"open","ping_status":"open","template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"class_list":["post-2962","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>Replace Standard Buttons with Images - Caspio Online Help<\/title>\n<meta name=\"description\" content=\"There are few ways to create a button and one of them is to use image instead of an object. If you need to use such an option, just follow the guide.\" \/>\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\/replace-standard-buttons-with-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Replace Standard Buttons with Images - Caspio Online Help\" \/>\n<meta property=\"og:description\" content=\"There are few ways to create a button and one of them is to use image instead of an object. If you need to use such an option, just follow the guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/replace-standard-buttons-with-images\/\" \/>\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:45:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/howto.caspio.com\/wp-content\/uploads\/2021\/04\/replace-links-with-images1.gif\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 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\\\/replace-standard-buttons-with-images\\\/\",\"url\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/replace-standard-buttons-with-images\\\/\",\"name\":\"Replace Standard Buttons with Images - Caspio Online Help\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/replace-standard-buttons-with-images\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/replace-standard-buttons-with-images\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/howto.caspio.com\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/replace-links-with-images1.gif\",\"datePublished\":\"2013-10-10T22:04:17+00:00\",\"dateModified\":\"2023-07-18T12:45:44+00:00\",\"description\":\"There are few ways to create a button and one of them is to use image instead of an object. If you need to use such an option, just follow the guide.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/replace-standard-buttons-with-images\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/replace-standard-buttons-with-images\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/replace-standard-buttons-with-images\\\/#primaryimage\",\"url\":\"https:\\\/\\\/howto.caspio.com\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/replace-links-with-images1.gif\",\"contentUrl\":\"https:\\\/\\\/howto.caspio.com\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/replace-links-with-images1.gif\",\"width\":632,\"height\":274},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/howto.caspio.com\\\/create-applications\\\/creating-apps-with-bridge\\\/styles\\\/replace-standard-buttons-with-images\\\/#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\":\"Replace Standard Buttons with Images\"}]},{\"@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":"Replace Standard Buttons with Images - Caspio Online Help","description":"There are few ways to create a button and one of them is to use image instead of an object. If you need to use such an option, just follow the guide.","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\/replace-standard-buttons-with-images\/","og_locale":"en_US","og_type":"article","og_title":"Replace Standard Buttons with Images - Caspio Online Help","og_description":"There are few ways to create a button and one of them is to use image instead of an object. If you need to use such an option, just follow the guide.","og_url":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/replace-standard-buttons-with-images\/","og_site_name":"Caspio Online Help","article_publisher":"https:\/\/www.facebook.com\/caspioinc\/","article_modified_time":"2023-07-18T12:45:44+00:00","og_image":[{"url":"https:\/\/howto.caspio.com\/wp-content\/uploads\/2021\/04\/replace-links-with-images1.gif","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/replace-standard-buttons-with-images\/","url":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/replace-standard-buttons-with-images\/","name":"Replace Standard Buttons with Images - Caspio Online Help","isPartOf":{"@id":"https:\/\/howto.caspio.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/replace-standard-buttons-with-images\/#primaryimage"},"image":{"@id":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/replace-standard-buttons-with-images\/#primaryimage"},"thumbnailUrl":"https:\/\/howto.caspio.com\/wp-content\/uploads\/2021\/04\/replace-links-with-images1.gif","datePublished":"2013-10-10T22:04:17+00:00","dateModified":"2023-07-18T12:45:44+00:00","description":"There are few ways to create a button and one of them is to use image instead of an object. If you need to use such an option, just follow the guide.","breadcrumb":{"@id":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/replace-standard-buttons-with-images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/replace-standard-buttons-with-images\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/replace-standard-buttons-with-images\/#primaryimage","url":"https:\/\/howto.caspio.com\/wp-content\/uploads\/2021\/04\/replace-links-with-images1.gif","contentUrl":"https:\/\/howto.caspio.com\/wp-content\/uploads\/2021\/04\/replace-links-with-images1.gif","width":632,"height":274},{"@type":"BreadcrumbList","@id":"https:\/\/howto.caspio.com\/create-applications\/creating-apps-with-bridge\/styles\/replace-standard-buttons-with-images\/#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":"Replace Standard Buttons with Images"}]},{"@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\/2962","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=2962"}],"version-history":[{"count":0,"href":"https:\/\/howto.caspio.com\/wp-json\/wp\/v2\/pages\/2962\/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=2962"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howto.caspio.com\/wp-json\/wp\/v2\/tags?post=2962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}