How to Globally change Bootstrap Theme via a custom.scss

Are you using a local version of bootstrap or a CDN? If it is the CDN it will be locked as the files are not on your computer. You can override the values even in a CDN by using the Styles panel and creating a new custom.css file.

@I_Alain_I
Just select the row/cell and then in the design panel add a class to it and change the background color and text color :slight_smile:
@brad it doesn’t matter if local or cdn to customize an element on your page using the design panel.

Has that changed? I swear that was an issue way back in the early days. That was before the Design Panel perhaps. Makes sense though since you aren’t actually changing anything in the css file when using the design panel. Thanks for setting me straight.

1 Like

Ah, I just tried changing the BG colour of a table with the Design Panel. Way easier than the old way with the styles panel.

Creating a new class still inherits and locks the background-color of the boostrap css:

When I use my custom css-file and overrite the background-color of the “bg-light” class by using !important, then it works.

But why have you applied bg-light to your table then, if you want it to have custom colors/background?
bg-light class is a special bs4 class for setting the background color to the bs4 defined light color. You cannot override it as it’s a special bs4 class. You should not use it for your table. Remove it from the table and use the design panel only to do what you are trying to do.

1 Like

That tutorial is only necessary if you wish to push Bootstrap to the limits. As a matter of habit, when I create a new site, I install the Bootstrap source files. I would not suggest using this method if you are not comfortable doing so.

As far as the distributed Bootstrap files are concerned, these have all been locked for a purpose, e.g. 'Do not alter'

You must setup your own stylesheet and make overriding style rules (style rules that override the original Bootstrap files), as you have done
image
Be careful when using !important. For more, see https://uxengineer.com/css-specificity-avoid-important-css/

Edit: re-reading the this topic, I can’t help but notice that you have set the background colour using bg-light before applying an overriding style rule. If you remove bg-light do you still need !important?

Edit 2: I notice that @Teodor as already flagged the bg-light issue.

Because I wanna keep all the other bootstrap-css-formats (like “striped”, “borderless”, and so on) that is linked to it. When I remove the bootstrap-classes and asign my own class, then all the bootstrap-css-formating gets lost and I have to start formating the table from scratch.
All I wanna do is to set “Appearance->Back Color” to my own custom color (not one of those predefined).


How can I do that?

Yes it works without!important when I remove the bg-light class.
And now I understand what the bg-light class does :stuck_out_tongue_winking_eye:

@Teodor I guess I understand now too what you mean. I add my own class but using the bootstrap-parents but without the bg-light class. In this way I can override the background-color without using !important .
I hope this is right way :slight_smile:

I’m finding that there are lots of times that I would like to change just one or two default attributes that is locked to a BS4 component. So, if I understand correctly, that means adding my own css styling and removing the BS4 class.

It would be great to have a quicker way to build up the css style to match the default BS4 one and then make the one or two modifications. Maybe something such as “copy current style” option when creating a new one in the design panel.

Also, when I remove the default BS4 class the component is removed from view in the design editor. Is that expected behavior?

No, you can just override the bootstrap class in your own CSS either manually or using the design panel. No need to remove it from the component in the HTML.
So just copy the class name to your custom CSS file and apply your own rules there.

1 Like

So, would it have two classes in the design panel: the default BS4 one and my custom created one? Does that override even the locked attributes?

You can just override the class, or if you prefer add a second class to the element.
So either:

.bs4-class.my-class {
my rules here
}

or

.bs4-class {
my rules here
}
1 Like

This may help Using Bootstrap Source Files

1 Like

Thanks @Teodor!

I figured out how to do the first method to override the locked BS4 class using the Design Panel.

For everyone’s reference, the BS4 class alone may have locked properties (pink).

By simply combining the BS4 class with a new class that we create, it unlocks those properties (now orange) by creating an entirely new class.

Here’s the new class it creates in the Styles Panel:
image

However, doing it this way was a little bit buggy. Even after creating a new class, sometimes it would still have locked properties until I would click away from the Design Panel and click back.

Also, when just using the Design Panel, if you remove all of the classes and then add them back, you have to be careful to add them back in the same order, otherwise you will create a completely new class. For example, getting the order mixed up in the Design Panel resulted in these two classes being created:

image

It would seem that Wappler could be improved by recognizing these and not allowing us to create two separate classes. I have no idea how hard that would be, though :slight_smile: @George

Also, as I experimented to find a solution, I ended up creating a bunch of css classes that I wish to now delete. The Styles Panel shows a link w/tooltip path to the css file each class draws from and clicking on that link opens the corresponding file (assuming it is a style sheet we created not a default BS4 one) and takes us to the class. I can delete the class from there, but it would be pretty awesome to be able to delete a class right from the Styles Panel UI. I’m thinking maybe through a dropdown option or something similar. @George

In general, figuring out how the various CSS tools (BS4 options in Design View, Design Panel, Styles Panel, custom CSS file, BS4 default CSS file vs source files) interplay has been a challenge in Wappler as someone new to CSS and BS4.

Thanks for the detailed tutorial @ben! If I understand correctly, some use cases for your tutorial would be if you are going to change a lot of the BS4 classes on a project (makes your css cleaner) or want to setup your own reusable standard classes that are based on BS4 for a consistent look across multiple projects. Does that sound about right?

1 Like

Have a look at https://getbootstrap.com/docs/4.0/getting-started/theming/, you will see that using the source files will give you a lot more flexibility.

1 Like

Have a look at https://www.youtube.com/watch?v=85tt7KwUMLo

1 Like

Hi, thank you for the very helpful video. I have started my project that way and it is perfect for customizations. You mentioned to never put node_modules on server. How do you do that when publishing to your server with Wappler? and should they also be Git ignored when working with Github from different computers?

1 Like

I found how to exclude the folder: Ignore a Folder When Using PUBLISH

3 Likes

Hello,
That’s already possible in Wappler by using the new Theme Manager:


Please check it and provide your feedback :slight_smile: