Help Document

INTRODUCTION

Thanks for purchasing this theme, called BOSSPRESS. This is a site template especially designed for personal portfolios and corporates. Please feel free to contact via themeforest if you have any question or problem about this theme. Just be sure about you read all the document before you ask. Its easy to setup, follow the steps below. Have a good works, thanks one more time! And please don't forget to vote :) Cheers!

GENERAL HTML STRUCTURE AND FILES

1) TEMPLATE FILES

index.htm - Homepage
page.htm - Detail page with sidebar
page-full-width.htm - Detail page without sidebar
post-list.htm - List page, for listing news or blog posts.
post-detail.htm - Post detail page, with comments part and general header.
gallery.htm - Gallery template for work / portfolio listing.

2) GENERAL HTML STRUCTURE

This template is a fixed layout with two columns. All of the information within the main content area is nested within a div with an class of "content". The sidebar's content is within a div with an class of "sidebar". Here is the general structure.

HEADER AND INCLUDES

1) INCLUDES

style
css/001.css - Main css file
css/002.css - The css file to change the theme to black version
css/prettyPhoto.css - Pretty Photo's main css file

javascripts
js/jquery-1.3.2.min.js - Jquery 1.3.2
js/jquery.innerfade.js - Script for homepage showcase fade effect
js/jquery.inputs.js - Search input, onclick change script
js/jquery.prettyPhoto.js - Pretty Photo's main javascript file
js/functions.js - Main javascript file containing all javascript codes

2) META TAGS & SHORTCUT ICON

Please don't forget to full content of the meta tags and your shorcut icon's url for everypage. All contains in <head>...</head> tags for everypage.

NAVIGATION & LOGOS

1) HEADER LOGO

Your header logo is located as images/001/logo.png in BOSSPRESS theme folder, and it's 215 x 15 px. If you would like to change the size, it's set in css/001.css file, line 128. Create your own *.png logo then change the width and height as you need.

2) FOOTER LOGO

Footer logo is located as images/001/logo-footer.gif in BOSSPRESS theme folder (images/001 for white theme, images/002 for the black theme), and it's 175 x 15 px. Create your own 175px width logo and replace it with it.

3) NAVIGATION (MENU)

You need to create your links in nav classed div, as an list item. See the general navigation structure below;

SIDEBAR / RIGHT COLUMN

Sidebar (right column) is the part which you can put your html widgets and content. It's not appearing on index.htm (homepage) and page-full-width.htm (full width page) templates. See the general html structure of sidebar below;

You need to repeat the code below to create the widgets linke on the preview. Replace your own content with the bold parts.

<div class="widget clearfix">
	<h3>Easy to modify blocks!</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id nibh lacus, id blandit mauris.</p>
</div>

NOTICE : Add sublist class to the ul tag to create two column list. See the example below;

<div class="widget clearfix">
	<h3>Links</h3>
	<ul class="sublist">
		<li><a href="#">Freebies</a></li>
		<li><a href="#">Category Names</a></li>
		<li><a href="#">Graphic Design</a></li>
		<li><a href="#">Akay Akagunduz</a></li>
	</ul>
</div>

TEMPLATE - index.htm

1) SHOWCASE

This is the part which you can promote your works, news, pages etc. and you can link every item to any page or post. You can see the general look below;

You need to repeat every list item below in ul tags to create the showcase. At least, you should create 2 items. Replace the bold parts as you need while you are replacing.

<li style="background:#b1a99e;"><a href="post-detail.htm"><img src="images/content/business_psd_sc.jpg" alt="Lorem Ipsum" /></a></li>

To modify speed and timeout of the fading effect, you need to modify the bold parts below as you need. Don't forget that 1000 means, 1 second; 3000 means 3 seconds.

$('.slider ul').innerfade({
	speed: 1000,
	timeout: 3000,
	type: 'sequence',
	containerheight: $('.slider').height()
});

NOTICE : Homepage slider (showcase) images should be smaller than 3000px width and 450px height. And please be sure about that, you saved your images by using Save for Web option, for lower file size.

2) COLUMNS

There are 3 colmuns on homepage. First columns is for blog / news listing, second is for welcome message, and the third one is for your current work. You see the general column structure below;

NOTICE : There is a class, named home in body tag on homepage only, please don't remove it.

