mojoomla
Osmart

Shortcodes

This section is devoted to shortcodes available in Osmart template. Following is the detailed review of each of shortcodes.

Columns

Columns are useful to define the layout of your pages. The template supports up to 16 column layouts with many combinations.

 

Column Type Description Sample Code
Mj Grid8 Use 8% space of page <div class="mj-grid8">Your content...</div>
Mj Grid16 Use 16% space of page <div class="mj-grid16">Your content...</div>
Mj Grid24 Use 24% space of page <div class="mj-grid24">Your content...</div>
Mj Grid32 Use 32% space of page <div class="mj-grid32">Your content...</div>
Mj Grid40 Use 40% space of page <div class="mj-grid40">Your content...</div>
Mj Grid48 Use 48% space of page <div class="mj-grid48">Your content...</div>
Mj Grid56 Use 56% space of page <div class="mj-grid56">Your content...</div>
Mj Grid64 Use 64% space of page <div class="mj-grid64">Your content...</div>
Mj Grid72 Use 72% space of page <div class="mj-grid72">Your content...</div>
Mj Grid80 Use 80% space of page <div class="mj-grid80">Your content...</div>
Mj Grid88 Use 88% space of page <div class="mj-grid88">Your content...</div>
Mj Grid96 Use 96% space of page <div class="mj-grid96">Your content...</div>
Left Space Use to remove left margin <div class="mj-grid96 mj-lspace">Your content...</div>
Right Space Use to remove right margin <div class="mj-grid96 mj-rspace">Your content...</div>

 

Module Positions

You can use different module Positions in your template. Following module positions are added

 

Module Position

 

Lists

Simple Unordered List

There are 10 different styles list.

 

 

Below is a sample syntax:

<ul class="mj-bullet1">
<li>Lorem ipsum dolor</li>
<li>consectetur adipisicing elit</li>
<li>sed do eiusmod tempor</li>
</ul>

Special Unordered List

There are 12 different styles list.

 

 

Below is a sample syntax:

<ul class="mj-special2">
<li>Lorem ipsum dolor</li>
<li>consectetur adipisicing elit</li>
<li>sed do eiusmod tempor</li>
</ul>

 

Content Highlighter

There are several box style used to highlight content.

 

content-highlighter

 

  • Box Content

    Syntax: <div class="mj-boxcontent">Your Content...</div>

  • Box Note

    Syntax: <div class="mj-boxnote">Your Content...</div>

  • Box Info

    Syntax: <div class="mj-boxinfo">Your Content...</div>

  • Box Warning

    Syntax: <div class="mj-boxwarning">Your Content...</div>

  • Box Hint

    Syntax: <div class="mj-boxhint">Your Content...</div>

  • Box Download

    Syntax: <div class="mj-boxdownload">Your Content...</div>

 

Buttons

Stylish buttons with variety of options. Below is the list of classes for the buttons with the corresponding syntax.

 

Simple Button

simple-button

 

<a href="#" class="mj-simplebutton">normal</a>

 

Color Button

color-button

 

<a href="#" class="button">normal</a>

 

White Button

white-button

 

<a href="#" class="mj-whitebutton">normal</a>

 

Color Variation

There are 8 different color variations are used in this template

 

color

 

color variation

 

Steps to select template color:

1) Login to administrator panel.
2) Goto Os-Mart -> Os-Mart Color.
3) Select color from the options.
4) Click on Submit button to apply it.