Unite - WordPress Theme

---

Table of Contents

1. About The Theme
2. Installation
3. Configuring the Theme
4. Layout and Design Structure
5. CSS Files and Structure
6. JavaScript
7. PSD Files
8. Sources and Credits

---

About The Theme - top

This theme is designed for use with WordPress 2.7 or higher. The code was written to be backwards compatible where ever possible, however I recommend using version 2.9 or higher. If you are not using WordPress 2.9.1 or higher and you can upgrade your site, I recommend you do this before installation.

The theme is widget ready and you can add and configure your own widgets in the side bar, search (header), home page, blog posts, pages, footer and slide down top area. You will see more information about these areas and how to use them later in this document.

There are several pre-made skins installed with the theme. You can activate any of these from the theme options menu, or you can add your own skin using the "Custom" option. There is more information on custom skinning the theme in the skins section below.

Although every effort has been made to ensure the theme is bug free and as easy to use as possible there is always the chance that I missed something. If you do find a problem please notify me immediately through my ThemeForest account page so I can ensure it gets fixed as quickly as possible.

---

Installation - top

Installing the theme can be done two ways. You can upload the zipped theme file, "theme-unite.zip", using the built in WordPress theme upload, or copy the files through FTP.

1) Using WordPress Theme Upload

1. Login to your WordPress admin.
2. In the "Appearance" menu click, "Add New Themes"
3. At the top of the page click, "Upload", then click "Browse"
4. Select the zipped theme file and click "Install Now"
5. After installation you will receive the message, "Theme Installed successfully."
6. Click the link "Activate"

2) Uploading by FTP

1. Login to your FTP server and navigate to your WordPress themes directory.
   Normally this would be "wp-content/themes"
2. Extract the files from the zipped theme.
3. Copy the folder "parallelus-unite" to your themes directory.
4. After the files finish uploading, login to your WordPress admin.
5. In the "Appearance" menu click "Themes"
6. Click "Activate" for the theme "Unite"

Image Resizing

After your theme is installed you should ensure that image resizing is working. To perform image resizing your server must be running PHP-5 and have GD-Library installed. If you don't know if your server has these things, don't worry, most do and the resizing will work automatically. If you want to verify that these are on your server contact your host and they will be able to tell you.

Make the Cache Folder Writeable

You must make sure the cache folder "parallelus-unite/cache" is set to write permissions. This is where resized images are saved. The folder needs "777" write permissions. It's likely that this will also work automatically, but if it does not or you have an error message related to your images you should CHMOD the folder to "777". If you need to know how to do this do a web search for "CHMOD folder permissions 777" or check the help file of your FTP program.

Resizing Script

The theme uses a script named "TimThumb" to perform image resizing. If you need detailed information on using this script or want to make customizations in the code check the TimThumb website for the full documentation and example code: TimThumb PHP Script

Finished with Installation?

Once the theme is installed you can configure it for your content. See the section below on configuring the theme options and you are ready to start adding your own content.

---

Configuring the Theme - top

Once the theme is installed you will see a new menu on the bottom left of your WordPress admin. The theme menu contains the following areas:

General Options

This area contains settings for choosing your skin, changing your logo, editing your footer text and more. The theme has an option to show place holder images for blog posts and other areas where you may not have associated an image with the content already. You can enable/disable that option from this page.

Home Page

The home page section allows you to configure the number of featured posts, blog posts and other content on the home page. The top section directly below the slide show is referred to as the "Showcase". This area is populated using widgets. You can decide if you want to have a 1, 2 or 3 column layout for the showcase area, and the appropriate number of widgets will be created for you. To populate this section go to the "Widgets" page under "Appearances" in your WordPress admin.

Introduction Text - The "welcome" headline text can be added in this section. You can also add extra content directly below the welcome headline if you choose.

Featured Content - This is the content section on the home page under the heading "Featured Content". This section can be enabled or disabled if you choose and the title can be changed to whatever you like. To add posts to this area, mark them as "sticky" in the post "visibility" settings. If no posts are marked as sticky it will display standard posts. Only blog posts can be added to this area, page content will not be displayed here. For more information on sticky posts try a web search for "WordPress sticky posts". This section will also exclude any posts in categories you have excluded from your categories menu under your sidebar settings for the theme options.

