Support is offered exclusive on the help desk!

Fontana - Multi-Purpose WordPress Theme

Created: 17.06.2014
By: TouchSize
Email: touchsize@gmail.com

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free check our knowledgebase or submit a ticket on our support desk. Thanks so much!


Installation

You can install the theme in two ways: through WordPress, or via FTP. The Fontana.zip file is the Installable WordPress Theme and what you need to use to get the theme installed. Please see the following sections for each method. But first, you need to download the Fontana files from your Themeforest account. Navigate to your downloads tab on Themeforest and find Fontana. Click the download button to see the two options. The Main Files and the Installable WordPress Theme. See below.

Follow the steps below to install via WordPress.

  1. Navigate to Appearance > Themes.

  2. Click Install Themes and hit the upload button.

  3. Navigate to find the “Fontana.zip” file on your computer and click “Install Now”

  4. Wait while the theme is uploaded and installed.

  5. Activate the newly installed theme. Go to Appearance > Themes and activate it.

Follow the steps below to install via FTP.

  1. Log into your hosting space via an FTP software

  2. Unzip the Fontana.zip file and ONLY use the extracted Fontana theme folder

  3. Navigate to find the “Fontana.zip” file on your computer and click “Install Now”

  4. Activate the newly installed theme. Go to Appearance -> Themes and activate it.

Dummy Content Import

One of the most frequently asked questions "how i can make my webpage as on demo?". The solution is simple - just import the Dummy Content! Dummy content provides you the same pages, settings and arrangement as you can see in our demo version of site. To install the demo content follow the next steps:

1. Download the dummy content

2. Importing files

  1. Log into your site as an administrator

  2. Make sure you activated your theme before proceeding.

  3. Go to Tools → Import

  4. Upload the demo content .xml using the form provided on that page.

  5. You will be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.

  6. You will then have the choice to import attachments, so click on the “Download and import file attachments” box.

  7. Please be patient while WordPress imports all the content. Posts, Pages, Projects, and Menus are imported. You will need assign the menu a theme location & you’ll need to configure widgets. This is a limitation of WordPress’ import system.

3. Setting up

Firstly you have to check what is missing from your dummy content, in most of cases when you take a look at your page after import you see nothing. It's because of the category selection. You have to enter each page and change categoryes from uncategorized to other existing ones. It's because of the Category id, if you preventive had any category, the current category id's will not match. The same thing can happen with images from carousel. Also you should not forget to set the imported menu as "Primary Menu" and set up the homepage.


  1. Go to Appearence => Menus, take a look at the menu, if import did his job not quite good, arrange the menu elements as on the Demo. After what scroll down till end and set current menu as "Primary Menu" (see below).

  2. Go to Settings => Reading and set your front page one of existing, or build your own one.


  1. In case your content is not displayed on home page or any other page, Go to Pages => "Page you need Name" and edit every list post or carousel. Change their categoryes/photos and enjoy the look of that page.

4. Settings import

In your folder there is a .txt file named "import.txt". This file contains the default settings used in our demo page of Fontana. To add them just go to Fontana => Import options and paste all the content from "import.txt" file.

How To Update The Theme

You need to manually download the new theme package from your Themeforest account. Once you have the new theme package, you can choose to upload the theme via WordPress or via FTP. Please see the information below for how to download new files, and install it via WP or via fTP.

How to download new theme files from Themeforest

  1. Log into your Themeforest account and navigate to your downloads tab. Find the “Fontana” theme purchase.

  2. Click the “download” button next to it and choose to download the “Installable WordPress Theme” which is just the WordPress file, or choose the “Main Files” which is the entire package that contains everything.

  3. hen you need to decide if you want to install the update via FTP or via WordPress. Directions for both methods are below.

How to update your theme via wordpress.

  1. You need to deactivate the current “Fontana” theme in the “appearance > themes” section by simply activating a different theme. Once you activate a different theme, you can delete the Fontana theme. Dont worry, your content will not be lost.

  2. Retrieve the “Fontana.zip” file from your new Themeforest download. If you downloaded the “Main Files” from Themeforest, then you need to unzip the archive file you received, the Fontana.zip will be inside of it

  3. Then simply upload the “Fontana.zip” file in the “appearance > themes” section. Click on the “Install Themes” tab at the top and choose to upload the zip file.

  4. Once it uploads, choose to activate the theme..

  5. Lastly, update the included plugins. You will see a notification message letting you know the plugins have a new version and need to be updated. Follow the on screen steps.

