Border color bootstrap 5, SCSS, and adding colors

Wappler General Need Help
1

Hello,

very simple question. I am using Bootstrap 5 and I am currently exploring how the theming workflow works within wappler.

With Theme Manager I can set my basic colors and Advanced Theme Manager will show me very specific colors. Very nice work, by the way. In my case I have implemented e.g. a modal, which has a header (color: $border-color) and footer ($modal-header-border-color) border.

How would I deal with the border color variable, since it will be globally applied?

Where would I change $border-color with my Theme Manager? I have looked at my right window at “Styles” (next to DOM), where I do see a lot of bootstrap variables. I don’t think I want to touch those or edit any of the Bootstrap 5 files. I assume there is a place, where I can edit/override such a variable?

I know I can add my own custom.css file. Would it also be possible to add a custom.scss file, without having to install a converter? Not sure yet, if I will need a custom.css file, since I will make use of your Theme Manager (everything organized).

How would I add extra color with Theme Manager in an organized way, so I can apply those in special cases?:

–bg-primary
–bg-secondary

2

Another Example:

The close button of my modal for example has the color: #000 (.btn-close > with Bootstrap file). How would I change this color? Do I need to change this within my own custom.css file and use !important or is there a better way?

I do know how to apply my own css. I am asking these questions to get a better understanding about best approach and workflow within Wappler.

3

Bootstrap uses a variable for the colour. But this can be set using specific colours like

image
image1527×879 68 KB

Besides changing the colours in the Theme Manager, the only way to override the variables is in an overriding style sheet.

In a style sheets

No go! Only through a style sheet.

Having said that, I suppose you could include a Sass compiler as I did prior to the introduction of the Theme Manager. But this is a pain in the neck.

PS: Looking back over what I have written, it looks like I am very positive of what I call my facts. The opposite is true. These are my findings and they can be open for discussion. :innocent:

4

There is a property in Wappler theme manager advanced called “theme colours”.
You can use this to add more colours.
I am on mobile so don’t have the exact syntax to share.
The colours added here, become available in all BS classes automatically.
For eg: if you add green-100 to theme colours, then classes bg-green-100, text-green-100 etc are generated automatically.

1 Like
5

Thank you. I found the global border color and changed it.
I have attached my custom.css with header.php and tried to change the modal closing icon:

button .btn-close {
color: #fff;
}

Then I realized, the icon is a SVG:

.btn-close {
box-sizing: content-box;
width: 1em;
height: 1em;
padding: .25em .25em;
color: #000;
background: rgba(0,0,0,0) url(“data:image/svg+xml,%3csvg xmlns=‘http://www.w3.org/2000/svg’ viewBox=‘0 0 16 16’ fill=’%23000’%3e%3cpath d=‘M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z’/%3e%3c/svg%3e”) center/1em auto no-repeat;
border: 0;
border-radius: .25rem;
opacity: .5;
}

May I ask, how I would change the icon (SVG) color?

6

To tell you the truth, I delete the button as I do not see a need for it. At the bottom, there is a close button that has the same function.

2 Likes
7

That’s true and I also thought about this option.

8

Great find, works like a charm :+1:

1 Like
9

Found a solution for the .btn-close of modal.

Since it is a background SVG, we can change the color using css “filter”:

button.btn-close {
// HEX color: #fff
filter: invert(100%) sepia(1%) saturate(180%) hue-rotate(234deg) brightness(117%) contrast(100%);
}

HEX color to Filter color:
https://isotropic.co/tool/hex-color-to-css-filter/