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:

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

2. Removing the "Variants" Button:

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

This is the rule to remove it:

                    #btnvariations {
                        display: none !important;
                    }
                    

.. and this is the result:

3. 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;
                    }
                    

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.