Helixultimate how to change bootstrap main variables for alternative colors ?

Hi. What exactly does not work using custom.css? It should work well.

we customize the whole bootstrap file with bootstrap.build, changing color variables, js components used, color gradients and some padding
what would be great would be a way to only add variables.scss to helix so that all changes are automatically compiled

For now custom.scss with added root variables does not build the correct bootstrap.css
Any update ?

Hi. This should not build bootstrap.css. SCSS variables have other syntax and are used only inside SCSS but are not compiled in CSS. Only their values are compiled.

When you wrote code in custom.scss and saved, a new file is created in /templates/shaper_helixultimate/css/custom-compiled.css. This file is connected below bootstrap.min.css and overrides it. So, everything works.

++

If you expected it to change the core template's files , you are mistaken. That would break the template. Therefore, only override is possible.

After all bootstrap.min.css is a static CSS file. And for its generation inside Helix is not used SCSS. Therefore, if you want to override BS variables for using in CSS files, add them to custom.css (in main css sintax) and change values as you want.

Then you will see that it is overriden in custom.css

If you want to continue using Helix and receive updates, you cannot use anything other than override. Otherwise, create your own template based on Helix and delete everything you not needed. There is not other way

For now if I use

:root {
  $white: #fff;
  $gray-100: #f8f9fa;
  $gray-200: #e9ecef;
  $gray-300: #dee2e6;
  $gray-400: #ced4da;
  $gray-500: #adb5bd;
  $gray-600: #6c757d;
  $gray-700: #495057;
  $gray-800: #343a40;
  $gray-900: #212529;
  $black: #000;
  $blue: #007bff;
  $indigo: #6610f2;
  $purple: #673ab7;
  $pink: #e83e8c;
  $red: #FC3939;
  $orange: #FF5200;
  $yellow: #EFA31D;
  $green: #3fb618;
  $teal: #20c997;
  $cyan: #009CDC;
  $primary: $purple;
  $success: $green;
  $info: $blue;
  $warning: $orange;
  $danger: $red;
  $dark: $gray-900;
  $body-color: $gray-900;
  $dropdown-link-color: $gray-900;
  $dropdown-link-hover-color: $white;
  $dropdown-link-hover-bg: $primary;
  $navbar-dark-hover-color: rgba($white, .9);
  $enable-hover-media-query: true;
  $font-size-base: 0.9rem;
  $font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  $light: $gray-100;
  $secondary: $gray-500;
  $enable-gradients: true;
  $enable-shadows: true;
  $enable-responsive-font-sizes: true;
}

in https://bootstrap.build I can get a bootstrap file built with my variables which is not the bootstrap used by helix and there is no input in custom-compiled.css
Then I have to manually replace the bootstrap file set in the template.

What would be great is a way to compile bootstrap from the variables in custom.scss because custom-compiled can not override all the css rules writen in the main file
Could you implement this ?

Hi Jean. For clarity, I'm not a member of the joomshaper team. Just a user.

:root {
  $white: #fff;
 /* and ect */
    }

This is not the correct. I wrote about adding it to CSS but not in SCSS.

Sass / SCSS variables appeared much earlier than CSS variables. This is not the same thing. If you want to generate CSS variables in the output CSS file, you need to use two stacks of variables in your SCSS file. Then you will get everything you want in custom-compiled.css .

/* Sass/SCSS variables stack */
$white: #fff !default;
/* and ect */
/*****************************/

/* Stack for generate CSS variables in output CSS file */
:root {
  --white: #{$white};
}
/* and ect */
/****************************/

Perhaps there are something to automate this. Look at the Bootstrap source scss code. I am not a fan of preprocessors, so I do not know for sure.

Hi Pavel and thanks for your answers

Unfortunately, trying the following in custom.scss does not work neither, nothing is compiled in custom-compiled
Do you see where could be the error ?

$white: #fff !default;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #673ab7 !default;
$pink: #e83e8c !default;
$red: #FC3939 !default;
$orange: #FF5200 !default;
$yellow: #EFA31D !default;
$green: #3fb618 !default;
$teal: #20c997 !default;
$cyan: #009CD !defaultC;
$primary: $purple;
$success: $green;
$info: $blue;
$warning: $orange;
$danger: $red;
$dark: $gray-900;
$body-color: $gray-900;
$dropdown-link-color: $gray-900;
$dropdown-link-hover-color: $white;
$dropdown-link-hover-bg: $primary;
$navbar-dark-hover-color: rgba($white, .9);
$enable-hover-media-query: true;
$font-size-base: 0.9rem;
$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$light: $gray-100;
$secondary: $gray-500;
$enable-gradients: true;
$enable-shadows: true;
$enable-responsive-font-sizes: true;

:root {
  --$white: #{$white};
  --$gray-100: #f8f9fa;
  --$gray-200: #e9ecef;
  --$gray-300: #dee2e6;
  --$gray-400: #ced4da;
  --$gray-500: #adb5bd;
  --$gray-600: #6c757d;
  --$gray-700: #495057;
  --$gray-800: #343a40;
  --$gray-900: #212529;
  --$black: #000;
  --$blue: #007bff;
  --$indigo: #6610f2;
  --$purple: #673ab7;
  --$pink: #e83e8c;
  --$red: #FC3939;
  --$orange: #FF5200;
  --$yellow: #EFA31D;
  --$green: #3fb618;
  --$teal: #20c997;
  --$cyan: #009CDC;
  --$primary: $purple;
  --$success: $green;
  --$info: $blue;
  --$warning: $orange;
  --$danger: $red;
  --$dark: $gray-900;
  --$body-color: $gray-900;
  --$dropdown-link-color: $gray-900;
  --$dropdown-link-hover-color: $white;
  --$dropdown-link-hover-bg: $primary;
  --$navbar-dark-hover-color: rgba($white, .9);
  --$enable-hover-media-query: true;
  --$font-size-base: 0.9rem;
  --$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --$light: $gray-100;
  --$secondary: $gray-500;
  --$enable-gradients: true;
  --$enable-shadows: true;
  --$enable-responsive-font-sizes: true;
}

Hi. If you carefully look at the code in my post above, you will see errors. In your root {...} section, everything is not right.

Sorry dont see the error.
It simply seems that the scss does not take all variables into account
Following 5.1 rules from bootstrap I also tried to adapt and change to the following without results :

this works within bootstrap build but not with helix

// Default variable overrides
$info: #007bff;
$primary: #673ab7;
$danger: #FC3939;
$warning: #FF5200;
$success: #3fb618;

$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
$blue: #007bff;
$indigo: #6610f2;
$purple: #673ab7;
$pink: #e83e8c;
$red: #FC3939;
$orange: #FF5200;
$yellow: #EFA31D;
$green: #3fb618;
$teal: #20c997;
$cyan: #009CDC;
$dark: $gray-900;
$body-color: $gray-900;
$dropdown-link-color: $gray-900;
$dropdown-link-hover-color: $white;
$dropdown-link-hover-bg: $primary;
$navbar-dark-hover-color: rgba($white,.9);
$enable-hover-media-query: true;
$font-size-base: 0.9rem;
$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$light: $gray-100;
$enable-gradients: true;
$enable-shadows: true;
$enable-responsive-font-sizes: true;

$theme-colors: (
  "primary": $primary,
  "success": $success,
  "info": $info,
  "danger": $danger,
  "warning": $warning,
  "secondary": $gray-500
);
$custom-colors: (
        "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);