Theme Aspect & Colors

Zeno uses the WordPress Theme Customization API for the aspect options.

This native WordPress API allows you to see the changes made to the site in real-time, without having to save the changes (this means that only you can see the changes before you save the options).

To customize the aspect of your theme, you need to log in to your WordPress dashboard with an account that has Administrator rights.

Once logged in, go to Appearance->Customize to access the WordPress Customizer.

customize

On the left side, you will find the settings divided into multiple sections.

customizer-sections

Each of these sections are collapsed by default. You can extend each section by clicking on its name.

Header

The first section called “Header” allows you to modify a few aspects regarding the header area.

  • Site Title – allows you to change the title of your site and preview the changes in real-time.
  • Tagline – The tagline is the site description that is displayed under the site title if you use the text logo.
  • Logo Image – Upload an image to be used as the site logo.
  • Link logo image to homepage checkbox – Check this box so that your website logo to link to home page.
  • Set the site name font size in pixels – Set the font size of the text logo (the text logo is displayed when you don’t have an image logo set for your site).
  • Set the site description font size in pixels – Set the font size of the description below the text logo (this text is displayed when you don’t have an image logo set for your site).
  • Main Menu – Enable or disable the main menu of your website even if you have a menu assigned to the main menu position.
  • Main Menu Search Form – Enable or disable the search form that is displayed inside of the main menu
  • Main Menu Home Icon – Enable or disable the home icon that’s displayed at the beginning of the main menu
  • Top Menu – Enable or disable the top menu of your website even if you have a menu assigned to the top menu position.
  • Top Menu Product Search Form – Enable or disable the search form that is displayed inside of the top menu
  • Top Menu Links Position – Set the alignment of the top menu tabs
  • Top Menu Search Form/Cart/Wish list Position – Set the alignment of the Search Form/Cart/Wish list buttons displayed within the top menu
  • Make the top menu sticky – Enabling this setting will make the top menu visible even when someone scrolls down the page.
  • Enable the top menu cart link – Enabling this setting will add a link to the shopping cart inside the top menu
  • Enable the top menu Wish List/Login link – Enabling this setting will add a link to the user wish list and a login link to the top menu
  • Display Site Title and Tagline – Enable or disable the text logo and the description displayed in the header
  • Site Icon – Upload an image to be used as the site favicon. A favicon image is that small image that appears in the browser’s address bar (sometimes in the history as well) and next to the page’s name in a list of bookmarks.
    Use a favicon generator tool to generate a custom favicon image for your site.

cz-header-1

cz-2-header

General

The second section called “General” hosts two options that allow you to customize the layout of your site.

cz-general

  • Theme Layout – Allows you to choose between two modes: Full Width and Boxed.
    The full width will stretch the header and the footer of your site on the entire width of the screen.
    The Boxed layout will give your site a boxed look.
  • Container Width – This option will allow you to choose a maximum container width (content area). You can choose between four sizes expressed in pixels: 980, 1024, 1140 and 1280.

Fonts

Next section, called “Fonts” allows you to change the fonts of your site. You can choose between over 600 of Google Fonts.

cz-fonts

  • Body Font – is the general font.
  • Widget Titles Font – is the font family of the sidebar widgets title.
  • Post Titles Font – is the font used for blog post titles, page titles, and product titles.
  • Menu Font – is the font used for the text of the main menu.
  • Set the menu font size in pixels – increase or decrease the size of the main menu text.
  • Set the post content font size in pixels – set the size of the blog post content
  • Set the product description font size in pixels – set the size of the product description

Colors

The “Colors” section allows you to customize the colors of your site.

cz-colors

  • Color scheme – allows you to choose one from the 5 predefined color schemes. There are two colors combined for each predefined color scheme. Choose the one that you like.
  • Color Pickers – The next color options from this section allow you to override the color scheme using a color picker. You can change the color of almost every element of your site. The options are grouped in subsections.

Header Image

Choose the image you want to be displayed as the background of the header.

cz-header-img1
cz-header-img2

The recommended image size is 1280 px x 170 px, but you should choose the image size depending on the layout of your site and the other options of the header image (the image used for the demo site is 1500 px x 199 px). If your uploaded image looks good with its current dimensions, you don’t have to crop it.

An image will not look the same way on desktop, tablets and on the mobile devices. Adjust the image settings depending on how your uploaded image looks better.

  • Current header – this option gives you a preview of your current image set as the header background.
  • Previously uploaded – A list of images previously uploaded.
  • Randomize Uploaded Headers – If this option is enabled and if you have multiple header images uploaded, your header image will be randomized at every page reload.
  • Background Size – This sets the CSS background-size property. Your image will look different for the mobile devices based what it’s set for this option.
  • Image Position X – This sets the CSS background-position-x property. This will horizontally align your header image.
  • Image Position Y – This sets the CSS background-position-y property. This will vertically align your header image.
  • Image Repeat – This sets the CSS background-repeat property. If this is set to “repeat”, your image will be repeated to fill the full header area.
  • Header Padding Left (pixels) – Sets the header image left side padding in pixels.
  • Header Padding Right (pixels) – Sets the header image right side padding in pixels.
  • Header Padding Top (pixels) – Sets the header image top side padding in pixels.
  • Header Padding Bottom (pixels) – Sets the header image bottom size padding in pixels.

Background Image

Set a background image for your site.

cz-background

  • Background Image – Upload an image to be used as the background image of your site. You can upload a new image or select an existing image from the media library.

Menus

This is just another area where you can manage the navigation menus. You can achieve the same things you can do under Appearance->Menus.
The advantage of managing the menus from this section is that you can see the changes in real-time.
For more details on how to setup your site menus, read the create menus instructions.

cz-menus

Widgets

Just as the menus, this is another place where you can manage the widgets of your site and see the changes in real-time. Besides that, you can do the same things you can do under Appearance->Widgets.

cz-widgets

Static Front Page

cz-static-pages

This is just another place where you can set a static page as the homepage of your site. You can also do that under Settings->Reading. For more details on how to set a page as the front page, read create store pages instructions.