The template comming with built-in parallax script for background images. You can use parallax for backgrounds of whole sections which handling the modules positions. These backgrounds and parallax options can be managed in the template settings area. Also, the template comming with the custom module style which allows to use a parallax for module background.

An example of section parallax background can be seen above and here is an example of module with parallax background:

Parallax Module

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This sample use following module class suffix: _style7 custom-color4

The template comming with huge selection of icons you can easy use in your content. Thanks to the FontAwesome icons support you can rich your text to make it more outstanding and attractive for your visitors. 

Available Icons

  1. New icons
  2. Web Application Icons
  3. Accessibility Icons
  4. Hand Icons
  5. Transportation Icons
  6. Gender Icons
  7. File Type Icons
  8. Spinner Icons
  9. Form Control Icons
  10. Payment Icons
  11. Chart Icons
  12. Currency Icons
  13. Text Editor Icons
  14. Directional Icons
  15. Video Player Icons
  16. Brand Icons
  17. Medical Icons

How to use icons

  1. Basic Usage
  2. Larger Icons
  3. Fixed Width Icons
  4. Animated Icons
  5. Rotated & Flipped

 

address-book
address-book-o
address-card
address-card-o
bandcamp
bath
bathtub
drivers-license
drivers-license-o
eercast
envelope-open
envelope-open-o
etsy
free-code-camp
grav
handshake-o
id-badge
id-card
id-card-o
imdb
linode
meetup
microchip
podcast
quora
ravelry
s15
shower
snowflake-o
superpowers
telegram
thermometer
thermometer-0
thermometer-1
thermometer-2
thermometer-3
thermometer-4
thermometer-empty
thermometer-full
thermometer-half
thermometer-quarter
thermometer-three-quarters
times-rectangle
times-rectangle-o
user-circle
user-circle-o
user-o
vcard
vcard-o
window-close
window-close-o
window-maximize
window-minimize
window-restore
wpexplorer

 

   adjust
   american-sign-language-interpreting
   anchor
   archive
   area-chart
   arrows
   arrows-h
   arrows-v
   asl-interpreting
   assistive-listening-systems
   asterisk
   at
   audio-description
   automobile
   balance-scale
   ban
   bank
   bar-chart
   bar-chart-o
   barcode
   bars
   battery-0
   battery-1
   battery-2
   battery-3
   battery-4
   battery-empty
   battery-full
   battery-half
   battery-quarter
   battery-three-quarters
   bed
   beer
   bell
   bell-o
   bell-slash
   bell-slash-o
   bicycle
   binoculars
   birthday-cake
   blind
   bluetooth
   bluetooth-b
   bolt
   bomb
   book
   bookmark
   bookmark-o
   braille
   briefcase
   bug
   building
   building-o
   bullhorn
   bullseye
   bus
   cab
   calculator
   calendar
   calendar-check-o
   calendar-minus-o
   calendar-o
   calendar-plus-o
   calendar-times-o
   camera
   camera-retro
   car
   caret-square-o-down
   caret-square-o-left
   caret-square-o-right
   caret-square-o-up
   cart-arrow-down
   cart-plus
   cc
   certificate
   check
   check-circle
   check-circle-o
   check-square
   check-square-o
   child
   circle
   circle-o
   circle-o-notch
   circle-thin
   clock-o
   clone
   close
   cloud
   cloud-download
   cloud-upload
   code
   code-fork
   coffee
   cog
   cogs
   comment
   comment-o
   commenting
   commenting-o
   comments
   comments-o
   compass
   copyright
   creative-commons
   credit-card
   credit-card-alt
   crop
   crosshairs
   cube
   cubes
   cutlery
   dashboard
   database
   deaf
   deafness
   desktop
   diamond
   dot-circle-o
   download
   edit
   ellipsis-h
   ellipsis-v
   envelope
   envelope-o
   envelope-square
   eraser
   exchange
   exclamation
   exclamation-circle
   exclamation-triangle
   external-link
   external-link-square
   eye
   eye-slash
   eyedropper
   fax
   feed
   female
   fighter-jet
   file-archive-o
   file-audio-o
   file-code-o
   file-excel-o
   file-image-o
   file-movie-o
   file-pdf-o
   file-photo-o
   file-picture-o
   file-powerpoint-o
   file-sound-o
   file-video-o
   file-word-o
   file-zip-o
   film
   filter
   fire
   fire-extinguisher
   flag
   flag-checkered
   flag-o
   flash
   flask
   folder
   folder-o
   folder-open
   folder-open-o
   frown-o
   futbol-o
   gamepad
   gavel
   gear
   gears
   gift
   glass
   globe
   graduation-cap
   group
   hand-grab-o
   hand-lizard-o
   hand-paper-o
   hand-peace-o
   hand-pointer-o
   hand-rock-o
   hand-scissors-o
   hand-spock-o
   hand-stop-o
   hard-of-hearing
   hashtag
   hdd-o
   headphones
   heart
   heart-o
   heartbeat
   history
   home
   hotel
   hourglass
   hourglass-1
   hourglass-2
   hourglass-3
   hourglass-end
   hourglass-half
   hourglass-o
   hourglass-start
   i-cursor
   image
   inbox
   industry
   info
   info-circle
   institution
   key
   keyboard-o
   language
   laptop
   leaf
   legal
   lemon-o
   level-down
   level-up
   life-bouy
   life-buoy
   life-ring
   life-saver
   lightbulb-o
   line-chart
   location-arrow
   lock
   low-vision
   magic
   magnet
   mail-forward
   mail-reply
   mail-reply-all
   male
   map
   map-marker
   map-o
   map-pin
   map-signs
   meh-o
   microphone
   microphone-slash
   minus
   minus-circle
   minus-square
   minus-square-o
   mobile
   mobile-phone
   money
   moon-o
   mortar-board
   motorcycle
   mouse-pointer
   music
   navicon
   newspaper-o
   object-group
   object-ungroup
   paint-brush
   paper-plane
   paper-plane-o
   paw
   pencil
   pencil-square
   pencil-square-o
   percent
   phone
   phone-square
   photo
   picture-o
   pie-chart
   plane
   plug
   plus
   plus-circle
   plus-square
   plus-square-o
   power-off
   print
   puzzle-piece
   qrcode
   question
   question-circle
   question-circle-o
   quote-left
   quote-right
   random
   recycle
   refresh
   registered
   remove
   reorder
   reply
   reply-all
   retweet
   road
   rocket
   rss
   rss-square
   search
   search-minus
   search-plus
   send
   send-o
   server
   share
   share-alt
   share-alt-square
   share-square
   share-square-o
   shield
   ship
   shopping-bag
   shopping-basket
   shopping-cart
 sign-in
   sign-language
   sign-out
   signal
   signing
   sitemap
   sliders
   smile-o
   soccer-ball-o
   sort
   sort-alpha-asc
   sort-alpha-desc
   sort-amount-asc
   sort-amount-desc
   sort-asc
   sort-desc
   sort-down
   sort-numeric-asc
   sort-numeric-desc
   sort-up
   space-shuttle
   spinner
   spoon
   square
   square-o
   star
   star-half
   star-half-empty
   star-half-full
   star-half-o
   star-o
   sticky-note
   sticky-note-o
   street-view
   suitcase
   sun-o
   support
   tablet
   tachometer
   tag
   tags
   tasks
   taxi
   television
   terminal
   thumb-tack
   thumbs-down
   thumbs-o-down
   thumbs-o-up
   thumbs-up
   ticket
   times
   times-circle
   times-circle-o
   tint
   toggle-down
   toggle-left
   toggle-off
   toggle-on
   toggle-right
   toggle-up
   trademark
   trash
   trash-o
   tree
   trophy
   truck
   tty
   tv
   umbrella
   universal-access
   university
   unlock
   unlock-alt
   unsorted
   upload
   user
   user-plus
   user-secret
   user-times
   users
   video-camera
   volume-control-phone
   volume-down
   volume-off
   volume-up
   warning
   wheelchair
   wheelchair-alt
   wifi
   wrench

 

   american-sign-language-interpreting
   asl-interpreting
   assistive-listening-systems
   audio-description
   blind
   braille
   cc
   deaf
   deafness
   hard-of-hearing
   low-vision
   question-circle-o
   sign-language
   signing
   tty
   universal-access
   volume-control-phone
   wheelchair
   wheelchair-alt

 

   hand-grab-o
   hand-lizard-o
   hand-o-down
   hand-o-left
   hand-o-right
   hand-o-up
   hand-paper-o
   hand-peace-o
   hand-pointer-o
   hand-rock-o
   hand-scissors-o
   hand-spock-o
   hand-stop-o
   thumbs-down
   thumbs-o-down
   thumbs-o-up
   thumbs-up

 

   ambulance
   automobile
   bicycle
   bus
   cab
   car
   fighter-jet
   motorcycle
   plane
   rocket
   ship
   space-shuttle
   subway
   taxi
   train
   truck
   wheelchair
   wheelchair-alt

 

   genderless
   intersex
   mars
   mars-double
   mars-stroke
   mars-stroke-h
   mars-stroke-v
   mercury
   neuter
   transgender
   transgender-alt
   venus
   venus-double
   venus-mars

 

   file
   file-archive-o
   file-audio-o
   file-code-o
   file-excel-o
   file-image-o
   file-movie-o
   file-o
   file-pdf-o
   file-photo-o
   file-picture-o
   file-powerpoint-o
   file-sound-o
   file-text
   file-text-o
   file-video-o
   file-word-o
   file-zip-o

 

   circle-o-notch
   cog
   gear
   refresh
   spinner

 

   check-square
   check-square-o
   circle
   circle-o
   dot-circle-o
   minus-square
   minus-square-o
   plus-square
   plus-square-o
   square
   square-o

 

   cc-amex
   cc-diners-club
   cc-discover
   cc-jcb
   cc-mastercard
   cc-paypal
   cc-stripe
   cc-visa
   credit-card
   credit-card-alt
   google-wallet
   paypal

 

   area-chart
   bar-chart
   bar-chart-o
   line-chart
   pie-chart

 

   bitcoin
   btc
   cny
   dollar
   eur
   euro
   gbp
   gg
   gg-circle
   ils
   inr
   jpy
   krw
   money
   rmb
   rouble
   rub
   ruble
   rupee
   shekel
   sheqel
   try
   turkish-lira
   usd
   won
   yen

 

   align-center
   align-justify
   align-left
   align-right
   bold
   chain
   chain-broken
   clipboard
   columns
   copy
   cut
   dedent
   eraser
   file
   file-o
   file-text
   file-text-o
   files-o
   floppy-o
   font
   header
   indent
   italic
   link
   list
   list-alt
   list-ol
   list-ul
   outdent
   paperclip
   paragraph
   paste
   repeat
   rotate-left
   rotate-right
   save
   scissors
   strikethrough
   subscript
   superscript
   table
   text-height
   text-width
   th
   th-large
   th-list
   underline
   undo
   unlink

 

   angle-double-down
   angle-double-left
   angle-double-right
   angle-double-up
   angle-down
   angle-left
   angle-right
   angle-up
   arrow-circle-down
   arrow-circle-left
   arrow-circle-o-down
   arrow-circle-o-left
   arrow-circle-o-right
   arrow-circle-o-up
   arrow-circle-right
   arrow-circle-up
   arrow-down
   arrow-left
   arrow-right
   arrow-up
   arrows
   arrows-alt
   arrows-h
   arrows-v
   caret-down
   caret-left
   caret-right
   caret-square-o-down
   caret-square-o-left
   caret-square-o-right
   caret-square-o-up
   caret-up
   chevron-circle-down
   chevron-circle-left
   chevron-circle-right
   chevron-circle-up
   chevron-down
   chevron-left
   chevron-right
   chevron-up
   exchange
   hand-o-down
   hand-o-left
   hand-o-right
   hand-o-up
   long-arrow-down
   long-arrow-left
   long-arrow-right
   long-arrow-up
   toggle-down
   toggle-left
   toggle-right
   toggle-up

 

   arrows-alt
   backward
   compress
   eject
   expand
   fast-backward
   fast-forward
   forward
   pause
   pause-circle
   pause-circle-o
   play
   play-circle
   play-circle-o
   random
   step-backward
   step-forward
   stop
   stop-circle
   stop-circle-o
   youtube-play

 

   500px
   adn
   amazon
   android
   angellist
   apple
   behance
   behance-square
   bitbucket
   bitbucket-square
   bitcoin
   black-tie
   bluetooth
   bluetooth-b
   btc
   buysellads
   cc-amex
   cc-diners-club
   cc-discover
   cc-jcb
   cc-mastercard
   cc-paypal
   cc-stripe
   cc-visa
   chrome
   codepen
   codiepie
   connectdevelop
   contao
   css3
   dashcube
   delicious
   deviantart
   digg
   dribbble
   dropbox
   drupal
   edge
   empire
   envira
   expeditedssl
   fa
   facebook
   facebook-f
   facebook-official
   facebook-square
   firefox
   first-order
   flickr
   font-awesome
   fonticons
   fort-awesome
   forumbee
   foursquare
   ge
   get-pocket
   gg
   gg-circle
   git
   git-square
   github
   github-alt
   github-square
   gitlab
   gittip
   glide
   glide-g
   google
   google-plus
   google-plus-circle
   google-plus-official
   google-plus-square
   google-wallet
   gratipay
   hacker-news
   houzz
   html5
   instagram
   internet-explorer
   ioxhost
   joomla
   jsfiddle
   lastfm
   lastfm-square
   leanpub
   linkedin
   linkedin-square
   linux
   maxcdn
   meanpath
   medium
   mixcloud
   modx
   odnoklassniki
   odnoklassniki-square
   opencart
   openid
   opera
   optin-monster
   pagelines
   paypal
   pied-piper
   pied-piper-alt
   pied-piper-pp
   pinterest
   pinterest-p
   pinterest-square
   product-hunt
   qq
   ra
   rebel
   reddit
   reddit-alien
   reddit-square
   renren
   resistance
   safari
   scribd
   sellsy
   share-alt
   share-alt-square
   shirtsinbulk
   simplybuilt
   skyatlas
   skype
   slack
   slideshare
   snapchat
   snapchat-ghost
   snapchat-square
   soundcloud
   spotify
   stack-exchange
   stack-overflow
   steam
   steam-square
   stumbleupon
   stumbleupon-circle
   tencent-weibo
   themeisle
   trello
   tripadvisor
   tumblr
   tumblr-square
   twitch
   twitter
   twitter-square
   usb
   viacoin
   viadeo
   viadeo-square
   vimeo
   vimeo-square
   vine
   vk
   wechat
   weibo
   weixin
   whatsapp
   wikipedia-w
   windows
   wordpress
   wpbeginner
   wpforms
   xing
   xing-square
   y-combinator
   y-combinator-square
   yahoo
   yc
   yc-square
   yelp
   yoast
   youtube
   youtube-play
   youtube-square

 

   ambulance
   h-square
   heart
   heart-o
   heartbeat
   hospital-o
   medkit
   plus-square
   stethoscope
   user-md
   wheelchair
   wheelchair-alt

 

 

