1. Introduction

The ClikBeats system allows for complete control over all the styles and settings on your site. You can make some simple changes that affect your whole site, like the colour and the main font, or you can get involved in complex styling to achieve the exact look you want.

2. Basic settings

Some basic settings can be changed in the Styling  Custom settings page. This includes your page size and your site colours.

2.1 Editing your page dimensions

You can change the site width here, but generally the default settings will be suitable.

2.2 Edit your main fonts

Usually you only need to edit two fonts on your site to change all font settings, these are the main font, and the title font.

To edit these, go to Styling  Fonts. On the Main font settings tab, change the size and style.

To change, the colour, see the next section.

For further details, see our seperate guide to using fonts.

3. Colours

The colours tab in Site styles shows all the standard colours in use on your site. You can edit these colours directly or create new ones to apply to your backgrounds and text.

3.1 Editing the standard colours

You can edit the standard colours directly.

3.2 Adding a custom colour

To change the colour of anything on your site, you need to define a custom colour first. Then it will appear in the list of colours to choose from, allowing you to easily reuse or edit it later.

To do this, use the “Add colour” button on the Colours tab.

4. Preview editing

Most styling is adjusted in your site preview. To edit your styling, preview your site and navigate to the page you want to style. Click on the EDIT button in the header.

You can now edit the top level content. Experiment with using the slider to edit other elements down to the site root.

When you have selected the content you want to edit, click on it to edit the styles.

Depending on the content section, you will get an array of different options.

Edit basic settings

Almost all content sections have a Colours and dimensions section to edit the basic font and colour.

4.1 Understanding schemes

The key to styling a site is not to apply styling to every single individual content section but to apply schemes. Almost all default styling is applied via a scheme.

When you edit for instance a section title, you'll the styling is often greyed our and the word “switch” appears next to the styling. This means that they styling for that content comes from a scheme.

You can opt to either switch and edit the style scheme or else you can apply individual settings.

4.2 Adding your own schemes

If you want to add multiple items to a site and keep them consistent, you can create your own schemes. In Styling  Style schemes click NEW to open the form.

Add a name, select the type of scheme (the list is the same as the available types of content), and optionally add a description.

To assign content sections to your scheme, preview and edit the content section. Click “Other settings” at the bottom of the edit panel. Assign the scheme, the save and close the panel.

5. Layers and Containers

Your site is built up of several “Layers”, from the base which is the whole background window to the top which are the elements like titles, photos, and text.

Use the slider to expose the lower layers to edit them if required.

5.1 Understanding containers

All content on a site is placed into a “container”. At the very top, is the site container. Then come the outer containers, the inner containers and finally the content.

To see this in action, use the slider to slide backwards and formwards through your layers.

You can edit and style the content panels in the same way as any other content.

6. Mobile and other settings

Modern websites need to be optimised for mobile and other devices. Most ClikBeats sites have 3 different sizes: main, tablet, and phone. You can select which device you are styling in the “Emulate device”