Before setting up your site, you should decide whether you want a "Category-Style" site, or a "Non-Category-Style" site. However, you can switch between the 2 modes at any time.
What's the difference? The difference is what is displayed in the main menu. For example:
Notice that the menu simply is your portfolio categories. Set up this style site now.
Notice that all your portfolio items would be under the "portfolio" menu. After the "portfolio" menu item are the WordPress "Pages". Also, the small submenu at the top right is removed. Set up this style site now.
In wp-admin, under the "Appearance" section is an item called "Theme Options". Here you can customize much of this theme. It's broken down into the following sections:
Essential Information:
Here are some essential settings that must be set for the theme to work. The settings depend on whether you use a Category or Non-category style site. See above for what I mean.
Home Page:
Settings for logo name and position, and for hiding or showing the 3 columns of text under the Slider
Homepage Slider:
Customize the actions of the homepage Slider
About Me section:
Set a photo, title and text for the optional About Me section on the homepage, among other options.
Testimonials Section:
Essential settings if you want to have a Testimonials section.
Misc Section 1, 2, and 3:
Define custom text blocks that can go under the slider, or in the sidebar
Show/Hide Elements:
Show or hide parts of the site, like RSS icon, comments, and Gravatar.
It is recommended that you don't edit the style.css file directly. This is because if I release an update to the them, and if it includes an updated style.css, then when you overwrite your style.css with my updated one, all your changes will be lost.
Instead, use style_custom.css to add new styles, or to override the styles from style.css
The portfolio "Slider" uses the "cycle.js" jquery plugin. The behavior of the slider can be customized to slide either horizontally or vertically. And you can enable or disable the "bounce" effect which is enabled by default.
To customize the Slider behavior, go to the Theme Options. You'll see the following settings. The only option worth explaining is Slider Pause Length. A value of, say, 1000 would pause each slide 1 second. A value of 0 would effectively stop the "auto" slider, and the user would have to click the buttons to advance the slide.
This template comes with 2 PSD files:
homepage.psd: Homepage, with the slider
subpage.psd: for every other page in the site
You will most likely want to change the logo for your site. To do this, in either of the PSD files, find the "logo" folder in the "header" folder. Edit it, slice it, and save it as logo.png.
The following javascript files are used in this template, and are located in the /js folder:
jquery.js
Main javascript library
jquery.easing-1.1.js
Easing plugin for the front page slider
jquery.easing-1.3.js
Easing plugin for the front page thumbnail carousel (both Easing plugins must be used)
jquery.lightbox.js
jquery plugin for lightbox effect when you click on a slider image
jcarousel.js
jquery plugin for the thumbnail carousel in the slider
cycle.js
jquery plugin for the main slider, and testimonials slideshow
DD_belatedPNG.js
To make IE6 support full png transparency
style.css
Main style sheet
style_custom.css
Your own stylesheet for adding new styles or overriding styles found in style.css
ie6.css
To make IE6 behave
ie7.css
To make IE6 behave
jcarousel.css
CSS file for the jquery jcarousel plugin
jquery.lightbox-0.5.css
CSS file for the jquery lightbox plugin
reset.css
CSS file to reset all page element styles to nothing, so all browsers start from a clean slate
form.css
CSS to style the contact form
This theme is enabled for grabbing your most recent Tweets. In Theme Options, you can specify your Twitter User Name, how many tweets to show, and more. This is under the section called Twitter.
You can also enable a 'Follow Me' icon in the header. Again, in Theme Options, you specify the settings, as well as opting to not have a Follow Me icon. You can change the location of the Follow Me Twitter bird by changing the Top and Left properties of #followme in the style.css. Actually, don't edit the style.css directly. Add a new style to style_custom.css, and add something like this:
#followme {left:??px; top:??px;}
This should override the left and top settings from the style.css.
You can also change the Follow Me image. Just change the image, save it as twitter.png, and upload to the 'images' folder.
At a minimum you only need to upload one image for each portfolio item. This image should be at the largest size that you want it viewed. The theme will automatically size down the large image to fit the slider, thumbnails, and the image in the portfolio detail page. The images are resized down automatically through the "timthumb.php" file in the /scripts folder.
Images must be in a 3:2 ratio. If it's not, it may break the layout in the Slider. For example, the image could be 900x600, 600x400, etc. The smallest expected size is 520x345. The template will automatically size down the large image to fit the slider, thumbnails, and the image in the portfolio detail page. The original image size will be used when viewed in the jquery lightbox.
If your image is "portrait" sized (as opposed to landscape), by default the theme will squish it to fit in a 3:2 ratio space for the Slider and slider thumbnails. This obviously is not what you want. In this situation, you should upload 2 images:
When you create a "post", you would specify 2 "Custom Fields" at the bottom of the page. One called "Image", and another called "Image_Cropped". The theme will check if there an image is available under "Image_Cropped". If there is, then it will use that for the slider and slider thumbnail. If not, it will default to using the image from the "Image" Custom Field.
If you don't want to have an RSS feed, you can hide the RSS image from the header. At the bottom of the Theme Options, un-check the "Show RSS" checkbox.
By default, comments are enabled for portfolio items. You can disable it by turning them off at the bottom of the Theme Options page.
Note: Comments are at the bottom of the "detail" page for a portfolio item. If you have the detail page disabled (the "Read More" button is not shown in the Slider), then the comments will also not be shown.
Alternatively, you can disable comments on a post by post basis. This is a Wordpress feature, and the option is located at the bottom of each post page.
The first thing to check is the filename. If you upload using Wordpress, keep in mind that Wordpress puts images in subfolders related to the year and month. So if you upload an image in June 2009, it will put the image in uploads/2009/06/. So in your portfolio post, in the Custom Field called Image, you will need to enter something like 2009/06/filename.jpg. Alternatively, if you upload manually via FTP, and you put the images in the "uploads" folder, then all you need to do is specify the filename. For example: filename.jpg.
The second thing to consider is the use of the timthumb.php script. If the Slider images (including thumbnails) don't show, it could be from the "timthumb.php" script included in the theme. This script takes your original large image and resizes it down to fit in the Slider, Slider thumbnails, and the Detail page.
For timthumb.php to work, the "/scripts" folder and it's subfolder called "/scripts/cache" need to have permissions set to "777". This should already the case, but if it's not, here's how I do it.
I personally do this through my FTP program. Here is how I do it using the free Firefox browser plugin. If you don't use Firefox, first get it, then download and install the FireFTP plugin: http://fireftp.mozdev.org/
The Right Side of the window is your remote server files. Log into your server in FireFTP. Then in the right side, navigate to your Wordpress Theme on the server. Right-click on the /Scripts folder and select "Properties". In the "manual" textbox, type in 0777. Do the same thing for the "cache" subfolder.
The timthumb.php file does require your server to support PHP 5.0 or above, plus the GD Library. You most likely DO meet this requirement. If you do not meet these requirements, then you cannot enjoy the benefits of the script. You can turn off the script in the Theme Options. In Theme Options, under the "Slider" section, un-check the timthumb checkbox. With it unchecked, the web browser will take care of resizing the images. In most cases the images will look perfect.