{"id":518,"date":"2019-12-23T11:44:23","date_gmt":"2019-12-23T11:44:23","guid":{"rendered":"https:\/\/bootstrapshuffle.com\/blog\/?p=518"},"modified":"2021-02-23T11:50:16","modified_gmt":"2021-02-23T11:50:16","slug":"three-ways-to-change-css-styles","status":"publish","type":"post","link":"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/","title":{"rendered":"Three ways to change CSS styles."},"content":{"rendered":"\n

In this mini-tutorial, I’ll show you how to use three functions to change background color<\/strong> in your project. The background color is just an example, and you can change other properties in the same way. <\/p>\n\n\n\n

This description applies to three editors, Bootstrap Shuffle<\/a>, Bulma Builder<\/a>, and Tailwind Builder<\/a>. The screens come from Bootstrap Shuffle but are so readable that you will easily find the same functions in the editor you are using. <\/p>\n\n\n\n

Note: The last method (Custom CSS<\/strong>) is a new feature, that’s why I created this mini-tutorial \ud83d\ude42<\/p>\n\n\n\n

1. Visual panel with convenient pickers.<\/h2>\n\n\n\n

The easiest way to change your style is simply to find the right option in the variable settings of the CSS framework.<\/p>\n\n\n\n

\"\"
Using Color Picker to change background color.<\/figcaption><\/figure>\n\n\n\n

You can use a search bar for this.<\/p>\n\n\n\n

\"\"
Searching for framework variables.<\/figcaption><\/figure>\n\n\n\n

2. HTML Structure<\/h2>\n\n\n\n

The second method is to add the appropriate CSS class to the body element. You can do this in the HTML Structure<\/strong> panel. <\/p>\n\n\n\n

To open it:<\/p>\n\n\n\n

  1. Hover over the component you want to edit.<\/li>
  2. Click the “Content” icon.<\/li>
  3. Go to the “HTML Structure” tab <\/li><\/ol>\n\n\n\n
    \"\"
    The HTML Structure panel.<\/figcaption><\/figure>\n\n\n\n

    Note: Each component you are editing has an additional “Parents” section, which includes a body element and a global wrapper.<\/p>\n\n\n\n

    You need a good knowledge of the CSS framework classes, but for ease of use, we have auto-completion, which will tell you the name of the class you are looking for. <\/p>\n\n\n\n

    \"\"
    Suggesting CSS classes.<\/figcaption><\/figure>\n\n\n\n

    You can read more about this panel here: “Using advanced editor functions to modify CSS classes<\/a>“.<\/p>\n\n\n\n

    3. Custom CSS<\/h2>\n\n\n\n

    We have made it possible to add your CSS code, so you can simply add a code that will change the background color for the body. Of course, you can create your CSS classes here and then add them in the HTML Structure panel (see step 2).<\/p>\n\n\n\n

    \"\"
    Using new panel to write your own CSS.<\/figcaption><\/figure>\n\n\n\n

    Note: Please use the Save<\/strong> button to save the CSS code. All other changes made in steps 1 and 2 are saved automatically. The CSS code can be so large that the autosave would be very inefficient (every time we save the changes, we have to recompile the framework to CSS).<\/p>\n\n\n\n

    Try it yourself: Bootstrap Shuffle<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    In this mini-tutorial, I’ll show you how to use three functions to change background color in your project. The background color is just an example, and you can change other properties in the same way. This description applies to three editors, Bootstrap Shuffle, Bulma Builder, and Tailwind Builder. The screens come from Bootstrap Shuffle but […]<\/p>\n","protected":false},"author":2,"featured_media":942,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,2,12,8],"tags":[],"yoast_head":"\nThree ways to change CSS styles. | Shuffle<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Three ways to change CSS styles. | Shuffle\" \/>\n<meta property=\"og:description\" content=\"In this mini-tutorial, I’ll show you how to use three functions to change background color in your project. The background color is just an example, and you can change other properties in the same way. This description applies to three editors, Bootstrap Shuffle, Bulma Builder, and Tailwind Builder. The screens come from Bootstrap Shuffle but […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/\" \/>\n<meta property=\"og:site_name\" content=\"Shuffle\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BootstrapShuffle\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-23T11:44:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-23T11:50:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.shuffle.dev\/blog\/uploads\/2019\/12\/three_ways-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"315\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dawid Andrzejewski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dawid Andrzejewski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/\"},\"author\":{\"name\":\"Dawid Andrzejewski\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d\"},\"headline\":\"Three ways to change CSS styles.\",\"datePublished\":\"2019-12-23T11:44:23+00:00\",\"dateModified\":\"2021-02-23T11:50:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/\"},\"wordCount\":372,\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"articleSection\":[\"Bootstrap\",\"Bootstrap Shuffle\",\"Builder\",\"Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/\",\"url\":\"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/\",\"name\":\"Three ways to change CSS styles. | Shuffle\",\"isPartOf\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\"},\"datePublished\":\"2019-12-23T11:44:23+00:00\",\"dateModified\":\"2021-02-23T11:50:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/shuffle.dev\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Three ways to change CSS styles.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#website\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"name\":\"Shuffle\",\"description\":\"Build Websites Faster with an AI Visual Editor\",\"publisher\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/shuffle.dev\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#organization\",\"name\":\"Shuffle\",\"url\":\"https:\/\/shuffle.dev\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"contentUrl\":\"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Shuffle\"},\"image\":{\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/\",\"https:\/\/www.facebook.com\/BootstrapShuffle\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d\",\"name\":\"Dawid Andrzejewski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g\",\"caption\":\"Dawid Andrzejewski\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Three ways to change CSS styles. | Shuffle","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/","og_locale":"en_US","og_type":"article","og_title":"Three ways to change CSS styles. | Shuffle","og_description":"In this mini-tutorial, I’ll show you how to use three functions to change background color in your project. The background color is just an example, and you can change other properties in the same way. This description applies to three editors, Bootstrap Shuffle, Bulma Builder, and Tailwind Builder. The screens come from Bootstrap Shuffle but […]","og_url":"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/","og_site_name":"Shuffle","article_publisher":"https:\/\/www.facebook.com\/BootstrapShuffle\/","article_published_time":"2019-12-23T11:44:23+00:00","article_modified_time":"2021-02-23T11:50:16+00:00","og_image":[{"width":600,"height":315,"url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2019\/12\/three_ways-1.png","type":"image\/png"}],"author":"Dawid Andrzejewski","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dawid Andrzejewski","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/#article","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/"},"author":{"name":"Dawid Andrzejewski","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d"},"headline":"Three ways to change CSS styles.","datePublished":"2019-12-23T11:44:23+00:00","dateModified":"2021-02-23T11:50:16+00:00","mainEntityOfPage":{"@id":"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/"},"wordCount":372,"publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"articleSection":["Bootstrap","Bootstrap Shuffle","Builder","Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/","url":"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/","name":"Three ways to change CSS styles. | Shuffle","isPartOf":{"@id":"https:\/\/shuffle.dev\/blog\/#website"},"datePublished":"2019-12-23T11:44:23+00:00","dateModified":"2021-02-23T11:50:16+00:00","breadcrumb":{"@id":"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shuffle.dev\/blog\/2019\/12\/three-ways-to-change-css-styles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shuffle.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"Three ways to change CSS styles."}]},{"@type":"WebSite","@id":"https:\/\/shuffle.dev\/blog\/#website","url":"https:\/\/shuffle.dev\/blog\/","name":"Shuffle","description":"Build Websites Faster with an AI Visual Editor","publisher":{"@id":"https:\/\/shuffle.dev\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shuffle.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/shuffle.dev\/blog\/#organization","name":"Shuffle","url":"https:\/\/shuffle.dev\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","contentUrl":"https:\/\/static.shuffle.dev\/blog\/uploads\/2021\/07\/logo.jpg","width":400,"height":400,"caption":"Shuffle"},"image":{"@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/bootstrap-shuffle\/about\/","https:\/\/www.facebook.com\/BootstrapShuffle\/"]},{"@type":"Person","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/a2122b47f59449da5ac339f7f687f79d","name":"Dawid Andrzejewski","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/shuffle.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e22e371afd6378672a3664c09fb24fa?s=96&d=mm&r=g","caption":"Dawid Andrzejewski"}}]}},"_links":{"self":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/518"}],"collection":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/comments?post=518"}],"version-history":[{"count":8,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/518\/revisions"}],"predecessor-version":[{"id":544,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/posts\/518\/revisions\/544"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media\/942"}],"wp:attachment":[{"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/media?parent=518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/categories?post=518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shuffle.dev\/blog\/wp-json\/wp\/v2\/tags?post=518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}