TEMPLATE - page.htm

Place your page header into h1 tags, and your page content into post classed div. You can use other headings like h2, h3 in the page content. See the page general structure below;

TEMPLATE - page-full-width.htm

Same template with page.htm but without sidebar. Place your page header into h1 tags, and your page content into post classed div. You can use other headings like h2, h3 in the page content. See the page general structure below;

TEMPLATE - post-list.htm

This is the template which you can list your news or blogs. See the general structure below;

You need to repeat the code below to create new item. Don't forget to replace your own content with the bold texts.

<div class="post">
	<div class="head clearfix">
		<h2><a href="post-detail.htm">Item Header</a></h2>
		
		<div class="info">
			<p class="date">Date</p>
			<p class="categories"><a href="cat-1-link">Category-1</a>, <a href="cat-2-link">Category-2</a></p>
		</div>
	</div>
	
	<p>Item Content</p>
	<p><a class="more-link" href="post-detail.htm">READ MORE</a></p>
</div>

Also you can use paging div in this template, modify and place the code below into your template;

<div class="paging clearfix">
	<p class="previous"><a href="previous-link">PREVIOUS PAGE</a></p>
	<p class="next"><a href="next-link">NEXT PAGE</a></p>
</div>

TEMPLATE - post-detail.htm

1) GENERAL INFORMATION

This is the page template which you can show your post / news detail. See the general structure below;

In the detail of the posts, use maximum 610px width images.

2) USING LIGHTBOX (prettyPhoto)

There is a cool lightbox script included to BOSSPRESS template. You can show your images, flash objects, youtube videos in a lightbox frame. Just add a prettyPhoto as a rel tag to your links. Click here to see the details about prettyPhoto script.

3) COMMENTS

You can use comments template in this file. It should become after post items. See the general structure below;

You need to repeat the code below in ol tags, to create comment list.

<li class="comment">
	<div class="comment-body">
		<div class="comment-author vcard">
			<img alt="Lorem Ipsum" src="images/avatar.gif" class="avatar avatar-64 photo" height="64" width="64" />
			<cite class="fn">username</cite> <span class="says">says:</span>
		</div>
		<div class="comment-meta commentmetadata">
			<a href="#">Date</a>
		</div>
		<p>Comment Content</p>
		<div class="reply"></div>
	</div>
</li>

Replace the bold parts and use the code below to show the comment form;

<div id="respond">
	<form action="post-link" method="post" id="commentform">
		<p><label for="author"><small>Name </small></label>
		<input type="text" name="author" id="author" value="" size="22" tabindex="1" /></p>
		
		<p><label for="email"><small>Mail </small></label>
		<input type="text" name="email" id="email" value="" size="22" tabindex="2" /></p>
		
		<p><label for="url"><small>Website </small></label>
		<input type="text" name="url" id="url" value="" size="22" tabindex="3" /></p>
		
		<p class="comment-textarea"><label for="comment"><small>Comment</small></label>
		<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
		
		<input name="submit" type="submit" id="submit" tabindex="5" value="" /></p>
	</form>
</div>

TEMPLATE - gallery.htm

This is the gallery template which you can list your works or portfolio. You need to replace the bold parts and repeat the code below to create items.

NOTICE : Every item image should be 290 x 190 pixels sized.

<div class="item">
	<div class="info">
		<h3><a href="detail-link">Item Header</a></h3>
		<p class="date">Date | <a href="category-1-link">Category 1</a>, <a href="category-2-link">Category 2</a></p>
	</div>
	
	<div class="image">
		<p class="pattern"> </p>
		<p><a href="detail-link"><img src="images/bosspress.jpg" alt="Lorem Ipsum" /></a></p>
	</div>
</div>

NOTICE : You need to add last class to every second item. See the bold part below;

<div class="item last">
	<div class="info">
		<h3><a href="detail-link">Item Header</a></h3>
		<p class="date">Date | <a href="category-1-link">Category 1</a>, <a href="category-2-link">Category 2</a></p>
	</div>
	
	<div class="image">
		<p class="pattern"> </p>
		<p><a href="detail-link"><img src="images/bosspress.jpg" alt="Lorem Ipsum" /></a></p>
	</div>
</div>

BOSSPRESS

SITE TEMPLATE | CURRENT VERSION 1.0