Tel/Fax: +4-0260-669881

ShortCodes

You can create some beautiful content by using some simple HTML elements. Mj Simple template offers some neat styles for all HTML elements and a great set of CSS classes to style your content. Basic HTML is very easy to learn and this small guide shows you how to use all styles provided by the Mj Simple theme.

 

Basic HTML Elements

Here is a short demonstration of text-level semanticts. The <p> element creates a new paragraph. It will have some space before and after itself. To turn your text into hypertext just use the <a> element.

 

This is an H1 Heading

This is an H2 Heading

This is an H3 Heading

This is an H4 Heading

This is an H5 Heading
This is an H6 Heading

H1 with a dotted line

H2 with a dotted line

H3 with a dotted line

H4 with a dotted line

H5 with a dotted line
H6 with a dotted line

 

Simple Unordered List

  • Lorem ipsum dolor mj-bullet1
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet2
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet3
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet4
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet5
  • consectetur adipisicing elit
  • sed do eiusmod tempor
  • Lorem ipsum dolor mj-bullet6
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet7
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet8
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet9
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

  • Lorem ipsum dolor mj-bullet10
  • consectetur adipisicing elit
  • sed do eiusmod tempor

 

To use the bullet list style create a list in the following format

[list mj-bullet-1][li]...[/li][li]...[/li][/list]

 

Block Numbers and Events

1  Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

 

2  Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

 

3  Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

03 dec

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

03 jan

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

03 apr

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

 

To use the block number style create a paragraph in the following format

[mj-block-number]{number}[/mj-block-number]

 

To use the event-time block style create a paragraph in the following format

[mj-event 03:dec] your description here[/mj-event]

 

Simple Ordered List

  1. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
  2. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
  3. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
  4. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
  1. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
  2. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
  3. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
  4. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum

 

Content Highlighter

Drop caps are the first letter of a paragraph which are displayed bigger than the rest of the text. You can create a drop cap using the CSS class dropcap. To emphasize text with some small boxes use <em> element with the CSS class box.

This simple box is intended to group large parts of your content using the CSS class [mj-boxcontent]...[/box].
This simple box is intended to group large parts of your content using the CSS class [mj-boxnote]...[/box].
This simple box is intended to group large parts of your content using the CSS class [mj-boxinfo]...[/box].
This simple box is intended to group large parts of your content using the CSS class [mj-box-fail]...[/box].
This simple box is intended to group large parts of your content using the CSS class [mj-boxhint]...[/box].
This simple box is intended to group large parts of your content using the CSS class [mj-box-success]...[/box].

 

Tables

Table HeadingTable HeadingTable Heading
Table Footer Table Footer Table Footer
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

 

 

To use the buttons in your content use the following format:

[mj-whitebutton href="#"]button text[/button]

 

 

To use the buttons in your content use the following format:

[button href="#"]button text[/button]

 

Tabs

Tab1

Syntax to add Tab
[div class="tabber"]
[div class="tabbertab"]
[h3]Tab Title[/h3]
Tab content
[/div]
[div class="tabbertab"]
[h3]Tab Title[/h3]
Tab content
[/div]
[/div]

Tab2

Tab2 Content

Tab3

Tab3 Content

Tab4

Tab4 Content