===== Appearance =====

This section allows you to completely change the site's appearance. 

=== Themes ===

You can add a theme to the site in the **Add new theme** section. 

1. To install the theme, go to Admin area > Appearance > Themes > Add new theme section.

{{:overview:admin_area_manual:premium_theme_3.png?500|}}

2. Upload the theme zip archive ((enter your FTP username, password)).

{{:overview:admin_area_manual:plugin_installation_6.png?500|}}

3. Click **Enter**.
The theme will get listed in the **Available Themes** area.

4. Choose the theme and click the **Activate** button. 

{{:overview:admin_area_manual:premium_theme_4.png?500|}}

To delete the theme, click the **Delete** button((enter your FTP username, password)).

{{:overview:admin_area_manual:appearance_1.png?500|}}

=== Customize ===

In the **Theme settings** section you can:

  * Change the page and footer background color.

Click the square to choose the color.

{{:overview:admin_area_manual:appearance_2.png?500|}}

Click the **OK** button to set the color.

{{:overview:admin_area_manual:appearance_3.png?500|}}

  * Replace the page background image, header background image, logo image, mobile logo. 	

  * Change the site colors.

Click the square to choose the color.

{{:overview:admin_area_manual:appearance_4.png?500|}}

Click the **OK** button to set the color.

{{:overview:admin_area_manual:appearance_3.png?500|}}

As soon as you finish the theme customization, click the **Save** button to save your changes. 

If you click the **Reset** button, all your custom changes will be lost.

The Mobile area allows you to change the colors, logo image on the mobile version.

{{:overview:admin_area_manual:appearance_11.png?500|}}

=== CSS ===

Any theme comes with its own base.css file, that contains your site's default CSS. When you activate the theme, that default CSS gets added into Admin area > Appearance > Customize > CSS > Existing CSS Styles (read only) block.

You can add your custom CSS to the **Edit CSS** form. 

So when user opens your site the system loads the default CSS first, then it checks whether you have any custom CSS and if you do it takes your custom styles instead of default ones.

You should add only your custom CSS into **Edit CSS** block. Don't copy the whole Existing CSS Styles and add them to the Edit CSS area. Only the styles you want to change or redefine should be placed to the Edit CSS area.

For example, to remove the Quick Search widget from the Turquoise theme, add the following style to Admin area > Appearance > Customize > CSS > Edit CSS:

<code>.index_qs_widget {
        display: none;
}</code>

Click the **Save** button. 

{{:overview:admin_area_manual:appearance_5.png?500|}}

To reset CSS to original, remove the styles you added to the **Edit CSS** form.

|**Note:** All CSS changes should be applied via Admin area only. You should not apply them to the files on the server. Otherwise all your code customizations and CSS changes will be lost after the software update.|

=== Graphics ===

This section allows you to upload the images to the site for the advertisement banners, custom pages, special pages etc.

If you want to add a logo to the Morning Sign in page, you should do the following.

1. Click the **Upload Photo** button.

{{:overview:admin_area_manual:appearance_6.png?500|}}

2. Upload the image and click the **Submit** button.

{{:overview:admin_area_manual:appearance_7.png?500|}}

3. Click the **Copy URL** link to copy the path to the image.

{{:overview:admin_area_manual:appearance_8.png?500|}}

4. Add the image URL into the CSS styles via Admin area > Appearance > Customize > CSS > Edit CSS

To delete the image from the Graphics section, hover the mouse over the image and click the **Delete** button. 

{{:overview:admin_area_manual:appearance_10.png?500|}}