Follow the steps below to install via FTP.

  1. Go to “wp-content > themes” location and backup your “Fontana” theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost.

  2. Retrieve the “Fontana.zip” file from your new Themeforest download and extract the file to get the “Fontana” theme folder.

  3. Then simply drag and drop the new “Fontana” theme folder into “wp-content > themes” location. Choose to “Replace” the current one if you did not delete it.

  4. Lastly, update the included plugins. You will see a notification message letting you know the plugins have a new version and need to be updated. Follow the on screen steps..

Theme Options

General

  1. Enable preloader for website?

    This option can add to your website a fancy preloader that will wait till all the page will be loaded. You can use it only for homepage, or for the entire website.

  2. Display featured image in post?

    This option enables/disables the featured image inside a post. If you don't want to show the featured image inside single post pages, you can disable them from here. Note that this will also disable galleries/videos/audio if disabled.

  3. Enable lightbox?

    This option enables/disables the lightbox for images. These will apply to featured images inside posts, inside galleries. We recommend to enable this option for better usability and user experience.

  4. Enable human type date?

    This option is also recommended as it will show a date in a more human friendly format (ex: 3 days ago). You can disable this option as well. Note that this option might not apply to absolutely all dates on the website as there are designed parts that are better to remain as designed.

  5. Which comment system you want to use?

    You can configure what comment system you will use. The default WordPress comments or Facebook comments. If you need Disqus comments, you will need the plugin.

  1. Show wordpress admin bar?

    In this tab you can disable/enable the wordpress top admin bar.

  2. Enable sticky menu

    This options gives you possibility to enable or disable the sticky menu, also you can change here the sticky menu background and text colors. Sticky menu is the menu that appears whenever you scroll lower than top menu.

  3. Tracking code

    Here you can add your google analytics tracking code, or any other script you need.

  4. Grid view excerpt size

    Here you enter the maximum characters showed in excerpt for your grid articles.

  5. List view excerpt size

    Here you enter the maximum characters showed in excerpt for your list view

  6. Big post view excerpt size

    Here you enter the maximum characters showed in excerpt for your big posts view.

Styles

  1. Boxed Layout

    You can either enable or disable the boxed layout. This will make some options inside the layout builder row options not work as expected. Your row expand option will not work, and you background will not show for the whole width of the website.

  2. Theme Background customization

    This option gives posibility to edit you background, you can add a image, change color, or disable it (use the default color from our demo)

  3. Custom favicon

    In this tab you can find the options to change your custom favicon. A favicon is the icon that appears before you website address in the browser.

  4. Enable overlay stripes/dotts effect for images

    These options applies in views and on single post page. If you wish to not have the dots layer above the image - you can enable/disable them from here.

  5. Enable sharing overlay buttons in views

    With this function you can disable/enable the social sharing on article-image hover.

  1. Logo type / Upload your logo

    In this tab you can change your logo with a image or simple text. If you choose image logo, an uploader will appear. Browse and select your custom logo. If you wish to have a text logo, there are typography options for it. Just select text logo and choose the font you like. Fonts are included from Google fonts library. Note: Using the retina option will result in shrinking your logo width in half.

Colors

This is the color options area. You can set the main colors of your website like the default colors of the menu, the main text and background color, view colors, main and secondary colors.

  1. General color for the text on the website

    This options gives you posibility to change the whole webpage text color.

  2. The background of the views (article showcase)

    In this tab you can changes

  3. The background of the views

    With this function you can change background color of all the posts (grid/list/bigpost/superpost views)

  4. Link color

    Here you can change the color of links on your webpage

  5. Link color on hover

    This option gives you posibility to change the link colors on hover.

  6. Link colors in views

    In this tab you can select your links color in articles (grid/list/bigpost)

  7. Titles colors on hover in view

    Here you can select article titles colors on hover.

  8. Meta text color

    In this tab you can select the text color of your tags.

  9. Primary color

    Primary color is the main color of the website, It is used for backgrounds, borders of elements, etc. This defines your main brand/website color.

  1. Secondary color

    Secondary color of the website is used for backgrounds, borders of elements, etc. This defines your secondary or contrast brand website color.

  2. Primary text color

    You can select your color for the text that has a primary color background

  3. Menu background color

    This is used for menus that have background colors. Not all menu styles can have backgrounds. Even so, this option will apply for submenu backgrounds as well, even for those that do not have a background by default.

  4. Menu backgrounds color on hover

    The same option as "12", only for the hover state

  5. Menu text color

    You can select here your menu and submenu text colors.

  6. Menu text color on hover

    The colors of the text in the menus and submenus on hover

