“Konzept Theme” Documentation by “Flow” v1.0

“Konzept Theme”

Created: 11/10/2011
By: Anthony Jones and Flow
Support Forums: Support Forums

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to post your questions on support forums. Thanks so much!

Info
Preinstallation
Installing the Theme
First Steps
Portfolio
News, Coming Soon, About and Contact Pages
Customizing Footer
Theme Settings

General
News
More Sidebar Areas
Footer
Typography

Files (HTML/PHP/JS code)
CSS
PSD File
Sources, Credits and Goodbye

A) Info - top

This theme was created by Anthony Jones (follow) (design and idea) and Flow (follow) (code). It was tested on Wordpress 3.3.1. I'm sure that it's going to work also on some older as well as some further versions of Wordpress. I will update it in case it doesn't work on some further version of Wordpress and notify you about it on ThemeForest item page. Once updates become available you will be able to download all the files from ThemeForest again.

If you encounter any errors please contact me on support forums and I will fix them as soon as possible (you will be able to redownload fixed theme from ThemeForest item page). If you have any suggestions regarding this theme let me know! I will improve or fix it if necessary because I'd like everyone to by fully satisfied with it! Okay, so let's get started!

B) Preinstallation - top

You need a working copy of Wordpress installed on your own server (wordpress.com hosting won't work) in order to start. You should know how to use it (e.g. how to enter admin panel, how to write posts etc.). This may help you: New To WordPress - Where to Start. Make sure that your server is using PHP5 (not PHP4).

C) Installing the Theme - top

You can install and configure this theme the same way as most of the other themes. Please follow the steps below:

Upload the theme - login to your server using any FTP client. Go to wp-content > themes and place ENTIRE FOLDER with your theme there (not files without folder). Theme files should be directly in that folder. Alternatively, go to admin panel > Appearance > Themes > Upload and pick ZIP package with folder with theme files inside (not main download package that you downloaded from Themeforest).
Activate the theme - login to Wordpress admin panel and go to Appearance > Themes. Activate the theme.
Import sample content - in the package you'll find one XML file. You don't have to use it but you may find it useful as it contains all the posts, tags, categories, menus and some theme settings from live preview. It doesn't contain sidebar widgets and footer widgets. If you'd like to use it (recommended) go to Tools > Import and import that (you'll have to install importer first but that's not complicated). After importing sample content you still have to configure the theme and create some things like footer and sidebars manually.
Install Typography Plugin - in the main package you'll find second package with Typography plugin. Please unzip it and upload to your server to plugins directory. It's necessary to replace standard fonts with live demo fonts.

Check out my video presenting how to install our themes. This video includes our other theme but the process is EXACTLY the same (totally no differences).

Please visit support forums if you have any problems with installing this theme.

D) First Steps - top

Once you install this theme some new tools will appear in the admin menu. If you have imported sample content then you will not have to configure anything except adding your sidebar and footer widgets (dribbble feed on coming soon page and social media icons in footer). Below you'll find explanation of each theme option. This should make it easier for you to configure everything and replace sample content with your content.

E) Customizing Portfolio - top

If you look at the demo website you'll notice one global portfolio page. It will display all your portfolio entries in random order with filter to the left. Filter lists all the portfolio categories that have at least one post in them. Each portfolio entry is a separate post (see admin panel, portfolio section to have a complete list of all your current posts). Each portfolio post requires: Title (double, yellow and green areas), Description, Date (in format like dd.mm.yyyy) (optional), Client name (optional), Agency (optional), additional portfolio slides (optional) (which are simply additional images or videos related to project (see demo for example project pages)). There are custom fields for each of those things except additional slides. Additional slides are added through SuperSlide editor.

If you'd like to add new slide to your portfolio project please go to [Portfolio > Edit (some project) (or Add new)]. You'll find there SuperSlide editor (since v1.2). To add new slides drag and drop images (or videos) and they will appear as new slides or use "Image" or "Video" icon. Example screenshot with "Add Image Slide" panel:

