Olin - Responsive HTML5 & CSS3 Template

Welcome to Olin! Thank you so much for purchasing this template.

This guide should answer all your questions about how to use and customize this template. Browse through this document using the sidebar on the left, or use your browser's search function (CTRL+F on Windows or CMD+F on a Mac).

Olin is built on the awesome and wildly adopted Twitter Bootstrap 3 framework. Which lets you easily create responsive, modern, and mobile friendly websites. If you are not already familiar with Bootstrap I highly encourage you to head over and learn about it on the official website getbootstrap.com

The latest version of this documentation can always be found online under: themetrail.com/olin/docs

Support

I am in the process of setting up a dedicated support forum for all ThemeTrail customers. Until it's launched I will handle all support tickets plain, simple and fast via email. Drop me a line with any questions you might have about this template.

As with every template this is a work-in-progress and will never be finished, perfect or 100% bug-free. When you discover a bug - breathe - than let me know. I will do my best as fast as possible to fix it.

In case you need any customization that goes beyond a few lines of code I have to somehow disappoint you, as I don't take on any clients.

Template Files

These are all files that are included with Olin:

Page Templates

Portfolio Templates

Blog Templates

Demo Templates

HTML Layout Structure

As Olin is built on the Bootstrap 3 framework, simply use the official Bootstrap 3 classes to achieve your desired layout. Rather than me republishing the same information that has already been written down very well, head over to the official Bootstrap 3 - CSS Documentation to learn more.

HTML and PHP version

Olin comes in PHP and HTML file format. If you don't know anything about PHP or your webhosting package doesn't even run PHP, than use the HTML version html to get your site running. But for easier maintanance and faster development, PHP outperforms HTML by far. Don't be scared by PHP, you don't need to know much about it to use it with this template. Within Olin it's pretty much just another file extensing, that will make your programming life a lot easier. Read on..

The PHP version php within your download includes two extra files named header.php and footer.php where similar to other well known CMS such as WordPress the site's header anf footer section is stored. As the header and footer is the same on any template file the idea behind this practice is to only touch these two files when changing header or footer content. Otherwise you would have to change every single file, when updating the header and footer section of your template.

At the beginnig of every PHP template file we included header.php

<?php $page_title = "Home"; include("header.php"); ?>

The $page_title variable stores the page title. As every page will have a different title you have to enter a unique page title. Even if you care just very little about SEO, do it for any potential visitor, as this title will appear in any Google search where this very page comes up. So take a moment to think what to add here.

All stylesheets and the site navigation is stored within header.php

At the end of every PHP template file we included footer.php

<?php include("footer.php"); ?>

All scripts are added here. Right before the closing body tag. Plus the footer section itself with newsletter, social networks, about snippet, contact and copyright information.

Assets

In the same level as all template files you find the assets folder, where the template stylesheets /css and scripts /js are located.

Stylesheets (CSS Files)

Scripts (JS Files)

Styles (CSS)

Use all the official Bootstrap CSS Styles plus the following template specific styles to enhances the visual experience of your website.

