MAGEEWP

Themes for WordPress

MAGEEWP

Themes for WordPress

Theme Guide: Onetone (Old Version)

Onetone is a free responsive business theme based on HTML5 & CSS3. Keeping up with the latest web design trend, Onetone applies the layout of one-page, which showcases all the essential features of your website on the Home page. The basic sections designed for business purpose have already been built for you. We’ve got “Banner” section for you to shout out your slogan, “About” section to present your basic information, “Services” section to introduce your business, “Gallery” section to showcase your products, and “Contact” section for customers to keep in touch with you. Besides all these existing sections, in order to provide you more flexibility while creating your own business website, we’ve designed a “Custom Section” where multiple contents can be added. The powerful Onetone Options Panel gives you full control of your theme. Various options are available if you prefer to do some adjustments, such as changing background, uploading logo and favicon, adding custom CSS and so on.
*This is a manual for version under 1.6.6.

Installing the Theme

In our official site, click the Themes link on the header, you will see our themes list, hover on Onetone and click the “details”, you will get the download link like below.

2015-07-23_09-17-57

For Free users, click on ‘Free Download‘ button and download the onetone.zip file.

For Premium users, click on ‘Add to Cart‘ button and proceed. If you have any problem about purchasing ,refer to FAQ: /faq/about-purchasing-mageewp-themes.html Log in your WordPress dashboard and then navigate to Appearance -> Themes -> Add New. Now click on ‘Upload’ and then on ‘Browse’. Load the onetone.zip file you downloaded earlier and then click on ‘Install Now’.

Onetone wordpress theme

If WordPress alerts “Are you sure you want to do this? Please Try Again” while uploading, the possible reason is the size of installable file exceeds upload limit of your space. Please extract the file to folder and upload it to \wp-content\themes using ftp tool. Once the install process is done click on ‘Activate‘.

Magee Shortcodes for Free version

After active the free version theme, you will see the tip on the top of Appearance/Themes like below, the plugin Magee Shortcodes will enhance the Onetone fuction, so we highly recommend installing it.

Installing-Theme

Click the Begin installing plugin, you will be redirected to “Appearance/Install Plugins”, click “install” and you will install the the plugin Magee Shortcodes conveniently.

Installing-Theme-2

After install the Magee Shortcodes plugin, go to “plugin/installed plugins” and click “Activate“, then you could use it in the post/page now. More usage about the plugin you could read the Magee Shortcode Guide.

Magee-Shortcode-Guide-2

Magee Shortcodes for Pro version

Because the Onetone pro version had integrated the plugin Magee Shortcodes pro version, it will conflict with the Magee Shortcodes free version, so if you update your Onetone from free version to pro version, you should deactivate the Magee Shortcodes free version into “plugin/installed plugins” in order to use the Magee Shortcodes pro version in the post or page.

Installing-Theme-3

Demo Import (Pro version only)

Starting from pro version 2.0.7, in the “dashboard/onetone/import demo“, you could import our onetone demo just simply click the button “Import“. Importing demo content will give you sliders, pages, posts, theme options, widgets, sidebars and other settings. This will replicate the live demo. More demo are in production, please wait some time for them.

WARNING

Using Demo Import will replace your current theme options and widgets, the demo blogs and pages will add your site too, so please carefully consider before do it. The import process will need few minute to complete, don’t turn off the page before import completion.

Import Demo Requirements

Memory Limit of 256 MB and max execution time (php time limit) of 300 seconds. Revolution Slider and LayerSlider must be activated for sliders to import. Woocommerce must be activated for shop data to import.

Import Timeout

Sometimes you maybe got a import timeout issue, especially in the localhost, if that happen, open the file

set_time_limit (8000);
in your web server, search codes below

