How to customize Qstomizer using CSS (colors, buttons and more).

You can personalise the layout of Qstomizer using pre-defind styles/Themes ( CLICK HERE) or you can create your own custom layout using CSS.

To add your own CSS rules, go ti Settings and then, click on Styles / CSS tab:

When finished, press the "Save" button to apply your CSS styles.

Examples:

The possibilities for customizing the interface with CSS are virtually limitless. The examples provided here offer just a small glimpse of what’s possible.

1. Changing the color of the buttons:

Imagine that you want to create a button style like this one:

Notice that you can also change the text on the buttons, messages, etc.. by using the translation tool.

You only have to apply this style to the buttons:

                    .qsmzBtnNormal:link, .qsmzBtnNormal:active, .qsmzBtnNormal:visited {
                        border-radius: 30px;
                        font-size: 18px;
                        background-color: #2276db;
                        color: #ffffff;
                        padding: 20px 10px;
                        margin: 10px 0px;
                        border: 1px solid #135eb4;
                        text-transform: uppercase;
                    }
                    

Please note that the layout for mobile devices differs from the desktop version, which means the CSS classes for buttons are also different across these platforms. To change the button color on mobile, you can use the following CSS rule:

                    .qsmzButtonMobile {
                        background-color: #2276db;
                        color: #fff;
                    }
                    

2. Changing the color of the "accept" button in popup windows:

If you want to remove the style of the buttons and change their color, just add this CSS rule:

                    .actionActive, .actionBtnAccept{
                        background-color: #50c5ed !important;
                        border: 1px solid #50c6ed !important;
                        color: #fff !important;
                    }
                    .actionActive:hover, .actionBtnAccept:hover{
                        background-color: #62cbef !important;
                        border: 1px solid #62cbef !important;
                        color: #fff !important;
                    }
                    

.. and this is the result:

3. Removing the "Variants" Button:

If you want to remove the "Variants" button, just add this CSS rule:

This is the rule to remove it (desktop and mobile):

                    #btnvariations, #btnvariationsmobile {
                        display: none !important;
                    }
                    

.. and this is the result:

4. Reordering the buttons:

We want to change the buttons from the initial order:

And we want to put the "Pre-made designs" button after the "Add text" button. Just the last one before the "preview" button.

This are the CSS rules to achieve it:

                    .qsmzButtonsContainerSlider {
                        display: flex;
                        flex-direction: column;
                    }
                    #btnvariations {
                        order: 1;
                    }
                    #btnaddimage{
                        order: 2;
                    }
                    #btnaddclipart{
                        order: 3;
                    }
                    #btnaddtext{
                        order: 4;
                    }
                    #btnadddesigntemplates{
                        order: 5;
                    }
                    .actionsLeftContainer{
                        order: 6;
                    }
                    

5. Changing the style of the "Order Now" button:

Changing the Order Now button to orange color with the text in white:

This are the CSS rules to achieve it:

                    .qsmzBtnAddToCart:link, 
                    .qsmzBtnAddToCart:active, 
                    .qsmzBtnAddToCart:visited {
                        background-color: #ff6400;
                        color: #ffffff;
                        padding: 18px 5px;
                        margin-top: 10px;
                        border: 1px solid #ff6400;
                    }
                    .qsmzBtnAddToCart:hover {
                        background-color: #fc934f;
                    }
                    

6. Changing the style of the initial progress bar:

Changing the progress bar to orange:

This are the CSS rules to achieve it:

                    .qsmzProgress {
                        border: 1px solid #ff6400;
                    }
                    .qsmzv3ProgressBar {
                        background-color: #ff6400;
                    }
                    

7. Changing the size of the variants icons in the Variants window:

Changing the size to 120px width and 120px height:

This are the CSS rules to achieve it:

                    .colorVarWrap {
                        width: 120px;
                        height: 120px;
                    }
                    .qsmzColorVariation {
                        width: 100%;
                    }
                    .iconColorVariation {
                        width: 100%;
                    }
                    

8. Reduce the height of the Variants window:

Changing the height of the variants window to a maximum of 540px:

These are the CSS rules needed to achieve this. Note that they will also reduce the size of the window on mobile devices:

                    #qsmzVariationsWindow {
                        max-height: 540px !important;
                    }
                    

9. Remove the "Save/Load" buttons:

Remove the Save and Load buttons on desktop and mobile:

Add this CSS rule:

                    #qsmzDesktopSave,#qsmzDesktopLoad,#btnMobileLoad,#btnMobileSave  {
                        display: none !important;

                    }
                    

If you want to create your own custom layout and need need support with CSS, feel free to contact us and we can help you without compromise.