Notes:

Once you import sample content you'll have working website with example posts. However, you will have to replace our live demo portfolio images with your ones.
(14/04/2012) Please ignore any [Tools > Import] errors. Those are all WordPress importer errors. We can't do anything about them. Perhaps WordPress will fix that soon. Luckily, they don't have any impact on imported content. Everything imports fine.
Portfolio template has image resizing script (for thumbnails and project slides) so you may use images in any size.
SuperSlide editor should work flawlessly. If you notice any errors, most likely your server is misconfigured. Please contact our support in such event.

There is a video of SuperSlide editor: http://www.youtube.com/watch?v=xmgQR2oZ9qk

F) News, Coming Soon, About and Contact Pages - top

The theme consists of portfolio and four pages (see demo for reference) which are About Us, Coming Soon (it's a dribbble feed), News and Contact page. This help file will guide you through installation and further usage of those four pages. If you'd like to create other pages or something that is beyond the scope of this help file please ask your questions on our support board. Four pages can be created or edited in "Pages" section of your admin panel.

About Us page - it consists of title and short about information. You can edit it in [Pages > Edit > About Us]. Besides just title and content you'll also have to specify some background image or background color. Background image will scale according to your resolution or browser size. Recommended size would be as large as 1920x1080 or 1920x1200 (just keep in mind it shouldn't exceed about 400-500kb in size).
Services - you can create or edit services page in [Pages > Edit > Services]. Services can be added on that page using the following shortcode: [content_block title="Service Name"]Service Description[/content_block]. Please keep titles and descriptions short. There's technical space limitation.
News - you can create or edit news page in [Pages > Edit > News]. News can be added under [Admin Panel > News].
Coming soon (dribbble feed) - there is a specific page template for dribbble feed. You can create a page that will display your latest dribbble entires. You can edit or create such page under [Pages > Edit Page > Coming soon]. I recommend to use solid color as background. It doesn't work with title or description so you may skip those two fields. You can put your dribbble username in [Appearance > Widgets] (use "dribbbble feed" widget in first sidebar).
Contact Us - you can edit contact us page under [Pages > Edit > Contact Us]. You will need "Contact form 7" plugin (download and install it now) to make it work. This page basically consists of title, description and contact form with second part of description (like addresses or social media icons). There is right column for contact form and left column for the rest of the content. Please import sample content or use the following as example Contact Us page content (HTML structure): <div class="contact-page"> <div class="contact-page-column-one"> Feel free to contact our offices worldwide! Please reach out and a business representative will get back to you swiftly. <div style="margin-top:30px;"> <h2>New York</h2><a href="http://maps.google.com/YOUR-LOCATION-LINK-GOES-HERE" class="contact-map" target="_blank"></a><div class="clear"></div> <p class="contact-page-address"> 29, rue de la Parcheminerie, 75005<br> Phone: +1 01 46 33 16 24<br> Fax: +1 01 46 33 03 33<br></p> </div> </div> <div class="contact-page-column-two clearfix"> [contact-form-7 id="2191" title="Contact form 1"] </div> <div class="clear"></div> </div> For convenience of majority of users we decided not to create separate contact template as it would be less customizable. This solution should work better. Replace RED TEXT with your contact information and contact form shortcode.

Once you import sample content you'll have working news and blog sections with example posts. I recommend to read the following anyway to find out how to create and edit news and blog. Follow the instructions below to create working news ang blog pages (the same applies to coming soon page except you skip steps number 3 and 5):

Go to Pages > Add New.
Choose some page title (like "Blog" or "News") and select blog template (or news template) in the menu to the right.
Go to Posts > Categories (or "News" > Categories) and add some categories that will be used to store your blog or news posts (like "Photography", "Coding", "Fashion" etc.). This is not required for news because categories will not be displayed anyway but just for your convenience I recommend adding categories. They might be useful when switching to other theme.
Once you create some posts they will appear on blog or news page. You can exclude some categories from being displayed on blog page in Konzept > Blog.
Please note that each news post consists of only Title and Description.

