“Sparky Theme” Documentation by “Flow on ThemeForest” v1.0
“Sparky Theme”
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!
Table of Contents
- Info
- Preinstallation
- Installing the Theme
- Theme Settings
- Customizing Portfolio
- Customizing Blog
- Customizing Footer
- Adding Contact Form
- Mainpage Sliders
- Adding and Managing Content
- Widgets
- Shortcodes
- Plug-ins You May Find Useful
- Files (HTML/PHP/JS code)
- CSS
- PSD File
- Sources, Credits and Goodbye
A) Info - top
My theme was tested on version 3.0.1 of Wordpress. I'm pretty 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 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:
C) Installing the Theme - top
- 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.
- Activate the theme - login to Wordpress admin panel and go to Appearance > Themes. Activate the theme from there.
- Import sample content - in the package you'll find one XML file (download it here: http://sparky.forcg.com/wp-content/uploads/2010/11/wordpress.2010-11-09.zip). You can go to Tools > Import and import that (you'll have to install importer first but that's not complicated). If you import sample content you'll have the same posts and categories like on live preview. You also need to go to "Main settings" and setup everything.
D) Theme Settings - top
Once you install this theme some new tools will appear in the admin menu.
IMAGE
For now choose the panel called
Main Settings. Main theme settings will appear to the right.
- Which page holds main page? - the ID of some PAGE that will be displayed on front page below slider. By editing this page you will be able to modify front page's static content.
- Breadcrumb trail - you can turn on/off breadcrumb trail here
- Text logo or your image logo? - If you set this to image logo logo.png file will be displayed (you must put it to path_to_theme_directory/images/logo.png).
- Use Cufon font replacement for H1 headings? - If you choose any font here it will replace standard H1 font. Fonts with * are Cufon fonts. Fonts without * are fonts from Google Font Library.
- Use Cufon font replacement for H2 headings? - The same as above.
- Use Cufon font replacement for H3 headings? - The same as above.
- Use Cufon font replacement for H4 headings? - The same as above.
- Testimonials Widget - You can add some testimonials here. They will be displayed in sidebar. You can enable that widget by going to Appearance > Widgets.
E) Customizing Portfolio - top
Follow the instructions below to create working portfolio page.
- Go to Pages > Add New
- Choose some page title (like "Portfolio") and select one of the portfolio templates in the menu to the right (see screenshot). IMAGE
- Go to Posts > Categories and add a category that will be used to store your portoflio entries (like "Portfolio" category). Make sure that it appears in the menu to the right (number 4 on screenshot). IMAGE
- For some portfolio templates (like 4th, 5th, 6th, 7th) you'll need sub-categories of main portfolio category.
- Hover over newly created category and remember its ID IMAGE
- Select Portfolio in theme menu settings.
Portfolio settings:
- Portfolio category - portoflio's category ID (you can get it two steps earlier). You may also use more than one category here. In order to do that just type in their IDs separated by comma. For some portfolio templates (like 4th, 5th, 6th, 7th) you'll have to use ONLY ONE CATEGORY ID here even if there are sub-categories. Sub-categories are taken automatically.
- Choose CSS Style for Portfolio - for portfolio v2 there are some styles. You may choose one here.
IMPORTANT: For some portfolio templates (like 4th, 5th, 6th, 7th) you need to have AT LEAST TWO POSTS in two sub-categories to make it work. Otherwise, some error may appear.
IMPORTANT: You can use 640-350-image custom field to add larger image or video to prettyPhoto enhanced portfolio templates. They can be in any size.
F) Customizing Blog - top
Select
Blog in theme menu settings.
- Exclude Categories From Blog - By default posts from all categories you created as well as all sub-categories are displayed on blog page. You may exclude some post categories by typing in their IDs.
- Posts per page - you may set number of posts per page here.
- Show author at the end of each post?
- Show related posts at the end of each post?
- Show post tags at the end of each post?
- Blog on homepage - you can enable or disable blog on homepage here. It will be displayed below static content.
Select
Footer in theme settings.
- Tracking Code - put Google Analytics code in there. You may also put there any code that should appear at the bottom of the page BUT this is outside page containers (DIV-s). The next box allows you to put some code inside containers.
- Footer Copyright Notice - put some copyright notice in there. You may also create some custom elements that should appear in footer using this field.
- Footer Columns - You can choose between zero, three, four or five footer columns here. You can then go to Appearance > Widgets and populate these columns with some widgets (sidebars 2 to 6).
I decided to use "Contact Form 7" plug-in to create contact forms. It is available here: http://wordpress.org/extend/plugins/contact-form-7/. Download it. In admin panel go to "Contact" settings and create a new form. IMAGE
Once you create the form create a contact page and place there the following code: [contact-form 1 "Contact Form"]. It will display the contact form. You can also put this contact form in the footer by adding the same code to text widget. Putting this into sidebar is not recommended because it is just too wide to be placed there.
I) Mainpage Sliders - top
Now go to the panel called "Sliders":
- Select slider - There are some image sliders available. You can test them all and check what works best for you.
- Choose Slider Transition Effect (Nivo Slider) - you've got 9 choices here. Again, just select something you like. This effects work for Nivo Slider only! I will cover other sliders later on.
- Time between slides (Nivo Slider) - in other words how long would you like each slide to be displayed in miliseconds? I recommend to type in here something above 3000ms. This works for Nivo Slider only! I will cover other sliders later on.
- Select Slider Category (all sliders) - select which category you use to store image slider images. You should exclude this category from blog and portfolio. I'd recommend to only use this category to store slider images. For now just create a new category called e.g. "Slider" and type its ID in this field.
- How many slides should slider display? (all sliders) - Select how many slides would you like your slider to display. They are displayed from the newest to the oldest slides by default. If there are not enough posts to display the slider will automatically show less posts.
All the 2D sliders require 1000x360px images. 3D slider require 960x360px images. You may use 640x360px or 1000x360px image or 640x360px video in custom slider.
- Nothing - It will create empty space between header and content on front page.
- Nivo Image Slider - It's basic slider with some cool effects.
- 3D Slider - its settings are available in separate panel below Main Settings.
- Accordion Slider - this works pretty much the same way as other sliders but it display multiple images at the same time. Just try it and you'll see what I mean.
- Coin Slider - another cool slider. It has some nice transition effects so just try it and I'm sure you'll like it!
- Custom Slider - another cool slider. It has some nice transition effects so just try it and I'm sure you'll like it!
To use any of the sliders above you have to put 960x350px image in the custom field called 960-350-image in each post that will be displayed as slider post. There are two exceptions:
- 3D Slider - you have to upload images that 3D slider should use on your server and put only the end of the link in 960-350-image3d custom field. The end part of the link looks like this: "2010/06/slide2.jpg". You shouldn't write http://example.com/.../uploads/2010/06/slide2.jpg but only 2010/06/slide2.jpg!
- Custom Slider - if you're using custom slider (the last one) you can put 640x350px image in 640-350-image custom field. If you put it in the first field it will be displayed to the right with description to the left. If you put it to the second custom field it will create 640x350px image to the left and its description to the right on main page.
Of course if you'd like to add descriptions and titles you should name slider posts somehow and add some content to them. The beginning of the content will be displayed as excerpt.
If you want your slider to link to something else than slider post (for instance to some page) you should put the link in "slide-link" custom filed.
J) Adding and Managing Content - top
Make sure you've got certain categories and pages for certain purposes. You will need:
- Main Page - create a page called "Main". Exclude it from menu and set is as page that holds front page content (in main theme settings).
- Portfolio - create page called Portfolio and use portfolio's template for it. Make sure to choose apropriate categories to be displayed there (this can be set in theme Portfolio settings).
- Blog Page - create page called Blog and make sure you choose apropriate categories to be displayed there (this can be set in theme Blog settings).
- Slider Category - create a category called slider and put its ID into main theme settings. All the posts under this category have to have 960x350px image (put link to the image in post's custom fields) and they will be displayed as slides.
- Blog posts by default are taken from each category you have on your website. You should exclude some categories (like portfolio and slider categories) so that they will not show up among blog posts. You can exclude them in Blog Theme Settings.
- Portfolio entries. Go to Portfolio Theme Settings and find "Select which categories should be displayed in portfolio". Type in there which categories should be displayed on portfolio page. Each portoflio post should have 300x160px image included in order to be displated on portfolio page correctly.
So basically and in short you should have:
- 1 Page with portfolio template (include "Portfolio" category(-ies) to be displayed there)
- 1 Page with blog template (exclude "Slider" and "Portfolio" categories from being displayed there)
- 1 category to hold slider images ("Slider" category)
- 1 or more categories to hold portfolio works
- unlimited number of blog post categories
- 1 Page to hold front page content
Now, you can add some custom information to each post. You can use my custom post panel to add custom information to your posts (see image:
IMAGE). You can also create following custom fields manually:
IMAGE
- 300-160-image - you should put a link to the 300x160px image in this custom field for each PORTFOLIO post. It will be displayed on portfolio page.
- 640-160-image - you should put a link to some image in this custom field for each BLOG post. If you don't put it there the post will be still displayed correctly but without thumbnail. You don't have to use 640-160px image. If you use smaller size (like 200x200px) it will float to the left.
- 960-350-image - you should put a link to the 1000x360px image in this custom field for each SLIDER post.
- page_title - if you put there any text it will be displayed at the top of the page
- page_description - if you put there any text it will be displayed at the top of the page below page_title and with smaller font. It's something like opening lines for page.
- slide-link - if you're creating slider image you can put some link in this field and slider image will be linked to some page or post.
- 640-350-image - if you're using custom slider you can put here any image that has 640x350px and it will be displayed to the right with description to the left. This custom field is also used for two portfolio templates.
- 640-350-image-left - if you're using custom slider you can put here any image that has 640x350px and it will be displayed to the left with description to the right.
- 960-350-image3d - this field should contain an end part of a link to the 960x350px image and is used by 3D slider only. The end part of the link looks like this: "2010/06/slide2.jpg". You shouldn't write http://example.com/.../uploads/2010/06/slide2.jpg but only 2010/06/slide2.jpg! Obviously, you should upload the images to your server as they are taken from WP uploads directory by default. They cannot be hosted externally.
- Twitter Widget
This is a custom widget to show your latest tweets.
Warning! There's one problem with this widget. When Twitter is over capacity IT WILL NOT SHOW your tweets! If you are using Twitter you surely noticed that Twitter is often over capacity so please use this widget cautiously. When you can't enter Twitter.com this widget won't work because Twitter doesn't work.
- Contact Form - this theme doesn't have built-in contact form but it's ready to work with Contact From 7 plugin. There's a section about it in this document.
- Flickr Widget - this widget shows images from Flickr from specific user.
If you go to Appearance > Widgets you'll notice that there are 7 widget areas:
- sidebar 1 - it's sidebar. You can put there anything in any order.
- sidebar 2 - it's footer's 1st column.
- sidebar 3 - it's footer's 2nd column.
- sidebar 4 - it's footer's 3rd column.
- sidebar 5 (optional) - it's footer's 4th column.
- sidebar 6 (optional) - it's footer's 5th column.
- sidebar 7 (optional) - it's sidebar on homepage.
You can put this code: [contact-form 1 "Contact Form"] in one of the footer's columns (as text widget) to create a contact form there (you have to have contact form 7 plug-in installed). Also, please use some wider columns for this widget. It may look strangely in thin column.
You can actually have unlimited number of additional sidebars and particular sidebars can be attached to particular pages or posts. Go to Appearance > Sidebars and create them. Then add some widgets to them by going to Appearance > Widgets (new sidebars will appear at the bottom of the list of sidebars). You can then replace your sidebar at the bottom of "add page" or "add post" page (it should be quite obvious how it works). Note that you can't replace footer columns. You can only replace main sidebar with any other sidebar.
L) Shortcodes - top
- You can use 960 Grid's CSS classes to create columns. You can find out more about it on 960.gs page.
- For instance if you'd like to create two columns you would use < div class="grid_6">content 1< /div>< div class="grid_6">content 2< /div>
- If you'd like to have three columns you would use < div class="grid_4">content 1< /div>< div class="grid_4">content 2< /div>< div class="grid_4">content 3< /div>
- [separator] - this will create a full page width separator (I recommend to use < hr /> instead.
- [box]Default Box[/box] - grey box
- [box class="grey_box"]Light Grey Box[/box] - lighter box
- [box class="warning_box"]Warning Box[/box] - yellow box
- [box class="error_box"]Error Box[/box] - red box
- [box class="success_box"]Success Box[/box] - green box
- [button]I'm a button[/button] - below are different buttons, default one is red
- [button class="button_red2"]I'm a second button[/button]
- [button class="button_red3"]I'm a third button[/button]
- [button class="button_green"]I'm a button[/button]
- [button class="button_green2"]I'm a second button[/button]
- [button class="button_green3"]I'm a third button[/button]
- [button class="button_blue"]I'm a button[/button]
- [button class="button_blue2"]I'm a second button[/button]
- [button class="button_blue3"]I'm a third button[/button]
- [button class="button_silver"]I'm a button[/button]
- [button class="button_silver2"]I'm a second button[/button]
- [button class="button_silver3"]I'm a third button[/button]
- [button class="button_black"]I'm a button[/button]
- [button class="button_black2"]I'm a second button[/button]
- [button class="button_black3"]I'm a third button[/button]
- If you want to add accordion content slider, coin slider or testimonials slider into your posts or pages use sample content to check how it's done!
- Besides just shortcodes you can use also some classes for lists (just add class="NAME_OF_CLASS" to unordered list tag):
- orange-list
- green-list
- red-list
- green-arrow-list
- silver-arrow-list
- There's also a class for links to add green arrow to the right:
- Check this post for more shortcodes: Advanced Shortcodes
IMPORTANT: you can use DIVs instead of shortcodes in some cases. Just add them some classes (like class="grid_8") to make them work like shortcodes.
M) Plug-ins You May Find Useful - top
No plug-ins are necessary in order to make this theme work however you may find some of the plug-ins below useful. Here are some plug-ins that I recommend to install:
- Twounter - necessary for subscribers widget
- Feedburner Circulation - necessary for subscribers widget
- wp-PageNavi - advanced pagination (this theme is already prepared to work with it)
- jQuery lazy load plugin - it causes images to load only when you scroll down the website to the particular image. It saves you server transfer.
- WP Super Cache - a must have plug-in for every theme (not only mine) if you're expecting lots of guests to your website. Don't activate it yet. Actiave it once you have everything else set up (otherwise you will have to delete cached pages after each modification because it creates static HTML files that loads quicker).
- Contact Form 7 plugin - I prepared this theme to be used with Contact Form 7 plugin. Download, install and activate it. To make it work click on Contact button in the menu to the left. Then click Add new. Afterwards name it Contact Form and save it. You will be given this shortcode: [contact-form 1 "Contact Form"]. Put it on your contact page. If you're using sample content it's already there.
IMAGE
N) Files (HTML/PHP/JS code) - top
This theme is a fixed layout with two columns and there is also full-width page template. All of the information within the main content area is nested within a div with an id of "content". The sidebar's (column #2) content is within a div with an id of "sidebar". The general template structure is the same throughout the template. It uses 12 column 960 grid with 60px wide columns and 20px gutter. Most of the PHP, HTML and CSS code is well commented so it's easy to modify.
O) 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.
P) 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 (like header and footer). Everything in between is plain background with simple text anyway so I didn't include that. Everything is layered so it should be easy to make some changes.
R) Sources, Credits and Goodbye - top
I've used the following images, icons or other files as listed.
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.
Flow on ThemeForest
Go To Table of Contents
