Theme Layout & Identity

Theme Layout

You can define the general global layout of your website by selecting “General – Theme Layout” in Theme Options.

Layout Style

In this section you can select the general website layout for desktop resolutions starting from 1260px and above.

Fullwidth: page body covers the whole browser width.

Boxed: page body is in the box of 1260px width and has a fullwidth background.

Body Frame: page body has a frame around it.

Main Content Area

Define the global style settings for main content area.

Page Sidebar

Enable or disable sidebar for all pages / posts of your website. You can also switch on/off sidebar for individual posttypes and individual posts/pages separately.

Smooth Scroll

This setting allows you to enable smooth vertical scrolling on your website.

“Scroll To Top” Button

Allows you to enable/ disable “scroll to top” button which appears in the bottom corner of your website

Preloaders

In this section you can define if you wish to use page preloader globally on your website and specify its colors. Also you can select the preloader type for ajax content elements (like for example portfolio grids).

First thing after installing TheGem would be to make some main general settings of your website, if you wish to change the default presets of the imported demo content. Go to TheGem – Theme Options (or click on “Theme Options” button in top bar in admin dashboard) to get the admin panel of TheGem.

Logo & Identity

To set up your website’s logo go to “General – Logo & Identity”.

Desktop Logo 

Depending on the background color of your menu & header area, to maintain optimum contrast and visibility, TheGem offers you to upload two color versions of your logo: one version for the light backgrounds and one version for the dark backgrounds. You can then vary between default (light backgorunds) and light (dark backgrounds) logo using the setting “Use light menu & logo” in “Menu” settings on all three levels:

  • Global: in “Menu & Header – Layout” settings menu of Theme Options

  • Single & Archive Pages: in “Single Pages” or “Archive Pages” settings menu of Theme Options -> “Menu & Header” settings section

  • In individual pages or posts in “Menu & Header” settings menu in page options

Mobile & Sticky Menu Logo

This logo is used on mobile devices and in sticky menu (if sticky menu is enabled).

Recommended sizes (retina)

For best retina results please upload image file, which width is 3 times larger than the width specified in slider. Example: on TheGem’s demo website the logo width for desktops is specified with 164 px -> the logo image file uploaded has 164 px x 3 = 492 pix width.

Favicon

To set up your website’s favicon, navigate to “Favicon” settings section in “General – Logo & Identity”. Here you can upload your favicon file.