Typography

About Typography:

Take care about your typography to make better user experience for your readers. How to achieve that?

  • Learn more about typography, escpecially about the most often used codes, such as <p>, <h1>, <h2>, <h3>, <img> and <a>.
  • This template has valid XHTML, but if you want to keep it like that, you must learn and follow the XHTML principles. Also, if some of your extensions are not XHTML valid, pages based on this component would not be XHTML valid as well (no matter if template itself is valid).
  • Familiarize yourself with CSS styles that comes with this template.
  • Never copy/paste directly from layout text editors, such as Microsoft Word or OpenOffice. Try to paste text in plain editors first (such as Notepad).
  • Use a WYSIWYG editor that comes with Joomla or install a better editor, but always check your code in the editor’s HTML mode.

 

Heading 1

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading 2

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading 3

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading 4

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

 

Quote/Citation

My mother said to me, “If you are a soldier, you will become a general. If you are a monk, you will become the Pope.” Instead, I was a painter, and became Picasso… To have a quote styled like that, apply “quote” style, like in this sample code: <div class=”quote”> …your text here… </div>

 

Paragraph with Big First Letter

This is a dropcap style applied to a paragraph of text. To use it, apply class of dropcap to your paragraph of text, in example: <p class=”dropcap”>…some text goes here…</p>. To edit this style, find class .dropcap in CSS stylesheet file template_css.css.

 

Notice Styles with Background Color

This is a warning message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here’s a sample code: <p class=”warning”>…your text here…</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

This is an information message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here’s a sample code: <p class=”info”>…your text here…</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

This is an error message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here’s a sample code: <p class=”error”>…your text here…</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

 

Notice Styles with Outline

This is a warning message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here’s a sample code: <p class=”warning outline”>…your text here…</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

This is an information message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here’s a sample code: <p class=”info outline”>…your text here…</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

This is an error message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here’s a sample code: <p class=”error outline”>…your text here…</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

 

Blockquote

This is an information message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect. To use this style, wrap your text in blockquote element, like this <blockquote> your content here </blockquote>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 

Legend

This is legend’s heading

This is an information message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect. To use this style, wrap your text in legend element, like this <legend> <h4>Heading</h4> <p>your content here </p> </legend>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 

Typewriter Style

This is typewriter style you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect. Here’s a sample code: <p class=”typewriter”>…your text here…</p>. This style uses a font with constant width of characters.

 

Paragraphs Marked with a Number/Letter:

1This is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph, and wrap it in span with a class of p_number, like this: <p><span class=”p_number”>1</span>…your text here…</p>

 

2This is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph, and wrap it in span with a class of p_number, like this: <p><span class=”p_number”>2</span>…your text here…</p>

 

AThis is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph, and wrap it in span with a class of p_number, like this: <p><span class=”p_number”>A</span>…your text here…</p>

 

BThis is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph, and wrap it in span with a class of p_number, like this: <p><span class=”p_number”>B</span>…your text here…</p>

 

 

Code Style

To achieve this style, wrap your content in <code> tag.

#some_style {
  float: left;
  display: block;
}

 

Unordered and Ordered Lists

Unordered list sample:

  • list element one
  • list element two
    • list subelement one
    • list subelement two
    • list subelement three
  • list element three
  • list element four

Ordered list sample:

  1. list element one
  2. list element two
    1. list subelement one
    2. list subelement two
    3. list subelement three
  3. list element three
  4. list element four

 

Lists with Icons

Arrow list sample:

  • to achieve this effect
  • add class “arrow” to UL
  • like <ul class=”arrow”>

Arrow (left) list sample:

  • to achieve this effect
  • add class “arrowleft” to UL
  • like <ul class=”arrowleft”>

Calendar list sample:

  • to achieve this effect
  • add class “calendar” to UL
  • like <ul class=”calendar”>

Check list sample:

  • to achieve this effect
  • add class “checklist” to UL
  • like <ul class=”checklist”>

Delete list sample:

  • to achieve this effect
  • add class “delete” to UL
  • like <ul class=”delete”>

Email list sample:

