Heading1 (h1) looks like this

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.

Heading2 (h2) looks like this

Heading3 (h3) looks like this

Heading4 (h4) looks like this

Heading5 (h5) looks like this

<pre> or <div class="code">

To display note use: Sample of your note !

To display pin note use :Sample of your pin note !

To display clip note use:Sample of your clip note

To display download note use:Sample of your download note

Ordered List

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Un-Ordered List

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Un-Ordered List witch class="tick"

<ul class="tick"><li>Your list item goes here!</li></ul>

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Un-Ordered List witch class="star"

<ul class="star"><li>Your list item goes here!</li></ul>

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Un-Ordered List witch class="plus"

<ul class="plus"><li>Your list item goes here!</li></ul>

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Blockquote

<blockquote><p>Your list item goes here!</p></blockquote>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Emphasis Tags

<em class="highlight black">your text</em>

An emphasis tag that allows you to highlight some text in black.

<em class="highlight blue">your text</em>

An emphasis tag that allows you to highlight some text in blue.

<em class="highlight red">your text</em>

An emphasis tag that allows you to highlight some text in red.

<em class="highlight green">your text</em>

An emphasis tag that allows you to highlight some text in green.

<em class="highlight yellow">your text</em>

An emphasis tag that allows you to highlight some text in yellow.

Image Frames

<img src="/images/yourimage.jpg" class="frame-1"/>

2 Column Layout

<div class="col-2"><div>First column of your content...</div></div>


<div class="col-2"><div>Second column of your content...</div></div>


<div class="clear"></div>

Etiam et lacus sit amet ipsum accumsan fringilla ac mattis odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc eu urna a metus ullamcorper dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada consequat libero sed adipiscing. Vestibulum erat nisi, pharetra vel condimentum nec, elementum quis nulla.

3 Column Layout

<div class="col-3"><div>First column of your content...</div></div>


<div class="col-3"><div>Second column of your content...</div></div>


<div class="col-3"><div>Third column of your content...</div></div>


<div class="clear"></div>

4 Column Layout

<div class="col-4"><div>First column of your content...</div></div>


<div class="col-4"><div>Second column of your content...</div></div>


<div class="col-4"><div>Third column of your content...</div></div>


<div class="col-4"><div>Fourth column of your content...</div></div>


<div class="clear"></div>

5 Column Layout

<div class="col-5"><div>First column of your content...</div></div>


<div class="col-5"><div>Second column of your content...</div></div>


<div class="col-5"><div>Third column of your content...</div></div>


<div class="col-5"><div>Fourth column of your content...</div></div>


<div class="col-5"><div>Fifth column of your content...</div></div>


<div class="clear"></div>

Etiam et lacus sit amet ipsum accumsan fringilla ac mattis odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus, urna at posuere viverra, erat libero scelerisque odio, a egestas odio neque ac mi. Donec a viverra eros. Sed semper, mauris non placerat tempus, elit tortor pretium odio, vitae bibendum turpis eros non lectus. Curabitur ante est, venenatis vel pellentesque at, fermentum sit amet nibh. Proin et vulputate orci. Sed vitae ipsum sed sapien venenatis congue eu at velit. Integer eget sem magna. Nam sed turpis tincidunt velit fringilla consectetur nec sit amet lacus. Praesent nunc tortor, placerat id posuere sed, cursus nec arcu. In sollicitudin, nulla interdum cursus malesuada, lectus dolor mollis mauris, sit amet varius odio est sed elit. Etiam pellentesque, mauris id aliquam blandit, dolor nunc tincidunt mi, vitae posuere massa enim ut augue. Nulla pretium tristique tempus.

Nulla facilisi. Nam vehicula mollis nisl id pretium. Vestibulum feugiat, lorem ac porta scelerisque, neque mi suscipit magna, in facilisis erat odio in arcu. Nulla rhoncus nibh eu felis blandit congue. Duis dolor mauris, varius vel malesuada vel, suscipit eget libero. Fusce non leo metus, at porttitor eros. Cras et enim elit. Nullam placerat luctus quam, eu tristique erat suscipit sed. Praesent quis nisi ut libero tempus tempor. Maecenas nisi turpis, lacinia ut vulputate nec, pretium ut lorem. Pellentesque eros magna, porta vitae eleifend eu, tempor non quam. Mauris quis volutpat nibh. Nullam tincidunt porttitor augue, in pharetra orci pharetra in.

Easily adjust your templates Column Layout via the Templates parameters which can be accessed by navigating to Extensions >> Template Manager >> JoomlageXXXX_YourTemplate.
From your 'Side Column Layout' dropdown simply set the layout of your side columns with options for both your side columns to appear on either the left or the right or on either side of your content/component area.
For a single column layout simply disable all modules in the SideColumn A and SideColumn B module positions. See all possible Column Layouts in image below.

Custom Page and Column Widths

Your Side Column Width can also be customised via the Templates parameters. Place the desired width of your Side Columns in the fileds provided. Your content area will automatically contract/expand to fill the remaining available area.

layouts

Curabitur ante est, venenatis vel pellentesque at, fermentum sit amet nibh. Proin et vulputate orci. Sed vitae ipsum sed sapien venenatis congue eu at velit. Integer eget sem magna. Nam sed turpis tincidunt velit fringilla consectetur nec sit amet lacus. Praesent nunc tortor, placerat id posuere sed, cursus nec arcu.