By: Ryan Furtner
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Throughout the documentation I will be reffering to the .php version of the theme.
The .php version of the theme makes use of the 'include' function which allows for easy management of the content that does not vary from page to page. For example rather than changing some of the content of the sidebar in every single page, you simply open sidebar.php and edit the HTML within, the changes will be reflected throughout the website. I highly reccommend using the php version of this theme.
This theme is a fixed layout. In the PHP version of this theme the 'site wide' content is in a folder in the root called 'content'. This contains 5 .php files:
This file contains all the HTML for the slider at the top of the page
This is the HTML between the 'head' tags, this is where you can change the title of your website. There are also some conditional stylesheets up there for Internet Explorer.
This is the sidebar, you can change the links for your navigation and add or remove the twitter widget here.
This is the very top section of each page containing the logo, basic contact info and the 4 buttons in the top right.
The main style sheet for this theme is called style.css and is in the root of the theme
The different sections of the stylesheet are separated by comments, shown below.
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
Note: there are 2 style sheets named ie6.css and ie7.css, these are conditional style sheets for Internet explorer 6 and 7. Unfortunately there were a few little layout issues that have been resolved through the use of these and as a result the design is compatible in IE 6, 7 and 8.
There are 3 included themes which are kept in the 'themes' folder. To show how to change the themes I have included a short video.
You can use the text version below
To use your own logo you can open the included photoshop file (logo-trans.psd) and replace the example logo with your own. Then save this image without a background (white and grey checked background) and save it as a transparent .png with the file name logo-trans.png (the -trans is important!) and put this in the /images folder of the theme package. (overwrite existing image)
To change the contact details you must open top.php in a text editor of your choice or html editing software and change the details. They are located on line 5 & 6 by default and are shown below
As shown in the picture below there are 4 buttons by default and changing the links involves changing the values inside the href="link goes here" tags.
There are some slight differences here to the final version you will be using, nothing too major.
To change the content of the featured slider you will need to open and edit 'featured.php' in the 'content' folder.
I thought this would be MUCH easier to understand through yet another awesome video:
The video below should pretty much show how to set up the sidebar:
Wrap each sidebar item in the class sidebar_item
Twitter username is in /js/custom_jQuery.js on line 78
Add class of 'tablesorter' to 'table' tag
Remember there are 2 columns for the portfolio page (portfolio_left & portfolio_right)
This file contains 2 images which are already sliced up. All you need to do is choose 'Save for web & devices' from the File menu and save as a PNG-24 with transparency. When saved the file names will automatically be given and these will be the appropriate file names for the theme, simply put these 2 images into the /images/ folder.
These 2 images are used for the left/right navigation through the featured slider.
This file contains 4 images which are already sliced up. All you need to do is choose 'Save for web & devices' from the File menu and save as a PNG-24 with transparency. When saved the file names will automatically be given and these will be the appropriate file names for the theme, simply put these 4 images into the /images/ folder.
These 4 images are used to round the corners of any images you may use.
This file contains one image, no slicing. To make make changes and save, all you need to do is choose 'Save for web & devices' from the File menu and save as a High-Very high quality JPEG. File name will be taken care of if you use this method.
This image is a sprite used for the twitter widget.
This file contains the demo logo, it is provided as a template for you to fit your logo into. After you have put your logo in make sure the background layer is off ensuring transparency and choose 'Save for web & devices' from the File menu and save as a PNG-24 with transparency. The file name will be handled automatically.
This file contains 6 images, the top and bottom rounded corners for the featured, content and sidebar div's. I have put all of these into one file and sliced them up so you can make changes to the color and save them all at the same time. To do this choose'Save for web & devices' from the File menu and save as a PNG-24 with transparency. Select the slices and save Images only, this will give you 6 images which are already named appropriately to suit the theme, simply put these new files into the image folder and overwrite the existing ones.
Note: It doesnt matter what photoshop tries to save it as, they WILL have the right file names
This file is an action that, once installed, will allow you to run the action and resize the matte white social icons to the perfect size for use at the top of the page. I am not going to teach you how to use actions though, so google it!
You can see all of the lovely icons here Matte white social icons
This file is one single tiny little image used for the arrow bullet when a sidebar link is hovered.It is included incase you ever wanted to change the background color. Just choose 'Save for web & devices' from the File menu and save as a PNG-24 with transparency. The file name will be handled automatically.
This file contains one image which is used as a frame for the portfolio single page. This is included incas eyou want to change the background color. To save this, choose 'Save for web & devices' from the File menu and save as a PNG-24, transparency is not needed.
This is just a guide as to the size you should use for the single portfolio screenshot. You can save this as whatever you would like! And incase you were wondering, its 554px * 277px.
This is the big one, the psd for the entire website. But, I did not really even use this. I did a lot of the work in separate files for some reason and then updated this file to represent the changes. I thought I would include it anyway!
This is the image used for the footer image at the bottom of the page. To save this choose 'Save for web & devices' from the File menu and save as a PNG-24 with transparency. The file name will be handled automatically.
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.
Also thanks for putting up with my epic video voice... sorry :P