{"id":327,"date":"2021-03-21T07:43:59","date_gmt":"2021-03-21T07:43:59","guid":{"rendered":"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/?page_id=327"},"modified":"2022-02-15T10:45:54","modified_gmt":"2022-02-15T10:45:54","slug":"customization-styles-templates","status":"publish","type":"page","link":"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/documentation\/customization-styles-templates\/","title":{"rendered":"Customization styles &#038; templates"},"content":{"rendered":"<div class=\"w2rr-docs w2rr-docs-side\">\nThe customization of the plugin requires some experience in HTML, CSS and even PHP to change the templates around to an arbitrary theme look. Plugin&#8217;s styles and templates are designed to work relatively well with most themes, but if you do have the need to modify any template and add or remove styles &#8211; try to follow these conditions:<\/p>\n<ul>\n<li>Create new folder in your child theme <em>&#8220;wcsearch-plugin\/&#8221;<\/em>. You will place custom files in this folder.<\/li>\n<li>If you want to change the layout or styles of search form on your site do not modify existing CSS files, instead create new file and give it exactly the same name, just add <strong>-custom<\/strong> postfix to the end of name before file&#8217;s extension. For example, <em>resources\/css\/frontend.css<\/em> file from the plugin folder must have following name and placed into <em>wcsearch-plugin\/resources\/css\/frontend-custom.css<\/em> folder of your child theme. Using this method will save your modifications and custom code during further updates.<\/li>\n<li>The same convention for any templates &#8211; .tpl files in <em>templates\/<\/em> folder. For example, custom <em>templates\/templates\/search_form.tpl.php<\/em> template must have following name and placed into <em>wcsearch-plugin\/templates\/search_form-custom.tpl.php<\/em> folder of your child theme.<br \/>\n<i class=\"fa fa-exclamation-triangle\"><\/i> Relative path of custom file in your child theme <em>&#8220;wcsearch-plugin\/&#8221;<\/em> folder must be exactly the same as the path of original file. <em>resources\/css\/<\/em> will be <em>wcsearch-plugin\/resources\/css\/<\/em>, <em>templates\/search_fields\/<\/em> will be <em>wcsearch-plugin\/templates\/search_fields\/<\/em>.<\/li>\n<li>Inside <em>resources\/sass\/<\/em> folder the plugin contains SASS files for the frontend and backend parts including RTL styles.<\/li>\n<\/ul>\n<p>The plugin has special customization settings to change some elements on frontend pages like background and elements colors, use layout, use border.\n<\/p><\/div>\n<div class=\"w2rr-theme-sticky\">\r\n<h4 class=\"w2rr-table-of-contents-heading\">Table of Contents<\/h4>\r\n<ul class=\"w2rr-table-of-contents\">\r\n\t<li><a href=\"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/documentation\/\">Installation<\/a>\r\n<ul>\r\n\t<li><a href=\"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/documentation\/demo-content\/\">Demo data import<\/a><\/li>\r\n\t<li><a href=\"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/documentation\/update\/\">Plugin update<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n\t<li><a href=\"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/documentation\/getting-started\/\">Getting started<\/a><\/li>\r\n\t<li><a href=\"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/documentation\/shortcodes\/\">Shortcodes<\/a><\/li>\r\n\t<li><a href=\"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/documentation\/customization\/\">Customization styles & templates<\/a><\/li>\r\n\t<li><a href=\"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/documentation\/change-texts\/\">How to modify texts<\/a><\/li>\r\n\t<li><a href=\"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/documentation\/translation\/\">Translation<\/a><\/li>\r\n<\/ul>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The customization of the plugin requires some experience in HTML, CSS and even PHP to change the templates around to an arbitrary theme look. Plugin&#8217;s styles and templates are designed to work relatively well with most themes, but if you do have the need to modify any template and add or remove styles &#8211; try [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":294,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth.php","meta":{"footnotes":""},"class_list":["post-327","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/wp-json\/wp\/v2\/pages\/327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/wp-json\/wp\/v2\/comments?post=327"}],"version-history":[{"count":1,"href":"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/wp-json\/wp\/v2\/pages\/327\/revisions"}],"predecessor-version":[{"id":328,"href":"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/wp-json\/wp\/v2\/pages\/327\/revisions\/328"}],"up":[{"embeddable":true,"href":"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/wp-json\/wp\/v2\/pages\/294"}],"wp:attachment":[{"href":"https:\/\/www.salephpscripts.com\/wordpress-search\/demo\/wp-json\/wp\/v2\/media?parent=327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}