How To Use Icons

Here you can find all informations necessary to allow you to put an icons into your content. To find out more about FontAwesome visit http://fontawesome.io/.

 

Basic Usage

 Example: basic icon fa-camera-retro

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

<i class="fa fa-camera-retro"></i> fa-camera-retro

Note: TinyMCE by default removes an empty tags so, when you put an icon code and save your icon will be removed. To prevent it go to Extensions Plugins and open Editor - TinyMCE. Find Extended Valid Elements field and type i[*] and click Save.

  fa-lg

  fa-2x

  fa-3x

  fa-4x

  fa-5x

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

<a class= href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>

Loading example (with fa-spinner icon) Loading (with fa-circle-o-notch icon) Loading example (with fa-refresh icon) Loading example (with fa-cog icon) Loading example (with fa-spinner icon)

Use the fa-spin class to get any icon to rotate, and use fa-pulse to have it rotate with 8 steps. Works well with fa-spinner, fa-refresh, and fa-cog.

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

Note: CSS3 animations aren't supported in IE8 - IE9.

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

The template provides following built-in styles which you can use to make your content more outstanding. 

Modules with simple styling

Default Module

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Text Module

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _text

Module Style 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style1

Module Style 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style2

Modules Style 3

Module Style 3 Color 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style3 color1

