B Metis - Joomla 3.x Features

Typography Source code

<div class="tl_typo_text1"><strong>"Your content will be displayed below"</strong></div>

 

The below HTML code demonstrates how to config Typography like DEMO page.

 

<div class="tl_typo_text1">"Your content will be displayed below"</div>

It is possible with templates which have a typography page to show you how you can use e.g. headline tags in order to structure your content in a better way. Below, we present rebuilt and refreshed typographical aspects of Gavern Framework. In order to use it, you have to use a plug in which is delivered in a package with a template or use HTML code.

 

<div class="tl_typo_text2">"Your content will be displayed below"</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Phasellus venenatis mollis augue, non posuere odio placerat in. Etiam volutpat ultrices lectus. Fusce eu felis erat. Donec congue interdum elit, sed ornare magna convallis lacinia. In hac habitasse platea dictumst. Mauris volutpat consectetur accumsan.

 

Warnings

 

<div class="tpwarning_1"></div>

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue. Below, we present rebuilt and refreshed typographical aspects of Gavern Framework. In order to use it, you have to use a plug in which is delivered in a package with a template or use HTML code.

 

<div class="tpwarning_2"></div>

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue. Below, we present rebuilt and refreshed typographical aspects of Gavern Framework. In order to use it, you have to use a plug in which is delivered in a package with a template or use HTML code.

 

6. <div class="tpwarning_3"></div>

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue. Below, we present rebuilt and refreshed typographical aspects of Gavern Framework. In order to use it, you have to use a plug in which is delivered in a package with a template or use HTML code.

 

Headings

 

<p class="tpheading_1">

 

This is heading 1

 

<p class="tpheading_2">

 

This is heading 2

 

<p class="tpheading_3">

 

This is heading 3

 

<p class="tpheading_4">

This is heading 4

 

 

<p class="tpheading_5">

 

This is heading 5

 

SERVICES ICONS

Mentit comes with 62 different service ions you can choose from and use it to present your services.Every icon is allready styled in main CSS file "style.css". You can see the list of all icons available bellow. You can also edit rotate animation to degree you want, it's so simple.

You can change any module header by these steps:

  • Choose your module (Extensions-> Module manager -> Click on your module)
  • Click Advance tab
  • Fill in the Module Class Suffix: tl_sv_***, where *** is the icon name following this graphic:

 

Example: Fill in "tl_sv_home" then the module will be displayed below:

 

Highlights

 

This is a highlight phrase. Use <span class="tphighlight1">Your highlight phrase goes here!</span>.

This is a highlight phrase. Use <span class="tphighlight2">Your highlight phrase goes here!</span>.

This is a highlight phrase. Use <span class="tphighlight3">Your highlight phrase goes here!</span>.

This is a highlight phrase. Use <span class="tphighlight4">Your highlight phrase goes here!</span>.

 

Code

 

<div class="tpcode1">

  • #wrapper {
    position: relative;
    float: left;
    display: block;
    }

<div class="tpcode2">

  • #wrapper {
    position: relative;
    float: left;
    display: block;
    }

<div class="tpcode3">

  • #wrapper {
    position: relative;
    float: left;
    display: block;
    }
 
Dropcaps

 

<div class="tpdrop"><span class="tpdrop1">T</span>

  • This is a sample text with Dropcap.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula...

<div class="tpdrop"><span class="tpdrop2">T</span>

  • This is a sample text with Dropcap.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula...

<div class="tpdrop"><span class="tpdrop3">T</span>

  • This is a sample text with Dropcap.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula...

 

Blocks

 

<div class="tpblock1">

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="tpblock2">

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="tpblock3">

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="tpblock4">

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="tpblock5">

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="tpblock6">

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="tpblock7">

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="tpblock8">

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="tpblock9">

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 
Floated blocks

 

<div class="tploated">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.

 

<span class="tploatedleft">

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.

 

<span class="tploatedright">

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.

 

<span class="tploatedcenter">

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus.

numBlocks

 

<p><span class="tpnumblock num1">02</span>

  • 01Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


    02Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<p><span class="tpnumblock num2">01</span>

  • 01Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


    02Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<p><span class="tpnumblock num3">01</span>

  • 01Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


    02Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 
Unordered lists

 

<div class="tpunordered">
<ul class="tpunordered1">

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

<div class="tpunordered">
<ul class="tpunordered2">

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

<div class="tpunordered">
<ul class="tpunordered3">

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

<div class="tpunordered">
<ul class="tpunordered4">

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

<div class="tpunordered">
<ul class="tpunordered5">

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

<div class="tpunordered">
<ul class="tpunordered6">

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

<div class="tpunordered">
<ul class="tpunordered7">

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

<div class="tpunordered">
<ul class="tpunordered8">

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
 
TABS

 

<ul class="tptab">
<li class="active"><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>

<div class="tptab_text">

"Your text"

Integer mollis elementum odio, eget consectetur arcu condi acm ent um sit amet. Donec eui smod, justo quis vulputate varius, leo turpis pretium risus, et molestie mauris jto sit amet.
 
Button

<div class="tpbutton"><button class="tpbutton1">SMALL</button></div>

<div class="tpbutton"><button class="tpbutton2">MEDIUM</button></div>

<div class="tpbutton"><button class="tpbutton3">LARGE BUTTON</button></div>

 
 
Joomla BJ Metis template by ByJoomla.com