Joomla Templates Club 406,261 posts

[michelebugliaro Friend michelebugliaroJoin date: February 2014Posts: 36Downloads:0Uploads:8 Thanks: 17 Thanked: 4 times in 1 posts]

#195525

Hi guys, I did not relize it at first: despite NOT being based on Bootstrap, there are improvements for this template.

Columns
While not clearly documented, the template allows columns to be used. There is no shortcode but you can insert the necessary html. Here is the 3 columns:
<div class=”ja-typo-blockswrap clearfix”>
<h1 class=”ja-typo-title”><span>Lists Style</span></h1>
<div class=”ja-typo-blockrow cols-3 clearfix”>
<div class=”ja-typo-block first clearfix”>
<h2 class=”ja-typo-title”><span>Ordered List</span></h2>
<div class=”ja-typo-blockct clearfix”><ol>
<li>This is a sample <strong>Ordered List</strong>.</li>
<li>Lorem ipsum dolor sit amet consectetur</li>
<li>Lorem ipsum dolor sit amet consectetur</li>
<li>Lorem ipsum dolor sit amet consectetur</li>
</ol></div>
</div>
<div class=”ja-typo-block”>
<h2 class=”ja-typo-title”><span>Un-Ordered List</span></h2>
<div class=”ja-typo-blockct clearfix”>
<ul>
<li>This is a sample <strong>Unordered List</strong>.</li>
<li>Lorem ipsum dolor sit amet consectetur</li>
<li>Lorem ipsum dolor sit amet consectetur</li>
<li>Lorem ipsum dolor sit amet consectetur</li>
</ul>
</div>
</div>
<div class=”ja-typo-block last clearfix”>
<h2 class=”ja-typo-title”><span>Definition List</span></h2>
<div class=”ja-typo-blockct clearfix”><dl><dt>This is a sample <strong>Definition List</strong>.</dt><dd>Condimentum quis.</dd><dd>Congue Quisque augue elit dolor.</dd><dd>Congue Quisque augue elit dolor.</dd></dl></div>
</div>
</div>
</div>

Titles
You can have nice titles just like in the demo. The last div must be placed at the end of the paragraph block.
<div class=”ja-typo-blockswrap clearfix”>
<h1 class=”ja-typo-title”><span>About me</span></h1>
…
</div>

Bootstrap components
You can use them, it’s easy. Just add the CSS and the necessary html. For progress bars:
<div class=”progress”>
<div class=”progress-bar progress-bar-success” role=”progressbar” aria-valuenow=”40″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 40%”>
<span class=”sr-only”>40% Complete (success)</span>
</div>

The CSS is:
.progress {
overflow: hidden;
height: 20px;
margin-bottom: 20px;
background-color: #dddddd
border-radius: 4px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
}

.progress-bar {
float: left;
width: 0px;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #FFF
text-align: center;
background-color: #3E679
box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.15) inset;
transition: width 0.6s ease 0s;
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0px;
overflow: hidden;
clip: rect(0px, 0px, 0px, 0px);
border: 0px none;
}

If you want, there is a nice plugin to have font awesome. Link

[Author]

Posts