Module Style 3 Color 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style3 color2

Module Style 3 Color 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style3 color3

Modules Style 3 with shadow

Module Style 3 Color 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style3 color1 shadow

Module Style 3 Color 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style3 color2 shadow

Module Style 3 Color 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style3 color3 shadow

Modules Style 3 with rounded corners

Module Style 3 Color 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style3 color1 shadow radius

Module Style 3 Color 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style3 color2 shadow radius

Module Style 3 Color 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style3 color3 shadow radius

Modules with scroll reveal

Scroll Reveal 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix moveup

This sample use following module class suffix: _style3 color3 shadow radius moveup

Scroll Reveal 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix movedown

This sample use following module class suffix: _style3 color2 shadow radius moveup

 

Scroll Reveal 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix moveleft

This sample use following module class suffix: _style3 color2 shadow radius moveup

Scroll Reveal 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix moveright

This sample use following module class suffix: _style3 color3 shadow radius moveup

Modules Style 4

Module Style 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style4 color1

Module Style 4 Color 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style4 color2

Module Style 4 Color 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Module Class Suffix _style4 color3

You can also use following suffixes with modules with style4 applied: color1, color2, color3, moveup, movedown, moveleft, moveright.

To use FontAwesome icons in Style4 module type icon name in Header Class field