G) Customizing Footer - top

Select Footer in theme settings. You may want to change some settings there. Then go to Appearance > Widgets and populate footer column (second sidebar) with some widgets you'd like to use. On live preview I use only one text widget with the following code: <ul id="social"> <li><a href="javascript:void(null);" class="twitter"><span class="social-icon"></span></a></li> <li><a href="javascript:void(null);" class="dribbble"><span class="social-icon"></span></a></li> <li><a href="javascript:void(null);" class="facebook"><span class="social-icon"></span></a></li> <li><a href="javascript:void(null);" class="skype"><span class="social-icon"></span></a></li> <li><a href="javascript:void(null);" class="mail"><span class="social-icon"></span></a></li> </ul>

H) Theme Settings - top

Below you'll find all the theme settings with descriptions. This section is about settings available in admin panel to the left. Post settings (such as title, description, background image) are skipped here.

a) General - top

Choose the panel called Konzept > General. Main theme settings will appear to the right.

Logo - upload your image logo here. Otherwise text logo will be displayed. Live preview logo is 220x80px (please note empty margins to the left and right). Your logo should have width equal to 220px (not neccesarilly but recommended) by any height.
Tagline - enable/disable tagline for text logo.
Favicon - upload your 16x16px favicon here.
Style - dark or light.
Frontpage showcase mode - thumbnails or projects list.
Featured Slideshow - turn it on or off here. Slideshow posts can be added in "Slideshow" section of admin panel.
Thumbnails mouse over type - plain or clorful with descriptions.
Front page projects order - Random or by Date.
Tracking code - put Google Analytics code here or any other code that will be placed in footer.
Custom CSS Code - add your custom CSS code here.

b) News - top

Go to Konzept > Blog.

Exclude Categories From Blog (News page) - by default posts from all categories you created as well as all sub-categories are displayed on news page. You may exclude some post categories by typing in their IDs here.
Posts per page - you may set number of posts per page here (works for news page).

c) Sidebars - top

Once you go to Konzept > Sidebars you'll be able to create additional sidebars there. More sidebars may be useful only if you'd like to have different footer content on different pages or multiple dribbble pages.

Select Konzept > Footer.

Footer Copyright Notice - put some copyright notice here. You may also create some custom elements that should appear in footer using this field.
Disable custom link - you can disable custom link here if you don't want it to appear on your website. However we really appreciate all the links back. Thank you!
Custom affiliate link - put some custom affiliate link here to earn money. Example link look like this (our other theme): http://themeforest.net/item/agency-fullscreen-portfolio-wordpress-theme/1025297?ref=Flower where Flower should be replaced with your Themeforest username.

e) Typography - top

There's a typography plugin included in the package along with the theme. Follow the instructions in the package to install it. Then go to Appearance > Typography. There's a panel to manage your typography. More information on that is available in the typography plugin package and on support forums.

I) Files (HTML/PHP/JS code) - top

This theme is a liquid layout. All of the information within the main content area is nested within a div with an id of "content". It doesn't have sidebars. The general template structure is the same throughout the template. Most of the PHP, HTML and CSS code is well commented so it's easy to modify. Framework files are placed in "framework" folder. Everything is gropued into different sections. Standard WordPress' structure of files is also kept.

M) CSS - top

If you're going to edit CSS files make the backup copy first. The main style is in style.css file. It's very well commented so I believe that there won't be any problems with editing it.

N) PSD File - top

PSD file is included in the package. Almost everything is grouped and different elements are placed on separate layers. PSD file includes only the most important elements of the theme. Everything is layered so it should be easy to make some changes.

O) Sources, Credits and Goodbye - top

I've used the following images, icons or other files as listed. Big thanks to all great designers who provided preview content for Konzept.

Things above are mainly licensed under GPL or MIT (or both). Check websites and/or licensing folder for more information or email me to get more information.

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.

Flower on ThemeForest (follow)

Go To Table of Contents