Theme Manager

With the help of the Theme Manager you can fully customize Bootstrap 4 design as per to your needs.
We have integrated a high speed Sass compiler in Wappler so fully theme compilation and generation takes a split second to produce.

Also we have created great Theme Manager panel where you can choose ready to go color themes, select great looking Google fonts and much more!

What is Theme Manager

The Theme Manager panel allows you to customize the style and create your own version of the design framework used in your project. It’s currently available for Bootstrap 4.

Using the Theme Manager

Opening the Theme Manager Panel

The Theme Manager can be accessed by clicking its icon in the left sidebar:

Selecting a Design Framework

You need to select a Design Framework in your project options first:

Open the Design Framework menu:

Select Bootstrap 4:

Click the Save button:

You’ll see different properties available for styling: colors, fonts, styling options:

Click the Theme Preview button in order to open a Bootstrap 4 Preview file. It helps preview the changes you make:

Color Settings

You can edit the default colors of the Bootstrap 4 Colors so they match your design or brand identity.
Let’s change the Primary color. Click the color picker in order to select a new Primary color:

Then select your new color and click OK:

You can see your changes immediately on the preview page. The primary color has been changed everywhere it’s being used:

You can do the same with the rest of the colors.

Fonts Settings

You can edit the default fonts used in the Bootstrap 4 for the text and headings.
Let’s change the Headings font. Open the Headings dropdown:

The Font Picker dialog opens. Here you can see your local fonts and google fonts. You can also filter by font type, language or search a font by name:

Click a font to see its options:

You can see the different font options available - weight and style, you can also add it to favorites. Select a weight and click the Select button to use this font:

You can do the same for the base font - i.e. the font used for the text on your pages.

You can change the default text size by changing the Base Font Size option:

You can also enable the responsive font sizes. Learn more about the responsive font sizes in Bootstrap 4.

Styling Options

There are different styling options available, such as - borders, rounding, spacing, transitions, shadows and gradients, which can be enabled, disabled or changed:

Play with these options to see how they affect your Bootstrap 4 elements.
All the changes are immediately shown in Design View:

Theme Management

You can reset your theme to the default one, by clicking the Reset Theme button:

You can select a predefined theme, using the Theme dropdown:

When you are done setting up your theme, click the Upload Design Theme button in order to upload it to your server.

NOTE: You need to include Bootstrap 4 Local on your pages in order to be able to create a custom theme:

21 Likes

Holy! This is a game changer! Can it be used with sites already created or only on fresh sites?

3 Likes

Yes you can use it on any website that have included the Bootstrap 4 locally in Wappler.
Or just add it locally first and then go off to customize!

2 Likes

What if you used a Bootswatch theme? Can that still be edited?

If I had a Google font do I have to add the code to every file in my project or is it global?

This is such an exciting feature, I have many questions! :slight_smile:

Currently only the Bootstrap 4 stock theme can be used for customization.

Will see if we can add also the bootswatch themes.

3 Likes

Very Nice! Especially with the fonts! Good Job!

3 Likes

Another massive update and excellently implemented. Another very happy Thursday :slight_smile:

2 Likes

Still as a preview :slight_smile: make sure to provide some feedback on what can be improved :slight_smile:

1 Like

One quick bit of feedback. Could an ‘updating…’ or ‘refreshing…’ message be displayed when you make changes to the styling as there’s a short lag while it’s compiled and updating the page. Something similar to what you see when refreshing Git.

1 Like

Yes sure, we’ve planned this already :slight_smile:

1 Like

Maybe Default colors for Body and Headings Typography. Very useful tool indeed !!

Absolutely a great job lads. Much appreciated. :wink:

2 Likes

Amazing addition! Congrats!

We currently do and a compile and minify and autoprefix of the theme on each change.

The compile is fast because we use native Sass compiler module for that but autoprefix is slow it takes the half of the total time!

Autoprefix is also needed only on the final version - if you even want it, as you can switch it off in your Wappler settings.

So maybe we should split this all in changes compilation done quickly on each changes and a finalize/publish action ( maybe add it under the upload button)

This will cut down the preview time significantly and you won’t need any progress as it will be directly visible.

3 Likes

@George That sounds like a perfect solution.

A post was split to a new topic: Problem with routing dialog

This is fabulous, Guys! Excellent job. Looking forward to using this.

This is a great tool. Really amazing.
I used to have a cheatsheet with some bootstrap classes so I could easilly reference them and speed up the workflow. The Bootstrap 4 Preview file that is being created blows your mind. Theme manager was a phenomenal idea.

2 Likes

A post was split to a new topic: Wappler slow performance

Couldn’t have come at a better time! I was looking for a way to easily manage my layouts without having to keep track of different CSS classes. Awesome job!

One criticism I would have is with the Styling section, it would be nice to control the exact amount so I can ensure it matches with the styling throughout my website/app.