Home Page Posts - This is the content section on the home page after the "Featured Content" section. This section can be enabled or disabled and you can set the number of posts to include. Because the "Featured Content" section shows "sticky" posts, this area will only show blog posts NOT marked "sticky" (this is a normal post and requires no special action). This section will also exclude any posts in categories you have excluded from your categories menu under your sidebar settings for the theme options.

NOTE: The home page content will only display as intended if you have your WordPress "Reading Settings" configured for "Front page displays: Your latest posts". If you setup the front page to use "a static page", which you can do, it will remove all home page elements and you must create all the content yourself. This includes the slide show, welcome message, featured content and blog posts.

Main Menu

This is where you will configure what does and does not appear in your main drop down menu. The items in the menu can be dragged into the position you want them to appear. To start, click the "Add new menu item" and it will create the item on the page. To make a sub-menu item, drag it beneath another menu item and slightly inset, visual layout will change on the page and you will immediately see the item nested below it's parent. You can also create separator items to add visual indicators on the menu for separation of links.

NOTE: Be sure to always save your changes. Dragging items and deleting them will not take effect unless you click the save button after making the changes.

Specialty Links:

You can add several special types of links to tap into built in functionality of the theme.

Image icons for menu links - To add an icon to a menu item, you must do two things. First you need to have the image defined in your style sheet. For an example of this open the default style sheet "style-default.css" and find this section (line 377):

/* icons for menu items */

