Theme Manager - Advanced Options

[Teodor]

You already know how to customize the basic styles and appearance of your Bootstrap 4 theme, using the Theme Manager. This week we integrated an Advanced Mode, which allows you to customize every single aspect of Bootstrap 4!

Theme Manager Advanced Options

The Advanced Mode allows you to customize every variable of your Bootstrap 4 theme - colors, spacing, fonts, grid breakpoints … everything you can think of.

Enabling Advanced Mode

In order to enable the Advanced Mode, click the Advanced button in the Theme Manager panel:

In order to customize any option, you need to add it here first. Click the add button to access all the available options:

You can find them in the dialog which appears. The different options are grouped in different categories, for easier navigation:

Using Advanced Options

We will show you a few of examples, showing how to use the Advanced Options of the Theme Manager to style the primary color and the default buttons’ padding and borders width.

Changing the Primary Color

In order to change the primary color, we need to add its variable here. Click the add button, open the Colors category and select Primary:

You can see that by default, it uses the $blue variable as a value.
You can replace this variable with a specific color, selected using the color picker:

But you can also do this in the Basic Options. So we won’t apply this color here. We will show you how to assign a different variable as a primary color.

In order to use a specific variable as a value for the Primary Color option we need to add it here first. So click the add button:

We open the Colors category and select Purple:

You can see the Purple variable added in the variables list. It has a specific color set:

Change the Primary color value to: $purple in order to use the purple color as a primary color. You can see the changes immediately:

You can customize the Purple variable color, by using the color picker:

So now you have a new primary color:

You can do this for all the basic Bootstrap 4 Colors - Primary, Secondary, Success … etc.

Customizing Buttons

Another example is customizing the buttons. We will show you how to change their padding and border width.

Click the add button:

Open the Inputs category and select Input button padding x - this variable corresponds to the horizontal padding of the buttons:

It has a default value of 0.75rem, which we’d like to change:

We enter a new value of 2rem and the changes are immediately applied:

Then we click the add button:

Under Components category we select Border Width:

The default border width in Bootstrap 4 is 1px:

Let’s change that to 3px, the changes are applied immediately:

[JonL]

This is cool.

Is it possible to know exactly what is happening behind the scenes?

I am assuming you are compiling sass files into the final minified bootstrap css file. With the new advanced options we can now define our own _variables.scss file

The thing is that it’s all abstracted behind Wappler’s UI which is how it should be.

Question: Can I overwrite Wappler’s scss files with my own so they appear in the UI and I can manage from now on everything related to my custom theme from the UI? If so, where are they stored?

[George]

Actually this this pretty much what is happening. We create a list with variables from the advanced options and compile it together with the bootstrap files.

The theme variables are stored in .wappler/theme.json

[brad]

@George

The theme variables are stored in .wappler/theme.json

Does that in theory mean we can re-use themes in other projects by copying that file?

[George]

@brad

Does that in theory mean we can re-use themes in other projects by copying that file?

Well yes but if you hold on a bit on it - we will build multiple themes editing in the Theme Manager soon as well

[JonL]

What compiler did you go with?

Although I could potentially convert part of my scss files to a json to build the theme.json file I believe it will fall short when dealing with maps and mixins

Damn! I was soooo close to getting rid of another tool

[George]

Well we use node-sass

Currently we just read all known bs4 variables from the theme.json file.

For even more advanced configuration maybe we can add an entry for your own custom.scss file that can be then included automatically

[JonL]

@George

For even more advanced configuration maybe we can add an entry for your own custom.scss file that can be then included automatically

That would be nice indeed.

I could move all my simple custom variables to the json file and leave all the programmatic sass part in a custom file.

[JonL]

Also the advanced view could get pretty long so any functionality that helps find and navigate the list will eventually be requested.

So here the things I can think of.

• Search filter
• Tree navigation panel on top
• Expand/collapse
• Order
• etc

[TomD]

@JonL

Search filter

Do you mean for the 'advanced advanced' options? I imagine this would just be an option to create a custom.scss file manually. There is a search filter for the 'advanced' options already:

Given the number of variables available, I think the way the searching/navigation is set up now works really well.

[JonL]

Not to look for them to add them.
Once they are added.

[JonL]

Can you imagine how this panel is going to look like

When I add 500 variables

[TomD]

I see what you mean. Obviously you could look at the theme.json file, but I suppose something more ‘visual’ might be good.

[JonL]

Indeed. But the whole point is to start removing dependencies on 3rd party tools(as I don’t use Wappler’s search functionality but Visual Studio Code one.

A simple search filter, a tree that groups in categories and also an enforced A-Z order would make the panel much more usable as it is going to get crowded eventually.

[eddie5]

I know I’m probably misunderstanding something that’s obvious, but I’m not clear on what the Theme Manager Advanced Options are supposed to be used for.

In the above Theme Manager Advanced Options tutorial @Teodor changes the primary color to purple and changes the padding and border width of a button.

Aren’t we already able to do this with the standard (non-advanced) Theme Manager? What additional functionality are these new advanced options giving us?

[Teodor]

@eddie5
It’s a simple example that shows just a couple of 500+ variables available for customization.
The border width cannot be adjusted to a specific value in the basic options - there you only have none/normal/wide, the basic color variables like $purple cannot be customized there as well…

[eddie5]

Thanks for clearing that up for me, @Teodor. Much appreciated.

Trying to figure out when it makes sense to use the Theme Manager on the left side of Wappler vs. the Design panel on the right side of Wappler.

For example, let’s say I wanted a larger pre-determined color palette to choose from for my site (other than just the 8 color types that Bootstrap has by default).

Would it make more sense for me to create custom css styles for those additional colors over on the Design panel or would it be better to define them using the Theme Manager?

Another example, would be button types. Let’s say I wanted a button type with additional margin/padding that I use for destructive actions like delete. Would it be better for me to create a custom css style for that button type or would it be better to define it in the Theme Manager?

[Teodor]

Hi Eddie,
Use the theme manager for global bootstrap changes without needing to overwrite the available styles. For example - using your own corporate identity with a primary/secondary colors, specific main fonts, spacing etc. which will be applied everywhere in your design.

The design panel can be used of course in other cases like you just need to define a new/additional class - style specific elements used on just a few places.

So if you want to make sure the primary color or secondary color or dark color (which is used for buttons, text, different components, color shades on hover) is different than the default one - use the theme manager.

If you want to apply a specific class to a button in your site footer/section/etc used the design panel to add a styling for this specific element.

[eddie5]

Is there a way for me to specify color titles in Theme Manager Advanced options?

Let’s say I have 10 shades of my Primary color and 10 shades of Gray that I want to use throughout my site. I’d like to name the shades/colors (for example) Primary Blue 1, Primary Blue 2, etc. How can I do this?

When I go to colors under the advanced theme manager settings all color titles seem to be fixed.

If I choose white, for example, I can change the color code to make it another color, but I can’t change the title from “white” to something else.

Any suggestions?

[Teodor]

You cannot rename or create new variables.
These are the variables available in the bootstrap 4 framework and you customize them.

For custom colors/vars/classes, use custom CSS and call them where needed.

We’ll check if it will be possible to create your own variables and use them as values for the the Bootstrap 4 variables.