“MiniFolio” Documentation by “Oussama Afellad - PremiumFreebies.eu” v1.0

---

“MiniFolio Premium Template”

---

Table of Contents

1. HTML Structure
2. CSS Files and Structure
3. Backgrounds (If you would like to change the website's background)
4. Sources and Credits

---

A) HTML Structure - top

1) HOMEPAGE Structure

This theme is a fixed layout with two columns. All of the information within the main content area in the homepage is nested within a div with an id of "page_content". The sidebar's (column #2) content is within a div with an id of "sidebar_home".

2) FULL WIDTH Page

Pages without a sidebar are simple. All of the content is nested within a div with an id of "fullwidth_content".

3) Other Pages

All of the information within the main content area in the homepage is nested within a div with an id of "page_content". The sidebar's (column #2) content is within a div with an id of "sidebar".

* Useful codes

List Style Text

If you would like to insert a list style text with a blue bullet next to it. Use this code:

	    <ul>
		<li><a href="#">Text 1</a></li>
		<li><a href="#">Text 2</a></li>
		<li><a href="#">Text 3</a></li>
		<li><a href="#">Text 4</a></li>
		<li><a href="#">Text 5</a></li>
	    </ul>

---

2 Text Blocks in The Page Content:

If you would like to insert 2 block texts, one floated to the left and the other to the right. Use this code:

	    For the Left block, use this code:

	<div class="left_section">
		<h3>Left Block</h3>
		<p>Write some text here</p>
		<div class="left_section_more"><a href="#">read more</a></div>
	</div>

And for the right block, use this code:

	<div class="right_section">
		<h3>Right Block</h3>
		<p>Write some text here</p>
		<div class="right_section_more"><a href="#">read more</a></div>
	</div>

---

Blockquotes:

If you would like to insert a text as a blockquote. Use this code:

	    <blockquote>
		Write your text here
	    </blockquote>

---

Testimonials:

If you would like to insert testimonials as a slider as it appears in the bottom of the homepage of the template. Use this code:

	    
	<div id="slider1" class="sliderwrapper">
		<div class="contentdiv">
			<div class="testimonial_box">
				<p>Write the first testimonial here ...</p>
					<div class="testimonial_details">
						<p>John Doe, Company name</p>
					</div>
			</div>
		</div>
		<div class="contentdiv">
			<div class="testimonial_box">
				<p>Write the second testimonial here ...</p>
					<div class="testimonial_details">
						<p>John Doe, Company name</p>
					</div>
			</div>
		</div>
		<div class="contentdiv">
			<div class="testimonial_box">
				<p>Write the third testimonial here ...</p>
					<div class="testimonial_details">
						<p>John Doe, Company name</p>
					</div>
			</div>
		</div>

		<div id="paginate-slider1" class="pagination"></div>
	</div>

Or if you would like to insert a normal testimonial text as it appears in the testimonials page, use this code:

	    
		<div class="testimonial_box_wide">
			<p>Write The testimonial here</p>
				<div class="testimonial_details_wide">
					<p>John Doe, Company name</p>
				</div>
		</div>

---

Slider:

To insert a jQuery slider, or edit the one in the homepage. Use this code:

	<div id="slider-wrapper">

		<div id="slider" class="nivoSlider">
			<img src="image url" alt="" title="This is an example of a caption" />
			<img src="image url" alt="" title="This is an example of a caption" />
			<img src="image url" alt="" title="This is an example of a caption" />
			<img src="image url" alt="" title="This is an example of a caption" />
		</div>

	</div>

As you can see, change the "image url" with the url of the image, and edit the title tag if you want to add a description to the image in the slider, if you don't want to, leave it blank or remove it

---

B) CSS Files and Structure - top

There are 4 css files in this template: nivo-slider.css / prettyphoto.css / style-ie.css / style.css. The important for us is style.css

This file contains all of the specific stylings for the page. The file is separated into sections using:

	/* === General Styles === */

	General styles codes ...

	/* === Main Container === */
	
	Main Container style codes ...
	
	/* === Slider Styles === */
	
	Slider style codes ...
	
	/* === Main Navigation === */
	
	Main Navigation style codes ...
	
	etc, etc. 

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.

---

C) Backgrounds - top

I've included few other backgrounds that you may use as a background of the template, that could be found in "Other Backgrounds" Folder. Pick the background you would like to use, change its name to "bg.gif" and copy it to /images folder. Overwrite the existing bg file and it should work for you.

---

D) Sources and Credits - top

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

• Slider Images from a template in ThemeForest called Captstan.
• Other images from royalty free stocks.
• Nivo-Slider by dev7studios
• Font replacement by "COM4t"

---

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.

Oussama - iStoreDesigns - PremiumFreebies

Go To Table of Contents

---