All Collections
Plus+ Dashboard
Plus+ General - Design
Plus+ General - Design
Niels van Vlerken avatar
Written by Niels van Vlerken
Updated over a week ago
mceclip0.png

Show your look, show your feel. Make your Plus+ design perfect! 🎨

All your Plus+ apps and addons naturally need a slick design , you want to process it in your house style . Instead of styling each app or addon separately , Plus+ uses general design settings , so you can design all your apps and addons universally . Everything is perfect right away ! βœ…

General

mceclip1.png

All your general styling, very handy of course! What do these settings do?
​Branding 🎨
What is the primary color of your branding/corporate style , you should enter this under accent color . That is your primary, so most important color!
Do you want to use rounded corners for eg windows, backgrounds, etc. Give the slider intended for this purpose a tug , the higher the number the more curves . 0px is no curves. Default is 6px .

Gamification βœ”οΈ
Gamification is actually a simple word for making the entry fields more attractive and more fun, for example . When you fill in a field, a "tick" or a "cross" is always added. So these can be styled! So fill in the color codes for a "Negative" message and the color code for the "Positive" messages.

Notification πŸ””
This setting exists for the messages in your shop , if you put a item to your shopping cart adds . These settings are especially important with the "Alerts" addon. You can addthe colors for your Alerts here. You can alsochoosea background color to make the notification even more striking!

Typography ✍️

mceclip2.png

All your settings for all texts within the Plus+ addons and apps!
​

Titles βœ’οΈ
These are the settings for the titles in all Plus+ apps and Addons . What font should the titles have, what thickness should these titles have and what color?
Capitalization has several options , do you want the titles to be default , so only capitalize the first word, should all letters be capitalized or should each new word start with a capital letter ?

Advanced:
​

mceclip3.png


Under the advanced options you can determine the text size of your titles for both desktop and mobile, this is possible for H1 to H6 .

Body πŸ“‹
Body stands for your general (plain) text, these are actually the normal text size of your apps and addons. What font should the body have (via Google Fonts), what thickness should the text have, what should the text size be for both mobile and desktop and in what color can this text be displayed?
​
It is of course always possible that you have your own font that is not standard in the Google Fonts library. Is this the case? Please contact our support via a ticket . They can ensure that your font becomes compatible with all Plus+ Addons and Apps !

General

Under the general setting you can set the colors for your links . What color should this be?
In addition, you can edit the line spacing of your texts , so this is how much white space should be between your body texts.

Buttons

mceclip4.png

General
​

In the general button settings you can adjust the text size for the text in the buttons . This can be done for both mobile and desktop . You can also adjust the capitalization here, it has several options , do you want the titles to be standard , so only with a capital letter at the first word, should all letters be shown in capital letters or should each new word start with a capital letter ?
​
You can also adjust the curves of the buttons . Do you want a rectangular button , move the slider all the way to the left , do you want a pill shaped button ?Then move the slider all the way to the right .

Call to action buttons

The call to action buttons are the buttons that trigger an action, for example the "add to cart" button. These are actually the most decisive buttons in your webshop, so make sure that these buttons stand out the most . Tip: Don't use a color that appears in your house style, so that it "popped" out more!
​Determine the background, border and text colors of the button here
, you can also give a shadow to the button.
Shadows must be entered in the following way:
" -1px 4px 10px 0 rgba(0, 0, 0, 0.08) "
The first 4 numbers ( -1px 4px 10px 0 ) representthe distance of the shadow . You can always play with the settings. Make sure there are always 4 numbers! Is the number 0? Then you don't have to put a px after it .

The next term you see is rgba(0, 0, 0, 0.08) , which is the color for your shadow. The abbreviation RGBA stands for Red, Green, Blue and Alpha . Alpha in web terms stands for "transparency". Make sure this number is always below 1! To choose an RGBA color you can use the following "Color picker" : https://rgbacolorpicker.com/

You can also determine the text thickness and the height of the button .

Normal buttons πŸ†‘
Of course you also have your normal buttons , these are separate from the Call to Action buttons . So these are your general buttons . These are among other things used for creating accounts, send, create password, etc .
​The settings for this work the same as the "Call to action" buttons mentioned above.

Forms

mceclip6.png

Input fields ✍️

Of course there are some forms within our apps and addons that the customer can fill in , for example at the product helpdesk addon . With these settings you can adjust the styling for the input and selection fields .
​What color should the text in the input field be, what color should the background be, what color should the border have? And of course the height of the field ? Can it be high or low?
In addition, you can change the background color of the field if the entry is "valid" , ie filled in. You can alsocolor disabled input fields.

Checkboxes

This concerns the layout of the check boxes and any radio buttons . Radio buttons are the round check boxes , for example the choice gender. The checkboxes are the square boxes to check, for example agree to terms and conditions. Set the colors for the box and for the "tick" here.

Did this answer your question?