Image sizes

In this tab you can choose the dimensions for the images that are used on your website. Caution - these are not the sizes that will be shown on the website as the website is adaptive, but it is the size of the images that will be used. We strongly recommend to use given settings and not to fiddle with any as long as you are not sure what you are doing.

Layout

Here you can set the defaults for your website. Default sidebar settings and the way articles are going to be shown on archive pages.

Typography

Settings below are used to change typography for the whole webpage.

Single Post

In this section you can enable/disable related posts, social sharing, tags.

Page Settings

In this section you can change settings for pages, to enable/disable page meta and social sharing.

Social

These are used for social icons. The email set here is going to be used for contact forms.

Custom Css

If you need to add your custom CSS, we recommend to add it in this section. These will overwrite theme default styles. Please, check twice before adding something here because we are not responsible for your actions.

Sidebars

To create new sidebars just use this tab. Add a sidebar name and press the add button. This will create a new sidebar area that you can use anywhere on the website.

Import Options

This is an encoded data for your website. Be very careful with this. Changing data here will result in corrupting website settings data and this will make your site not to run properly. Unless you are sure you copy the entire data from our export do not press the save settings button.

Layout Builder

This theme includes a very powerful layout builder. You can edit/delete/move your elements how you like via drag-and-drop. Our builder containes a lot of elements and options. Below, it's a description of the most common and general settings and options.

First of all, the layout builder schematics: its built on 12 columns layout. All your content can have 2-12/12 columns. There are rows, columns and elements. Rows - horizontal container blocks. They contain the columns. Rows have options, are draggable (sortable) between them. You can add as many as you can. Every row has the following options:
These settings are individual on each row.

  1. Background color
    will add a color the the entire row to all elements.
  2. Text color
    will change the color of the content inside the selected row. Note that this option works only for text elements added inside builder. Default grid/list elements have a color set and do not inherit the color set here.
  3. Background image
    - you ca use a background image for you row. Just browse any image, select the options you want for it and it should be shown on your website. If you don't know what the background options do, check this link. Here you can find information about these options.
  4. Paddings
    are margins that go inside your container.
  5. Margins
    are margins that go outside your container.
  6. Content extend
    can extend your content on 100% horizontally. Note that this option works only with non-boxed layout settings.
  7. Text align options
    change the way the content inside you row is aligned. It only reffers to the text elements, not the entire block.
  8. Special effects options
    change the way the row will appear on load on your website. If the row is already visible it will be animated immediately. If not, on scroll and when the row will appear in the viewport - the row will be animated.
  9. You can choose from 6 row appeareance effects:

    1. Slide up
      this effect will make your content appear sliding from bottom.
    2. Perspective X
      this effect will make your content appear flipping on X axis.
    3. Perspective Y
      this effect will make your content appear flipping on Y axis.
    4. Opacity
      this will make your content appear with fade in effect.
    5. Slide left
      this effect will make your content slide in from left to right.
    6. Slide right
      this effect will make your content slide in from right to left.

    Please, be carefull when applying these effects. All of them are CSS3 so you'll need a browser that understands CSS3 and HTML5. Plus, if used in excess - they will make your website feel slower as all these animations use a good amount of computer resources. We recommend to use 2-3 per page. Also, it's strongly recommended that you don't use row effects where you already have set effects on elements inside that speficic row.

    Layout builder Layout builder

    Columns - containers for elements. Their role is to divide your content. You can either add or remove column width with the columns' control buttons. Layout builder

Layout Builder Elements


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. Please, use the support desk to ask for assistance because you'll get a quicker response. Don't forget to check the knowledgebase first!

TouchSize