FlatOne Theme Documentation
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
This is the theme help documentation file. Please go through this before contacting for support.
Live Theme Demo
1. Getting Started
A few words on getting started with FlatOne, package files & theme support.
After downloading the theme package un-zip it. Inside the package you will find the following files:
We assume you already have the default wordpress installed in your server.
To install FlatOne wordpress theme (that you’ve already downloaded and un-packed) you have two primary options: FTP or WordPress theme upload from the Dashboard.
To manually upload FlatOne wordpress theme, login with your credentials to your website and locate the /wp-content/themes directory on your server. Upload the un-zipped theme folder into the: yourdomain.com/wp-content/themes
- Log into your site via FTP
- Browse to your folder located at wp-content/themes
- Upload the flatone theme folder.
- Log Into Wordpress and go to Apperance -> Themes
- Find the theme and click to activate
Please ensure you are uploading the un-zipped theme folder, not the entire package downloaded.
Follow the steps below to upload your theme from the WordPress dashboard.
- Log into your WP dashboard
- Browse to Apperance -> Themes
- Click to "add new" and then follow the instructions on the screen
- When it askes to select a file find the zipped theme folder called flatone.zip
Please ensure you are uploading the zipped theme folder, not the entire package downloaded.
- Install and activate the required plugin "Portfolio Post Type".
- Tools->Import:Wordpress and follow the instruction to install the plugin.
- Browse select the .xml file from DemoData and import
- Goto Appearance->Theme Options:Utility
- Open theme-options.txt from DemoData with a text editor, copy the content and paste into Import input box and Save.
- Please check Theme Options:Sections. to ensure all sections have corresponding pages assigned. It may not assigned automatically as page ids may get changed while importing.
- Goto Appearance->Menus and assign the newly created menu as the Main menu from the "Manage Locations" tab.
- You should be done, visit the site!
If you have a problem with the theme or found a bug please let us know by sending us an email and we will help sort out your problem.
We tested the theme with major browsers and different devices. Unfortunately it is impossible to run every test scenario.
Note: We are happy to help with setup and any bugs you may stumble upon.
As FlatOne is a single page template we will treat each section of the landing page as a page. This theme also includes an Administration panel that will allow you to change various aspects of the theme such as the logo, color, contact form options...etc. But lets discuss with the sections/pages first as we will need this pages later in the Administration panel.
- Step1: Add a new page. You can name it as Header, Top whatever you prefer. This name will be used in the menu.
- Step2: Select the custom template Header and publish.
- Step3: Now you should see the interface (meta box) to add the text slider texts, single fixed background image or pattern or multitple images for backgournd slider or youtube id for backgournd video. As well as an action button, if enabled the option to enter the button text and link!
- Step 1: As stated for HEADER section. Add a new page. Lets name it Service.
- Step2: Select the custom template Service and publish.
- Step3: Fill Section Title and Short details. And then the Services with Title, Details and Icon. A complete list of fontaswesome icon is ready in the dropdown to select easily. You can repeat this group to add all the services you have!
- Step1: As above. You can name it as Features.
- Step2: Select the custom template Features and publish.
- Step3: Add section title and upload an image to be used as background parallax image. Then add the feature details with Title, Details and an image. You can repeat this group to add more features.
- Step1: Do.
- Step2: We have another similar section like features but in a slider mode. You can name this page as featured Sldier and select Featured Slider as the template.
- Step3: Add Title, Details and upload an image. You can repeat this group to add more features in the slider.
- Step1: Do.
- Step2: This is basically a testimonial section. Select Clients as the template. You can name it as Clients or Testimonial.
- Step3: Same as features section. Add section title and upload an image to be used as background parallax image. And add Cleints Name, feedback and his image or his company's logo.
- Step1: Do.
- Step2: This is about your team members. Choose Team as the page template.
- Step3: You can add your team member's name, designation and image along with some social links like facebook, twitter, linkdin. Team section also have an option to add some fun facts about your company / product. In between don't forget to add the section tite and background image.
- Step1: Do.
- Step2: We have a section to add the Frequently Asked Questions. Select FAQ as the template.
- Step3: By now you should be very familiar with the process. Add section title and upload an image to be used as background parallax image. And add the questions and answers.
- Step1: Do.
- Step2: Select Footer as the template and you will see the options to configure the footer of the landing page.
- Step3: Give a title. Add the social icons with the links. And finally the copyright text :)
3. Theme Option Panel
By now we are done with creating all the pages (sections) for the landing page.
Now goto Appearance -> Theme Options to configure some general settings like logo, color, typography and some other things. Lets check everything one by one, no worries.
To access the theme options panel simply...
- Log into your WordPress dashboard
- Go to Apperance -> Theme Options
- Logo: You can upload your logo as image or you can have a text logo instead. For text logo you will have the options to select font-face, font-size, font-weight etc.
- Small Logo (for menu): Another logo (image or text) to be used in the navbar. Normally should be same just smaller in size.
- Menu type:
- Flatone Single Page Menu: Default and for single page.
Menu will be created automatically with the title in the corresponding page/section and will be linked.
- Wordpress Default Menu: If you use FlatOne as a multipage site.
Only if you use FlatOne as multi page template.
You will need to create a menu from Appearance->Menus and need to assign the newly created menu as the Main menu from the "Manage Locations" tab.
You can mix single page section and stand alone pages in the menu. This would be a little tricky. Select "Wordpress Default Menu" as the menu type and create a menu with the pages you need and for single page section targeted link you will need to create a custom link and need to provide your site full url with a hash tag of a section, so that it can be linked from internal pages. And put external in "Link Relationship (XFN)" field as a class name for internal page menu item.
The section hash tags are:
- Favicon: Uplaod the favicon, preferred a .ico file.
- Color Schemal: We have three color options to choose.
- The Primary theme color: Default: #353B49
- Secondary color: Default: #EB6D4C Used to hightlight some section/text and hover effect.
- Secondary color 2: Default: #6E8697 The third coloe we used in some sections/icons.
- We have the options to select font-face, font-size, font-weight etc for the header section sldier text, section title (H2), section sub title (H3 & H4) and body (P).
- This is one of the important tab to select the page for each sections. We have already created the pages earlier by selecting corresponding template for the sections. We just now need to assign the pages for the sections.
- If any section is left blank it won't show in the landing page.
Note: If the dropdown for a section is empty, it means you didn't create a page for that section yet.
- To do so, create a page by going to Pages->Add New and select the corresponding template from the template dropdown and publish.
- Custom welcome message option for single page. By default its deactivated.
- We have a mailchimp subscription section. You can enable / disable this section. If enabled you will have the option to put the section title and background image. And then you need to configure mailchimp just by providing the API Key and Unique ID.
- API Key
- UNIQUE ID
- The plugin Portfolio Post Type should be activated.
- You can enable/disable this section. If enabled you can provide the Title for this section.
- More details about adding portfolio items.
- Just below the FAQ section you can have a contact form. We have a theme built in contact form. You need to configure it by providing the receiving email address, mail subject and success message. Or you can use popular contact form 7 plugin's shotcode to use contact form 7. Obviously the plugin needs to be activated.
- Here you can wite any custom css or js code in the corresponding fields.
- Options to export / import your custom settings.
4. Custom Post Type for Portfolio
FlatOne comes with a custom post type that allows you to create Portfolio items.
- Look for the menu item Portfolio in the left side menu. Adding portfolio is just like adding a blog post.
- Once you add your portfolio items, to see them on your site you must activate the section from the option panel. More details.
To add portfoio items to the portfolio page, follow the steps below
- Log into WordPress
- Click on the "Portfolio" tab
- Select Add New
- Add your Content
- Create or select a category to be used as filter
- Select Your Featured Image
5. Homepage, The Landing Page
Setting up the homepage is as easy and drag and drop.
To create your homepage by following the steps below
- Log into WordPress
- Create a new page
- Under "Page attributes" select the One page template template
- Click Publish and you are done!
- Browse to Settings->Reading
- Select the new homepage as the static page for the front page display
You will only need the shortcodes if you use FlatOne as multipage template.
- Create a page from Pages->Add New with default template
- Browse to Settings->Reading
- Select the new page as the Posts page for the blog page display
- FlatOne have the default right Sidebar widget area for blog and general inner pages
- You can drag and drop any widget in the Sidebar area
- Automattic / _s https://github.com/Automattic/_s/
- Themekraft / _tk https://github.com/Themekraft/_tk
- Bootstrap http://getbootstrap.com/
- Wordpress theme options framework: https://github.com/vafour/vafpress-framework
- The custom post type for portfolio: http://wordpress.org/plugins/portfolio-post-type/
- Font Awesome http://fontawesome.io/
- jQuery-One-Page-Nav https://github.com/davist11/jQuery-One-Page-Nav
- Parallax effect https://github.com/IanLunn/jQuery-Parallax
- bxSlider https://github.com/wandoledzep/bxslider-4
- UIKIT http://www.getuikit.com/
- MixItUp http://mixitup.io
- jquery.mb.YTPlayer https://github.com/pupunzi/jquery.mb.YTPlayer
- Mobile-Detect https://github.com/serbanghita/Mobile-Detect
- nicinabox / superslides https://github.com/nicinabox/superslides
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. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Enayet Husain Rajib