{"id":5156,"date":"2022-08-22T11:07:11","date_gmt":"2022-08-22T11:07:11","guid":{"rendered":"https:\/\/webnus.net\/shoppress\/helpdesk\/?p=5156"},"modified":"2023-09-20T08:57:42","modified_gmt":"2023-09-20T08:57:42","slug":"styler","status":"publish","type":"post","link":"https:\/\/webnus.net\/shoppress\/helpdesk\/styler\/","title":{"rendered":"Styler"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_78 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/styler\/#Styler_Introduction\" >Styler Introduction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/styler\/#Styler_Sections\" >Styler Sections<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/styler\/#1-_Styler_Header\" >1- Styler Header<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/styler\/#2-_Selector_tabs\" >2- Selector tabs:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/styler\/#3-_CSS_Properties\" >3- CSS Properties<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/styler\/#4-_CSS_Values\" >4- CSS Values<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<p><span style=\"font-weight: 400;\"><strong>Styler<\/strong> is the most important tool in Kata that we use in ShopPress too, as it allows you to customize your website using a simple and straightforward user interface. You can change fonts, backgrounds, colors, and almost any other element present in Kata using the Styler. One could claim that even without any programming knowledge, all CSS codes are available to you via the Styler so you can change any element.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Styler_Introduction\"><\/span><strong>Styler<\/strong> Introduction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">To access the Styler, you\u2019ll need to edit your WooCommerce page in Elementor from ShopPress &gt; WooCommerce Pages and add a widget to the page. Now, you see different elements in the Style tab and a styler icon in front of every option. Open the Styler by clicking on the icon for each respective option.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/styler-01.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"884\" height=\"720\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/styler-01.png\" alt=\"Styler\" class=\"wp-image-6122\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/styler-01.png 884w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/styler-01-300x244.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/styler-01-768x626.png 768w\" sizes=\"(max-width: 884px) 100vw, 884px\" \/><\/a><\/figure><\/div>\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Kata WP Theme - Styler live edit\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/c1wra6pngDc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Styler_Sections\"><\/span>Styler Sections<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">The Styler consists of 4 sections:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-02.png\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-02.png\" alt=\"Styler\" class=\"wp-image-6124\" style=\"height:674px\" height=\"674\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-02.png 644w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-02-274x300.png 274w\" sizes=\"(max-width: 644px) 100vw, 644px\" \/><\/a><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1-_Styler_Header\"><\/span><strong>1- Styler Header<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">a) Name of the element and selector.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">b) Collapse Menu button.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">c) Devices button.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">d) More button.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">e) Save and Close button<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-03.png\"><img decoding=\"async\" width=\"556\" height=\"148\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-03.png\" alt=\"Styler\" class=\"wp-image-6125\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-03.png 556w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-03-300x80.png 300w\" sizes=\"(max-width: 556px) 100vw, 556px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">&nbsp;The responsive menu shows the different sizes for other devices in responsive design.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-04.png\"><img decoding=\"async\" width=\"539\" height=\"604\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-04.png\" alt=\"\" class=\"wp-image-6126\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-04.png 539w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-04-268x300.png 268w\" sizes=\"(max-width: 539px) 100vw, 539px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">In the More menu, you can find the copy, paste, and reset options for the styles in the Styler.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-05.png\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"603\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-05.png\" alt=\"\" class=\"wp-image-6127\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-05.png 540w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-05-269x300.png 269w\" sizes=\"(max-width: 540px) 100vw, 540px\" \/><\/a><\/figure><\/div>\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Kata WP Theme - Styler Copy &amp; Paste\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/4RvC3x-ymdA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2-_Selector_tabs\"><\/span><strong>2- Selector tabs:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/styler-06.png\"><img loading=\"lazy\" decoding=\"async\" width=\"556\" height=\"128\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/styler-06.png\" alt=\"Styler\" class=\"wp-image-6128\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/styler-06.png 556w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/styler-06-300x69.png 300w\" sizes=\"(max-width: 556px) 100vw, 556px\" \/><\/a><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">a) <strong>Normal:<\/strong> Applies styles directly to the selector.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">b) <strong>Hover:<\/strong> The styles entered here will appear in a hover state.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">c) <strong>Parent Hover:<\/strong> Styles entered here will have their wrapper loaded when hovered.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">d) <strong>Before:<\/strong> This allows you to style the selector before this element.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">e) <strong>After<\/strong><\/span>:<span style=\"font-weight: 400;\"> This allows you to style the selector after this element.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Kata WP Theme - Styler Before, After, Hover\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/PAaFONANl3M?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3-_CSS_Properties\"><\/span><strong>3- CSS Properties<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Similar properties are categorized on the left side of the Styler for ease of access. You can view the properties for each option on the right side.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-08.png\"><img loading=\"lazy\" decoding=\"async\" width=\"539\" height=\"602\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-08.png\" alt=\"\" class=\"wp-image-6130\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-08.png 539w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-08-269x300.png 269w\" sizes=\"(max-width: 539px) 100vw, 539px\" \/><\/a><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4-_CSS_Values\"><\/span><strong>4- CSS Values<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Here, you can see a list of CSS properties whose values you can easily change.<\/p>\n\n\n\n<p>All changes will be applied to the elements in real-time.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-07.png\"><img loading=\"lazy\" decoding=\"async\" width=\"539\" height=\"602\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-07.png\" alt=\"\" class=\"wp-image-6129\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-07.png 539w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2022\/08\/styler-07-269x300.png 269w\" sizes=\"(max-width: 539px) 100vw, 539px\" \/><\/a><\/figure><\/div>","protected":false},"excerpt":{"rendered":"<p>Styler is the most important tool in Kata that we use in ShopPress too, as it allows you to customize your website using a simple and straightforward user interface. You can change fonts, backgrounds, colors, and almost any other element present in Kata using the Styler. One could claim that even without any programming knowledge, [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[85,84],"class_list":["post-5156","post","type-post","status-publish","format-standard","hentry","category-styler","tag-kata","tag-styler"],"_links":{"self":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/5156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/comments?post=5156"}],"version-history":[{"count":7,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/5156\/revisions"}],"predecessor-version":[{"id":6133,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/5156\/revisions\/6133"}],"wp:attachment":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/media?parent=5156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/categories?post=5156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/tags?post=5156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}