File list sample:

  • to achieve this effect
  • add class “file” to UL
  • like <ul class=”file”>

Folder list sample:

  • to achieve this effect
  • add class “folder” to UL
  • like <ul class=”folder”>

Hearts list sample:

  • to achieve this effect
  • add class “heart” to UL
  • like <ul class=”heart”>

Information list sample:

  • to achieve this effect
  • add class “information”
  • <ul class=”information”>

Lock list sample:

  • to achieve this effect
  • add class “lock” to UL
  • like <ul class=”lock”>

Pencil list sample:

  • to achieve this effect
  • add class “star” to UL
  • like <ul class=”pencil”>

Persons list sample:

  • to achieve this effect
  • add class “person” to UL
  • like <ul class=”person”>

RSS list sample:

  • to achieve this effect
  • add class “rss” to UL
  • like <ul class=”rss”>

Shopping basket list sample:

  • to achieve this effect
  • add class “shop” to UL
  • like <ul class=”shop”>

Songs list sample:

  • to achieve this effect
  • add class “song” to UL
  • like <ul class=”song”>

Star list sample:

  • to achieve this effect
  • add class “star” to UL
  • like <ul class=”star”>

Star list sample 2:

  • to achieve this effect
  • add class “star2” to UL
  • like <ul class=”star2″>

Trash list sample:

  • to achieve this effect
  • add class “trash” to UL
  • like <ul class=”tweak”>

Tweaks list sample:

  • to achieve this effect
  • add class “tweak” to UL
  • like <ul class=”tweak”>

Unlock list sample:

  • to achieve this effect
  • add class “unlock” to UL
  • like <ul class=”unlock”>

Warning list sample:

  • to achieve this effect
  • add class “warn” to UL
  • like <ul class=”warn”>

 

Inset Styles:

Block TitleDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi.To make such block of text, wrap it into a span with a class of inset-left. Optionally, inside this span you can add another span with class of inset_title for title. Here’s an example: <span class=”inset_left”><span class=”inset_title”>Title</span>…your text goes here…</span>. In a similar way, you can align the block of text to the right. Use inset_right, instead of inset_left. Block TitleDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi. If you need to change width or something else in those blocks, you can edit classes .inset_left and .inset_right in CSS stylesheet template_css.css.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi.

 

Font Awesome Icon Set Included

Font Awesome is icon font set that counts over 500 vector icons. The icons are scalable and looks great in all sizes. Also, icon fonts are better for site speed than ordinary image icons because only one file is loaded. You can include these icons in your articles or modules easily by adding this HTML:

<i class="fa fa-CLASS_NAME"></i> content here...

Just change CLASS_NAME with name of any icon listed below.

 

Web Application Icons

