Editing Your MotoCMS 3 Template Color Picker & Backgrounds

In our previous blog posts, we covered a lot about MotoCMS Website Creator. There are more interesting things to grasp ahead!

This time we are going to explore such amazing topics as backgrounds and colors. There is no doubt you understand perfectly well the importance of the right choice of the background style and colors for the success of your site. If you want your site to look attractive you need to know how to work with these components. Let’s start.

Customizing the color palette

First of all, have a look at the Design Options section. It is divided into 5 parts:

• Text styles
• Colors
• Background
• Size and values
• Widgets

This time we will begin with the second one – Colors.

As soon as you touch it you will see a palette with colors. It is divided into 2 sections: ‘Main colors’ and ‘More colors’.

In ‘Main colors’, you can find 5 main colors and 5 additional colors for each main color. In total there are 25 preset colors total. They are arranged in a vertical line depending on the brightness settings of the main color.

You can change any color according to your choice. Just click on the color you have chosen to open the Color Picker. Pay attention to the Current/New bar. It reflects your original and new colors so you can compare them during editing.

Also, take into consideration that these changes won’t affect other colors in the line. And don’t leave behind one more detail – if you want to save the change, click OK. If you don’t like it, Cancel.

The section ‘More colors’ will help you if you choose to be more creative. It provides you with additional colors which do not depend on ‘Main colors’. In order to change the color, you just need to click on it and to choose an alternative one within the Color Picker.

Changing backgrounds

This section enables you to change the existing background style. It is divided into 2 parts:

• Edit background: where you can change background presets and their titles.
• Background properties: where you can edit your background colors, background images, the size of the images, their position and their titles.

In ‘Edit Backgrounds’, there are 2 subdivisions as well – Presets and Name.

Under Presets, there is a drop-out-list which contains your background styles. Each preset has its own title. The first one – Body – is a default preset. You can’t change it. But as for the rest of them, feel free to experiment! There are three small buttons in the right upper corner which will help you.

• Add New Background – as soon as you specify the title of your new background, press ‘Add’ to make it join the list.
• Duplicate – use this button to duplicate preset backgrounds
• Delete – this is your choice if you are not satisfied with your background

The section called Name shows preset titles. To make them function in a proper way, give each preset a unique name.
‘Background properties’ is subdivided into: Color, Background Image, Size, Position and Tile.

Color – In this section you can change the color of your site’s background. You are welcome to choose among 25 preset colors and 5 additional colors.

To change colors, you need to click the More Colors link and to choose the color in the Color Picker. The Current / New bar will show you the results of the change. To save the results click OK. To leave without saving, click Cancel.

Background Image – in this section you have an opportunity to add or remove your site background images.

To set the Background Image click + .

You will be redirected to the site’s Media Library where you can choose the image you like from the list. If you are not satisfied with any image, you are welcome to upload your own. The Upload button is situated in the left upper corner of the Media Library window. On choosing the image, click Apply.

After that, the name of the background image you have chosen will appear in the section. Above it in the right upper corner there will be two new buttons – Edit and Delete.

If you want to choose a different image, click Edit. You will return to the Media Library for a new image. If you’d like to remove the background image, click Delete.

To save the changes, click Save. But if you prefer to return to the previous version of the background, use Reset.

Size – this section appears as soon as you finish creating the background image for your site. There are 3 options here:

• Original – it shows the original (default) size of the background image.
• Cover – with the help of this option you can stretch the background image on the entire screen with the original proportions.
• Contain size – this option changes the height of the image with reference to the lowest parameter (height or width). The original proportions will be also preserved.

Position – here you can relocate the image using one of the arrows. Pay attention to the Left Top arrow, it is default.

Tile – in this section you can repeat the background images on the page.

There are 4 options here:

• Don’t repeat is default.
• Repeat allows you to multiply background image on the page in various proportions.
• Repeat X replicates the background image according to the width of the area.
• Repeat Y enables you to replicate background according to the height of the area.

Pay attention to a small box in the left-bottom corner called Fixed. This feature gives you the opportunity to fix the position of your background image. If Fixed is not applied, the background image will move together with the content.

Please take into consideration that this background preset can be used on other pages as well and will affect all of them.

As you see, everything is very simple! Now it is high time to experiment with one of the MotoCMS 3 responsive website templates that you have chosen for your project! Good luck!