radar_parlamentar/radar_parlamentar/templates/Documentation/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>“Circle” Theme Documentation by Nuruzzaman Sheikh (palpaldal) v0.9</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
<body>
<div class="container">
<h3 class="center alt">“Circle” Theme Documentation by “Nuruzzaman Sheikh (palpaldal)” v1.0</h3>
<hr>
<h1 class="center">“Circle”</h1>
<div class="borderTop">
<div class="span-6 colborder info prepend-1">
<p class="prepend-top">
<strong>
Created: 05/08/2012<br>
By: Nuruzzaman Sheikh (palpaldal)<br>
ThemeForest Profile: <a href="http://themeforest.net/user/palpaldal">palpaldal</a>
Email: <a href="mailto:palpaldal@yahoo.com">palpaldal@yahoo.com</a>
Homepage: <a href="http://palpaldal.com">palpaldal.com</a>
</strong>
</p>
</div><!-- end div .span-6 -->
<div class="span-12 last">
<p class="prepend-top append-0">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 <a href="http://themeforest.net/user/palpaldal">here</a>. Thanks so much!</p>
</div>
</div><!-- end div .borderTop -->
<hr>
<h4 style="font-family: Lora, Georgia, 'Times New Roman', Times, serif; font-size: 14px; font-weight: normal; font-style: italic; line-height: 1.6em; margin: 20px 0;">
Cirlce is a super cool HTML5 template designed and developed with industry standard you should get everything from it's source code. Every tags and sections are named appropriately so they are both symantic and following the best practicing coding standards. If you're comfortable enough with industry standard (I believe you are) then you may skip this document or skim it for few minutes.
</h4>
<hr>
<h2 id="toc" class="alt">Table of Contents</h2>
<ol class="alpha">
<li>
<a href="#htmlStructure">HTML Structure</a>
<ol>
<li><a href="#header">Header</a></li>
<li><a href="#content">Content</a></li>
<li><a href="#footer">Footer</a></li>
</ol>
</li>
<li>
<a href="#pagewise">Pagewise Guidelines</a>
<ol>
<li><a href="#homePage">Home Page</a></li>
<li><a href="#aboutPage">About Page</a></li>
<li><a href="#portfolioPage">Portfolio</a></li>
<li><a href="#blogPage">Blog List & Post Pages</a></li>
<li><a href="#contactPage">Contact Page</a></li>
<li><a href="#otherPages">Other Pages</a></li>
</ol>
</li>
<li><a href="#quickNotes">SOME QUICK SHORT NOTES</a></li>
<li>
<a href="#commonElements">Common Elements</a>
</li>
<li><a href="#cssFiles">CSS Files</a></li>
<li><a href="#jsFiles">JavaScript Files</a></li>
<li><a href="#psdFiles">PSD Files</a></li>
<li><a href="#changingColor">Changing Template Colors</a></li>
<li>
<a href="#others">Others</a>
<ol style="list-style: lower-alpha;">
<li><a href="#formValidation">Form Validation</a></li>
<li><a href="#fonts">Fonts</a></li>
</ol>
</li>
<li><a href="#credits">Sources and Credits</a></li>
</ol>
<hr>
<h2 id="htmlStructure"><big>A.</big> HTML Structure</h2>
<p>
<strong>"Circle"</strong> is a fixed width (980px) html template. It is marked-up using HTML5 standard tags and attributes but works so nicely with older browser such as IE7. It is vertically divided into three main parts, <strong>header</strong>, <strong>content</strong> and <strong>footer</strong>. In this section I'll cover all these three main sections and their common sub sections.
</p>
<p>
Please take a look at the bottom picture and you'll have a complete idea of this template's HTML structure. And click the image to view the sections divided in the actual design.
</p>
<a href="assets/images/structure.jpg" title="Click the view the section on actual design">
<img src="assets/images/html.jpg" height="429" width="475" />
</a>
<p>
Here we're going to guide the page structures, from top to bottom and left to right (where necessary).
</p>
<h3 id="header">Header (<code>#header</code>) Section</h3>
<p>
Header section is vertically divided into two sections one is the slider(<code>#imageBox</code>) and other one is the logo+menu(<code>#navNLogo</code>). They both absolutely positioned to support menu+logo at the top of the page instead of the slider.
</p>
<blockquote>
There's additionally and element <code>.bar</code> floating just above the menu+logo container. This is the very top border (floating above slides or page header images).
</blockquote>
<ul class="list">
<li>
<h4>Menu and Logo<code>#navNLogo</code></h4>
<p>
Actual menu and logo wrapped within a element <code>.wrap</code> to float them within the intended page width 980px and center to the page. The <strong>Logo</strong> (<code>#logo</code>) and <strong>Menu</strong> (<code>nav</code>) elements float side by side. Changing the logo is rather simplistic just point the image source to our own logo. Our actual <strong>Menu </strong> items are inside the <code>ul#menu</code> elements of the <code>nav</code> element. The menu structure is standard just use the first level <code>li</code> of <code>ul#menu</code> to place your parent menu items. And use nested <code>ul</code> element inside the first <code>li</code> element for your sub menus. Please the check the structure of the demonstration pages to better understand them.
</p>
<blockquote>
Just place an <code>.active</code> class to the appropriate active menu item to highlight them as active. You may need to adjust your header menu's left padding in-order to keep them on the correct order (aligned to the right). Just reduce or add some paddings from the <code>#menu</code> selector in the <strong><code>c. Menu</code></strong> section of the <code>style.css</code> file.
</blockquote>
</li>
<li>
<h4>Slides and Header Images <code>#imageBox</code></h4>
<p>
We've placed our slides inside the Header section instead of the Content section for this theme's conveniyance. Please check the Slides+Header Image section for detail about their usage and avialble options.
</p>
</li>
</ul>
<h3 id="content">Content <code>section#content</code></h3>
<p>
All the actual page contents are inside of this section <code>section#content</code>. Please check pagewide guideline for individual page's settings and about their modifications.
</p>
<h3 id="footer">Footer <code>#footer</code></h3>
<p>
Our <strong>footer</strong> is vertically divided into two sub-sections and those are top <code>.top</code> and bottom <code>.bottom</code>. And here's their details:
</p>
<ul class="list">
<li>
<h4>top <code>.top</code></h4>
<p>
This section is for the individual footer widgets area. It has a first class child <code>.wrap</code> to wrap all the column inside a 980px width box and float them at the center of the page. You can use the default footer widgets already designed for you. Or can use any variations of them e.g. more or less columns. You can use the same column settings as in the footer as shown in the <code>columns.html</code> demonstration page for the contents section.
</p>
</li>
<li>
<h4>bottom <code>.bottom</code></h4>
<p>
The bottom is for the copyright notice and footer social links. You can use any kind of social links please refer to the <strong>Sources and Credit</strong> section for more about social icons and how you can get more.
</p>
</li>
</ul>
<h2 id="pagewise"><big>B.</big> Pagewise Guidelines</h2>
<ul class="list">
<li>
<h4 id="homePage">Home Pages</h4>
<p>
I've designed several widgets or promo elements for the homepage like <strong>promo message</strong>, <strong>three columns icon promo</strong>, <strong>three column image promo</strong>, etc. Please check the demonstrations page provided with this theme for their usage and placements. And you can alternate those promo elements placements based on your needs. They're very flexible.
</p>
<p>
The <strong>Home</strong> and <strong>About</strong> page's feedback slider are same just replace their texts with your and your are done you can additionally change their script settings for the <strong>init.js</strong> files <strong>Site Initialization</strong> code section.
</p>
<p>
The <strong>twitter</strong> is very simple to use just replace the twitter account name (from "palpaldal" to "yours") from the <strong>init.js</strong> file's <strong>Site Initialization</strong> code section. You can also change the cycle slider settings for the twitter plugin from <strong>init.js</strong> file.
</p>
<blockquote>
Remember we've total two twitter initialization funciton by default one for the <strong>Home</strong> and <strong>About</strong> page's twitter widget and another one for the sidebar twitter widget. AND we're using a tricked function for our <strong>Home</strong> and <strong>About</strong> pages twitter widget to initialize the cycle plugin on these widgets. You'll find them in the <code>init.js</code> file just keep them intact but feel free to change cycle plugin settings :)
</blockquote>
</li>
<li>
<h4 id="aboutPage">About Page</h4>
<p>
About page got some widgetized settings as of our Home page. You can freely alternate their (widgets) positions. We're using a simple slider plugin called <strong>easySlider</strong> to enable sliding for our clients lists. You can use this slider script for anything else and we've also used this script to enable sliding for our homepage's promo portfolio items (<code>index-port.html</code>).
</p>
</li>
<li>
<h4 id="portfolioPage">Portfolio</h4>
<p>
This is specially for portfolio and creative work individual or agency. So, we putted a huge effort develop some cool and variant portfolio pages and features. There are total 7 variations for our portfolio pages.
</p>
<ul>
<li>
<h4>Default Portfolio</h4>
<p>
I've developed a unique sleek and robust portfolio script for only circle theme. You can check its functionality and effort on the <code>portfolio.html</code> page. It is so light and doesn't bog down your browser for its functionalities. It has core four functions and those are <em>masonry</em>, <em>sorting</em>, <em>auto pagination</em>, and <em>switch view types</em> (e.g. grid + list). I'll love you the most if you use it and it helps your site. But you can use the other variants comes with this theme.
</p>
<p>
You can four and two column settings for this portfolio variant. Please check the demonstration page for detail about how you should to format your html in-order to use this portfolio variant.
</p>
<blockquote>
Simple note: Use every setting you'd do for the 2 column portfolio items just link your portfolio thumb images to the 4 column portfolio images.
</blockquote>
</li>
</ul>
<p>
Other two main portfolio variant are Quicksand plugin and simple HTML versions. Check their sources to format your HTML. Additionally we're using <strong><code>jQuery.prettyPhoto</code></strong> plugin to display our portfolio large on the same page.
</p>
<blockquote>
We've some bug on IE8- for QuickSand sorted portfolio items. I'll definitely try to solve this ASAP.
</blockquote>
</li>
<li>
<h4 id="blogPage">Blog List Pages</h4>
<p>
The blog listing page is very simple please check the demonstration page <code>blog.html</code>'s source codes for detials.
</p>
<h4>Blog Post Page</h4>
<p>
This page is also very simple just check it sources for details. The comments are created (marked-up) based on WordPress commenting system standard.
</p>
<blockquote>
For now the blog has post type icons and they are written and video posts. You can add as many types as you need for related icons please refer to the <strong>Resources and Credits</strong> section to download them.
</blockquote>
</li>
<li>
<h4 id="contactPage">Contact Page</h4>
<p>
We're using a Ajax based solution to submit messages to the server. Simply change the demo email address to your email address of the <code>mail.php</code> script and you are done! Our contact form works fine without JavaScript.
</p>
<blockquote>
NOTE: Most of the CSS styles are borrowed from the comment form styles. So, please refer to comment form section inside the blog section of the <code>style.css</code> file. If you need any modifications to your contact form.
</blockquote>
</li>
<li>
<h4 id="otherPages">Other Pages</h4>
<p>
There are some other demonstration pages like: Price Boxes, Archives, Search Results, Typography and column demonstration. These pages and their elements are pretty self-descriptive. So, please check the source for details.
</p>
</li>
</ul>
<h2 id="quickNotes"><big>C.</big> Some Quick Short Notes</h2>
<ul class="list">
<li>
<p>
To use border around your images add a class <code>border</code> to your images (<code>img</code> element).
</p>
</li>
<li>
You'll find lots of CSS color variation files inside <code>files>codes>css>colors</code> folder. Open any one of them, you'll notice that I have stacked all the identical colored elements appropriately. So, you can easily change any color of any content or element. Just keep the file stacking order intact otherwise some codes may break your colors.
</li>
<li>
To use flickr images simply get your own flickr badge and replace the link with this template's flickr badge link and you are done.
</li>
<li>
<h5>
I've placed all the IE specific hacks to their related ie files. If you need anything to modify or add to the IE specific file you can use them.
</h5>
</li>
</ul>
<h2 id="commonElements"><big>D.</big> Common Elements</h2>
<h3>Slides and Header Images</h3>
<p>
We can use slides on any page of this theme.
</p>
<ul class="list">
<li>
<h4>Slider on Homepage</h4>
<p>
Circle has a total 7 slider variations. All the slides options and features are almost same as the plugin (slider scripts) default settings. You can change any of these sliders options like duration, effect, etc. Please open any slider script file and follow their site link from the top of those files. There you'll find some useful guidelines about tweaking those plugins.
</p>
<p>
Remember we're using a full size image for our slides and header images. And we don't know that how many and what kind of large monitors our users are going to use to visit our site. So, we're placing our slides and header images through CSS. For any slides just take a new <code>li</code> element with appropriate <code>date-slide</code> attribute (as shown in the demonstration page <code>index.html</code>). Then search for <strong><code>@#@Slides</code></strong> inside the <code>style.css</code> file and add your slide images link as shown in there already. You can additionally add slide messages as shown in the demonstration and in order to do that just replace the demo contents with your own from inside the <code>.slideMsgs</code> container of every slide <code>li</code> items of the <code>#slide</code> element.
</p>
</li>
<li>
<h4>Slider on Other pages</h4>
<p>
Using slides on other pages is very simple. Please check our <strong>Portfolio</strong> pages for demonstration. Everything goes just like our Homepage slides the difference is you can't place individual slides messages on other pages other pages and there will be no controlling (e.g. <strong>next</strong> or <strong>prev</strong> button) option.
</p>
<p>
Use the settings shown on the portfolio pages for your individual pages header image slides. Follow these steps to add your own slides.
</p>
<ol class="list">
<li>
We're going to place our slides inside the <code>div.image</code> element of the <code>#imageBox</code> element. Make sure there is a named <code>.headerImages</code> as it is controlling the height of our slides+images on every pages except <strong>homepage</strong>.
</li>
<li>
Replace the default <code>.portfolio</code> class name with your own appropriate class name(s). And make sure the two class <code>.image</code> and <code>.slides</code> are intact to this element.
</li>
<li>
Take a new <code>li</code> element inside the <code>ul</code> element of the <code>.slides</code> container. Add an appropriate class names to this <code>li</code> items. Then link the slide image from the <code>style.css</code> files <strong><code>@#@Other</code></strong> section.
</li>
</ol>
<blockquote>
Remember you can only use individual slides messages on homepage slides.
</blockquote>
</li>
<li>
<h4>Slide Scripts</h4>
<p>
We're mostly using jQuery cycle plugin for our slides. You can change any settings of every slides from the <code>init.js</code> file's <code>Site Initialization</code> code section. For more available options (e.g. effects, duration, etc) of cycle plugin please visit <a href="http://jquery.malsup.com/cycle/">jquery.malsup.com/cycle/</a>.
</p>
<p>
Beside cycle we're also using <strong>Nivo</strong> and <strong>Elastic</strong> sliding script. You'll find any home page slides scripts initialization code at the bottom of that slider page. So, you can use that index.html file and ignore the rest (<code>index-*</code> files).
</p>
</li>
</ul>
<h3 id="sidebar">Siderbars</h3>
<p>
<strong>Circle</strong> comes in-built with some robust sidebar treatment. You'll find a static sidebar widget for your sites search and social links. A tabbed based sidebar and a dynamic (common) sidebar. You can check them on the <code>blog.html</code> page. I've already designed a lot of common sidebar widgets for you but if you need even more or some special widget then please check the sidebar widgets source to format your codes. The entire sidebar widgets codes are very simple and pretty self-descriptive you should to find everything very easy to modify or extend.
</p>
<h3 id="tabbedBoxes">Tabbed Sidebar Widget</h3>
<p>
Please refer to the source code of the tabbed sidebar widget for their settings.
</p>
<h3 id="breadcrumbs">Breadcrumbs</h3>
<p>
Open any demonstration page what is using breadcrumbs and follow the way they have been placed inside those pages. And place your breadcrumbs directly inside the very top of the <code>#content</code>.
</p>
<h3 id="pagination">Pagination</h3>
<p>
Pagination is very simple. Simply place your pagination links as this template's demonstration pages and please add a class <code>active</code> for your active and "no" prev or next pagination items.
</p>
<h2 id="cssFiles"><big>E.</big> CSS Files and Structure</h2>
<ul class="list">
<li>
<strong>Reset:</strong> It is resetting browser’s default styles and creating a plain slate for this theme to write on. It using Eric Meyer’s reset files and here you’ll also find default styles for basic HTML elements.</li>
<li>
<strong>Style:</strong> This is the main CSS file of this theme. Please read this file for details. It has a Table of contents and I’ve also included some inline comments to clear things out.</li>
<li>
<strong>prettyPhoto:</strong> It is jQuery’s prettyPhoto plugin’s CSS file. I haven’t deleted any additional styles from this file and this theme using <strong>".light_rounded"</strong> theme, you can delete other theme's styles if you use this style <strong>(".light_rounded")</strong>. Please read <strong>"prettyPhoto"</strong> section for details.</li>
</ul>
<blockquote>
You'll also find <strong>Table of Contents</strong> in "reset.css" and "style.css" files.
</blockquote>
<h2 id="jsFiles"><big>F.</big> JavaScript Files</h2>
<p>This theme is using several JavaScript libraries and custom short codes. Though these script files and scripts are pretty well-known to web developer community but I’m trying to explain little about these script libraries and scripts (short codes).
</p>
<ul class="list">
<li><strong>jQuery:</strong> jQuery is JavaScript library. Many website using jQuery as like it is a JavaScript engine.
</li>
<li>
<strong>jQuery.cycle Plugin:</strong> It’s a jQuery plugin. It is being used here as a content slider. <strong>"Index"</strong> and <strong>"Portfolio Item"</strong> page using cycle plugin.</li>
<li><strong>jQuery.prettyPhoto:</strong> It’s a jQuery plugin. I have also written some short codes for content hint. Please read <strong>"prettyPhoto"</strong> section for details.</li>
<li>
<strong>Init:</strong> It is the theme’s script initializing file. It initializes all the scripts and it also has many third party jQuery plugins/libraries. Please open and read source codes of <strong>init.js</strong> file for details.</li>
</ul>
<blockquote>
AND PLEASE OPEN EACH FILE FOR ITS WEB LINK AND COPYRIGHT INFO. THERE YOU’LL FIND USEFULL INFORMATION ABOUT THESE SCRIPTS/LIBRARIES, THOUGH TO USE THIS THEME YOU DON’T NEED TO DO THAT.
</blockquote>
<h2 id="psdFiles"><big>G.</big> PSD Files</h2>
<p>PSD files are well organized. I hope you’ll find it very easy to edit PSD files without any further documentation.
</p>
<h2 id="changingColor"><big>H.</big> Changing Theme Colors </h2>
<p>
Circle comes with premade five color variations. Even if you need more color variant so please first open any color css files from the <code>files->codes->css->colors</code> folder then replace link and header colors with your own colors. And remember the colors of the header of the slides messages and page title (the large title at every other pages than of homepage) are a little dark than of the general header color. You should check and match your darkness on these headings with your general header color. Follow these steps:
</p>
<blockquote>
You can play with file <code>index-color.psd</code> to check how you're intended color will look by not harming the actual <code>index.psd</code> file.
</blockquote>
<ul>
<li>Open the file <code>orange-green.css</code> file from inside the <code>files->codes->css->colors</code> folder. Take a new CSS document then copy everything from the <code>orange-green.css</code> file and paste them inside this new file. Name your file. Now replace the color <code>#12a108</code> (of your file) with your own link color (You should find 4 repleaces).
</li>
<li>
Now find and replace the color <code>#e94025</code> with your own heading color. (You should find 5 replaces). Then search for <code>#dc3015</code> and replace this color with a slight darker version of your heading color.
</li>
</ul>
<h4>Editing Graphics</h4>
<ul>
<li>
Open the the <code>elements.psd</code> file from your <strong>psd</strong> folder. Add your link color to the colored item of the graphics except the circles. For the circles add a lighter version of your header color.
</li>
<li>
Save those items with save for "Wev and Devices.." option (as <strong>transparent png</strong> image) and place them inside the folders mentioned above those graphics (in <code>elements.psd</code> file).
</li>
<li>
Note there's a color code (<code>-og</code> og=orage-green) at the end of the each graphics (except blog types) linked from your custom color CSS file. I suggest you to add such extension to your every graphics you save from the Photoshop file. It will help you to keep the default graphics intact in the folders and you can use them later if you want.
<blockquote>
Also note that you don't need to slice any graphics as I've already sliced and named them appropriately for you! (Enable slicing option in Photoshop to check them). Just add your link colors to the colored one and hit "Save for Web and Devices.." also disable the background layer in-order to save as transparent png files.
</blockquote>
</li>
<li>
Now replace the last <code>-og</code> extension from your color CSS file with your own color extension. And also replace the <code>../og/..</code> folder name to your own extension (find them at the bottom of the <code>files->codes->css->colors->anycolor.css</code> file).
</li>
<li>
Finally add the heading color to the background of the active menu item of the <code>index.psd</code> file. It has already got a sliced zone so just append your color extension and remember to disable only the <strong>inner glow</strong> filter then save for "Web and Devices.." and save it to the <code>files->images</code> folder.
</li>
</ul>
<p>
Copy everything from this file and paste them directly at the very bottom of our <code>style.css</code> file and remember to remove the <code> <link rel= "stylesheet" id="colors" href="files/codes/css/colors/[file].css" type="text/css" /></code> line from the bottom of your every page.
</p>
<p>
Now referesh and Congratulations! you're done. That was so quick, I think it should not take more than 15 minutes.
</p>
<h3>Using Color and Pattern Variations (Comes with this Theme)</h3>
<p>
The theme comes with lots of color and pattern variations. Please follow this steps in order to easily use any of the provided color or pattern variations.
</p>
<ol>
<li>
<h4>To Use Color Variations</h4>
<p>
Simply copy your desired colors files css styles (find it <code>files->codes->css->colors->colorfile.css</code>) and then paste them at the bottom of our style.css file (find it <code>files->codes->css->style.css</code>).
</p>
</li>
<li>
<h4>To Use Pattern Variations</h4>
<p>
By default it has white pattern for header and content/body and dark one for footer (noise pattern). You can use white pattern for body and dark patterns for footer and both of them for header. To change header pattern First, locate <code>#imageBox</code> inside <strong>b. Slider + Page Msg</strong> section of <code>style.css</code> file. Then add a background color of <code>#fff</code> (if you use dark header background then use <code>#222</code>) then add your pattern file path. Additional (except default) pattern path should be <code>../../images->pattern->dark/light/your_pattern_graphic.png</code>. Find your pattern file name by pointing your mouse over the pattern choosing thumb (find the name in the tooltip). Then select the file from inside the <code>files->images->patterns->dark/light</code> folder.
<br />
<br />
Follow these same steps for content and footer patterns. For content add your pattern style to the <code>body</code> (at <code>reset.css</code> file) and footer add your pattern style to the <code>#footer</code> (at <code>style.css</code> file).
</p>
</li>
</ol>
<h2 id="others"><big>I.</big> Others </h2>
<h3 id="formValidation"><big>a.</big> Form Validation and Email </h3>
<p>This theme is using jQuery tinyValidator plugin to validate form fields. It is a very light-weight validating library. I have developed it and it's free to use and share. To know how it works please open <strong>"init.js"</strong> file and in that file you'll find its working details.
<p>
In order to use php mail sender script to receive emails from your visitors just change the <strong>$to</strong> variable's value to your actual email address from inside <strong>mail.php</strong>. For details please read the inline comments inside this script file.
</p>
<h3 id="fonts">Fonts</h3>
<p>
This theme has been developed using three different fonts and those are: <strong>Museo</strong>, <strong>Helvetica Neue</strong>, and <strong>Lato</strong>. Among them I've only included <strong>Museo</strong> font family through CSS <code>@font-face</code> font embeding method. You'll find that font inside our <code>assets->fonts</code> directory. <em>You'll find three different face of Museo (700,500,300) those are free for commercial or personal project. And by default this theme is using 700 and 500 (referenced bold and normal respectively in this theme). Additionally you'll find Museo 300 variants embeding function (code block) commented out (at the top of <code>reset.css</code> file) for your reference in-case you need them in your project.</em>
</p>
<blockquote>
Please don't get freezed with these two default fonts. You can use any fonts you like. But they works just find with this theme. To change your heading or body font face simply change them from the <code>reset.css</code> files heading and body font declaration block.
</blockquote>
<h2 id="credits"><big>J.</big> Sources and Credits </h2>
<ul>
<li>
<h5>All the images used in this project are from awesome Dribbble networks. And those are only for preview purposes. They are not available with this purchase.</h5>
</li>
<li><strong>Scripts:</strong> Each and every script I have used in this project is licensed perfectly, to use them simply don’t delete any license/comments and their site links from script files. Those all are free.</li>
<li>
<strong>Icons:</strong> All the icons are from <a href="">http://iconsweets2.com</a> you can download them for free from this link <a href="http://yummygum.com/iconsweets-2.zip">http://yummygum.com/iconsweets-2.zip</a>. They are free for both commercial and personal use.
</li>
<li>
All those awesome patterns are from <a href="http://subltepatterns.com">http://subltepatterns.com</a> and they are free to use both for personal or commercial projects.
</li>
</ul>
<p>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.</p>
<p>
<strong> And please use the contact form of my portfolio page <a href="http://themeforest.net/user/palpaldal">palpaldal</a> for email support. I'm very sorry to say that I'll not be able to answer you any support if you directly mail me. So, please please use the contact form of my themeforest <a href="http://themeforest.net/user/palpaldal">palpaldal</a> portfolio. Thanks a lot for your kind understand.
</strong> </p>
<p class="append-bottom alt large"><strong>Nuruzzaman Sheikh (palpaldal)</strong></p>
<p style="position: fixed; bottom: 20px; right: 20px;"><a href="#toc">Go To Table of Contents</a></p>
<hr class="space">
</div><!-- end div .container -->
</body>
</html>