.mmLogin	{ background: url(...bullet-lock.png)...
.mmFeeds	{ background: url(...bullet-feed.png)...
.mmRSS		{ background: url(...icons/feed.png)...
.mmFacebook	{ background: url(...icons/facebook.png)...
.mmTwitter	{ background: url(.../icons/twitter2.png)...

Create your own entry by copying an existing one and giving it a custom class name. After you have this entry, add the new image you entered the path for to the location you specified. Next, from the menu manager, add a <span> tag around your menu item title resembling the following:

<span class="mmFeeds">Feeds</span>

Where the "Feeds" text is your menu item text and "mmFeeds" class is the class of your custom menu icon class created in the style sheet.

Login pages, top slide and pop-ups

You can add links that activate the custom login pop-up or the slide open top area. Include the path to the page you want to open and append one of the following to choose the function.

Pop-up Login (#login): To create a link that opens the login pop-up, select the link option for "URL" and enter the custom URL path as "/wp-content/themes/parallelus-unite/login.html#login". This path should be the path to your theme folder if the above is not correct.

Slide Open Top (#topReveal): To create a link that opens the slide top, select the link option for "URL" and enter the custom URL path as "#topReveal".

Any content as pop-up (#popup): You can optionally enter any URL for a link into a WordPress text editor or the menu and and append "#popup" to the link and it will open in a pop-up. This can be an internal or external path, for example "http://www.google.com#popup" will load Google in a popup window inside your page. This can be great for linking to maps or other informational content.

Slide show

The slide show menu allows you to add slides, sort the order they display and the transition effect used for each image. If images don't display you should check the paths, if they seem correct, try using a full path with your entire URL including the "http://domain.com" in the path. If you can enter that path into your browser and see the image it should also display in the slide show area.

Slide show links can be added so clicking a slide will direct the visitor to a page or website. This feature only works with the default "Cycle" slide show and not the "Gallery View". Links URL's are ignored if you choose "Gallery View" as your slide show.

NOTE: Be sure to always save changes. Dragging items and deleting slides will not take effect unless you click the save button after making the changes.

Sidebar

The sidebar menu controls what default features are shown in the side menu as well as customizing features like the built in categories, pages and recent posts functionality. You have the option to add widgets to this area in addition to these default features.

Portfolio Pages

Adding portfolio pages allows you to select any page on your site to display a portfolio from. You can have an unlimited number of portfolios. Click the "Add New Portfolio Page" button to create one. Select the page it should use from the public side to display portfolio items on and the categories to pull the items from. If you have content on the page it will also be displayed using a floating content block. The demo site uses the following HTML in the page content for the portfolio:

<h1 class="headline center" style="margin-bottom: 0;">Providing client services in <strong>web</strong>, <strong>print</strong> and <strong>multimedia</strong> design.</h1>

Contact Page

From here you can select the page to display your contact form on and the options for the "to" address, subject and even the thank you message shown after sending the email. The content from the page you select will also be showing on the contact page of your site so you can add extra details including a map, address, and phone numbers using the WordPress editor for the selected page.

---

Layout and Design Structure - top

Included with the theme is a copy of the HTML only version. This is provided to make it easier to build custom additions or modify the theme as you choose. It's easier to see the structure of the site in the original HTML files than from piecing together WordPress pages. Within the HTML pages is additional documentation about the theme. Below are links and references to these pages where you can learn more about the layout structures, text formatting and other features. If you want to access these files directly they are located in the "theme_admin/HTML-Version" folder.

Layouts - sample-layout.html

You will find examples of the different layouts and content configurations on this sample page.

Text - sample-text.html

This contains example code and sample outputs of all the common HTML tags used for content editing. Most of the text styling is already handled by WordPress, but in situations where you want to add a headline in the middle of a page, or create a sub-title, this information can be very useful.

Cufon - font replacement

This theme takes advantage of cufon font replacement for headings and other title elements. The font used for these elements is called "Liberation Sans". It is a free font and is available online.

Download "Liberation Sans"

Logo Fonts

The logos in the included skins use "Liberation Sans" as the font. This is a free font available online. The dark theme uses an alternate logo font, "Harabara", also a free font available online.

Download "Liberation Sans"
Download "Harabara"

Category Titles

When you create a post category you can optionally add a description. If the category has a description it will be displayed after the title in the format:

Category Title  //  Your category description...

Code Structure

This theme is a fixed-width design with pre-configured styles for creating layouts. The default content area is commented to make it easy to find. If you plan to modify any of the code files you will find the content areas designated with comments resembling the following:

<!-- Page Content -->

All code is properly indented to make it easier to read and edit. There are also comment markers as a guides to find the beginning and end of major sections such as the top, header, slide show, page content and footer. Each of these sections is labeled with the appropriate tags and has a corresponding ID tag of the main container for that section.

You should use the included sample files as templates for your own layouts. Be sure to backup a file before editing it, or create a copy and work from the new file.

---

CSS Files and Structure - top

There are several CSS files included with this theme, but only a few will be necessary for customization. The CSS files are all located in the root theme folder. The only exception to this is plugin specific style sheets which are located in a sub-folder named "css". Within that folder there are two sub-folders, "source" and "skins-originals".

The first sub-folder, "css/source", contains the original CSS files with formatted code and comments. Only a few files are in this folder, primarily these are the original CSS files for plugins being used in the design which establish the foundation styles allowing the plugging to function but not control appearance. If you do are working with a CSS file that is uncommented and you need the original, check this folder.

The second sub-folder, "css/skins-originals", contains a backup copy of the CSS skin files.

Primary CSS Files:

1. style-default.css - This is the foundation of the theme design and all skins. It controls the layout and design structure of the theme. Making modifications to this file will usually effect all skins unless it is a color or image related change. The skin files extend "style-default.css" to apply custom colors and graphics. Before you edit this file you should consider making a custom skin style sheet or editing the skin you are already using.
2. style-skin-#.css - The skin specific style sheets are named "style-skin-#.css", numbering 1-5. To change the skin, use the menu option under "General Settings >Choose a skin". This will switch between any of the 5 existing skins included with the theme. If you have created a custom skin, you can select the "Custom" option from this menu. In the text box that appears, type the name of your custom skin CSS file (omitting the ".css" file extension). For example, if you create a skin CSS file named "my-skin.css" you would save it in the theme folder and type "my-skin" in the custom name field.

Skinning the Theme

Each color style is controlled by a custom CSS file. These are located in the main theme folder "parallelus-unite". The images for each skin are saved in a folder in "images/skins/skin-123/" where "skin-123" is the name of your CSS file. To create a custom skin, duplicate on of the existing skin CSS files and edit it to match the desired styles. You can easily output the custom graphics for you skin using one of the "Theme Graphics - for skinning.PSD" files located in the "Design\Files for skinning" folded included with the theme.

After creating the skin CSS file and a matching images folder, you will need to save your custom skin images. Use the "Save for web..." feature of Photoshop and select "All user slices" to get the desired graphics. You can create a custom skin in a few minutes by modifying the background colors of the main shape layers of the supplied files. If you want to get more detailed and tweak the output you can edit the individual highlights and shadow features of the layers above the backgrounds. Play with the different layers to see what effect they have. The file was designed to allow easy and fast skinning.

IMPORTANT: If you are going to create a custom skin or do any advanced code editing, you will likely need to edit the JavaScript loading file, "js/onLoad.js" This file controls loading and executing of many dynamic JavaScript functions used in the theme.

To create a single skin for your site

The best way to go about creating your own skin, is by starting from one of the pre-made styles that come with the theme. An easy way to do this would be as follows:

1. First, create a copy of an existing style sheet from the theme folder "style-skin-#.css".
2. Create a duplicate of the same skin's images folder located in "images/skins/skin-#"
3. Give your new images folder the same name as the CSS file.
4. Open the "Theme Graphics - for skinning.psd" file in the "Design/Files for skinning" folder and modify the colors to create your desired graphics.
5. Output the graphics using "Save for web..." to the new skin's images folder. Choose "All user created slices" as the option for output method when asked.
6. Open the new CSS file for your skin. Do a find and replace for the path to your images folder, this would be something like, Find: "skin-5", Replace with: "my-skin", to update all occurrences of the image folder path. Save when finished.
7. Upload your new skin CSS file and images folder to the theme folder for "parallelus-unite" on your server.
8. Change the skin setting in the Theme Options to "Custom" and type the name of your skin file, "my-skin", omitting the ".css" file extension.
   
9. Save your settings and preview the new skin.
10. In the WordPress "Appearance > Editor" panel, open your new skin CSS file and begin editing the individual style properties to match the graphics you have created for your new skin.
11. Save and enjoy!

More about skinning this design

The sample pages included with this theme provide documentation relevant to each section. You may be able to find helpful information about the CSS styles and skinning of the design by viewing these samples.

Click here to open the sample pages

---

JavaScript - top

This theme imports several Javascript files. All located in the "js" folder.

1. Superfish - main menu
2. jQuery Cycle Plugin - slide show (default)
3. GalleryView - Optional alternate slide show
4. jQuery.ScrollTo - Scrolling effect for anchor tags
5. SuperSleight (PNG fix)
6. FancyBox - lightbox effect for portfolio and login form
7. jQuery Validation - form validation for contact page
8. cufon Font Replacement - for custom font replacement
9. clueTips - Mouse over tool tips
10. Overlabel - form input labels

---

PSD Files - top

Several design files are included with this theme:

1. Additional graphics - miscellaneous graphics used in design
2. Dialogs
   1. Login.psd - Login pop-up window
   2. Modal.psd - Modal for images and portfolio
3. Files for skinning
   1. "Theme Graphics - default.psd" - used to create default skin, not optimized
   2. "Theme Graphics - for skinning (dark).psd" - used to skin dark theme
   3. "Theme Graphics - for skinning.psd" - used for most skinning, start here.
   4. "Tooltip.psd" - Tool tips skinning.
4. Slideshow - custom files for creating graphics sized for slide show
5. Theme.psd - The main design (useful for mockups, but not sliced for output)

---

Sources and Credits - top

The following images, icons or other files have been used in this theme.

• Web social icons by ~NarjisNaqvi
• Monitor, slide projector and lock icons from Icon Finder
• Superfish
• jQuery Cycle Plugin
• GalleryView
• jQuery.ScrollTo
• SuperSleight (PNG fix)
• FancyBox
• jQuery Validation
• cufón
• clueTips
• Overlabel

---

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help if you have any questions . If you general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Thanks,
Parallelus (Andy Wilkerson)

---