{"id":2023241,"date":"2021-04-16T13:49:05","date_gmt":"2021-04-16T13:49:05","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&#038;p=2023241"},"modified":"2021-04-30T06:15:17","modified_gmt":"2021-04-30T06:15:17","slug":"adding-custom-css-to-templates-archives-and-views","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/de\/course-lesson\/adding-custom-css-to-templates-archives-and-views\/","title":{"rendered":"Adding Custom CSS to Templates, Archives and Views"},"content":{"rendered":"\n<p>You can add custom CSS to Toolset elements directly from the Block Editor. On the front-end, this styling loads only for those elements and not globally.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Steps for adding CSS to a Content Template<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li>Go to <strong>Toolset <\/strong>\u2192<strong> Content Templates<\/strong> and click the Content Template you wish to edit.<\/li><li>In the right sidebar, scroll to the <strong>CSS editor<\/strong> section with a text area for entering your code.<\/li><\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"82f40feafe44a14b14dd315829e3f996\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/adding-custom-css-to-content-templates.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/adding-custom-css-to-content-templates-500x225.png\" alt=\"\" class=\"wp-image-2023365\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Adding custom CSS to a Content Template<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Steps for adding CSS to a WordPress Archive<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li>Go to <strong>Toolset <\/strong>\u2192<strong> WordPress Archives <\/strong>and click the archive you want to edit.<\/li><li>In the right sidebar, make sure you\u2019re on the <strong>WordPress Archive <\/strong>tab.<\/li><li>Expand the <strong>Custom CSS and JS<\/strong> section and paste the code into the <strong>Custom CSS<\/strong> text area.<\/li><\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"d41c0db57b3311d0597d639cfe6fc208\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/adding-custom-css-to-a-wordpress-archive.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/adding-custom-css-to-a-wordpress-archive-500x214.png\" alt=\"\" class=\"wp-image-2023325\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Adding custom CSS to a WordPress Archive<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>Click the <strong>pencil <\/strong>icon to open a pop-up dialog for more convenient pasting and editing of your custom code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Steps for adding CSS to a View<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li>Edit the page, or a template, with the View you want to add CSS to.<\/li><li>Select the <strong>View<\/strong> in block navigation.&nbsp;<\/li><li>In the right sidebar expand the <strong>Custom JS and CSS <\/strong>section and paste the code into the <strong>Custom CSS<\/strong> text area.<\/li><\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"a16db775fbd9330be2d733963ec9311b\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/adding-custom-css-to-a-view.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/adding-custom-css-to-a-view-500x223.png\" alt=\"\" class=\"wp-image-2023377\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Adding custom CSS to a View<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>Click the <strong>pencil<\/strong> icon to open a pop-up dialog for more convenient pasting and editing of your custom code.<\/p>\n","protected":false},"author":84277,"featured_media":2023345,"template":"","related-lesson":[8409,8417,8411],"class_list":["post-2023241","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-archive-pages","related-lesson-designing","related-lesson-view"],"_links":{"self":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson\/2023241","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":6,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson\/2023241\/revisions"}],"predecessor-version":[{"id":2037411,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/course-lesson\/2023241\/revisions\/2037411"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/media\/2023345"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/media?parent=2023241"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/de\/wp-json\/wp\/v2\/related-lesson?post=2023241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}