Almost all colors are defined via the classes in the respective php file to assign Bootstrap Colors to all elements.
Where this is not possible, variables are used to ensure that the selected primary color is also changed when you edit your scss variables.
pre {
background-color: var(--bs-light);
}
WooCommerce Colors
bootScore uses custom variables to override WooCommerce colors with a fallback to Bootstrap variables. It first searches if var(--bscore-wc-shop-table-border)
is defined in your child. If not, Bootstrap color var(--bs-gray-300)
is used.
.woocommerce table.shop_table, .woocommerce table.shop_table td {
border-color: var(--bscore-wc-shop-table-border, var(--bs-gray-300));
}
To use your own colors, just add them to the :root
.
:root {
--bscore-wc-shop-table-border: var(--bs-danger);
}
Hugh Wormington
says:There is no /css/theme-colors.css file in bootscore-5. Has this changed?
Basti
says:Hi Hugh,
yes they moved to all.css to reduce file requests. In the next update all css files will go to style.css to increase page speed.
K S
says:I don’t really understand, if I want to change the color of the text on the site and the color of all the links, how can I do it? What kind of pxp file are we talking about? I couldn’t find it in the theme.
Do I have to write it all in style.css?
Do the variables work there?
And how do I add a new color to the ones I already have in the standard bootstrap?
Basti
says:Hi K S,
ok, let’s start from the beginning. Please take a look to https://getbootstrap.com/docs/5.1/customize/color/ how Bootstrap handles colors.
.php
You see, here on bootScore the navbar on top has a light gray background. This is done by class
bg-light
. To change the background color of the navbar from gray to red, copy header.php to your child, open it in an editor, search forbg-light
and change this tobg-danger
. Colors are set by classes nearly in the whole theme.Variables
Where it is not possible to add classes in .php files, color variables are used.
Changing the colors
You see, colors are defined in Bootstrap, not in theme.
primary > blue
secondary > gray
danger > red
success > green
warning > yellow
info > teal
light-gray > light
dark-gray > dark
You can try to override them in style.css, but it’s getting harder with every new Bootstrap release and Bootstrap uses
!important
for color classes.The best way is to define your colors in your own Bootstrap using the https://bootscore.me/shop/products/tools/bootstrap-5-sass-template-for-vscode/ tool and use this in your theme.
For example you want an orange primary color, simple change the color of the default orange to your new and assign primary to orange. Now, every blue changed to orange.
Maybe that sounds complicated, but it’s not. Give this tool a try and check the docs https://bootscore.me/documentation/custom-bootstrap-min-css/.
Does that help?
Dennis Beckers
says:Thanks Basti, that’s clear. I run into a probably very basic problem.
To change the primary color and the color of the backgroud of the navbar, I added these two lines to _bscore_variables.scss:
$primary: #00ff00;
$bg-light: #00ff00;
The primary color changes as expected. The color of the navbar stays grey.
What’s wrong?
(WP 5.9.2, BootScore 5.1.3.1)
Basti
says:You’re welcome.
$bg-light
is not a color. Use$light: #00ff00;
and it works fine. Check here https://bootscore.me/documentation/theme/bootstrap-css-sass/ for more color variables.BTW, please use GitHub for further issues, forgot to close comments here 😉
Nonov Yurbiz
says:Hi. I can’t seem to find a list of variables you used in the CSS referenced like var(–bs-primary). Where are they declared? Thanks.
Nonov Yurbiz
says:Ok nevermind. They’re actually part of bootstrap and not bootscore. You can delete this thread. Thanks.
Andrew
says:Hi,
Just wondering about the setup to override bootstrap variables in general that is. I understand from their docs to import functions first then override variables then import the other components in your own custom.scss with a sass compiler running? I see you have your own with bootscore. I tried implementing dart and then using sass live watcher in vscode but no changes made have any affect. What’s the best way? Thanks
Basti
says:Which theme version are you using? Since 5.1.1.1 bootScore has built-in compiler and you do not need VSCode template anymore https://bootscore.me/documentation/theme/bootstrap-css-sass/
Please update theme and child as described here https://bootscore.me/blog/bootstrap/bootstrap-source-in-theme/