Created: March 4, 2010
By: Parallelus (Andy Wilkerson)
Thank you for purchasing my theme. I hope you are happy with my work. I always welcome feedback and suggestions so don't hesitate to leave me comments. If you have questions not answered in this document, please email me using my user page contact form. The files included with this theme have detailed comments throughout the code to help you update and modify it for your needs. If you are happy with the theme, please take a moment to rate it on the ThemeForest website.
Thank you,
Andy Wilkerson
This theme is designed for use with WordPress 2.7 or higher. The code was written to be backwards compatible where possible, however it is recommended you use version 3.0.1 or higher. If you are not using WordPress 3.0.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 sidebar, header, showcase, home page, blog posts, pages and footer. 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" skin option. There is more information about using custom skins with the theme in the "Skinning the Theme" 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 for errors. If you do find a problem please notify us immediately through the ThemeForest account page so we can ensure it gets fixed as quickly as possible.
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 an FTP client.
This process varies slightly between different versions of WordPress. The instructions below are based on WordPress 3+. If using an older version the basic steps should be the same, although the button names and placement may be different.
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.
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
My images are not showing but I can see the placeholder images.
If you have already completed the steps above to verify your server settings and requirements are not a problem, you my have a problem with image locations or the path. If you can see the placeholder images, but not your own images, you probably have the wrong path to your images. Copy the URL you entered for your image and paste it into the browser address bar. If you don't see your image the path is wrong. Check the path and make sure an image exists in that location. Once you find the working image URL update the image path.
If the path to the image works when pasted into the browser, try going directly to the TimThumb file without an image. You should get a message that no image was specified. If you don't get this message or you get a 404 error page, the TimThumb file is missing, or does not have permissions to run on the server, or one of the requirements (PHP-5 and GD-Library) is not working properly. Contact your host to verfiy these items.
Some of my images don't work.
If you see some images and not others, the problem is mostlikely the image path. Paste it into your browser to test if the image appears. If not, check the path and update it. If you see the image, it could be a permissions issue. TimThumb cannot resize images from other sites so your images must be hosted on the same domain when using TimThumb.
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:
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.
- Skins
- Choose a skin (skin information)
- Logo
- Main Logo
- Blog Post Settings
- Show Post Date
- Show Author Name
- Tool Tips
- Show Tool Tips
- Tool Tip ALL Links
- Other Add-on Functionality
- Ribbon Scroll Effect
- Anchor Tag Scrolling
- Miscellaneous
- Favorites Icon
- Append to Browser Title
- Placeholder Images
- Font Replacement
- Show Breadcrumbs
- Copyright / Legal
- 404 Error
- Google Analytic
The home page section allows you to configure the number of featured posts, blog posts and other content on the home page.
Showcase
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.'
Home Page Sidebar
The home page has a pre-set sidebar that already exists in the Widgets area, "Homepage Sidebar". This is the area where you should add widgets for the home page.
THIS THEME OPTION WILL ONLY EXIST FOR WORDPRESS 2.9 AND EARLIER. FOR INSTALLS USING WORDPRESS 3.0 OR LATER YOU WILL CONTROL THE MAIN MENU FROM THE DEFAULT WORDPRESS ADMIN: "APPEARANCE > MENUS". VERSION EXCEPTIONS TO THE CONTENT BELOW HAVE BEEN NOTED WHERE NECESSARY.
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. (WP 2.9 installs only: 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.
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.
Create custom sidebars. Click "Add New Sidebar", enter a unique name and save. Each sidebar will be shown in the Widget area of your admin to add widgets and content to the sidebar.
To assign a sidebar to a page or post, in the edit view of your content, select the sidebar from the drop down menu in the custom theme options beneath the default content editor and save. You can assign a sidebar to multiple pages and posts to share a single custom sidebar or use a custom sidebar for each.
The home page has a pre-set sidebar that already exists in the Widgets area, "Homepage Sidebar". This is the area where you should add widgets for the home page.
Adding blog pages allows you to select any page on your site to display a blog. You can have an unlimited number of blogs. Click the "Add New Blog" button to create a new blog. Select the page it should use to display your blog posts on. Select the categories to pull posts from. If you have content on the page selected to host your blog posts, the content will be displayed before the posts at the very top of the page.
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>
This is where you set the options for the "to" address, "subject" and "thank you" message shown after sending the email. Entering information on this page only sets the default values. You can still customize these options for each instance fo the contact form.
To add the contact form to a page, past the shortcode "[contact_form]" on a page and it will generate a form with the default values.
To customize the options use the long format of the shortcode (all options are options):
[contact_form to="me@email.com" subject="Subject" thankyou="Thanks."]
- to : Your email address to deliver the message
- subject : The message subject
- thankyou : A thank you message displayed after the form is sent
There is a built-in button on the WordPress text editor that includes a form to create this shorcode and insert it into your page for you. Click the button with the two forward slashes "//" on the editor and select the "Contact Form" tab.
Only one form can be added per page. The form will produce errors if multilple instances are added to the same page or post.
The theme includes custom content settings for pages, posts, widgets and shortcodes that can be used to produce custom formatting and special functionality on your pages.
When creating a new page or editing an existing one you will have a series of custom theme options beneath the default WordPress editor. Those settings enable custom page content and styles to be easily set on a per page basis.
- Custom Sidebar
Select the custom sidebar that you'd like to be displayed on this post.
Note: you will need to first create a custom sidebar in your themes option panel before it will show up here.
- Disable Breadcrumbs
You can disable breadcrumbs for individual posts and pages or turn them off globally by disabling the setting in the theme's "General Options" menu.
- Custom Sub-Title
Add a custom sub-title and it will override the default provided by a post category or other settings.
When creating a new post or editing an existing one you will have a series of custom theme options beneath the default WordPress editor. Those settings enable custom content and styles to be easily set on a per post basis. The posts have the same options as the pages with the addition of the following options as well:
Post Images
- Main Image or Video
The default image or video associated with your post (full size image). From your portfolio pages this is the image or video shown in the lightbox window.
- Medium Image
This is the medium size image used for portfolio item previews. If you have added a "Main Image" this field is optional. Images only. Recommended size: 261px * 174px.
- Small Image
This image is used on the home page for "Featured Posts". If you have added a "Main Image" or "Medium Size Image" this field is optional. Images only. Recommended size: 148px * 78px.
- Blog Header Image
This is the image shown in category lists blog posts. If you have added a "Main Image" this field is optional. Images only. Recommended size: 556px * 133px.
A set of custom widgets have been created to accompany the theme. These can be setup with your information and added to any sidebar of your choosing. To access these widgets go to the "Appearance > Widgets" menu.
Sub Navigation
Displays a menu of sub-pages to the current page.
Categories
Displays a theme styled list of categories.
Archives
Displays a theme styled list of archives..
Quote
Theme styled quote or testimonial.
Recent Posts
Theme styled recent posts with optional preview image.
Popular Posts
Theme styled popular posts with optional preview image.
Show recent tweets from a Twitter account.
Flickr
Show images from a Flickr account.
A collection of shortcodes has been added to the theme for quick content formatting and theme specific functionality with little configuration. You can quickly insert shortcodes using the custom editor button on the WordPress editor represented by to forward slashes "//".
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.
NOTE: For samples of shortcode layouts and usage please refer to the WordPress demo site:
http://para.llel.us/themes/unite-wpText - 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.
NOTE: If you are experiencing problems or want to disable Cufon, you can do this from the theme options"General Options > Miscellaneous > Font Replacement" menu.
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...
Skins and Design
There are several pre-made skins included with the theme. For detailed information on creating custom skins or using a single skin please refer to the "Skinning the Theme" section of this document.
Note: Although every effort has been made to ensure the theme is bug free and easy to use, if you encounter a problem please notify me immediately through my ThemeForest account page so I can ensure it gets fixed as quickly as possible.
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 folder, "css/source", contains the original CSS files with formatted code and comments. Only a few files are in this folder. These files might include the original CSS files for add-on scripts used in the design. If you find a CSS file that is uncommented and you need the original, check this folder.
The second folder, "css/skins-originals", contains a backup copy of the CSS skin files.
style-default.css (required)
This file provides the foundation for the site 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 act as an extension of "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 one you are already using for your design.
style-skin-#.css
These are the skin specific style sheets. These files are named numerically in a format such as, "skin-#.css". 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.
Each color style, "skin", is controlled by a custom CSS file. These are located in the theme folder "parallelus-unite". The images for each skin are saved in a folder under "images/skins/skin-123/" where "skin-123" is the name of your CSS file. To create a custom skin, duplicate an existing skin CSS files and edit it as desired. 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, save your images to this new folder. 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 layers in this file. If you want to get more detailed and tweak the output you can edit the individual colors, highlights, borders and shadows of the layers above the background. Taking some time to play with the different layers to see what effect they have can be very helpful in the beginning. This file was designed to allow easy and fast skinning but also alows you to control the detials of each graphic element output for the design.
IMPORTANT: If you are going to create a custom skin or do any advanced code editing, you may 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 edit the file, you should use the source located in "js/source/onLoad.js"
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:
The custom button styles will automatically apply to any <button> or <input type="[submit or button]"> on your page. In some situations you may need a button not to have these styles to preserve special functionality. You can add the class "noStyle" to any button and it will be ignored by the button styling function.
<button class="noStyle">Do Not Style This Button</button>
You can add several special types of links to tap into built in functionality of the theme.
Content Pop-ups
You can add links that activate the custom pop-up modal window. Include the path to the page you want to open and append the following:
Any content as pop-up (class="zoom iframe"): You can enter any URL and add the class "zoom" and "iframe" and it will open in a pop-up. This can be an internal or external path, for example:
<a href="http://www.google.com" class="zoom iframe">Google</a>
For image pop-up only the class "zoom" should be applied.
Pop-up shortcut (#popup)
You can add the same pop-up functionality to a link by appending "#popup" to the url, for example:
<a href="http://www.google.com#popup">Google</a>
This can be useful for linking to maps or other informational content.
Slide Open Top (#topReveal)
To create a link that reveals the slide open top area, enter the URL path as "#topReveal". For example:
<a href="#topReveal">Slide Open Top</a>
Image Pop-ups
You can open any image in a pop-up by including the URL for the image in a links HREF attribute and giving it the class "zoom" as demonstrated below:
<a href="http://mysite.com/myImage.jpg" class="zoom">View Image</a>
Video Pop-ups
You can open many web videos in a pop-up by including the URL for the video in a links HREF attribute and giving it the class "zoom" as demonstrated below:
<a href="http://www.youtube.com/watch?v=8iGRpC8U3x8" class="zoom"> Open Video Pop-up </a>
This theme imports several Javascript files. All located in the "js" folder.
Several design files are included with this theme:
The following images, icons or other files have been used in this theme.
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 or need assistance.
Thanks,
Parallelus (Andy Wilkerson)