• Element Styles

  .gradient (Vertical background gradient from #fff to #eee)
  #sidebar (Wrap your .affix sidebar into this a #sidebar div)
  Vertical Margins:
  .section-small .section-base .section-large
.margin-small .margin-base .margin-large
.margin-top-small .margin-top-base .margin-top-large
.margin-bottom-small .margin-bottom-base .margin-bottom-large
  Vertical Paddings:
  .padding-small .padding-base .padding-large
.padding-top-small .padding-top-base .padding-top-large
.padding-bottom-small .padding-bottom-base .padding-bottom-large

• Typography Styles

  Handwritten Font:
  .handwritten (Google Font: 'Marck Script')
  .color (color: @color-primary | Default: #00a79d)
  .black (color: #000)
  .upper (text-transform: uppercase)
  .invert (background: Primary color; color: #fff)
  .list-icon (For lists with <i> icon font)
  .hr2 (Heading style with a fine vertical centered double line)
  

Predefined Color Schemes

You can choose between the following 15 predefined color schemes.

• blue.css
• blue2.css
• blue3.css
• brown.css
• default.css
• gray.css
• green.css
• green2.css
• orange.css
• purple.css
• purple2.css
• red.css
• red2.css
• red3.css
• yellow.css

Default color scheme tag in the template head section:

<link href="assets/css/default.css" rel="stylesheet">

Replace default.css with the color scheme of your choice. To load the orange color scheme you would change the link tag to:

<link href="assets/css/orange.css" rel="stylesheet">

Don't modify the predefined color schemes, as they will be overriden by future updates. Simply create your own color scheme by duplicating an exisiting color scheme from assets/colors/. Than change the colors as you like and update the color scheme link tag path.

Need some color inspiration? Try https://kuler.adobe.com/

Custom CSS

Don't make any changes to styles.css as it is the main CSS stylesheet; it will be overridden by future updates. Go to assets/css/ and create a CSS file named custom.css. There is already a stylesheet link tag in your template's header (line 32) that links to assets/css/custom.css. If you don't add any custom styles, you can delete this line of code.

LESS

Olins styles are written in LESS, than compiled to CSS. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. It can save you precious development time and helps to maintain your styles more easily. Only use LESS files in development, not for live websites. Therefor compile to CSS. LESS files are located in assets/less/

Same as with the main CSS file: Don't make any changes to styles.less as it is the main LESS stylesheet; it will be overridden by future updates. Create a new LESS file or duplicate styles.less and name it custom.less. Compile to CSS into the standard CSS folder assets/css/ as custom.css There is already a stylesheet link tag in your template's header (line 32) that links to assets/css/custom.css. If you don't add any custom styles, you can delete this line of code.

Even if you are new to LESS, give it a try, it's really dead simple to learn.

The following piece of code is necessary to get LESS running. It is already included in the template header line 38-40, but comment out. Remove the comments to enable LESS including error notifications.

<link href="assets/less/styles.less" rel="stylesheet/less" />
<script>less = { env: 'development' };</script>
<script src="assets/js/less.js"></script>

Typography

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Paragraphs

This is a .lead paragraph, which has a font size of 18px. Standard font size is 13px. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, odit, explicabo mollitia adipisci facere veniam esse eius tenetur deserunt earum recusandae temporibus aspernatur architecto impedit nostrum tempora quaerat ea labore hic similique molestiae in vitae officiis non rerum dolorem nisi corporis illo ducimus at pariatur exercitationem reprehenderit totam a magni?

<p class="lead">This is a <code>.lead</code> paragraph, which has a font size of 18px.</p>

This is a standard parapgraph with a font size of 13px. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, accusantium cumque error dolorem non impedit nisi magni maxime provident. Pariatur, magni tenetur at vitae perspiciatis! Molestiae, aut, quidem consequatur beatae quasi nesciunt quod quas neque reiciendis facere temporibus vitae provident deleniti autem obcaecati porro laudantium quaerat eaque ipsa enim expedita.

Inverted Text

To invert an element add .invert like so: I'm an inverted text.

<span class="invert">I'm an inverted text.</span>

Underlined H5 Heading

<h5 class="page-header">Underlined H5 Heading</h5>

Left aligned H5 Heading with fine double line

<h5 class="hr2">Left aligned H5 Heading with fine double line</h5>

Centered H5 Heading with fine double line

<h5 class="hr2 text-center">Centered H5 Heading with fine double line</h5>

Right aligned H5 Heading with fine double line

<h5 class="hr2 text-right">Right aligned H5 Heading with fine double line</h5>

Handwritten

Beautiful handwritten font Marck Script.

Beautiful handwritten font Marck Script.

More free webfonts can be found over here: http://www.google.com/fonts/

Blockquote

I'm a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

John Doe in "Notes from John Doe"

<blockquote>
  <p><strong>I'm a blockquote.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>John Doe in <cite title="Source Title">"Notes from John Doe"</cite></small>
</blockquote>

	
Unorder list item
	
Unordered list item
	

		Unordered sub list
		

			
Unordered sub list item
			
Unordered sub list item
			
Unordered sub list item
		
	
	
Unordered list item
	
Unordered list item
	
Unordered list item

	
Ordered list item
	
Ordered list item
	
Ordered sub list
		

			
Ordered sub list item
			
Ordered sub list item
			
Ordered sub list item
		
	
	
Ordered list item
	
Ordered list item
	
Ordered list item

	
Unstyled list item
	
Unstyled list item
	
Unstyled sub list
		

			
Unstyled sub list item
			
Unstyled sub list item
			
Unstyled sub list item
		
	
	
Unstyled list item
	
Unstyled list item
	
Unstyled list item

	
Icon list item
	
Icon list item
	
Icon sub list
		

			
Icon sub list item with color
			
Icon sub list item with color
			
Icon sub list item with color
		
	
	
Icon list item
	
Icon list item
	
Icon list item

Preformatted text

Preformatted text goes here. Can also include code: I am a code element

<pre>Preformatted text goes here. Can also include code: <code>I am a code element</code></pre>

Code

I am a code element

<code>I am a code element</code>

Icons

This template uses the FontAwesome 3.2 Icon Font with a total of 361 icons. Not Bootstrap's standard Icon Font Glyphicons with 180 icons. If you prefer to use Glyphicons you can do so, as it's included with your download under assets/fonts. This guide describes how to use the FontAwesome Icon Font with this template.

Icon Fonts have a lot of advantages over graphic icons. They are Infinite Scalable. Fully CSS Cutomizable: Size, Color, Shadow etc. Perfect for Retina Displays. Screen Reader Compatible. IE7 Support.

Instead of a pixel-based icon such as a GIF or PNG graphic via:

<img src="images/icon-star.png" alt="" />

You can easily insert icons like the star below by adding a class of .icon-star to your <i> element:

<i class="icon-star"></i>

Which will output:

Change color, size, opacity, background etc. as you would do with any other font. As the name implies an Icon Font stores icons, where a normal font stores characters. All .icon-* icon font elements are inline elements by default.

Example Bolt Icon Font Style

.icon-bolt {
	display: inline-block;
	width: 30px;
	height: 30px;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	color: #f90;
	border-radius: 50%;
	background-color: #eee;
}

How To Create your Own Icon Font

If you need some more customization I highly recommend to check out http://icomoon.io/app/. Where you can create your very own Icon Font by cherry-picking every single icon out of multiple Icon Fonts such as the great Entypo, Iconic and many more.

Social Network Icons

Wrap your social network icons into .social-networks to show them with background color.

<span class="social-networks">
	<a href=""><i class="icon-twitter"></i></a>
	<a href=""><i class="icon-dribbble"></i></a>
	<a href=""><i class="icon-google-plus"></i></a>
</span>

Wrap your social network icons into .social-networks-transparent to show them with background color on hover.

<span class="social-networks-transparent">
	<a href=""><i class="icon-twitter"></i></a>
	<a href=""><i class="icon-dribbble"></i></a>
	<a href=""><i class="icon-google-plus"></i></a>
</span>

Iconbox

Use the .iconbox wrapper to create a multi-column iconbox with .header and .content. Place the icon right before of your heading.

<div class="iconbox">
	<div class="row">
		<div class="col-lg-4">
			<i class="icon-cogs icon-2x"></i>
			<h5 class="header">Title 1</h5>
			<p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, provident.</p>
		</div>
		<div class="col-lg-4">
			<i class="icon-magic icon-2x"magic></i>
			<h5 class="header">Title 2</h5>
			<p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, provident.</p>
		</div>
		<div class="col-lg-4">
			<i class="icon-bullhorn icon-2x"></i>
			<h5 class="header">Title 3</h5>
			<p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, provident.</p>
		</div>
	</div>
</div>

Standard Components

Olin includes all Bootstrap components. What follows is a short explanation of each component plus the source code.

Buttons

Buttons are pure CSS3 with background gradients and fallbacks. In six styles (+ disabled state), four sizes, groupable and much more. Add .btn and one of the six button styles (.btn-default, .btn-primary etc.) to apply the preconfigured button styles.

Default Primary Success Info Warning Danger Disabled button

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger" disabled="disabled">Disabled button</button>

<button type="button" class="btn btn-default btn-lg">Large button</button>
<button type="button" class="btn btn-default">Default button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Labels

Default Primary Success Info Warning Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Badges

12

Button with badge 99

<span class="badge">12</span>
<button type="button" class="btn btn-default">Button with badge <span class="badge">99</span></button>

Tabs

• Home
• Profile
• Messages
• Settings

<ul class="nav nav-tabs tab-header">
  <li class="active"><a href="#home" data-toggle="tab"><i class="icon-home"></i> Home</a></li>
  <li><a href="#profile" data-toggle="tab"><i class="icon-user"></i> Profile</a></li>
  <li><a href="#messages" data-toggle="tab"><i class="icon-envelope"></i> Messages</a></li>
  <li><a href="#settings" data-toggle="tab"><i class="icon-gears"></i> Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">
	  <!-- Tab 1 content -->
  </div>
  <div class="tab-pane" id="profile">
	  <!-- Tab 2 content -->
  </div>
  <div class="tab-pane" id="messages">
	  <!-- Tab 3 content -->
  </div>
  <div class="tab-pane" id="settings">
	  <!-- Tab 4 content -->
  </div>
</div>

Accordion

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a></h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        ..
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a></h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        ..
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a></h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        ..
      </div>
    </div>
  </div>
</div>

Images

<img src=".." alt="" class="img-rounded">
<img src=".." alt="" class="img-circle">
<img src=".." alt="" class="img-thumbnail">

Custom Content

<div class="thumbnail">
  <img src=".." alt="" />
  <div class="caption">
    <h4>Thumbnail label</h4>
    <p>
      ..
    </p>
    <p><a href="" class="btn btn-default">Button</a></p>
  </div>
</div>

Well

<div class="well">
	<div class="row">
  	<div class="col-md-9">
  		<h3>The Perfect Highlighter</h3>
  		<p>Well with inset box shadow and light gray background.</p>
  	</div>
  	<div class="col-md-3">
	  	<button class="btn btn-lg btn-default btn-block">Sign Up</button>
	  	<p class="text-center text-muted"><small>Add a little note..</small></p>
  	</div>
	</div>
</div>

<div class="well gradient">
	<h3>Well with background gradient</h3>
	<p class="lead">..</p>
</div>

Jumbotron

<div class="jumbotron text-center gradient">
  <h1>Big News</h1>
  <p>Got something big to announce?</p>
  <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>

Pagination

• 1
• 2
• 3
• 4
• 5

<ul class="pagination">
  <li><a href=""><i class="icon-angle-left"></i></a></li>
  <li><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li><a href="">5</a></li>
  <li><a href=""><i class="icon-angle-right"></i></a></li>
</ul>

Pager

• Previous
• Next

<ul class="pager" style="text-align:left">
<li><a href=""><i class="icon-angle-left"></i> Previous</a></li>
<li><a href="">Next <i class="icon-angle-right"></i></a></li>
</ul>

Alerts with close button

<div class="alert alert-success alert-dismissable">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
	<strong>Success!</strong> Hi, I'm a dismissable alert for success messages.
</div>
<div class="alert alert-info alert-dismissable">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
	<strong>Info!</strong> Hi, I'm a dismissable alert for info messages.
</div>
<div class="alert alert-warning alert-dismissable">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
	<strong>Warning!</strong> Hi, I'm a dismissable alert for warning messages.
</div>
<div class="alert alert-danger alert-dismissable">
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
	<strong>Danger!</strong> Hi, I'm a dismissable alert for danger messages.
</div>

Progress Bars

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
    <span class="sr-only">40% Complete</span>
  </div>
</div>

<div class="progress progress-striped">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (success)</span>
  </div>
</div>

<div class="progress progress-striped active">
  <div class="progress-bar"  role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete</span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 30%">
    <span class="sr-only">30% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 30%">
    <span class="sr-only">30% Complete (danger)</span>
  </div>
</div>

Tooltip

Add the data-toggle="tooltip" and title=".." attribute to the element you want the tooltip to apply to. The title attribute holds your tooltip's text.

Example: http://getbootstrap.com/javascript/#tooltips

<a href="http://getbootstrap.com/javascript/#tooltips" data-toggle="tooltip" title="Bootstrap Documentation: Tooltip" target="_blank">http://getbootstrap.com/javascript/#tooltips</a>

Popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

"On Hover" Example - class="popover":
http://getbootstrap.com/javascript/#popovers

<a href="http://getbootstrap.com/javascript/#popovers" data-toggle="popover-hover" data-original-title="Bootstrap Documentation: Popovers" data-content="Learn more about the popover." target="_blank">http://getbootstrap.com/javascript/#popovers</a>

"On Click"" Example - class="popover":
Click to toggle the popover

<a class="btn btn-default" data-toggle="popover" data-original-title="Custom Popover Title" data-content="<p>Here goes your custom popover body. <strong>HTML</strong> allowed. A button for example:</p><button type='button' class='btn btn-primary btn-sm'>more</button>" target="_blank">Click to toggle the popover</a>

• Filter 1 Project #1

  Here goes your project's description.

• Filter 2 Project #2

  Here goes your project's description.

• Filter 3 Project #3

  Here goes your project's description.

• Filter 1, Filter 2 Project #4

  Here goes your project's description.

• Filter 1, Filter 3 Project #5

  Here goes your project's description.

• Filter 3 Project #6

  Here goes your project's description.

• Filter 1, Filter 2, Filter 3 Project #7

  Here goes your project's description.

• Filter 2 Project #8

  Here goes your project's description.