“Short & Simple” Documentation by “Hayley Crook (dtbaker)” v1.0


“Short & Simple”

Created: 21/6/2010
By: Hayley Crook
Email: themeforest@blueteddy.com.au

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

  1. File Structure
  2. HTML Structure
  3. CSS Files and Structure
  4. Special Font
  5. Tool Tips
  6. Sliding contact panel
  7. Site Map PHP
  8. Search Tool
  9. PSD Files
  10. Sources and Credits

A) File Structure -

/CSS styles.css is the stylesheet that contains all the layout and content CSS.
/images The images used in the constructed website
/js pngfix.js: The javascript files used for displaying PNGs in IE6
jquery-1.2.1.js: The jQuery library, required for the lightbox and other animations
jquery.tools.min.js The jQuery for displaying the tool tips popup
/phpsearch_files This folder contains everything required for the php website search tool to work
blog.html Sample layout for a blog or news article
company_profile.html Sample layout for a company overview and staff profiles
contact.html Design for the contact page including contact form
formsubmit.php The file that processes the contact form and emails you.
formsubmit_call_back.php The file that processes the side call back form and emails you.
formsubmit_error.php A shared error page that all forms use when the form is not filled out corretly, just plain HTML nothing special.
formsubmit_newsletter.php The file that processes the newsletter form and emails you.
index.html The template for the home page
search.html A dynamic page that controls the "search" box and search results on your website.
services.html A sample layout for a services page.
sitemap.php A dynamic page that automatically shows all the pages in your website.
thankyou.html The page displayed after the contact form is submitted

B) HTML Structure: - top

This theme is a fixed width & height layout with two columns. All of the information within the main content area is nested within a div with an id of "#right_column". The sidebar's content is within a div with an id of "#left_column".

The #left_column can stay the same throughout the website or add new content for each page.

The div of #wrapper holds the rest of the website and centers it on the page.

- Logo:
The current logo size is 223px wide by 56 pixels high.
If you would like to resize the logo, open the index.html and change the width & height to match your new image dimensions.
You also need to update the "styles.css" file. Change #logo to match your new image dimensions.

- Background Change:
This theme comes with 17 tiling background options, to change the background image open the css/styles.css file and go to body{ and change the background-image:url(../images/bg_grey_gradient.jpg); to your prefered background. All the background options are located in images/.

- Turn off the scrolling and let the website grow:

Open css/styles.css and go to #right_column.
Now delete these 3 styles:
overflow-y:auto;
overflow-x:hidden;
height:300px;

- Menu Change:
The menu is built using a list styled with css. To change the names of the buttons simply edit what is in the <li></li>.
For example: change Home to what you want to appear on the button, change the link from index.html to the file name of the page you are linking to.

<li><a href="index.html">Home</a></li>

- To add a new button simply add a new <li></li> like this:

<li><a href="index.html">Home</a></li>
<li><a href="our_files.html">Our Files</a></li>
<li><a href="newlink.html">New Link</a></li>

- To change the font, color, size of the menu:
Open the "Styles.css" file
The styling is all done through the link on each button: ul#navigation a {

You will find the following styles,

ul#navigation a {
float:left; /*makes the text sit beside each other not down the page*/
color:#635e5e; /*menu color normal*/
padding:12px 13px 10px 13px; /*space around and inbetween the buttons, top, right, bottom, left*/
text-decoration:none; /*no underline*/
text-transform:uppercase; /*all in capitals*/
font:14px 'Droid Sans', arial, serif; /*menu text size and font*/
letter-spacing:1px; /*space out the letters, remove if you want it normal*/
background-image:url(../images/menu_divider.gif); /*the bar between each button*/
background-position:right center;
background-repeat:no-repeat;
}

ul#navigation li.hover a,
ul#navigation li:hover a,
ul#navigation a.active,
ul#navigation a:hover {
color:#000000; /*color of text on mouse over*/
}

C) CSS - top

The CSS for this template is all in one file named styles.css. Each section of the website is separated by a comment in this order:

/*Template Layout*/ This has the body, link colors
/* menu*/ the main menu across the top of the website
/*search*/ All the styles that control the search box on the menu bar
/*main content*/ The padding for the main text area, left & right columns
/*footer*/ Text at the very bottom of the website containing the copyright.
/* General Content*/ Headings, horizontal rules
/*home */ The styles for the home page
/* newsletter form */ The styles for the newsletter form on the left side
/*proposal*/ Request a proposal button
/*our clients*/ CSS for laying out the our clients logos
/*home blog*/ the blog section on the home page
/* tooltip styling */ This css controls the hover tool tip on the our clients section
/*services*/ The services page styles, including a list style on the left
/*side slider used on the call back button*/ Call back button styles and the content within it
/*company*/ Company page layout
/*blog*/ Blog page layout
/*case study*/ Case study page
/*Contact Page*/ Contact form and layout for phone numbers

