{"id":3441,"date":"2022-11-29T14:00:49","date_gmt":"2022-11-29T14:00:49","guid":{"rendered":"https:\/\/zapable.com\/docs\/?post_type=docs&#038;p=3441"},"modified":"2022-12-06T13:26:14","modified_gmt":"2022-12-06T13:26:14","password":"","slug":"step-six-css-code","status":"publish","type":"docs","link":"https:\/\/zapable.com\/docs\/docs\/directory\/step-six-css-code\/","title":{"rendered":"Step Six &#8211; CSS Code"},"content":{"rendered":"\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 loading=\"lazy\" title=\"6   Adding CSS\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/mtWYYdB_NyU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>In this final step we are going to look to add in some CSS code that will help style the commerce feature when used as a directory to look similar to how the demo directory application has been styled.<\/p>\n\n\n\n<p>You will first need to download the CSS code file from <strong><a href=\"https:\/\/zapable.co\/academyblog\/wp-content\/uploads\/2022\/12\/directory-scss-code-2022.txt\" data-type=\"URL\" data-id=\"https:\/\/zapable.co\/academyblog\/wp-content\/uploads\/2022\/12\/directory-scss-code-2022.txt\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a><\/strong>.<\/p>\n\n\n\n<p>Copy all the content of that code file, and then inside your app builder, with the app that you want to add this to active, choose the Colors menu option from the left sidebar and then scroll down to this CSS \/ SCSS code section as shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"443\" src=\"https:\/\/zapable.com\/docs\/wp-content\/uploads\/2022\/11\/CSS-and-SCSS-Input-Panel-1024x443.png\" alt=\"\" class=\"wp-image-3442\" srcset=\"https:\/\/zapable.com\/docs\/wp-content\/uploads\/2022\/11\/CSS-and-SCSS-Input-Panel-1024x443.png 1024w, https:\/\/zapable.com\/docs\/wp-content\/uploads\/2022\/11\/CSS-and-SCSS-Input-Panel-300x130.png 300w, https:\/\/zapable.com\/docs\/wp-content\/uploads\/2022\/11\/CSS-and-SCSS-Input-Panel-768x332.png 768w, https:\/\/zapable.com\/docs\/wp-content\/uploads\/2022\/11\/CSS-and-SCSS-Input-Panel-360x156.png 360w, https:\/\/zapable.com\/docs\/wp-content\/uploads\/2022\/11\/CSS-and-SCSS-Input-Panel.png 1082w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now in this code section, right click and paste in your CSS code.<\/p>\n\n\n\n<p>Then make sure to click the save button just underneath to save this new code to your application.<\/p>\n\n\n\n<p>Now you have the foundation of your directory application and a style to go with it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this final step we are going to look to add in some CSS code that will help style the commerce feature when used as a directory to look similar to how the demo directory application has been styled. You will first need to download the CSS code file from here. Copy all the content &#8230; <a title=\"Step Six &#8211; CSS Code\" class=\"read-more\" href=\"https:\/\/zapable.com\/docs\/docs\/directory\/step-six-css-code\/\" aria-label=\"More on Step Six &#8211; CSS Code\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[52],"doc_tag":[],"class_list":["post-3441","docs","type-docs","status-publish","hentry","doc_category-directory"],"year_month":"2026-04","word_count":150,"total_views":"102","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"zapdocs","author_nicename":"zapdocs","author_url":"https:\/\/zapable.com\/docs\/author\/zapdocs\/"},"doc_category_info":[{"term_name":"Directory","term_url":"https:\/\/zapable.com\/docs\/docs-category\/directory\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/zapable.com\/docs\/wp-json\/wp\/v2\/docs\/3441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zapable.com\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/zapable.com\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/zapable.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zapable.com\/docs\/wp-json\/wp\/v2\/comments?post=3441"}],"version-history":[{"count":3,"href":"https:\/\/zapable.com\/docs\/wp-json\/wp\/v2\/docs\/3441\/revisions"}],"predecessor-version":[{"id":3455,"href":"https:\/\/zapable.com\/docs\/wp-json\/wp\/v2\/docs\/3441\/revisions\/3455"}],"wp:attachment":[{"href":"https:\/\/zapable.com\/docs\/wp-json\/wp\/v2\/media?parent=3441"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/zapable.com\/docs\/wp-json\/wp\/v2\/doc_category?post=3441"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/zapable.com\/docs\/wp-json\/wp\/v2\/doc_tag?post=3441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}