Modules Style 5

Module Style 5 Color 1

Module with image

Module Class Suffix _style5 color1 shadow

Module Style 5 Color 2

Module with image

Module Class Suffix _style5 color2

Module Style 5 Color 3

Module with image

Module Class Suffix _style5 color3

Modules Style 6

Module Style 6 Color 1

Module Style 6 Color 1

 

Module Class Suffix _style6 tes-down color1

Module Style 6 Color 2

Module Style 6 Color 2

 

Module Class Suffix _style6 tes-up color2

Module Style 6 Color 3

Module Style 6 Color 3

 

Module Class Suffix _style6 tes-down color3

To display person photo, name and stars above or below use tes-up or tes-down.
To display stars below the person name use one of following classes in Header Class field: stars5, stars4, stars3, stars2, stars1

Custom Module With Simple Parallax Image

Parallax Module

Parallax Module

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This sample use following module class suffix: _style7 custom-color4

Usage

Module Class Suffix:  _style7
Module Style:  parallax
To align the text vertically use one of following suffixes: text-top, text-middle or text-bottom. By default the text is set on middle.

 

All these elements are just for demo purpose. You can achieve these styles by using a normal HTML editor and TinyMCE (WYSIWYG editor and HTML mode).

 

Headings

All HTML headings, <h1> through <h6> are available.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body copy

