# Tom & Jerry

## An wordpress law and business theme

- Created date: 04/11/2015
- Last update: 04/11/2015
- Author: LineThemes
- Email: support@linethemes.com

### Getting Started

#### Requirements

There are minimal requirements to run this product:

- PHP 5.3 or higher
- MySQL 5.0 or higher
- GD Library
- Self-Hosted WordPress 4.x

#### Forum Support

All of our products accompany with free support, as we have a dedicated forum to handle your requests. Support is limited to questions regarding the theme’s features or problems with the theme. We are unable to provide support for code customization or third-party plugins. However, we may help you to do some minor customizations. Particularly, we really appreciate if you have any suggestion to improve our product quality.
Please go to our forum: http://linethemes.com/support

#### Recommended

Our theme requires a couple of following plugins to work properly

- ThemeKit by LineThemes
- WPBakery Visual Composer

Besides, our product is also compatible with these plugins to provide you more functionality in use

- Contact Form 7
- Revolution Slider
- Subtitles
- WPML

### Theme Installation

Once you've downloaded the installation file on ThemeForest, extract it and locate a file called Tom & Jerry.zip. You can install the theme by using one of two installation methods:

#### Install by WordPress Theme Manager

This is probably the simplest way for most users. Here are 6 steps you need to take:

1. Login to your Admin page.
2. Navigate to Appearance > Themes.
3. Click Add New
4. Then click Upload Theme
5. Next, browse to the zip file and click Install now so the theme can be uploaded and installed.
6. After done installing, click Activate to publish the theme

#### Install through FTP upload

If you want to install via FTP, here are 3 steps you need to take:

1. Using FTP client, login to the server where your WordPress website is hosted
2. Using FTP client, navigate to the /wp-content/themes/ directory under your WordPress website's root directory
3. Using FTP client, upload the Tom & Jerry directory to themes directory on remote server

Once installation is complete, your Tom & Jerry theme will be ready to use.

#### Install Plugins

The theme requires the following plugin: ThemeKit by LineThemes, WPBakery Visual Composer and recommends the following plugins: Revolution Slider, LayerSlider WP, bbPress, Contact Form 7, Easy Pricing Tables Lite by Fatcat Apps, WooCommerce

After activating the theme, you will be asked to installed the required and recommended plugins, you can proceed by clicking on Begin installing plugins

In the next page, check all the plugins that you want to install then on the drop down Bulk Actions, choose Install then click Apply, the plugin installation process will start.

After install plugins, go to Appearance > Install Plugins, check all the plugins that you want to activate then on the drop down Bulk Actions, choose Activate and click Apply, the plugin activation process will start. Wait for all the plugin activated then you can start customizing your website as you want

#### Install Sample Data

Go to Appearance > Sample Data, on the next page, click Install Sample Data button.

A popup dialog will appear and ask for confirmation, you can check the Agreement box and click Install Sample Data button to continue
Note:
Installing sample data will delete all data on this website.
It is NOT recommended to install sample data on production website.

### Theme Customization

To start customizing Tom & Jerry theme, in the Admin page please go to Appearance > Customize

Note:
Please remember to click Save & Publish button after done customizing to save the changes
These are global settings so its effect is site-wide. These settings can be overridden in single post or page

#### General

1. ##### Site Information

   - Site Name: Your site name
   - Site Tagline: A few words to describe your site

2. ##### Static Front Page

   - Static Front Page: This option allows you to switch between Static Page and Blog Page that will appear on the home page
   - Front Page: Select the page that you want to display as home page of your site
   - Posts Page: Select the page that will display blog posts

3. ##### Misc

   - Enable Go Top Button: Turn on/off the go to top button
   - Tracking Code: Input your Google Analytics ID or script to track your site on Google
   - Custom Favicon: You can select or upload your custom favicon
   - Social Links: Just click to the icon and input the URL that you want to display on header or footer

#### Header

To setup header layout, please navigate to Appearance > Customize > Header section and choose one of available layouts. You can setup some other options that we listed below:

1. ##### Custom Logo

   - Use Logo Image: When this option was turned on, the logo on header will be use as a custom image instead of your site name
   - Display Site Tagline: Turn on this option to show site tagline below logo on the header
   - Logo: The custom logo image
   - Logo Size: Input your logo dimension
   - Logo Margin: Input the top/bottom margin for logo

2. ##### Navigator

   - Primary Menu: In the dropdown box, choose a menu that will be used as main menu.
   - Top Menu: In the dropdown box, choose a menu that will be shown on the top bar.

3. ##### Header Options

   - Enable Sticky Header: Enable this option to stick the header on top of the page when scrolling down
   - Show Search Menu: Enable this option to show search icon on the primary menu