The site structure is pretty straight forward, comments are throughout the CSS file to help you know what each part does.

The main sections of the design are in an id="wrapper", this holds the site together and centers it on the page.
The id="header" includes the logo and phone number.

D) Special Fonts - top

You will notice the menu and titles on the website uses a non-standard font called "Droid Sans". I am using the Google Font API to display this custom font on the website. More details here: http://code.google.com/webfonts

E) Tool Tips- top

The "Our Clients" part of the website has a custom popup when you hold your mouse over a logo. This is created with some jQuery and CSS from this website: http://flowplayer.org/tools/tooltip/index.html

The tool tips work like this, first there is a Class of "tooltip_button" that is placed on the link you want people to hover over, in this case it is a link around a image. The second part is the <div class="tooltip"> inside this div you can place what ever you like, images, links or just plain text. The background that loads behind your tool tip can also be edited, save any shape you like as a PNG 24 and it will work. Also save a .gif for older browsers.

<li> <a href="#" class="tooltip_button"><img src="images/client1.jpg" width="68" height="42" alt="1" /></a>
<!--start popup for client 1-->
<div class="tooltip">
<div class="text"> <span class="title"> Client Company Name</span>
<p> Ut rutrum ipsum felis laoreet neque. Nullam suscipit dictum neque ut consectetur. Vivamus mattis ornare fermentum. Aenean arc.<br />
<a href="#">www.mapleleaf.com</a></p>
</div>
<div class="icon"> <img src="images/client1_med.jpg" alt="Client 1"/> </div>
</div>
<!--end popup for client 1-->

F) Sliding contact panel- top

The sliding contact panel located on the left side of the screen was created using a tutorial by Spyrestudios.

The HTML code for the panel and button is found right down the bottom of every HTML page. The css is under a class of .panel inside this div you can place what ever you like, images, links or just plain text. The actual button you click is controlled by a.trigger this can be text or an image.

G) Site Map - top

A PHP site map has been included, this page automatically displays every page in your website as a list. It's great for search engines and helps users navigate your website. On line 66 type the extensions you want to display, like .html or .htm or .php, this only supports 1 type of file extension.

You need to replace the header design on the page up to <!--start site map code--> and insert the footer after <!--end site map code-->

H) Search Tool - top

The search engine used in this website theme is http://codecanyon.net/item/php-search-engine/89499?ref=dtbaker you can read the comments, features, and try the stand alone version of the search tool there. You can also ask any search tool specific questions on that item, rather than on the theme page.

The search tool requires PHP5 on a Linux hosting account with cURL enabled and no safe mode (majority of hosting accounts should be fine). I have not tested and I cannot guarantee it will work on other hosting accounts (example: windows server/IIS).

To manage the search tool, go to http://www.yourwebsite.com/phpsearch_files/admin.php and follow the settings. The defaults should be fine for most people.

I) PSD Files - top

I've included 3 photoshop files with this theme:

  1. Home Sliced - The main layout, including slices to help you build it.
  2. Company - a few extra layout parts
  3. Contact - Form & contact information

The photoshop files contains clearly named folders for each part of the website.

How to edit & replace images:
The Photoshop documents have the slices required to build the layout. Pay special attention to the images that are saved as PNG, these ones need to be transparent and have nothing behind them when you save.

  1. First simply make the changes in photoshop
  2. Turn on the slices (view > show > slices) they appear as blue boxes
  3. Some slice boxes overlap, you can move slices into the background or bring them to the foreground using the slice options in the top left of the tool bar.
  4. You may need to hide some of the backgrounds and text when saving certain images. Use the existing images as a guide.
  5. To export the images go to: File > Save for Web, click on the slice you want to export and click save at the bottom of the screen, all the correct image settings will already be there, overwrite the originals in the images folder. 

J) Sources and Credits - top

I've used the following images, icons or other files as listed.

Fonts:

Icons:

Photos/Backgrounds:

Black Squares Blue Squares Brown Grunge Gold Squares
Green Wash Navy 1 Navy 2 Navy 3
Orange Stripes Orange Squares Pink Squares Purple Bubbles
Space Sunset White Lights Grey Wood

 


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.

dtbaker

Go To Table of Contents