Documentation

Settings

Debugger

Designer

Developer

Customizer

Code editor

Help

Docs: Designer

About designer

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

SCSS Compiler options

Set options for the SCSS compiler of child theme custom styles files.

  • SCSS Compiler minify: Minify CSS output when compiling SCSS files.
    Recommended in production.
  • SCSS Autocompile: Check for SCSS files updates and compile CSS output if required. Useful for editing custom files in an external editor and update them with FTP.
    Recommended only in development.
Related custom files:
SCSS style.scss/style.scss
Base SCSS to be compiled as child theme styles.
Editing this file is not recommended.
It is automatically regenerated when the child theme information is updated.
Type: SCSS
Size: 913 B
Modified: 2026/06/06 06:10:23
Open file in new tab
SCSS style-admin.scss/style-admin.scss
Base SCSS to be compiled as admin panel styles.
Editing this file is not recommended.
Type: SCSS
Size: 612 B
Modified: 2026/04/16 17:27:55
Open file in new tab
CSS style.css/style.css
Compiled CSS child theme for frontend styles.
Editing this file is not recommended.
It will be overwritten by the SCSS compiler.
Type: CSS
Size: 3 KB
Modified: 2026/06/09 15:56:54
Open file in new tab
CSS style-admin.css/style-admin.css
Compiled CSS child theme for admin panel styles.
Editing this file is not recommended.
It will be overwritten by the SCSS compiler.
Type: CSS
Size: 120 KB
Modified: 2026/06/09 15:56:54
Open file in new tab
Related theme mods:
dct_scss_compiler
Set options for SCSS compiler of child theme custom files.
SCSS Compiler dct_scss_compiler 2
{
    "minify": true,
    "autocompile": false
}

SCSS Compiler settings

Set options for the SCSS compiler of child theme custom styles files.

  • SCSS Compiler minify: Minify CSS output when compiling SCSS files.
    Recommended in production.
  • SCSS Autocompile: Check for SCSS files updates and compile CSS output if required. Useful for editing custom files in an external editor and update them with FTP.
    Recommended only in development.
Related custom files:
SCSS style.scss/style.scss
Base SCSS to be compiled as child theme styles.
Editing this file is not recommended.
It is automatically regenerated when the child theme information is updated.
Type: SCSS
Size: 913 B
Modified: 2026/06/06 06:10:23
Open file in new tab
SCSS style-admin.scss/style-admin.scss
Base SCSS to be compiled as admin panel styles.
Editing this file is not recommended.
Type: SCSS
Size: 612 B
Modified: 2026/04/16 17:27:55
Open file in new tab
CSS style.css/style.css
Compiled CSS child theme for frontend styles.
Editing this file is not recommended.
It will be overwritten by the SCSS compiler.
Type: CSS
Size: 3 KB
Modified: 2026/06/09 15:56:54
Open file in new tab
CSS style-admin.css/style-admin.css
Compiled CSS child theme for admin panel styles.
Editing this file is not recommended.
It will be overwritten by the SCSS compiler.
Type: CSS
Size: 120 KB
Modified: 2026/06/09 15:56:54
Open file in new tab
Related theme mods:
dct_scss_compiler
Set options for SCSS compiler of child theme custom files.
SCSS Compiler dct_scss_compiler 2
{
    "minify": true,
    "autocompile": false
}

Recommended in production.

Recommended only in development.

SCSS Compiler status

Child theme and SCSS compiler current status, general information and tools.

Status: SCSS Compiler

Designer
dct_scss_compiler
Minify CSS output when compiling SCSS files.
Recommended in production.
SCSS Compiler minify: true
dct_scss_compiler
Check for SCSS files updates and compile CSS output if required. Useful for editing custom files in an external editor and update them with FTP.
Recommended only in development.
SCSS Autocompile: false

Global Variables

