Using the Website Styling Menu

If you are looking to customise the look of your website then the Website Styling window will allow you to change the colour scheme, text font and colours, background colours, width of the website content, button and frame styles and colours as well as add an icon to the browser tab.

This guide will show you how to access this important aspect of the RQS website builder, and give a brief outline of each option found within.

To start, access the builder and Right-Click anywhere to bring up the menu. Select Website Styling to open the Website Styling Window.

The website styling window should now open.

Colours

The Colours tab will allow you to edit the colour scheme of your website. You can use one of a number of stock schemes, a scheme you have used previously or you can choose to completely customise your scheme using any colour on the RGB Spectrum.

To change your Website Colour Scheme click the existing Colour Scheme on this tab.

If you would like to use a Stock Theme, simply click your desired option from the provided list. To use a Scheme you have previously created on the site, select Your Saved Colour Schemes then choose from the list.

If you want to get really creative you can customise your theme completely by selecting Customise.

This new window will allow you to choose the shade, colour, and transparency of your website Colour Scheme. You can pick your colours using the on-screen sliders, the Hex Code of the colour, or from a list of your previously saved colours. Once you are done, click Finish.

With all of these scheme selection options, your site will update immediately to your choices, giving you a Live Preview of your new colour scheme.

Text 

The next tab in the Website Styling window is Text. This tab will allow you to change the appearance of the Text - or Font - of your website.

Font Family - The font you would like to use across the site. A large selection of different fonts are available from the drop-down list.

Font Size - The size of the text on your website, you can select between 12 and 22px. The larger the number, the bigger your text will appear.

Line Height - The space of the gap between lines of text. The larger the number, the bigger the spacing between your text.

Text Colours - The colour of your standard text, link text and link hover text. By default this toggle will use your site Colour Scheme, but you are able to set this differently should you so wish.

Background

The Background tab deals with the background of your website. This can either be a solid colour, or you can choose to use an image, with different options on how this is displayed.

To set a custom background untick the Use Website Colour Scheme option and click the large square next to the Website Background text. This will open the Website Background window.

This window will offer two tabs, Customise will allow you to create a new background using either a solid colour or image and Existing Backgrounds will allow you to choose from a previously created background.

The drop-down menu on this tab provides several options:

Colour Only - This option allows a solid colour background. By default this will be the colour used in your Colour Scheme, but you can change this easily by clicking the small colour square.

Image - These options will allow you to use an image as your site background. To select your image select Image, this will open your Media Library. You can either select your desired image from this selection, select a Stock Image or use Upload Media to add a new image. You can also change your background colour should your image selection not fill all available space.

Resize to fill area - This option will resize your image to fill your background space completely. This option is not recommended for smaller images.

Fixed position sticky image - This option will expand your image to cover the background, but this will remain static when scrolling through the page content.

Centred at original size - This option will set your image central to the content. If the image is too small to cover the entire area, some tiling (or repeating) of the image will occur.

Tile over entire area - This option will repeat your image over the entire background area. This option is recommended for smaller, simple, images.

Custom - If you wish to further customise how your background image displays, this option allows you to do so. Recommended for Advanced Users only.

Spacing

The Spacing tab provides a few technical options on how the site is displayed.

Website Width - How wide the website content should be. The slider allows any width between 800 and 1500px. The larger the number, the wider the site.

Website Spacing - The horizontal gap between the content of your website. The slider offers options between 5 and 50px. The larger the number, the bigger space between your content.

Website Breakpoint - The point at which your content begins optimising on smaller screens. Unless you have a specific reason to change this, we would advise a setting between 75 and 100%.

Other

The final tab deals with all other styling options that do not fit into another category.

Buttons - This section controls the Button Style on your website, either Square, Semi-Rounded or Rounded. As with other aspects of the website, you can also customise your buttons away from the Website Colour Scheme to a custom colour by un-ticking Use Website Colour Scheme.

Frames - Should you so wish, this section will allow you to alter the colour of any frames appearing on your website away from the Website Colour Scheme.

Favicon - Favicons are small icons that appear with the browser bar/tab when somebody visits your site. To add a favicon, click the large square within this section then choose an image from your Media Library or upload a new one.

While you can upload an image of any size, using a square image of 16x16 or 32x32px will provide the best results.