Bootstrap’s global default font-size is 13px, with a line-height of 19px. However you can set up your own font size value in the template settings area. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Lead body copy

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Emphasis

Make use of HTML’s default emphasis tags with lightweight styles.

<small>

For de-emphasizing inline or blocks of text, use the small tag.

This line of text is meant to be treated as fine print.

<p>
  <small>This line of text is meant to be treated as fine print.</small>
</p>

Bold

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.


Abbreviations

Stylized implemenation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

<abbr>

For expanded text on long hover of an abbreviation, include the title attribute.

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

<abbr class="initialism">

Add .initialism to an abbreviation for a slightly smaller font-size.

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Addresses

Present contact information for the nearest ancestor or the entire body of work.

<address>

Preserve formatting by ending all lines with <br>.

<address>
  <strong>Template Developer, Inc.</strong><br>
  123 Some Nice Ave, Suite 123<br>
  San Francisco, CA 98765<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">Ova e-mail adresa je zaštićena od spambota. Potrebno je omogućiti JavaScript da je vidite.</a>
</address>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard blockquote.

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Alternate displays

Use .pull-right for a floated, right-aligned blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote class="pull-right">
  ...
</blockquote>

 

Lists

Unordered

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

Unstyled

A list of items with no list-style or additional left padding.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="unstyled">
  <li>...</li>