Colors6
primary #3fa6a5
primary-dark #2a6e6d
primary-darker #153736
primary-light #6bc6c5
primary-lighter #a2dbda
primary-comp #a63f40
Fonts0
No global variables found
Sizes0
No global variables found

Source SCSS and compiled CSS files

Base styles: SCSS

2
/style.scss
Base SCSS to be compiled as child theme styles.
Editing this file is not recommended.
It is automatically regenerated when the child theme information is updated.
Type: SCSS
Size: 913 B
Modified: 2026/06/06 06:10:23
Edit file with code editor
/style-admin.scss
Base SCSS to be compiled as admin panel styles.
Editing this file is not recommended.
Type: SCSS
Size: 612 B
Modified: 2026/04/16 17:27:55
Edit file with code editor

Partials styles: SCSS

8
/custom/scss/_custom.scss
Partial SCSS for custom frontend styles.
Used to add custom CSS to child theme frontend styles.
Type: SCSS
Size: 915 B
Modified: 2026/06/09 09:21:30
Edit file with code editor
/custom/scss/_custom-admin.scss
Partial SCSS for custom admin panel styles.
Used to add custom CSS to child theme admin panel styles.
Type: SCSS
Size: 249 B
Modified: 2026/04/16 17:27:55
Edit file with code editor
/custom/scss/_colors.scss
Partial SCSS for global variables.: Colors.
Type: SCSS
Size: 664 B
Modified: 2026/06/06 09:01:09
Edit file with code editor
/custom/scss/_fonts.scss
Partial SCSS for global variables.: Fonts.
Type: SCSS
Size: 177 B
Modified: 2026/04/16 17:27:55
Edit file with code editor
/custom/scss/_sizes.scss
Partial SCSS for global variables.: Sizes.
Type: SCSS
Size: 177 B
Modified: 2026/04/16 17:27:55
Edit file with code editor
/custom/scss/_preloader.scss
Partial SCSS styles for customizer: Page preloader.
Type: SCSS
Size: 1 KB
Modified: 2026/04/16 17:27:55
Edit file with code editor
/custom/scss/_admin-panel.scss
Partial SCSS styles for customizer: Admin panel.
Type: SCSS
Size: 7 KB
Modified: 2026/06/07 07:01:33
Edit file with code editor
/custom/scss/login-page.scss
Partial SCSS styles for customizer: Login page.
Type: SCSS
Size: 2 KB
Modified: 2026/04/16 17:27:55
Edit file with code editor

Compiled styles: CSS

3
/style.css
Compiled CSS child theme for frontend styles.
Editing this file is not recommended.
It will be overwritten by the SCSS compiler.
Type: CSS
Size: 3 KB
Modified: 2026/06/09 15:56:54
Edit file with code editor
/style-admin.css
Compiled CSS child theme for admin panel styles.
Editing this file is not recommended.
It will be overwritten by the SCSS compiler.
Type: CSS
Size: 120 KB
Modified: 2026/06/09 15:56:54
Edit file with code editor
/custom/css/login-page.css
Compiled CSS styles for customizer: Login page.
Editing this file is not recommended.
It will be overwritten by the SCSS compiler.
Type: CSS
Size: 1 KB
Modified: 2026/04/16 17:27:55
Edit file with code editor

Global variables

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Colors

Add & edit global color variables to use in customizer and child theme custom files code.
Optionally add automated color shades (light & dark versions) and complementary color.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global colors variables with custom files code:
Related custom files:
SCSS _colors.scss/custom/scss/_colors.scss
Partial SCSS for global variables.: Colors.
Type: SCSS
Size: 664 B
Modified: 2026/06/06 09:01:09
Open file in new tab
Related theme mods:
dct_variables_colors
Global variables list created with designer generator.
Global variables: Colors dct_variables_colors 2
{
    "advanced": false,
    "options": [
        {
            "name": "primary",
            "value": "#3fa6a5",
            "shade": 30,
            "complementary": true,
            "versions": {
                "base": "#3fa6a5",
                "dark": "#2a6e6d",
                "darker": "#153736",
                "light": "#6bc6c5",
                "lighter": "#a2dbda",
                "comp": "#a63f40"
            }
        }
    ]
}

