Documentation Theme

Colors

| 10 Comments on Colors

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);
}

10 Comments on “Colors”

  • 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 for bg-light and change this to bg-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.

      .woocommerce div.product p.price ins, .woocommerce div.product span.price ins, ins {
    color: var(--bs-danger);
}
      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)

  • 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

Comments are closed.

To top