4. ##### Topbar

   - Enable Topbar: Turn on/off to show/hide the topbar
   - Content: Enter the content that you want to display on the topbar
   - Enable Social Links: Turn on/off to show/hide social links on the topbar (The social links are configured on general section)

#### Footer

Footer was divided into 2 different sections: Widgets and Copyright & Social icons. The screenshot below will give you an explanation of these sections:

1. ##### Footer Widgets

   - Enable Footer Widgets: Turn on/off to show/hide the footer widgets area
   - Widgets Layout: You can select how many areas will be displayed on footer widgets section. To customize areas layout, just drag it to match your wish
   - Widgets Background: Customize background for this section, it can be a solid color, image pattern or custom image
   - Text Color: Select the text color for this section

2. ##### Custom Footer

   - Enable Social Links: Turn on/off to show/hide the social links on this section
   - Copyright: Just type the text that you want to display on footer copyright area

#### Layout & Styles

In the section Layout & Styles, we provide some options to customize the theme layout and styles.

1. ##### Scheme Color

   With this option, you can change unlimited color for your site

2. ##### Layout

   - Display Style: You can choose between Boxed and Full width layouts
   - Boxed Background: With the boxed layout, you can modify page background with this option
   - Content Width: Maximum width of the content area

3. ##### Sidebar

   - Sidebar Position: Select the position of the sidebar that will be displayed on page
   - Default Sidebar: In the dropdown box, select the sidebar that you want to display at the Sidebar Position selected above

4. ##### Page Title

   - Enable Page Title: Turn on/off to show/hide the page title
   - Background: You can modify background of the page title with a solid color, image pattern or custom image
   - Eable Parallax Effect: Switch to ON to show parallax background effect for the page title
   - Text Color: Select the text color that will be displayed on page title

5. ##### Breadcrumb

   - Enable Breadcrumbs: Turn on/off to show/hide the breadcrumbs
   - Breadcrumb Prefix: Enter prefix text for the breadcrumb
   - Breadcrumb Separator: Enter the character that you want to use as the separator of the breadcrumb

#### Typography

1. Body Font: You can select the font family, color, size or weight for the body text
2. Headings Font: You can select the font family, color, size or weight for the heading text
3. Menu Font: You can select the font family, color, size or weight for the menu text
4. Font Subsets: Turn on/off to load extra subsets for the font

#### Blog

1. ##### Blog List

   - List Sidebar Position: Select sidebar position on the posts page
   - Blog List Sidebar: In the dropdown box, select the sidebar that you want to display on posts page
   - Auto Post Excepts: When you turn on this option, the post's content will be truncated automatically on posts page
   - Post Excepts Length: This option is only available when you turn on "Auto Post Excepts". It use to limit the content length that is shown on posts page
   - Show Post Meta: Turn on/off to show/hide the post meta
   - Show Read More: Turn on/off to show/hide Read more button
   - Read More Text: You can modify the text of Read more button
   - Pagination Style: Select the style of pagination links on posts page
   - Posts Per Page: Enter the number of posts that will be displayed on posts page

2. ##### Blog Single

   - Single Sidebar Position: Select sidebar position on the single blog post
   - Blog Single Sidebar: In the dropdown box, select the sidebar you want to display on single blog post
   - Show Post Navigator: Turn on/off to show/hide the post navigator
   - Post Navigator Sticky: Turn on this option to make the post navigator is sticky
   - Show Author Box: Turn on to show the author box below the post content
   - Show Related Posts: Turn ON to show the related posts box
   - Related Posts Style: Select style for the related posts box
   - Columns Of Related Posts: Select how many columns of the posts that will be displayed on the related posts box
   - Number Of Related Posts: Enter the number of posts you want to display on the related posts box

#### Team Members

1. ##### Member List

   - List Sidebar Position: Select sidebar position on the portfolio listing page
   - Member List Sidebar: In the dropdown box, select the sidebar that you want to display on the portfolio listing page
   - Pagination Style: Select the style of pagination links on the portfolio listing page
   - Posts Per Page: Enter the number of posts that will be displayed on the portfolio listing page

2. ##### Single Member

   - Single Sidebar Position: Select sidebar position on the portfolio single
   - Portfolio Single Sidebar: In the dropdown box, select the sidebar that you want to display on the portfolio single

#### Under Construction

1. Enable Under Construction: Turn ON this option to enable the under construction mode
2. Under Construction Page: In the dropdown box, select the page you want to use as under construction page
3. Allowed Access For Roles: Select the role that has permission to access your site while it is in the under contruction mode

#### Widgets

This section can be used to edit/add/reorder widgets

### Blog Posts

To create a new blog post, go to Posts > Add New on the admin panel.