Colors

Switch to advanced mode

Add & edit global color variables to use in customizer and child theme custom files code.
Optionally add automated color shades (light & dark versions) and complementary color.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global colors variables with custom files code:
Related custom files:
SCSS _colors.scss/custom/scss/_colors.scss
Partial SCSS for global variables.: Colors.
Type: SCSS
Size: 664 B
Modified: 2026/06/06 09:01:09
Open file in new tab
Related theme mods:
dct_variables_colors
Global variables list created with designer generator.
Global variables: Colors dct_variables_colors 2
{
    "advanced": false,
    "options": [
        {
            "name": "primary",
            "value": "#3fa6a5",
            "shade": 30,
            "complementary": true,
            "versions": {
                "base": "#3fa6a5",
                "dark": "#2a6e6d",
                "darker": "#153736",
                "light": "#6bc6c5",
                "lighter": "#a2dbda",
                "comp": "#a63f40"
            }
        }
    ]
}

No variables found.

1
Color variable with shades variations.

primary_darker
#153736

primary_dark
#2a6e6d

primary
#3fa6a5

primary_light
#6bc6c5

primary_lighter
#a2dbda

primary_comp
#a63f40

Delete
0 
Color variable with shades variations.
color-name_darker
color-name_dark
color-name
color-name_light
color-name_lighter
color-name_comp
Delete
 Colors
Switch to basic mode
 
Add & edit global color variables to use in customizer and child theme custom files code.
Optionally add automated color shades (light & dark versions) and complementary color.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global colors variables with custom files code:
Related custom files:
 SCSS _colors.scss/custom/scss/_colors.scss
Partial SCSS for global variables.: Colors.
Type: SCSS
Size: 664 B
Modified: 2026/06/06 09:01:09
 Open file in new tab
Related theme mods:
dct_variables_colors
Global variables list created with designer generator.
 Global variables: Colors dct_variables_colors 2
{
    "advanced": false,
    "options": [
        {
            "name": "primary",
            "value": "#3fa6a5",
            "shade": 30,
            "complementary": true,
            "versions": {
                "base": "#3fa6a5",
                "dark": "#2a6e6d",
                "darker": "#153736",
                "light": "#6bc6c5",
                "lighter": "#a2dbda",
                "comp": "#a63f40"
            }
        }
    ]
}
File: 
 SCSS _colors.scss/custom/scss/_colors.scss
Partial SCSS for global variables.: Colors.
Type: SCSS
Size: 664 B
Modified: 2026/06/06 09:01:09
 Open file in new tab
Toggle editor find & replace panel.
Hotkeys: CTRL + F to open, ESC to close
Copy editor contents to clipboard.
Toggle editor light/dark theme.
Currently using basic mode.
Updating the generator in advanced mode will overwrite basic mode generator options code.













Fonts





Add & edit global fonts variables to use in child theme custom files code.
Optionally add @import rule on top of SCSS code, useful if font is not already imported.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global fonts variables with custom files code:
Related custom files:
 SCSS _fonts.scss/custom/scss/_fonts.scss
Partial SCSS for global variables.: Fonts.
Type: SCSS
Size: 177 B
Modified: 2026/04/16 17:27:55
 Open file in new tab
Related theme mods:
dct_variables_fonts
Global variables list created with designer generator.
 Global variables: Fonts dct_variables_fonts 2
{
    "options": [],
    "advanced": false
}





 Fonts
Switch to advanced mode
 
Add & edit global fonts variables to use in child theme custom files code.
Optionally add @import rule on top of SCSS code, useful if font is not already imported.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global fonts variables with custom files code:
Related custom files:
 SCSS _fonts.scss/custom/scss/_fonts.scss
