“Dark & Clean - Business / Portfolio” Documentation by “Ryan Furtner (furto)” v1.0

“Dark & Clean - Business / Portfolio”

Created: 2/1/2010
By: Ryan Furtner
Email: ryanfurtner@gmail.com

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!

Table of Contents

    Structure...
  1. HTML Structure
  2. CSS Files and Structure

    3. How to...
  3. How to change logo and details
  4. Changing the content of the 'featured' slider
  5. How to edit the sidebar and configure the twitter feed
  6. How to create and edit new content pages
  7. Embedding images, rounding the corners and wrapping the text
  8. Showing how to setup a table with and without TableSorter
  9. Heading tags, paragraphs, adding emphasis, making text bold, making text small and adding a blockquote
  10. Showing how to edit the portfolio page
  11. How to set up the single_portfolio.php
  12. How to set up the contact page

    13. Other...
  13. Photoshop files
  14. Sources and Credits

Please note:

Throughout the documentation I will be reffering to the .php version of the theme.

What does this mean?

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.

A) HTML Structure - top

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:

featured.php

This file contains all the HTML for the slider at the top of the page

footer.php

This file contains the closing tags for the wrap and alot of the included javascripts, this is also where you would put a Google Analytics script if you wanted to. This also includes the footer content which is pretty easy to change.

head.php

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.

sidebar.php

This is the sidebar, you can change the links for your navigation and add or remove the twitter widget here.

top.php

This is the very top section of each page containing the logo, basic contact info and the 4 buttons in the top right.

HTML Structure

B) CSS Files and Structure - top

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.

CSS Structure

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.

Conditional stylesheets

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.

How to change the included themes

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 simply watch this video!



OR

You can use the text version below

Change the logo

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)

Change the contact details

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

Details

Change the top button links

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.

Social buttons

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:



Notes:

Wrap each sidebar item in the class sidebar_item

Twitter username is in /js/custom_jQuery.js on line 78

Setting up twitter

F) How to create and edit new content pages - top



G) Embedding images, rounding the corners and wrapping the text - top



H) Showing how to setup a table with and without TableSorter - top



Add class of 'tablesorter' to 'table' tag

I) Heading tags, paragraphs, adding emphasis, making text bold, making text small and adding a blockquote. - top



J) Showing how to edit the portfolio page - top



Remember there are 2 columns for the portfolio page (portfolio_left & portfolio_right)

K) How to set up the single_portfolio.php - top



L) How to set up the contact page - top



M) Photoshop files - top

i) Next & Prev arrows

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.

ii) Rounded Image Corners

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.

iii) Twitter widget sprite

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.

iv) Logo template

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.

v) Rounded Div Corners

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

vi) Top social icon resize action

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

vii) Sidebar 'hover' bullet

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.

viii) Portfolio single frame

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.

ix) Portfolio single screenshot

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.

x) Dark 'n Clean

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!

xi) Footer

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.


N) Sources and Credits - top


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

Ryan Furtner

Go To Table of Contents