Hello

Thank you for your query.

You can add your custom color stylesheet from the custom code section. Please check this documentation: https://www.joomshaper.com/documentation/helix-framework/helix-ultimate-2/custom-code-css-js-meta

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

Mandatory syntax --var: #{SCSS-var-here}

:root {
    --var: #{SCSS-var-here};
}

Any calculations of the values in :root {...} should be made only through CSS syntax and CSS functions, such as calc(), but not through SCSS syntax.

Why do you need SCSS if you do not understand this? Use CSS and all this headache does not need.

Sorry but you write does not work in new helix version

Even tried the standard var scss from bootstrap with only changing the colors and this fails also

I need scss to avoir changing all bootstrap file with our default value, and simply adding root to css fails also.

We wanted to avoid making our own build of bootstrap but there is an issue with how helix outputs it

Try on your webisite this code coming straight from bootstrap :

 /*
 scss-docs-start color-variables
 */
$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #673ab7 !default;
$pink:    #d63384 !default;
$red:     #FC3939 !default;
$orange:  #FF5200 !default;
$yellow:  #EFA31D !default;
$green:   #3fb618 !default;
$teal:    #20c997 !default;
$cyan:    #0dcaf0 !default;
/* scss-docs-end color-variables
 scss-docs-start colors-map*/
$colors: (
        "blue":       $blue,
        "indigo":     $indigo,
        "purple":     $purple,
        "pink":       $pink,
        "red":        $red,
        "orange":     $orange,
        "yellow":     $yellow,
        "green":      $green,
        "teal":       $teal,
        "cyan":       $cyan,
        "white":      $white,
        "gray":       $gray-600,
        "gray-dark":  $gray-800
) !default;
/* scss-docs-end colors-map
 scss-docs-start theme-color-variables*/
$primary:       $purple !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $orange !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-900 !default;
/* scss-docs-end theme-color-variables
 scss-docs-start theme-colors-map*/
$theme-colors: (
        "primary":    $primary,
        "secondary":  $secondary,
        "success":    $success,
        "info":       $info,
        "warning":    $warning,
        "danger":     $danger,
        "light":      $light,
        "dark":       $dark
) !default;

$custom-colors: (
        "custom-color": #900
);

$theme-colors: map-merge($theme-colors, $custom-colors);

$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;

Try on your webisite this code coming straight from bootstrap :

Of course it will not work. This is only the first part. You need all this to add to the second part with the syntax as I showed above.

need scss to avoir changing all bootstrap file with our default value

Just open the browser code inspector, find variables, copy, paste into your custom.css file and change how you need. This is all that required. Not needed SCSS in general

nope, does not work. Even your code with simply warning will not correct bootstrap colors. Try :

/* Sass/SCSS variables stack */
$warning: #FF5200 !default;
/* and ect */
/*****************************/

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

and show a block of code with some bg-warning class. You'll see that the html displays the base bootstrap color and not the new one

I'd simply like to have bootstrap correctly use all our primary/warning/success... own colors for all of its uses. And then add a few things like gradiants, etc

It sould be

:root {
  --bs-warning: #{$warning};
}

Look at the browser code inspector to see the correct variable names

I begin to understand what is wrong, this does not work because Bootstrap 5 is using rgb in variables. So I tried

/* Sass/SCSS variables stack */
$warning: #FF5200 !default;
$warning-rgb: rgb(255,82,0) !default;
/* and ect */
/*****************************/

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

But this compiles to

:root{--bs-warning: #FF5200;--bs-warning-rgb: #ff5200}

Perhaps this is the problem of the compiler. I did not investigate it.

I think there are a few issues with the compiler. According to bootstrap docs I can use

$primary-rgb: 103,58,183 !default;

however this is not understood by the compiler.

If I add

  --bs-primary-rgb: 103,58,183;

in the root area, then the bootstrap.css file is not compiled correctly. All buttons stay with the default bootstrap colors because they are not defined by variables.

So if we want to use our own colors, we still have to use our own bootstrap.css version compiled with the correct variables and the helix included compiler is of no use for now unless I miss something ??