Partial SCSS for global variables.: Fonts.
Type: SCSS
Size: 177 B
Modified: 2026/04/16 17:27:55
 Open file in new tab
Related theme mods:
dct_variables_fonts
Global variables list created with designer generator.
 Global variables: Fonts dct_variables_fonts 2
{
    "options": [],
    "advanced": false
}
No variables found.
0 
Font with @import.
Add @import url code if needed:: @import url("https://fonts.googleapis.com/css2?family=PT+Sans&display=swap");
Delete
 Fonts
Switch to basic mode
 
Add & edit global fonts variables to use in child theme custom files code.
Optionally add @import rule on top of SCSS code, useful if font is not already imported.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global fonts variables with custom files code:
Related custom files:
 SCSS _fonts.scss/custom/scss/_fonts.scss
Partial SCSS for global variables.: Fonts.
Type: SCSS
Size: 177 B
Modified: 2026/04/16 17:27:55
 Open file in new tab
Related theme mods:
dct_variables_fonts
Global variables list created with designer generator.
 Global variables: Fonts dct_variables_fonts 2
{
    "options": [],
    "advanced": false
}
File: 
 SCSS _fonts.scss/custom/scss/_fonts.scss
Partial SCSS for global variables.: Fonts.
Type: SCSS
Size: 177 B
Modified: 2026/04/16 17:27:55
 Open file in new tab
Toggle editor find & replace panel.
Hotkeys: CTRL + F to open, ESC to close
Copy editor contents to clipboard.
Toggle editor light/dark theme.
Currently using basic mode.
Updating the generator in advanced mode will overwrite basic mode generator options code.













Sizes





Add & edit global sizes variables to use in child theme custom files code.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global sizes variables with custom files code:
Related custom files:
 SCSS _sizes.scss/custom/scss/_sizes.scss
Partial SCSS for global variables.: Sizes.
Type: SCSS
Size: 177 B
Modified: 2026/04/16 17:27:55
 Open file in new tab
Related theme mods:
dct_variables_sizes
Global variables list created with designer generator.
 Global variables: Sizes dct_variables_sizes 2
{
    "options": [],
    "advanced": false
}





 Sizes
Switch to advanced mode
 
Add & edit global sizes variables to use in child theme custom files code.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global sizes variables with custom files code:
Related custom files:
 SCSS _sizes.scss/custom/scss/_sizes.scss
Partial SCSS for global variables.: Sizes.
Type: SCSS
Size: 177 B
Modified: 2026/04/16 17:27:55
 Open file in new tab
Related theme mods:
dct_variables_sizes
Global variables list created with designer generator.
 Global variables: Sizes dct_variables_sizes 2
{
    "options": [],
    "advanced": false
}
No variables found.
0 
Delete
 Sizes
Switch to basic mode
 
Add & edit global sizes variables to use in child theme custom files code.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global sizes variables with custom files code:
Related custom files:
 SCSS _sizes.scss/custom/scss/_sizes.scss
Partial SCSS for global variables.: Sizes.
Type: SCSS
Size: 177 B
Modified: 2026/04/16 17:27:55
 Open file in new tab
Related theme mods:
dct_variables_sizes
Global variables list created with designer generator.
 Global variables: Sizes dct_variables_sizes 2
{
    "options": [],
    "advanced": false
}
File: 
 SCSS _sizes.scss/custom/scss/_sizes.scss
Partial SCSS for global variables.: Sizes.
Type: SCSS
Size: 177 B
Modified: 2026/04/16 17:27:55
 Open file in new tab
Toggle editor find & replace panel.
Hotkeys: CTRL + F to open, ESC to close
Copy editor contents to clipboard.
Toggle editor light/dark theme.
Currently using basic mode.
Updating the generator in advanced mode will overwrite basic mode generator options code.