1. Enter a title for your post in the text field near the top.
2. Next, on the right side of your screen, there is a section called Format, please choose a format for your blog post. Now, let's go over the available options:
   - Standard: This is the default blog format. You can start adding content with the Visual Editor.
   - Gallery: When you select this format, an image slider will be created on top of the page. All images of this slider must be added to the field "Gallery Images" in box "Post Options"
   - Link: When you select this format, the post title will be linked to the URL you input in the field "External Link" in the box "Post Options"
   - Quote: This format will make the post is presented as a quote
   - Video: When you select this format, a video player will be created on top of the page. The video URL must be added to the field "Video URL" in box "Post Options"
   - Audio: When you select this format, an audio player will be created on top of the page. The audio URL must be added to the field "Audio URL" in box "Post Options"

Now it's time to categorize this post.

1. Under Format section, there is a section called Categories, select the category that you want to assign to this post. Alternatively, if you'd like to create a new category, click on "+ Add New Category" A text field will unfold where you can enter a name for the category.
2. Then click on "Add New Category".
3. Once selected the category you want, click the "Publish button".
4. Under the Categories section are the Tags and Featured Image sections. Here you can add some tags to your post, and upload an image that will be displayed as the Featured Image (the representative image) of the post in the blog list pages.

Now, you've finished the setup for your blog post.

### Pages Management

Creating your own page has been never so easy. To make the first step please go to Pages > Add new. At first sight, everything looks just like in default WordPress. But when you look at Visual/HTML area you will see some Page options or on Page Attribute panel, you will see some Page templates that we will explain below.

#### Page Templates

When creating a new page, one of the first things you might want to do is to assign a suitable template for it. To do this, please find the Page Attributes section on the right of the page editor. It comes with a variety of templates to choose:

1. Default Template: Choose this one if you want to create a standard page
2. Blog: Choose this one if you want to create a page for listing posts
3. Team Members: Choose this one if you want to create a page for listing team members
4. Page - Blank: Choose this one if you want to create a page without header and footer
5. Page - Fullwidth: Choose this one if you want to create a page that its content will stretch to fit the browser's width

#### Page Options

Beside the page templates, we provide some special options to customize the page. All page options will be overridden by the global options of the theme. With "Blog" and "Portfolio" templates we have two separate sections with options for customizing.

1. Layout: When enable this option, you can override the layout settings
2. Page Title: When enable this option, you can override the page title settings
3. Breadcrumbs: Select the Breadcrumb state
4. Top Bar: Select the Top Bar state
5. Primary Menu: Assign a menu to primary location for this page
6. Top Menu: Assign a menu to top bar menu location for this page

### Shortcodes

Tom & Jerry is built with several custom shortcodes that will make life easier when creating content. To use these custom shortcodes, just open the visual composer and add the elements you need to use.

### Sidebars Management

This theme has 6 default sidebar to use:

1. Primary Sidebar: This is the default sidebar, it will be displayed on the left or right of your page depend on the sidebar layout option.
2. Off-Canvas Sidebar: This is a special area, it allows you to display widgets as content inside the off-canvas menu
3. Footer Sidebar #1 to #4: This areas will be used to display on footer widgets

Beside the built-in sidebar areas, we provide a feature called "Custom Sidebar". With this feature, you can create unlimited sidebar areas. To create a custom sidebar, just navigate to Appearance > Widgets you will see the box "Create Widget Area" on the right. Please enter the sidebar title as you want and click to "Create" button, a custom sidebar will be created.

To remove a custom sidebar, in Appearance > Widgets please open the sidebar that you want to remove. Click button "remove this are"

### Advanced Settings

Tom & Jerry theme provides a special section that allow you to add custom CSS and Javascript into the theme. Just navigate to Appearance > Advanced and start adding custom code.

### Contact Form

Contact form is not a built-in feature (for many reasons) so we recommend you should use a third-party plugin. The free one we suggest is Contact Form 7 which can be used to add forms anywhere in your site!

### Credits

#### Images

- Photos: The images used on the demo site are for demonstration purposes only and are not included in the download file.
- Icons Font
  - Font-Awesome (http://fontawesome.io/)
- Javascript
  - jQuery (http://jquery.com/)
  - jQuery UI (http://jqueryui.com/)
  - jQuery Countdown (http://rendro.github.io/countdown/)
  - jQuery CounterUp (https://github.com/bfintal/Counter-Up)
  - Flexslider (http://flexslider.woothemes.com)
  - Isotope (http://isotope.metafizzy.co/)
  - WayPoints (http://imakewebthings.com/jquery-waypoints/)
  - PrettyPhoto (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/)
  - Images Loaded (http://desandro.github.io/imagesloaded/)
  - FitVids (http://fitvidsjs.com/)
  - OWL Carousel (http://owlgraphic.com/owlcarousel/)