adjust
anchor
archive
area-chart
arrows
arrows-h
arrows-v
asterisk
at
automobile (alias)
ban
bank (alias)
bar-chart
bar-chart-o (alias)
barcode
bars
bed
beer
bell
bell-o
bell-slash
bell-slash-o
bicycle
binoculars
birthday-cake
bolt
bomb
book
bookmark
bookmark-o
briefcase
bug
building
building-o
bullhorn
bullseye
bus
cab (alias)
calculator
calendar
calendar-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
close (alias)
cloud
cloud-download
cloud-upload
code
code-fork
coffee
cog
cogs
comment
comment-o
comments
comments-o
compass
copyright
credit-card
crop
crosshairs
cube
cubes
cutlery
dashboard (alias)
database
desktop
diamond
dot-circle-o
download
edit (alias)
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
female
fighter-jet
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-video-o
file-word-o
file-zip-o (alias)
film
filter
fire
fire-extinguisher
flag
flag-checkered
flag-o
flash (alias)
flask
folder
folder-o
folder-open
folder-open-o
frown-o
futbol-o
gamepad
gavel
gear (alias)
gears (alias)
genderless (alias)
gift
glass
globe
graduation-cap
group (alias)
hdd-o
headphones
heart
heart-o
heartbeat
history
home
hotel (alias)
image (alias)
inbox
info
info-circle
institution (alias)
key
keyboard-o
language
laptop
leaf
legal (alias)
lemon-o
level-down
level-up
life-bouy (alias)
life-buoy (alias)
life-ring
life-saver (alias)
lightbulb-o
line-chart
location-arrow
lock
magic
magnet
mail-forward (alias)
mail-reply (alias)
mail-reply-all (alias)
male
map-marker
meh-o
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mobile
mobile-phone (alias)
money
moon-o
mortar-board (alias)
motorcycle
music
navicon (alias)
newspaper-o
paint-brush
paper-plane
paper-plane-o
paw
pencil
pencil-square
pencil-square-o
phone
phone-square
photo (alias)
picture-o
pie-chart
plane
plug
plus
plus-circle
plus-square
plus-square-o
power-off
print
puzzle-piece
qrcode
question
question-circle
quote-left
quote-right
random
recycle
refresh
remove (alias)
reorder (alias)
reply
reply-all
retweet
road
rocket
rss
rss-square
search
search-minus
search-plus
send (alias)
send-o (alias)
server
share
share-alt
share-alt-square
share-square
share-square-o
shield
ship
shopping-cart
sign-in
sign-out
signal
sitemap
sliders
smile-o
soccer-ball-o (alias)
sort
sort-alpha-asc
sort-alpha-desc
sort-amount-asc
sort-amount-desc
sort-asc
sort-desc
sort-down (alias)
sort-numeric-asc
sort-numeric-desc
sort-up (alias)
space-shuttle
spinner
spoon
square
square-o
star
star-half
star-half-empty (alias)
star-half-full (alias)
star-half-o
star-o
street-view
suitcase
sun-o
support (alias)
tablet
tachometer
tag
tags
tasks
taxi
terminal
thumb-tack
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ticket
times
times-circle
times-circle-o
tint
toggle-down (alias)
toggle-left (alias)
toggle-off
toggle-on
toggle-right (alias)
toggle-up (alias)
trash
trash-o
tree
trophy
truck
tty
umbrella
university
unlock
unlock-alt
unsorted (alias)
upload
user
user-plus
user-secret
user-times
users
video-camera
volume-down
volume-off
volume-up
warning (alias)
wheelchair
wifi
wrench

 

Form Control Icons

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

 

Payment Icons

cc-amex
cc-discover
cc-mastercard
cc-paypal
cc-stripe
cc-visa
credit-card
google-wallet
paypal

 

Currency Icons

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

 

Directional Icons

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
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 (alias)
toggle-left (alias)
toggle-right (alias)
toggle-up (alias)

 

Brand Icons

adn
android
angellist
apple
behance
behance-square
bitbucket
bitbucket-square
bitcoin (alias)
btc
buysellads
cc-amex
cc-discover
cc-mastercard
cc-paypal
cc-stripe
cc-visa
codepen
connectdevelop
css3
dashcube
delicious
deviantart
digg
dribbble
dropbox
drupal
empire
facebook
facebook-f (alias)
facebook-official
facebook-square
flickr
forumbee
foursquare
ge (alias)
git
git-square
github
github-alt
github-square
gittip (alias)
google
google-plus
google-plus-square
google-wallet
gratipay
hacker-news
html5
instagram
ioxhost
joomla
jsfiddle
lastfm
lastfm-square
leanpub
linkedin
linkedin-square
linux
maxcdn
meanpath
medium
openid
pagelines
paypal
pied-piper
pied-piper-alt
pinterest
pinterest-p
pinterest-square
qq
ra (alias)
rebel
reddit
reddit-square
renren
sellsy
share-alt
share-alt-square
shirtsinbulk
simplybuilt
skyatlas
skype
slack
slideshare
soundcloud
spotify
stack-exchange
stack-overflow
steam
steam-square
stumbleupon
stumbleupon-circle
tencent-weibo
trello
tumblr
tumblr-square
twitch
twitter
twitter-square
viacoin
vimeo-square
vine
vk
wechat (alias)
weibo
weixin
whatsapp
windows
wordpress
xing
xing-square
yahoo
yelp
youtube
youtube-play
youtube-square

Leave a comment

PRIJAVITE SE ZA NOVOSTI