{"id":2578,"date":"2019-03-19T16:28:54","date_gmt":"2019-03-19T16:28:54","guid":{"rendered":"https:\/\/wpstackable.com\/?p=2578"},"modified":"2021-01-27T03:24:10","modified_gmt":"2021-01-27T08:24:10","slug":"introducing-custom-css","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/introducing-custom-css\/","title":{"rendered":"Introducing Custom CSS"},"content":{"rendered":"\n<p data-block-type=\"core\">With <a href=\"https:\/\/wpstackable.com\/premium\/\" target=\"_blank\" rel=\"noreferrer noopener\">Stackable Premium<\/a> comes this powerful and very handy new feature &#8211; Custom CSS, which allows you to fully tweak any Stackable block.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-ugb-divider ugb-divider ugb-2662b16 ugb-divider--v2 ugb-divider--design-basic ugb-main-block\"><style>.ugb-2662b16 hr.ugb-divider__hr{background-color:#dddddd !important;height:1px !important;width:50% !important;margin-left:auto !important;margin-right:auto !important}.ugb-2662b16 .ugb-inner-block{text-align:center}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><hr class=\"ugb-divider__hr\"\/><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-10ae3ea ugb-spacer--v2 ugb-main-block\"><style>@media screen and (min-width:768px){.ugb-10ae3ea.ugb-spacer{height:50px}}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<p data-block-type=\"core\">Our aim is to provide a great balance between great design, simplicity and customizability. We designed Stackable to be straightforward to use and didn&#8217;t want to dizzy you with hundreds of different customization settings that you probably won&#8217;t need. We purposefully made Stackable to come with the ability to customize only the most essential settings to make sure that your changes would always yield great looking results.<\/p>\n\n\n\n<p data-block-type=\"core\">Be this as it may, we also know that there are power users out there who would prefer to have more control over their block designs. To make sure that Stackable would also be easily pliable for power users, we\u2019ve added the ability to enter custom CSS for <em>every<\/em> Stackable block.<\/p>\n\n\n\n<p data-block-type=\"core\">To access this new feature, just open up the <strong>Custom CSS<\/strong> panel of a block.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2019\/03\/custom-css-panel.jpg\" alt=\"\" class=\"wp-image-2579\" width=\"416\" height=\"324\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2019\/03\/custom-css-panel.jpg 554w, https:\/\/wpstackable.com\/wp-content\/uploads\/2019\/03\/custom-css-panel-300x234.jpg 300w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">In this panel, you\u2019ll find a code editor where you can enter in your CSS. Enter your style rules in there and you should see them get applied right away.<\/p>\n\n\n\n<p data-block-type=\"core\">Writing custom CSS can be intimidating at times, so we&#8217;ve added in a few nifty things to guide you along the way.<\/p>\n\n\n\n<p data-block-type=\"core\">The CSS editor comes pre-filled with CSS selectors for the different components of each block. This makes writing your CSS quick and easy since you won&#8217;t have to dig into the inner workings of Stackable to find out the class names you need.<\/p>\n\n\n\n<p data-block-type=\"core\">The CSS editor also helps you out with auto-suggestions while writing your style rules and it also validates the CSS that you write and shows you any errors you have in your styles.<\/p>\n\n\n\n<p data-block-type=\"core\">Here&#8217;s a video of the Custom CSS editor in action:<\/p>\n\n\n\n<figure class=\"wp-block-video alignwide\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2019\/03\/Screen-Recording-2019-03-19-at-4.35.36-PM-1.mp4-1.mp4\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">Any CSS you enter will <strong>only<\/strong> affect the current block you are editing. That means you&#8217;re going to be assured that any styles you write won&#8217;t accidentally affect the other parts of your page.<\/p>\n\n\n\n<p data-block-type=\"core\">The Custom CSS feature is available now in Stackable Premium. <a href=\"https:\/\/wpstackable.com\/premium\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visit our Premium page<\/a> to know more about all our Premium features.<\/p>\n\n\n\n<p data-block-type=\"core\">You can also try out the Custom CSS feature in our <a href=\"https:\/\/demo.wpstackable.com\" target=\"_blank\" rel=\"noreferrer noopener\">Premium Demo<\/a>.<\/p>\n\n\n\n<p data-block-type=\"core\">Enjoy!<\/p>\n\n\n\n<div class=\"wp-block-ugb-spacer ugb-spacer ugb-d06192b ugb-spacer--v2 ugb-main-block\"><style>@media screen and (min-width:768px){.ugb-d06192b.ugb-spacer{height:100px}}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-spacer--inner\"><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"alignwide wp-block-ugb-cta ugb-cta ugb-7b641d3 ugb-cta ugb-cta--v2 ugb-cta--design-horizontal-3 ugb-main-block\" data-block-type=\"core\"><style>.ugb-7b641d3 .ugb-cta__item{border-radius:12px !important;background-color:#111111 !important;background-image:url(https:\/\/wpstackable.com\/wp-content\/uploads\/2019\/08\/Stackable-Reusable-Block-Community-01.jpg)}.ugb-7b641d3 .ugb-cta__item:before{background-color:#111111 !important;opacity:0.6}.ugb-7b641d3 .ugb-cta__title{color:#eeeeee}.ugb-7b641d3 .ugb-cta__description{color:#eeeeee}.ugb-7b641d3 .ugb-button{background-color:#f34957;border-radius:4px !important}.ugb-7b641d3 .ugb-button .ugb-button--inner,.ugb-7b641d3 .ugb-button svg:not(.ugb-custom-icon){color:#ffffff !important}.ugb-7b641d3 .ugb-button:before{border-radius:4px !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-cta__item ugb--shadow-3 ugb--has-background-overlay\"><h3 class=\"ugb-cta__title\">Want to learn more about Stackable?<br><br>Join the <span style=\"color: #f34957;\" class=\"ugb-highlight\">Stackable Facebook Community<\/span>.<\/h3><div class=\"ugb-cta__side\"><p class=\"ugb-cta__description\">Learn more about Stackable and exchange great ideas with fellow Stackable users. <br><br>Be part of our community today.<br><\/p><div class=\"ugb-button-container\"><a class=\"ugb-button ugb-button--size-normal\" href=\"https:\/\/www.facebook.com\/groups\/wpstackable\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"\"><span class=\"ugb-button--inner\">Join the Community<\/span><\/a><\/div><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>With Stackable Premium comes this powerful and very handy new feature &#8211; Custom CSS, which allows you to fully tweak any Stackable block.<\/p>\n","protected":false},"author":1,"featured_media":2590,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-2578","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"hentry","7":"category-updates"},"featured_image_urls_v2":{"full":["https:\/\/wpstackable.com\/wp-content\/uploads\/2019\/03\/190319_Stackable_Feature-Image-Header_Introducing-Custom-CSS_V01-01.jpg",1200,624,false]},"post_excerpt_stackable_v2":"<p>With Stackable Premium comes this powerful and very handy new feature &#8211; Custom CSS, which allows you to fully tweak any Stackable block. Our aim is to provide a great balance between great design, simplicity and customizability. We designed Stackable to be straightforward to use and didn&#8217;t want to dizzy you with hundreds of different customization settings that you probably won&#8217;t need. We purposefully made Stackable to come with the ability to customize only the most essential settings to make sure that your changes would always yield great looking results. Be this as it may, we also know that there&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/wpstackable.com\/blog\/category\/updates\/\" rel=\"category tag\">Updates<\/a>","author_info_v2":{"name":"Benjamin Intal","url":"https:\/\/wpstackable.com\/blog\/author\/gambit\/"},"comments_num_v2":"0 comments","acf":[],"modified_by":"Liana","_links":{"self":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/2578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/comments?post=2578"}],"version-history":[{"count":0,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/posts\/2578\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media\/2590"}],"wp:attachment":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media?parent=2578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/categories?post=2578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/tags?post=2578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}