{"id":2047605,"date":"2021-05-07T09:34:43","date_gmt":"2021-05-07T09:34:43","guid":{"rendered":"https:\/\/toolset.com\/course-lesson\/styling-custom-searches\/"},"modified":"2021-05-11T07:15:54","modified_gmt":"2021-05-11T07:15:54","slug":"styling-custom-searches","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/de\/course-lesson\/styling-custom-searches\/","title":{"rendered":"Styling Custom Searches"},"content":{"rendered":"\n<p>You can add custom search to a <a href=\"https:\/\/toolset.com\/de\/glossary\/view\/\">View<\/a> or <a href=\"https:\/\/toolset.com\/de\/glossary\/archive\/\">WordPress Archive<\/a>. The wizard for creating Views and WordPress Archives offers you the option to enable the custom search. You can also enable it for existing Views and WordPress Archives.<\/p>\n\n\n\n<p>A custom search generally consists of:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Search box that offers fields to select<\/li><li>Reset button (optional)<\/li><li>Submit button (optional)<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"195a1bca19856f09eb6370ffd5e9a16e\"><img decoding=\"async\" width=\"343\" height=\"356\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-archive-settings.png\" alt=\"\" class=\"wp-image-2047953\" srcset=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-archive-settings.png 343w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-archive-settings-289x300.png 289w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-archive-settings-145x150.png 145w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-archive-settings-300x311.png 300w\" sizes=\"auto, (max-width: 343px) 100vw, 343px\" \/><div class=\"tb-image-caption\"><figcaption>Adjusting the Custom Search settings for an Archive<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>Before designing your custom search, finish setting up the search settings and add the search fields you want to use. If you aren\u2019t sure how to do this, read <a href=\"https:\/\/toolset.com\/de\/course-lesson\/creating-a-custom-search\/\">how to create a custom search<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Designing the custom search layout<\/h2>\n\n\n\n<p>How you design the layout for your search fields depends on how many you plan to use.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">One to two search fields<\/h3>\n\n\n\n<p>Use the Toolset <strong>Grid <\/strong>block to place search fields next to each other. Make sure the column widths are all the same to keep it neat. On the front-end, it will look like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"be475665ef616588ef26b2bae0d7a99c\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-two-search-fields.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-two-search-fields-500x267.png\" alt=\"\" class=\"wp-image-2047963\"\/><\/a><div class=\"tb-image-caption\"><figcaption>A front-end example of a custom search with two search fields<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Three or more search fields<\/h3>\n\n\n\n<p>To properly organize three or more search fields, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Insert a <strong>Container<\/strong> block, then insert a<strong> Grid<\/strong> block inside it.<\/li><li>Insert the search fields into the Grid Cells. Only add the ones you want to visually group together, you can make more groups in the other Grid Cells.<\/li><\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"024f6502cba5051398bede5d1bc27172\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-block-navigation.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-block-navigation-500x296.png\" alt=\"\" class=\"wp-image-2047977\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Displaying the block structure in block navigation<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li>Set the <strong>padding<\/strong> inside your <strong>Container<\/strong> block. Select it from block navigation and expand the <strong>Style Settings<\/strong> panel on the right sidebar. Enable <strong>Margin \/ Padding <\/strong>and adjust the <strong>padding<\/strong> as you see fit.&nbsp;<\/li><li>Select the <strong>Container <\/strong>and expand the <strong>Background<\/strong> panel on the right sidebar. You can choose to add a background color or add a background image with an <strong>Overlay Color<\/strong>. To do this, select <strong>Image<\/strong> under the dropdown menu for <strong>Type<\/strong>. Click on the circle next to <strong>Overlay Color<\/strong> and choose the color you want.&nbsp;<\/li><\/ol>\n\n\n\n<p>Once you are done, make sure you check everything on the front-end.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"4e4911ce9b3bb219907577488ce97928\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-custom-search-background.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-custom-search-background-500x237.png\" alt=\"\" class=\"wp-image-2047987\"\/><\/a><div class=\"tb-image-caption\"><figcaption>An example of a Custom Search with a background image<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>And here another example of a custom search on the front-end.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"bfb50dc3ae4de755bb1f8c5e41ddc00d\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-group-front-end.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-design-group-front-end-500x340.png\" alt=\"\" class=\"wp-image-2047997\"\/><\/a><div class=\"tb-image-caption\"><figcaption>A View with search fields visually grouped together on the front-end<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Styling the Search Fields and Buttons<\/h2>\n\n\n\n<p>Now, you should have all the search fields nicely arranged in columns. The last thing to do is style the search fields and buttons.<\/p>\n\n\n\n<p>In general, keep the following tips in mind:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Use the<strong> Margins \/ Padding<\/strong> or <strong>Grid Settings<\/strong> panel on the right sidebar to visually separate search fields from one another. What you use depends on how you set up your layout.&nbsp;<\/li><li>Make sure your search boxes and buttons are consistent with the rest of the website design (Border Radius, Colors, Fonts, etc.).<\/li><li>Make the reset button less visible than all other content in the Custom Search.<\/li><\/ul>\n","protected":false},"author":84277,"featured_media":2048013,"template":"","related-lesson":[8421,8409,8417,8411],"class_list":["post-2047605","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-custom-search","related-lesson-archive-pages","related-lesson-designing","related-lesson-view"],"_links":{"self":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson\/2047605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/users\/84277"}],"version-history":[{"count":7,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson\/2047605\/revisions"}],"predecessor-version":[{"id":2050667,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson\/2047605\/revisions\/2050667"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/media\/2048013"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/media?parent=2047605"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/related-lesson?post=2047605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}