</ul>

Description

A list of terms with their associated descriptions.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontal description

Make terms and descriptions in <dl> line up side-by-side.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Heads up!
Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.


 

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.
	For example, <code><section></code> should be wrapped as inline.

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>
<pre>
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.


 

Add classes to an <img> element to easily style images in any project.

<img src="/..." class="img-rounded">
<img src="/..." class="img-circle">
<img src="/..." class="img-polaroid">

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

By putting all of your content into nested categories you can give users and search engines access to everything using a menu.

Potkategorije

The Joomla! content management system lets you create webpages of various types using extensions. There are 5 basic types of extensions: components, modules, templates, languages, and plugins. Your website includes the extensions you need to create a basic website in English, but thousands of additional extensions of all types are available. The Joomla! Extensions Directory is the largest directory of Joomla extensions.

Components are larger extensions that produce the major content for your site. Each component has one or more "views" that control how content is displayed. In the Joomla administrator there are additional extensions such as Menus, Redirection, and the extension managers.

Modules are small blocks of content that can be displayed in positions on a web page. The menus on this site are displayed in modules. The core of Joomla! includes 24 separate modules ranging from login to search to random images. Each module has a name that starts mod_ but when it displays it has a title. In the descriptions in this section, the titles are the same as the names.

Content modules display article and other information from the content component.

User modules interact with the user system, allowing users to login, show who is logged-in, and showing the most recently registered users.

These modules display information from components other than content and user. These include weblinks, news feeds and the media manager.

Utility modules provide useful functionality such as search, syndication and statistics.

Navigation modules help your visitors move through your site and find what they need.

Menus provide your site with structure and help your visitors navigate your site. Although they are all based on the same menu module, the variety of ways menus are used in the sample data show how flexible this module is.

A menu can range from extremely simple (for example the top menu or the menu for the Australian Parks sample site) to extremely complex (for example the About Joomla! menu with its many levels). They can also be used for other types of presentation such as the site map linked from the "This Site" menu.

Breadcrumbs provide users with information about where they are in a site.

Templates give your site its look and feel. They determine layout, colours, typefaces, graphics and other aspects of design that make your site unique. Your installation of Joomla comes prepackaged with three front end templates and two backend templates. Help

Plugins are small task oriented extensions that enhance the Joomla! framework. Some are associated with particular extensions and others, such as editors, are used across all of Joomla. Most beginning users do not need to change any of the plugins that install with Joomla. Help

We search the whole countryside for the best fruit growers.

You can let each supplier have a page that he or she can edit. To see this in action you will need to create a user who is in the suppliers group.

Create one page in the growers category for that user and make that supplier the author of the page. That user will be able to edit his or her page.

This illustrates the use of the Edit Own permission.


TOP