Theme Manager - advanced options gray-200

Wappler General
#1

Hi, just getting started with Wappler, very good so far, great work guys. Big app to learn but fun.

Little stuck. I have a new site, blank page, i have setup bs5 local. I have used one of the themes in theme manager, set my colours. That part is all ok, but I need a few more colours. So I went to advanced and setup gray-200 with a new colour I needed. But Iif I then set the background to bg-gray-200 nothing happens, am I missing something?

Thanks in advance
James

#2

Hi

what do you mean you set the backfround to bg-gray-200, how did you do that?

#3

Maybe this can help you

#4

I went to theme manager -> advanced, then + symbol then added the gray 200. Which I thought would then give that as a new colour option in bootstrap available as say bg-gray-200 (thats what the bootstrap site seems to lead you to, but I am wrong I guess

#5

thanks, I read that and its where I added my colour I wanted added gray 200, but then cant work out how to use that as a css like bg-gray-200 as per the bootstrap site. thanks

#6

No, that’s not how it works.
The bs-gray-200 is a variable, it’s been used in some places in Bootstrap 5 css files.

You can use it to style your elements like:

.your-css-class {
    background-color: var(--bs-gray-200)
}
1 Like
#7

thanks

#8

I’m still missing something :frowning:

So I have selected styles top right, addes new custom.css file, in that file I have :slight_smile:

.gray-200 {
background-color: var(–gray-200)
}

I then used gray-200 as my class on the container, i have “Gray 200” setup under theme manager -> advanced

still nothing shows, the custom.css is being included in the page, opening the custom.css has the lines above (so it saved)

#9

The variable is called --bs-gray-200 not --gray-200