if ( ! $r['blocking'] ) { curl_exec( $handle );
Before them, add the codes
set_time_limit (8000);
, save and reimport the demo.

General Options

onetone-option In the Dashboard/Appearance/Onetone Options, you will see the General Options. In it, you could set the Favicon which an icon associated with a URL that is variously displayed, as in a browser’s address bar or next to the site name in a bookmark list. Decide weather to show the “Back to Top Button“. And add extra css codes in “Custom CSS“, the following css code will add to the header before the closing </head> tag. The custom css is for the css advanced users, sometime you maybe use it when need some different style changing.

Tips: If it’s the first time you download Onetone theme, click ‘Restore defaults’ to import default date.

Homepage

How to Display Onepage Homepage

In the Dashboard/Reading/Reading Settings/Front page displays, you need check the A static page (select below) and select the Front page to “- Select -“. As to the Posts page, you need select the “Blog” or other page you created for the blog. reading setting

Section Amount

Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area, you can first set the section number for Homepage, remember to click ‘Save Changes’ after add sections. Notice the option only appear in free version, in pro version, it already has 15 sections and “Sections Order” option.

Sections Order (Pro only)

Only pro theme has the “section order” option, using it you could change the section order easily, just click it to expand, and select the location. Sections Order

Section Video – YouTube

Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area, you could set section video. section video The video will display on the pc but not the mobile, you could show a picture on the mobile instead. To achieve it, you need set Video Background Section to “Section 1”, then Section 1 Content set to “Content”, at last, you need upload a image for the Section 1/Section Background.

Section Video – HTML5 (Pro version only)

html5-video

In pro version, besides YouTube videos, you can set HTML5 video as background as well.

But unlike YouTube video, you need to upload the HTML5 video to your site using ftp tools firstly. The video needs to be at least in mp4 & webm formats. And you also need to upload a alternative image as poster.

You can also set the video to loop or not and the volume from 0 to 1.

Section Content

By default, there are 7 section in the homepage. You could click the section to expand and edit it. Section-Content
  • Section Title – Set the section title, you could leave it blank.
  • Menu Title – This title will display in the header menu. It is required.
  • Menu Slug – The “slug” is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens.
  • Section Css Class – This option is for the css advanced users, sometime you maybe use it when need some different style changing. You could leave it blank when you don’t need it.
  • Section Content – Suggest you edit it in the Text mode. You should know some basic html knowledge before edit it, and the shortcode is avialable. If you don’t know the html well, please edit it carefully in case break its default appearance strcture.

Default Section 1 – Banner

Move to the “Section Content” area and switch to ‘Text’ mode. (We highly recommend you use text mode while editing this section. Or the style may be lost due to the filtering rules of WordPress.) For SNS links, multiple URLs are provided, including Skype Facebook, Twitter, Google+, YouTube, etc. Go to Fontawesome to find more icon codes. Type in your own links to take the place of ‘#’. Finally click on the ‘Save Options’ button.

Default Section 2 – About Us

Onetone wordpress theme

2.1 Biography setting

Add a brief paragraph of introduction of your business to let your customers get to know your company and products quickly. Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area, click on “Section 2” to expand the form. Type in Section Title -> type in Menu Title -> amend background color or upload an image -> edit some words in “Section Content” area according to the sample words.

Onetone wordpress theme

2.2 Personal Info Setting

Same as above, type in your own personal information to take the palace of the sample words. You can also switch to “Text” mode to amend the code if you like. Finally click on the ‘Save Options’ button.

Onetone wordpress theme

Default Section 3 – Service

This section is designed for you to introduce the services you provided. There are three existing samples for you, and more items can be added.

2015-07-23_10-02-19

3.1 Title and background settings

Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area, click on “Section 3” to expand the form. Type in Section Title -> type in Menu Title -> amend background color or upload an image.

3.2 Section content setting

Move to the “Section Content” area and switch to “Text” mode. Replace the icon code to what you want to display (go to Fontawesome to find more icon codes). Change the service title and type in some words of description to take the place of the sample words. Repeat such process and amend more icons and the according words. Finally click on the ‘Save Options’ button.

Default Section 4 – Gallery

This section is designed for you to display the pictures of your products which provide links to lead customers to other respective detailed pages.

2015-07-23_10-01-44

4.1 Title and Background Setting

Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area, click on “Section 4” to expand the form. Type in Section Title -> type in Menu Title -> amend background color or upload an image.

4.2 Section content settings

Click on ‘Add Media’ -> Add New, click on ‘Select files’ or drag the picture from your computer to this area. Find the image you’ve uploaded earlier, click on it and then copy the file Url on the right side ‘Save’ area. Move back to the ‘Section Content’ area and switch to ‘text’ mode. Now delete the sample image Url and paste what you’ve copied earlier. Add links to each image: Add new pages for each images. Copy the Urls of each page, and paste them at the place of ‘#’ among the codes. Repeat such process and amend more images and the link pages. Finally click on the ‘Save Options’ button.

Default Section 5 – Contact

This section is designed for your customers to leave a message to you.

Onetone wordpress theme

Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area, click on “Section 5” to expand the form. Type in Section Title -> type in Menu Title -> amend background color or upload an image. Amend the sample words in the “Section Content” area. We suggest that you remain our sample message table. If you want to change its style, just switch to “Text” mode and amend the html codes as you like. The messages would be sent to the email address you set in user profile, if you want the mails be sent to other address, change the following text to your email address.( NOTICE: If you can’t receive the email, try to set the eamil address the same domain as your website. ) Contact

Default Section 6 – Custom Section

This section is designed for you to customize your own section.

Onetone wordpress theme

Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area, click on “Section 6” to expand the form. Type in Section Title -> type in Menu Title -> amend background color or upload an image -> edit the ‘Section Content’. If you don’t need this section, just click the botton “Delete this section“.

Default Section 7 – Custom Section 2

Another custom section like section 6 for you to customize your own section. section-7 Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area, click on “Section 7” to expand the form. Type in Section Title -> type in Menu Title -> amend background color or upload an image -> edit the ‘Section Content’. If you don’t need this section, just click the botton “Delete this section“.

Header

Header Background

header-background

Header Overlay

Header Overlay means you could put the header over the banner and has tansparent backgroud like below. You could switch it on or off. header-overlay

Header Background Image

You could upload a Background Image For Header Area.

Parallax Background Image

Turn on to enable parallax scrolling on the background image for header top positions.

Background Repeat

Select how the background image repeats. You could select repeat, repeat-x, repeat-y, no-repeat.

Header Top Padding & Header Bottom Padding

This options allows you to enter a numerical value to set the space header top and the header bottom. In pixels or percentage, ex: 10px or 10%.

Top Bar Options

Top Bar is always above the header and banner. You could set Display Top Bar yes or no,  a lot of Background Color. Left Content and Right Content you could set info, sns, menu and none.

Top-Bar-Options

After these options, you could set the Info ColorInfo Content and Menu Color.

Top-Bar-Options-2

For the sns, you could set the Social Icon and Social Icon LinkSocial Icons Color is unlimited. Social Icon Tooltip Position has three position you could select: left, right and bottom.

  • Tip: More social icon name you could get from http://fontawesome.io/icons/
Top-Bar-Options-3

Sticky Header

Have you ever been at the bottom of a webpage and wanted to go to another page, but didn’t want to scroll all the way back up to the top to select a menu item? With Onetone’s sticky header, you no longer have to do that. Your main menu and logo will always be at the top of the screen, automatically following when you scroll. This makes it much easier for your viewers to quickly navigate through your site. Meanwhile, you can set menu font color, size, style, weight, and more.

How To Setup The Sticky Header

Step 1

– Navigate to Appearance > Onetone Options > Sticky Header to access the options.

Step 2

– Turn on the Sticky Header option by checking the “Enable Sticky Header” checkbox.

Step 3

– There are also individual options to enable or disable the sticky header on tablets or mobile devices.

Step 4

– There are two options for customizing the size of the menu text in the sticky header. Menu item padding and navigation font size can be used to control the menu text in the sticky header.

Step 5

– You can also control the logo width in the sticky header.

Step 6

– Always click “Save Changes” in theme options to save your custom settings.

Logo

Logo

Onetone allows you to upload your own logo and favicon to your WordPress site. It is easy to do the job in your dashboard.

Step 1

– Navigate to Appearance > Onetone Options > Logo to access the options.

Step 2

-Click the Upload button next to the appropriate field, then select the image file you would like to use. favicon

Attention

  • Select an image file for the retina version of the logo. It should be exactly 2x the size of main logo.
  • If retina logo is uploaded, enter the standard logo (1x) version width, do not enter the retina logo width. Use a number without ‘px’, ex: 40
  • If retina logo is uploaded, enter the standard logo (1x) version height, do not enter the retina logo height. Use a number without ‘px’, ex: 40

Sticky Header Logo

Step 1

– Navigate to Appearance > Onetone Options > Logo > Sticky Header Logo to access the options.

Step 2

-Click the Upload button next to the appropriate field, then select the image file you would like to use. logo

Attention

  • Select an image file for the retina version of the logo. It should be exactly 2x the size of main logo.
  • If retina logo is uploaded, enter the standard logo (1x) version width, do not enter the retina logo width. Use a number without ‘px’, ex: 40
  • If retina logo is uploaded, enter the standard logo (1x) version height, do not enter the retina logo height. Use a number without ‘px’, ex: 40
  • You can also set the left/right/top/bottom margin of the logo using a number without ‘px’, ex: 40

– Always click “Save Changes” in theme options to save your custom settings.

Typography (Pro version only)

With a fully customizable Typography tab, Onetone allows users to set custom, Google, standard fonts, and font sizes. Everything you need to adjust your website’s font styles and sizes, you will find under the Typography tab.

Google & Standard Fonts

Google-font There are 600+ Google fonts available in Onetone theme. You can choose your favorite fonts for your websites.The Standard Fonts, on the other hand, let you choose among the standard font families that are readily available in almost all computers.
  • Select Body Font Family – Affects the font style of all text within your website that does not have a special, custom option.
  • Select Menu Font -Affects the font style of all navigation or menu items on your website. This does not include submenu items.
  • Select Headings Font – Affects the font style of all headings on your website.
  • Select Footer Headings Font – Affects the font style of all footer headings on your website.
  • Select Button Font – Affects the font style of all button texts on your website.
IMPORTANT NOTE – Filling out the Google Fonts options will override the Standard Fonts settings. Set the Google Fonts settings to none to enable Standard Fonts settings. – Always click “Save Changes” in theme options to save your custom settings

Styling

Primary Color

Primary-Color Primary Color is the color style of the whole site, it is the default color in somewhere in site like link hover color.

Background /Element /Font /Main Menu Colors

Step 1

Navigate to the Appearance> Onetone Options > Styling tab.

Step 2

Select a color by clicking the Select Color button. Enter the hexcode of your desired color or use our built in color picker tool.

Step 3

Set the Opacity by entering a numerical value in the Opacity field. Choose from 0, which makes it transparent, to 1, which makes it opaque.

Layout Options

You can set a global top and bottom padding for the page content in Appearance> Onetone Options > Styling tab under the Layout Options section.

Sidebar

Sidebar Onetone offers both single and dual sidebars. Onetone includes a powerful set of options to achieve this throughout the theme. It allows for single or dual sidebars, or no sidebars. There are two sidebar dropdown fields that allow you to make these selections; Left Sidebar and Right Sidebar.

Main Areas

  • Blog Posts – the single post pages that are created for each blog post.
  • Blog Archive / Category Pages – any cat/arch pages created for blog posts.
  • Search Page – the search results page that displays when a search is performed.
  • 404 Page – the 404 results page that displays when a page doesn’t exist.

Woocommerce Sidebar (Pro version only)

Woocommerce-sidebar Other the main sidebar above, in the pro version, you could set the sidebar in Woocommerce Products and Woocommerce Archive.
  • Woocommerce Products – the single post pages that are created for each product.
  • Woocommerce Archive – the cat/arch pages created for products.

Slider

Slider If you want the slider work, you need set the ontone-option/homepage/Section-1-Content to Slider, then the homepage section 1 will show the slider you set. You could set at most 5 slides. Set the slide is simple, just upload the image and edit the text. Some html knowledge will be required if you want the text look well.

Footer

footer You could set whether to Enable Footer Widgets Area. When you check it, you could set the footer widgets in the appearance/widgets. Enter the text that displays in the copyright bar. HTML markup can be used. copyright

404 Page

404 page will show when the given page not found. You could use html codes in this section, advise use the text mode, the default codes is below. If you don’t know html codes well, suggest you leave it default. 404-page

Magee Shortcode Plugin

When you use this theme, you could install the Magee Shortcode Plugin, it will make your editing job easier and to achieve more appearance effects. More detail please read Magee Shortcode Guide.