Customize theme

Colors
Primary
Success
Warning
Danger
Info
Direction
RTL

Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.
Border width, px
Rounding, rem
Back to settings

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">


          

        

      


      
      

        
        
      

    



    
    

      

        
        
          
            
          
          Cartzilla
          v3.1.1
        
        
        

          
          
    
            
  • 
              
            
    • 
            
  • 
              
            
    • 
            
  • 
              
            
    • 
          

        

        
        
          
          Buy now
        
      

    



    
    

      


        
        


        
        


          
          

            Customize
            
CSS variables

          



          
          

            
Cartzilla builds upon the foundation of CSS custom properties (also known as CSS variables) introduced by Bootstrap, enhancing these capabilities with additional variables for its custom components. This approach allows for extensive customization of every component as well as global variables, covering styles from sizes and spacing to colors.



            
            

              
Discovering CSS variables

              
To identify the CSS variables available for a specific component, you can use the following methods:

              
    
                
  1. 
                  Browser inspector: The easiest way to learn about the CSS variables associated with a component is to highlight it with the browser inspector. This tool will display all CSS properties, including custom variables, applied to the selected element.
                
    2. 
                
  2. 
                  Source files: Open the .scss file corresponding to the component inside the src/scss/components folder using your editor. CSS variables are typically listed at the top of the file, corresponding to the parent wrapper of the component.
                
    3. 
              

              
Example of globals CSS variables

              
Cartzilla also provides global CSS variables that allow for template-wide customization. These are defined within the :root selector.

              
// As seen in the Browser inspector

:root, [data-bs-theme=light] {
  --cz-primary: #f55266;
  --cz-secondary: #6c727f;
  --cz-success: #33b36b;
  --cz-info: #2f6ed5;
  --cz-warning: #fc9231;
  --cz-danger: #f03d3d;
  --cz-light: #fff;
  --cz-dark: #222934;
  ...
}

              
Range Slider component CSS variables

              
Here is how CSS variables are scoped within the Range Slider component:

              
// Inside src/scss/components/_forms.scss
// During compilation, the --#{$prefix} placeholder is replaced with cz-, reflecting the predefined variable prefix in the final CSS output.

.range-slider {
  --#{$prefix}range-slider-height: #{$range-slider-height};
  --#{$prefix}range-slider-bg: #{$range-slider-bg};
  --#{$prefix}range-slider-connect-bg: #{$range-slider-connect-bg};
  --#{$prefix}range-slider-handle-size: #{$range-slider-handle-size};
  --#{$prefix}range-slider-handle-bg: #{$range-slider-handle-bg};
  --#{$prefix}range-slider-handle-active-bg: #{$range-slider-handle-active-bg};
  --#{$prefix}range-slider-handle-border-width: #{$range-slider-handle-border-width};
  --#{$prefix}range-slider-handle-border-color: #{$range-slider-handle-border-color};
  --#{$prefix}range-slider-handle-border-radius: 50%;
  --#{$prefix}range-slider-pips-color: var(--#{$prefix}body-color);
  --#{$prefix}range-slider-pips-font-size: #{$range-slider-pips-font-size};
  --#{$prefix}range-slider-pips-border-width: var(--#{$prefix}border-width);
  --#{$prefix}range-slider-pips-border-color: #{adjust-color($border-color, $lightness: -6%)}; // stylelint-disable-line
  --#{$prefix}range-slider-tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}range-slider-tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}range-slider-tooltip-bg: #{$range-slider-tooltip-bg};
  --#{$prefix}range-slider-tooltip-color: #{$range-slider-tooltip-color};
  --#{$prefix}range-slider-tooltip-font-size: #{$range-slider-tooltip-font-size};
  --#{$prefix}range-slider-tooltip-border-radius: #{$tooltip-border-radius};
}

            



            
            

              
Customizing the template using CSS variables

              
Cartzilla allows for flexible customization through CSS variables, which can be applied at both the global and component levels to tailor the styling to specific needs.

              
Global scope customization

              
To customize the template at a global level, you can define custom CSS variables within the <style> tags and place them in the <head> section of your HTML file. This method affects the styling page-wide.

              
Example of adding global variables to the <head> section:

              
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
  <head>
    <style>
      :root {
        --cz-primary: #007bff;  /* Blue shade for primary color */
        --cz-secondary: #555e67; /* Darker shade for secondary color */
      }
    </style>
    ...
  </head>

              
Component scope customization

              
For more localized changes, component-scoped variables can be added directly to a component's parent element using the style attribute. This method allows you to customize individual components without affecting others.

              
Example of customizing the .range-slider component:

              
<div class="range-slider" style="--cz-range-slider-bg: #e9ecef; --cz-range-slider-handle-bg: #007bff;">
  <!-- Range slider component content -->
</div>

              
Understanding the cz- prefix

              
The cz- prefix for CSS variables is derived from the $prefix variable defined in src/scss/_variables.scss. This prefix helps to namespace Cartzilla's CSS variables, avoiding conflicts with other styles or scripts.

              
// Inside src/scss/_variables.scss

// Prefix for CSS variables
$prefix: cz- !default;

              
If you need to change this prefix, copy the $prefix variable to src/scss/_user-variables.scss and update its value there. This customization will propagate through all related CSS variables in your project.

              
Updating the prefix in user variables

              
// Inside src/scss/_user-variables.scss
$prefix: myapp- !default;  // Change prefix to 'myapp-'

              
This will change the prefix from --cz- to --myapp- for all CSS variables, ensuring a unique and consistent branding style across your template.

            

          

        

      

    



    
    

      
        Top
        
        
        
          
        
      
      
        Customize