Blog homepage » Entry
Bootstrap December 23, 2019

Three ways to change CSS styles.

Weronika Andrzejewska

Content Creator

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 are so readable that you will easily find the same functions in the editor you are using.

Note: The last method (Custom CSS) is a new feature, that’s why I created this mini-tutorial 🙂

1. Visual panel with convenient pickers.

The easiest way to change your style is simply to find the right option in the variable settings of the CSS framework.

Using Color Picker to change background color.

You can use a search bar for this.

Searching for framework variables.

2. HTML Structure

The second method is to add the appropriate CSS class to the body element. You can do this in the HTML Structure panel.

To open it:

  1. Hover over the component you want to edit.
  2. Click the “Content” icon.
  3. Go to the “HTML Structure” tab
The HTML Structure panel.

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

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.

Suggesting CSS classes.

You can read more about this panel here: “Using advanced editor functions to modify CSS classes“.

3. Custom CSS

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).

Using new panel to write your own CSS.

Note: Please use the Save 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).

Try it yourself: Bootstrap Shuffle

Related blog posts

Shuffle February 26, 2021

We combined four visual editors into Shuffle!

We’ve combined four visual editors into one more powerful editor. Shuffle supports the most popular frameworks: Tailwind CSS, Bootstrap, Bulma, and Material-UI.

Weronika Andrzejewska

Content Creator

Bootstrap December 6, 2020

Bootstrap 5 is now available in our visual editor!

Finally, we’ve added support for Bootstrap 5. It is the newest version of this most popular CSS framework. You can choose it as a base framework when creating a new project.

Weronika Andrzejewska

Content Creator

Bootstrap November 21, 2020

Visual Studio Code extension for Shuffle UI components

Do you want to finish your project in Visual Studio Code? Now we have an easy solution! You can find our “Shuffle Components” extension in the official Visual Studio Code Marketplace (click here). Alternatively, you can install it directly from the VSC. You can activate the extension in two ways: Use shortcut: Shift + Ctrl […]

Weronika Andrzejewska

Content Creator

© 2021 Shuffle. All rights reserved.