Отправьте запрос на услугу и наш менеджер в ближайшее время свяжется с Вами

Нажмите на изображение, чтобы его изменить
Суббота, 20 Апрель 2013 03:00

Youtube

Written by

Get the code

[youtube height="HEIGHT" width="WIDTH"]PLACE_LINK_HERE[/youtube]
Суббота, 20 Апрель 2013 02:59

Vimeo

Written by

Get the code

[vimeo height='HEIGHT' width='WIDTH']PLACE_LINK_HERE[/vimeo]
Суббота, 20 Апрель 2013 02:58

Typography

Written by

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.

Heading Styles

This is Heading 1

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

This is Heading 2

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

This is Heading 3

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

This is Heading 4

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
 

Pre Code Styles

Below is a sample of <pre> or <div class="code">

#zt-body {
width: 180px;
float: right;
color: #EEEEEE;
}
#zt-body {
width: 180px;
float: right;
color: #EEEEEE;
}
 

Highlights

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight1">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight2">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight3">Your highlight phrase goes here!</span>.

 

Icon set 1

This is a sample icon1 documents Use <p class="icon1">Your message goes here!</p>.

This is a sample icon2 documents Use <p class="icon2">Your message goes here!</p>.

This is a sample icon3 documents Use <p class="icon3">Your message goes here!</p>.

This is a sample icon4 documents Use <p class="icon4">Your message goes here!</p>.

This is a sample icon5 documents Use <p class="icon5">Your message goes here!</p>.

This is a sample icon6 documents Use <p class="icon6">Your message goes here!</p>.

This is a sample icon7 documents Use <p class="icon7">Your message goes here!</p>.

This is a sample icon8 documents Use <p class="icon8">Your message goes here!</p>.

This is a sample icon9 documents Use <p class="icon9">Your message goes here!</p>.

This is a sample icon10 documents Use <p class="icon10">Your message goes here!</p>.

This is a sample icon11 documents Use <p class="icon11">Your message goes here!</p>.

This is a sample icon12 documents Use <p class="icon12">Your message goes here!</p>.

This is a sample icon13 documents Use <p class="icon13">Your message goes here!</p>.

This is a sample icon14 documents Use <p class="icon14">Your message goes here!</p>.

This is a sample icon15 documents Use <p class="icon15">Your message goes here!</p>.

This is a sample icon16 documents Use <p class="icon16">Your message goes here!</p>.

This is a sample icon17 documents Use <p class="icon17">Your message goes here!</p>.

This is a sample icon18 documents Use <p class="icon18">Your message goes here!</p>.

This is a sample icon19 documents Use <p class="icon19">Your message goes here!</p>.

This is a sample icon20 documents Use <p class="icon20">Your message goes here!</p>.

This is a sample icon21 documents Use <p class="icon21">Your message goes here!</p>.

This is a sample icon22 documents Use <p class="icon22">Your message goes here!</p>.

This is a sample icon23 documents Use <p class="icon23">Your message goes here!</p>.

This is a sample icon24 documents Use <p class="icon24">Your message goes here!</p>.

This is a sample icon25 documents Use <p class="icon25">Your message goes here!</p>.

This is a sample icon26 documents Use <p class="icon26">Your message goes here!</p>.

This is a sample icon27 documents Use <p class="icon27">Your message goes here!</p>.

This is a sample icon28 documents Use <p class="icon28">Your message goes here!</p>.

This is a sample icon29 documents Use <p class="icon29">Your message goes here!</p>.

This is a sample icon30 documents Use <p class="icon30">Your message goes here!</p>.

 

Unordered lists

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

Warnings

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.

This is a sample clip note. Use <p class="box-info">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-warning">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-stickynote">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-upload">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-download">Your clip note goes here!</p> to form a clip note!

 
Суббота, 20 Апрель 2013 02:57

Toggle Box

Written by
  • Cras rhoncus

    Sed molestie lacinia massa et facilisis. Quisque vestibulum porta diam, eu ultrices nisi consectetur eget. Mauris elit mauris, viverra vel iaculis eu, aliquam id libero. Sed luctus urna non elit vehicula vulputate. Ut ac orci a lectus tincidunt varius. Suspendisse vestibulum justo a quam consectetur volutpat. Nulla sed ligula justo, non lobortis ligula. Fusce a dolor ut massa commodo pharetra. Pellentesque tincidunt imperdiet pellentesque. Morbi egestas, lacus posuere commodo sodales, ligula augue imperdiet ipsum, et venenatis quam turpis ut magna. Ut molestie diam vitae leo varius vestibulum. Suspendisse potenti. Nam a libero vitae libero consectetur mollis. Quisque eu posuere velit.
  • Curabitur vitae

    Duis id nunc sed urna ultricies laoreet. Cras rhoncus, nulla sit amet cursus cursus, velit ligula vestibulum nisi, nec pellentesque diam metus tempor lorem. Etiam et nisl mauris, et molestie turpis. Curabitur vitae velit odio. Nam viverra diam nec sapien condimentum porttitor. Sed aliquam, purus at euismod lacinia, lorem erat hendrerit augue, luctus fermentum sem lorem vel lacus. Nam vel lacus consequat urna ullamcorper sagittis sed eget lorem.

Get the code

[toggle_box]
[toggle_item title='ITEM_TITLE']ADD_CONTENT_HERE[/toggle_item]
[toggle_item title='ITEM_TITLE' active='true']ADD_CONTENT_HERE[/toggle_item]
[/toggle_box]
Суббота, 20 Апрель 2013 02:56

Testimonial

Written by
Praesent lobortis eleifend ultrices. In consectetur aliquam quam eu auctor. In sagittis sem a libero fermentum ultrices eu ut felis. Pellentesque vulputate, justo in sodales bibendum, tellus lectus vehicula dolor, quis sollicitudin diam diam quis dui. Sed volutpat sapien vitae lacus dictum facilisis. Etiam mattis auctor ligula eget convallis. Sed malesuada metus nec diam mattis auctor. Mauris tellus lacus, consequat quis dapibus in, feugiat vel dolor.
Zootemplate, Developer

Get the code

[testimonial author='TESTIMONIAL_AUTHOR' position='AUTHOR_POSITION']ADD_TESTIMONIAL_HERE[/testimonial]
Суббота, 20 Апрель 2013 02:55

Syntax Highlighting

Written by
class modMenuHelper
{
	/**
	 * Get a list of the menu items.
	 *
	 * @param	JRegistry	$params	The module options.
	 *
	 * @return	array
	 * @since	1.5
	 */
	static function getList(&$params)
	{
		$app = JFactory::getApplication();
		$menu = $app->getMenu();

		// If no active menu, use default
		$active = ($menu->getActive()) ? $menu->getActive() : $menu->getDefault();

		$user = JFactory::getUser();
		$levels = $user->getAuthorisedViewLevels();
		asort($levels);
		$key = 'menu_items'.$params.implode(',', $levels).'.'.$active->id;
		$cache = JFactory::getCache('mod_menu', '');
		if (!($items = $cache->get($key)))
		{
			// Initialise variables.
			$list		= array();
			$db			= JFactory::getDbo();

			$path		= $active->tree;
			$start		= (int) $params->get('startLevel');
			$end		= (int) $params->get('endLevel');
			$showAll	= $params->get('showAllChildren');
			$items 		= $menu->getItems('menutype', $params->get('menutype'));

			$lastitem	= 0;

			if ($items) {
				foreach($items as $i => $item)
				{
					if (($start && $start > $item->level)
						|| ($end && $item->level > $end)
						|| (!$showAll && $item->level > 1 && !in_array($item->parent_id, $path))
						|| ($start > 1 && !in_array($item->tree[$start-2], $path))
					) {
						unset($items[$i]);
						continue;
					}

					$item->deeper = false;
					$item->shallower = false;
					$item->level_diff = 0;

					if (isset($items[$lastitem])) {
						$items[$lastitem]->deeper		= ($item->level > $items[$lastitem]->level);
						$items[$lastitem]->shallower	= ($item->level < $items[$lastitem]->level);
						$items[$lastitem]->level_diff	= ($items[$lastitem]->level - $item->level);
					}

					$item->parent = (boolean) $menu->getItems('parent_id', (int) $item->id, true);

					$lastitem			= $i;
					$item->active		= false;
					$item->flink = $item->link;

					// Reverted back for CMS version 2.5.6
					switch ($item->type)
					{
						case 'separator':
							// No further action needed.
							continue;

						case 'url':
							if ((strpos($item->link, 'index.php?') === 0) && (strpos($item->link, 'Itemid=') === false)) {
								// If this is an internal Joomla link, ensure the Itemid is set.
								$item->flink = $item->link.'&Itemid='.$item->id;
							}
							break;

						case 'alias':
							// If this is an alias use the item id stored in the parameters to make the link.
							$item->flink = 'index.php?Itemid='.$item->params->get('aliasoptions');
							break;

						default:
							$router = JSite::getRouter();
							if ($router->getMode() == JROUTER_MODE_SEF) {
								$item->flink = 'index.php?Itemid='.$item->id;
							}
							else {
								$item->flink .= '&Itemid='.$item->id;
							}
							break;
					}

					if (strcasecmp(substr($item->flink, 0, 4), 'http') && (strpos($item->flink, 'index.php?') !== false)) {
						$item->flink = JRoute::_($item->flink, true, $item->params->get('secure'));
					}
					else {
						$item->flink = JRoute::_($item->flink);
					}

					$item->title = htmlspecialchars($item->title);
					$item->anchor_css = htmlspecialchars($item->params->get('menu-anchor_css', ''));
					$item->anchor_title = htmlspecialchars($item->params->get('menu-anchor_title', ''));
					$item->menu_image = $item->params->get('menu_image', '') ? htmlspecialchars($item->params->get('menu_image', '')) : '';
				}

				if (isset($items[$lastitem])) {
					$items[$lastitem]->deeper		= (($start?$start:1) > $items[$lastitem]->level);
					$items[$lastitem]->shallower	= (($start?$start:1) < $items[$lastitem]->level);
					$items[$lastitem]->level_diff	= ($items[$lastitem]->level - ($start?$start:1));
				}
			}

			$cache->store($items, $key);
		}
		return $items;
	}
}

Get the code

[highlighter lang="php" linenums="true" startnums="1"]YOUR_CODE_HERE[/highlighter]
Суббота, 20 Апрель 2013 02:54

Social icon

Written by

Get the code

 [social type="facebook" opacity='dark']PLACE_LINK_HERE[/social] 
[social type="twitter" opacity='dark']PLACE_LINK_HERE[/social]
[social type="delicious" opacity='dark']PLACE_LINK_HERE[/social]
[social type="deviantart" opacity='dark']PLACE_LINK_HERE[/social]
[social type="digg" opacity='dark']PLACE_LINK_HERE[/social]
[social type="flickr" opacity='dark']PLACE_LINK_HERE[/social]
[social type="lastfm" opacity='dark']PLACE_LINK_HERE[/social]
[social type="picasa" opacity='dark']PLACE_LINK_HERE[/social]
[social type="rss" opacity='dark']PLACE_LINK_HERE[/social]
[social type="skype" opacity='dark']PLACE_LINK_HERE[/social]
[social type="stumble-upon" opacity='dark']PLACE_LINK_HERE[/social]
[social type="tumblr" opacity='dark']PLACE_LINK_HERE[/social]
[social type="youtube" opacity='dark']PLACE_LINK_HERE[/social]
[social type="vimeo" opacity='dark']PLACE_LINK_HERE[/social]
Суббота, 20 Апрель 2013 02:53

Pricing Tables

Written by
Starter Package

$19/month

  • 75 GB storage
  • 300 GB Bandwidth / month
  • 10 users
  • 3 MySQL Databases
Sign Up
Premium Package

$59/month

  • 300 GB storage
  • 1000 GB Bandwidth / month
  • 100 users
  • 100 MySQL Databases
Sign Up

Get The Code

 [pricing columns="3"]
[plan title="Starter Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$19" featured="false" per="month"]
<ul>
<li><strong>75 GB</strong> storage</li>
<li><strong>300 GB Bandwidth / month</strong></li>
<li><strong>10</strong> users</li>
<li><strong>3 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Standard Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$39" featured="true" per="month"]
<ul>
<li><strong>150 GB</strong> storage</li>
<li><strong>600 GB Bandwidth / month</strong></li>
<li><strong>40</strong> users</li>
<li><strong>20 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Premium Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$59" featured="false" per="month"]
<ul>
<li><strong>300 GB</strong> storage</li>
<li><strong>1000 GB Bandwidth / month</strong></li>
<li><strong>100</strong> users</li>
<li><strong>100 MySQL Databases</strong></li>
</ul>
[/plan]
[/pricing]
Starter Package

$19/month

  • 75 GB storage
  • 300 GB Bandwidth / month
  • 10 users
  • 3 MySQL Databases
Sign Up
Premium Package

$59/month

  • 300 GB storage
  • 1000 GB Bandwidth / month
  • 100 users
  • 100 MySQL Databases
Sign Up
Unlimited Package

$100/month

  • Unlimited GB storage
  • Bandwidth / month
  • Unlimited users
  • MySQL Databases
Sign Up

Get The Code

 [pricing columns="3"]
[plan title="Starter Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$19" featured="false" per="month"]
<ul>
<li><strong>75 GB</strong> storage</li>
<li><strong>300 GB Bandwidth / month</strong></li>
<li><strong>10</strong> users</li>
<li><strong>3 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Standard Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$39" featured="true" per="month"]
<ul>
<li><strong>150 GB</strong> storage</li>
<li><strong>600 GB Bandwidth / month</strong></li>
<li><strong>40</strong> users</li>
<li><strong>20 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Premium Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$59" featured="false" per="month"]
<ul>
<li><strong>300 GB</strong> storage</li>
<li><strong>1000 GB Bandwidth / month</strong></li>
<li><strong>100</strong> users</li>
<li><strong>100 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Unlimited Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$100" featured="false" per="month"]
<ul>
<li><strong>Unlimited GB</strong> storage</li>
<li><strong>Unlimited Bandwidth / month</strong></li>
<li><strong>Unlimited</strong> users</li>
<li><strong>100 MySQL Databases</strong></li>
</ul>
[/plan]
[/pricing]
Суббота, 20 Апрель 2013 02:53

Message Box

Written by
Donec laoreet
Curabitur ultricies tellus in sapien sodales vel mattis nulla tempor. Curabitur lacus purus, congue non rhoncus non, luctus ut nisl. Sed facilisis convallis augue, et facilisis magna lacinia a. Nulla facilisi. Nullam sit amet tellus nec eros blandit gravida. Curabitur at mi sit amet nisl hendrerit condimentum. Nunc bibendum tellus eget diam mollis a imperdiet neque condimentum. Ut vel nulla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae nisl at nisl sagittis ultrices et eu nulla. Praesent aliquet tincidunt quam vitae tempor.

Donec laoreet
Curabitur ultricies tellus in sapien sodales vel mattis nulla tempor. Curabitur lacus purus, congue non rhoncus non, luctus ut nisl. Sed facilisis convallis augue, et facilisis magna lacinia a. Nulla facilisi. Nullam sit amet tellus nec eros blandit gravida. Curabitur at mi sit amet nisl hendrerit condimentum. Nunc bibendum tellus eget diam mollis a imperdiet neque condimentum. Ut vel nulla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae nisl at nisl sagittis ultrices et eu nulla. Praesent aliquet tincidunt quam vitae tempor.

Donec laoreet
Curabitur ultricies tellus in sapien sodales vel mattis nulla tempor. Curabitur lacus purus, congue non rhoncus non, luctus ut nisl. Sed facilisis convallis augue, et facilisis magna lacinia a. Nulla facilisi. Nullam sit amet tellus nec eros blandit gravida. Curabitur at mi sit amet nisl hendrerit condimentum. Nunc bibendum tellus eget diam mollis a imperdiet neque condimentum. Ut vel nulla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae nisl at nisl sagittis ultrices et eu nulla. Praesent aliquet tincidunt quam vitae tempor.

Donec laoreet
Curabitur ultricies tellus in sapien sodales vel mattis nulla tempor. Curabitur lacus purus, congue non rhoncus non, luctus ut nisl. Sed facilisis convallis augue, et facilisis magna lacinia a. Nulla facilisi. Nullam sit amet tellus nec eros blandit gravida. Curabitur at mi sit amet nisl hendrerit condimentum. Nunc bibendum tellus eget diam mollis a imperdiet neque condimentum. Ut vel nulla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae nisl at nisl sagittis ultrices et eu nulla. Praesent aliquet tincidunt quam vitae tempor.

Get The Code

[message_box title='MESSAGE_TITLE' color='red' close='true']ADD_CONTENT_HERE[/message_box]
[message_box title='MESSAGE_TITLE' color='blue' close='true']ADD_CONTENT_HERE[/message_box]
[message_box title='MESSAGE_TITLE' color='yellow' close='true']ADD_CONTENT_HERE[/message_box]
[message_box title='MESSAGE_TITLE' color='green' close='true']ADD_CONTENT_HERE[/message_box]
Суббота, 20 Апрель 2013 02:51

List icon

Written by
  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Built as a sprite

Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

<i class="icon-search icon-white"></i>

There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Use cases

Icons are great, but where would one use them? Here are a few ideas:

  • As visuals for your sidebar navigation
  • For a purely icon-driven navigation
  • For buttons to help convey the meaning of an action
  • With links to share context on a user's destination

Essentially, anywhere you can put an <i> tag, you can put an icon.

Get the code


<div class="row-fluid">
<div class="span3">
<ul class="the-icons">
<li><i class="icon-glass">&nbsp;</i> icon-glass</li>
<li><i class="icon-music">&nbsp;</i> icon-music</li>
<li><i class="icon-search">&nbsp;</i> icon-search</li>
<li><i class="icon-envelope">&nbsp;</i> icon-envelope</li>
<li><i class="icon-heart">&nbsp;</i> icon-heart</li>
<li><i class="icon-star">&nbsp;</i> icon-star</li>
<li><i class="icon-star-empty">&nbsp;</i> icon-star-empty</li>
<li><i class="icon-user">&nbsp;</i> icon-user</li>
<li><i class="icon-film">&nbsp;</i> icon-film</li>
<li><i class="icon-th-large">&nbsp;</i> icon-th-large</li>
<li><i class="icon-th">&nbsp;</i> icon-th</li>
<li><i class="icon-th-list">&nbsp;</i> icon-th-list</li>
<li><i class="icon-ok">&nbsp;</i> icon-ok</li>
<li><i class="icon-remove">&nbsp;</i> icon-remove</li>
<li><i class="icon-zoom-in">&nbsp;</i> icon-zoom-in</li>
<li><i class="icon-zoom-out">&nbsp;</i> icon-zoom-out</li>
<li><i class="icon-off">&nbsp;</i> icon-off</li>
<li><i class="icon-signal">&nbsp;</i> icon-signal</li>
<li><i class="icon-cog">&nbsp;</i> icon-cog</li>
<li><i class="icon-trash">&nbsp;</i> icon-trash</li>
<li><i class="icon-home">&nbsp;</i> icon-home</li>
<li><i class="icon-file">&nbsp;</i> icon-file</li>
<li><i class="icon-time">&nbsp;</i> icon-time</li>
<li><i class="icon-road">&nbsp;</i> icon-road</li>
<li><i class="icon-download-alt">&nbsp;</i> icon-download-alt</li>
<li><i class="icon-download">&nbsp;</i> icon-download</li>
<li><i class="icon-upload">&nbsp;</i> icon-upload</li>
<li><i class="icon-inbox">&nbsp;</i> icon-inbox</li>
<li><i class="icon-play-circle">&nbsp;</i> icon-play-circle</li>
<li><i class="icon-repeat">&nbsp;</i> icon-repeat</li>
<li><i class="icon-refresh">&nbsp;</i> icon-refresh</li>
<li><i class="icon-list-alt">&nbsp;</i> icon-list-alt</li>
<li><i class="icon-lock">&nbsp;</i> icon-lock</li>
<li><i class="icon-flag">&nbsp;</i> icon-flag</li>
<li><i class="icon-headphones">&nbsp;</i> icon-headphones</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-volume-off">&nbsp;</i> icon-volume-off</li>
<li><i class="icon-volume-down">&nbsp;</i> icon-volume-down</li>
<li><i class="icon-volume-up">&nbsp;</i> icon-volume-up</li>
<li><i class="icon-qrcode">&nbsp;</i> icon-qrcode</li>
<li><i class="icon-barcode">&nbsp;</i> icon-barcode</li>
<li><i class="icon-tag">&nbsp;</i> icon-tag</li>
<li><i class="icon-tags">&nbsp;</i> icon-tags</li>
<li><i class="icon-book">&nbsp;</i> icon-book</li>
<li><i class="icon-bookmark">&nbsp;</i> icon-bookmark</li>
<li><i class="icon-print">&nbsp;</i> icon-print</li>
<li><i class="icon-camera">&nbsp;</i> icon-camera</li>
<li><i class="icon-font">&nbsp;</i> icon-font</li>
<li><i class="icon-bold">&nbsp;</i> icon-bold</li>
<li><i class="icon-italic">&nbsp;</i> icon-italic</li>
<li><i class="icon-text-height">&nbsp;</i> icon-text-height</li>
<li><i class="icon-text-width">&nbsp;</i> icon-text-width</li>
<li><i class="icon-align-left">&nbsp;</i> icon-align-left</li>
<li><i class="icon-align-center">&nbsp;</i> icon-align-center</li>
<li><i class="icon-align-right">&nbsp;</i> icon-align-right</li>
<li><i class="icon-align-justify">&nbsp;</i> icon-align-justify</li>
<li><i class="icon-list">&nbsp;</i> icon-list</li>
<li><i class="icon-indent-left">&nbsp;</i> icon-indent-left</li>
<li><i class="icon-indent-right">&nbsp;</i> icon-indent-right</li>
<li><i class="icon-facetime-video">&nbsp;</i> icon-facetime-video</li>
<li><i class="icon-picture">&nbsp;</i> icon-picture</li>
<li><i class="icon-pencil">&nbsp;</i> icon-pencil</li>
<li><i class="icon-map-marker">&nbsp;</i> icon-map-marker</li>
<li><i class="icon-adjust">&nbsp;</i> icon-adjust</li>
<li><i class="icon-tint">&nbsp;</i> icon-tint</li>
<li><i class="icon-edit">&nbsp;</i> icon-edit</li>
<li><i class="icon-share">&nbsp;</i> icon-share</li>
<li><i class="icon-check">&nbsp;</i> icon-check</li>
<li><i class="icon-move">&nbsp;</i> icon-move</li>
<li><i class="icon-step-backward">&nbsp;</i> icon-step-backward</li>
<li><i class="icon-fast-backward">&nbsp;</i> icon-fast-backward</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-backward">&nbsp;</i> icon-backward</li>
<li><i class="icon-play">&nbsp;</i> icon-play</li>
<li><i class="icon-pause">&nbsp;</i> icon-pause</li>
<li><i class="icon-stop">&nbsp;</i> icon-stop</li>
<li><i class="icon-forward">&nbsp;</i> icon-forward</li>
<li><i class="icon-fast-forward">&nbsp;</i> icon-fast-forward</li>
<li><i class="icon-step-forward">&nbsp;</i> icon-step-forward</li>
<li><i class="icon-eject">&nbsp;</i> icon-eject</li>
<li><i class="icon-chevron-left">&nbsp;</i> icon-chevron-left</li>
<li><i class="icon-chevron-right">&nbsp;</i> icon-chevron-right</li>
<li><i class="icon-plus-sign">&nbsp;</i> icon-plus-sign</li>
<li><i class="icon-minus-sign">&nbsp;</i> icon-minus-sign</li>
<li><i class="icon-remove-sign">&nbsp;</i> icon-remove-sign</li>
<li><i class="icon-ok-sign">&nbsp;</i> icon-ok-sign</li>
<li><i class="icon-question-sign">&nbsp;</i> icon-question-sign</li>
<li><i class="icon-info-sign">&nbsp;</i> icon-info-sign</li>
<li><i class="icon-screenshot">&nbsp;</i> icon-screenshot</li>
<li><i class="icon-remove-circle">&nbsp;</i> icon-remove-circle</li>
<li><i class="icon-ok-circle">&nbsp;</i> icon-ok-circle</li>
<li><i class="icon-ban-circle">&nbsp;</i> icon-ban-circle</li>
<li><i class="icon-arrow-left">&nbsp;</i> icon-arrow-left</li>
<li><i class="icon-arrow-right">&nbsp;</i> icon-arrow-right</li>
<li><i class="icon-arrow-up">&nbsp;</i> icon-arrow-up</li>
<li><i class="icon-arrow-down">&nbsp;</i> icon-arrow-down</li>
<li><i class="icon-share-alt">&nbsp;</i> icon-share-alt</li>
<li><i class="icon-resize-full">&nbsp;</i> icon-resize-full</li>
<li><i class="icon-resize-small">&nbsp;</i> icon-resize-small</li>
<li><i class="icon-plus">&nbsp;</i> icon-plus</li>
<li><i class="icon-minus">&nbsp;</i> icon-minus</li>
<li><i class="icon-asterisk">&nbsp;</i> icon-asterisk</li>
<li><i class="icon-exclamation-sign">&nbsp;</i> icon-exclamation-sign</li>
<li><i class="icon-gift">&nbsp;</i> icon-gift</li>
<li><i class="icon-leaf">&nbsp;</i> icon-leaf</li>
<li><i class="icon-fire">&nbsp;</i> icon-fire</li>
<li><i class="icon-eye-open">&nbsp;</i> icon-eye-open</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-eye-close">&nbsp;</i> icon-eye-close</li>
<li><i class="icon-warning-sign">&nbsp;</i> icon-warning-sign</li>
<li><i class="icon-plane">&nbsp;</i> icon-plane</li>
<li><i class="icon-calendar">&nbsp;</i> icon-calendar</li>
<li><i class="icon-random">&nbsp;</i> icon-random</li>
<li><i class="icon-comment">&nbsp;</i> icon-comment</li>
<li><i class="icon-magnet">&nbsp;</i> icon-magnet</li>
<li><i class="icon-chevron-up">&nbsp;</i> icon-chevron-up</li>
<li><i class="icon-chevron-down">&nbsp;</i> icon-chevron-down</li>
<li><i class="icon-retweet">&nbsp;</i> icon-retweet</li>
<li><i class="icon-shopping-cart">&nbsp;</i> icon-shopping-cart</li>
<li><i class="icon-folder-close">&nbsp;</i> icon-folder-close</li>
<li><i class="icon-folder-open">&nbsp;</i> icon-folder-open</li>
<li><i class="icon-resize-vertical">&nbsp;</i> icon-resize-vertical</li>
<li><i class="icon-resize-horizontal">&nbsp;</i> icon-resize-horizontal</li>
<li><i class="icon-hdd">&nbsp;</i> icon-hdd</li>
<li><i class="icon-bullhorn">&nbsp;</i> icon-bullhorn</li>
<li><i class="icon-bell">&nbsp;</i> icon-bell</li>
<li><i class="icon-certificate">&nbsp;</i> icon-certificate</li>
<li><i class="icon-thumbs-up">&nbsp;</i> icon-thumbs-up</li>
<li><i class="icon-thumbs-down">&nbsp;</i> icon-thumbs-down</li>
<li><i class="icon-hand-right">&nbsp;</i> icon-hand-right</li>
<li><i class="icon-hand-left">&nbsp;</i> icon-hand-left</li>
<li><i class="icon-hand-up">&nbsp;</i> icon-hand-up</li>
<li><i class="icon-hand-down">&nbsp;</i> icon-hand-down</li>
<li><i class="icon-circle-arrow-right">&nbsp;</i> icon-circle-arrow-right</li>
<li><i class="icon-circle-arrow-left">&nbsp;</i> icon-circle-arrow-left</li>
<li><i class="icon-circle-arrow-up">&nbsp;</i> icon-circle-arrow-up</li>
<li><i class="icon-circle-arrow-down">&nbsp;</i> icon-circle-arrow-down</li>
<li><i class="icon-globe">&nbsp;</i> icon-globe</li>
<li><i class="icon-wrench">&nbsp;</i> icon-wrench</li>
<li><i class="icon-tasks">&nbsp;</i> icon-tasks</li>
<li><i class="icon-filter">&nbsp;</i> icon-filter</li>
<li><i class="icon-briefcase">&nbsp;</i> icon-briefcase</li>
<li><i class="icon-fullscreen">&nbsp;</i> icon-fullscreen</li>
</ul>
</div>
</div>
Суббота, 20 Апрель 2013 03:00

Youtube

Written by

Get the code

[youtube height="HEIGHT" width="WIDTH"]PLACE_LINK_HERE[/youtube]
Суббота, 20 Апрель 2013 02:59

Vimeo

Written by

Get the code

[vimeo height='HEIGHT' width='WIDTH']PLACE_LINK_HERE[/vimeo]
Суббота, 20 Апрель 2013 02:58

Typography

Written by

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.

Heading Styles

This is Heading 1

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

This is Heading 2

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

This is Heading 3

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

This is Heading 4

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
 

Pre Code Styles

Below is a sample of <pre> or <div class="code">

#zt-body {
width: 180px;
float: right;
color: #EEEEEE;
}
#zt-body {
width: 180px;
float: right;
color: #EEEEEE;
}
 

Highlights

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight1">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight2">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight3">Your highlight phrase goes here!</span>.

 

Icon set 1

This is a sample icon1 documents Use <p class="icon1">Your message goes here!</p>.

This is a sample icon2 documents Use <p class="icon2">Your message goes here!</p>.

This is a sample icon3 documents Use <p class="icon3">Your message goes here!</p>.

This is a sample icon4 documents Use <p class="icon4">Your message goes here!</p>.

This is a sample icon5 documents Use <p class="icon5">Your message goes here!</p>.

This is a sample icon6 documents Use <p class="icon6">Your message goes here!</p>.

This is a sample icon7 documents Use <p class="icon7">Your message goes here!</p>.

This is a sample icon8 documents Use <p class="icon8">Your message goes here!</p>.

This is a sample icon9 documents Use <p class="icon9">Your message goes here!</p>.

This is a sample icon10 documents Use <p class="icon10">Your message goes here!</p>.

This is a sample icon11 documents Use <p class="icon11">Your message goes here!</p>.

This is a sample icon12 documents Use <p class="icon12">Your message goes here!</p>.

This is a sample icon13 documents Use <p class="icon13">Your message goes here!</p>.

This is a sample icon14 documents Use <p class="icon14">Your message goes here!</p>.

This is a sample icon15 documents Use <p class="icon15">Your message goes here!</p>.

This is a sample icon16 documents Use <p class="icon16">Your message goes here!</p>.

This is a sample icon17 documents Use <p class="icon17">Your message goes here!</p>.

This is a sample icon18 documents Use <p class="icon18">Your message goes here!</p>.

This is a sample icon19 documents Use <p class="icon19">Your message goes here!</p>.

This is a sample icon20 documents Use <p class="icon20">Your message goes here!</p>.

This is a sample icon21 documents Use <p class="icon21">Your message goes here!</p>.

This is a sample icon22 documents Use <p class="icon22">Your message goes here!</p>.

This is a sample icon23 documents Use <p class="icon23">Your message goes here!</p>.

This is a sample icon24 documents Use <p class="icon24">Your message goes here!</p>.

This is a sample icon25 documents Use <p class="icon25">Your message goes here!</p>.

This is a sample icon26 documents Use <p class="icon26">Your message goes here!</p>.

This is a sample icon27 documents Use <p class="icon27">Your message goes here!</p>.

This is a sample icon28 documents Use <p class="icon28">Your message goes here!</p>.

This is a sample icon29 documents Use <p class="icon29">Your message goes here!</p>.

This is a sample icon30 documents Use <p class="icon30">Your message goes here!</p>.

 

Unordered lists

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

Warnings

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.

This is a sample clip note. Use <p class="box-info">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-warning">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-stickynote">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-upload">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-download">Your clip note goes here!</p> to form a clip note!

 
Суббота, 20 Апрель 2013 02:57

Toggle Box

Written by
  • Cras rhoncus

    Sed molestie lacinia massa et facilisis. Quisque vestibulum porta diam, eu ultrices nisi consectetur eget. Mauris elit mauris, viverra vel iaculis eu, aliquam id libero. Sed luctus urna non elit vehicula vulputate. Ut ac orci a lectus tincidunt varius. Suspendisse vestibulum justo a quam consectetur volutpat. Nulla sed ligula justo, non lobortis ligula. Fusce a dolor ut massa commodo pharetra. Pellentesque tincidunt imperdiet pellentesque. Morbi egestas, lacus posuere commodo sodales, ligula augue imperdiet ipsum, et venenatis quam turpis ut magna. Ut molestie diam vitae leo varius vestibulum. Suspendisse potenti. Nam a libero vitae libero consectetur mollis. Quisque eu posuere velit.
  • Curabitur vitae

    Duis id nunc sed urna ultricies laoreet. Cras rhoncus, nulla sit amet cursus cursus, velit ligula vestibulum nisi, nec pellentesque diam metus tempor lorem. Etiam et nisl mauris, et molestie turpis. Curabitur vitae velit odio. Nam viverra diam nec sapien condimentum porttitor. Sed aliquam, purus at euismod lacinia, lorem erat hendrerit augue, luctus fermentum sem lorem vel lacus. Nam vel lacus consequat urna ullamcorper sagittis sed eget lorem.

Get the code

[toggle_box]
[toggle_item title='ITEM_TITLE']ADD_CONTENT_HERE[/toggle_item]
[toggle_item title='ITEM_TITLE' active='true']ADD_CONTENT_HERE[/toggle_item]
[/toggle_box]
Суббота, 20 Апрель 2013 02:56

Testimonial

Written by
Praesent lobortis eleifend ultrices. In consectetur aliquam quam eu auctor. In sagittis sem a libero fermentum ultrices eu ut felis. Pellentesque vulputate, justo in sodales bibendum, tellus lectus vehicula dolor, quis sollicitudin diam diam quis dui. Sed volutpat sapien vitae lacus dictum facilisis. Etiam mattis auctor ligula eget convallis. Sed malesuada metus nec diam mattis auctor. Mauris tellus lacus, consequat quis dapibus in, feugiat vel dolor.
Zootemplate, Developer

Get the code

[testimonial author='TESTIMONIAL_AUTHOR' position='AUTHOR_POSITION']ADD_TESTIMONIAL_HERE[/testimonial]
Суббота, 20 Апрель 2013 02:55

Syntax Highlighting

Written by
class modMenuHelper
{
	/**
	 * Get a list of the menu items.
	 *
	 * @param	JRegistry	$params	The module options.
	 *
	 * @return	array
	 * @since	1.5
	 */
	static function getList(&$params)
	{
		$app = JFactory::getApplication();
		$menu = $app->getMenu();

		// If no active menu, use default
		$active = ($menu->getActive()) ? $menu->getActive() : $menu->getDefault();

		$user = JFactory::getUser();
		$levels = $user->getAuthorisedViewLevels();
		asort($levels);
		$key = 'menu_items'.$params.implode(',', $levels).'.'.$active->id;
		$cache = JFactory::getCache('mod_menu', '');
		if (!($items = $cache->get($key)))
		{
			// Initialise variables.
			$list		= array();
			$db			= JFactory::getDbo();

			$path		= $active->tree;
			$start		= (int) $params->get('startLevel');
			$end		= (int) $params->get('endLevel');
			$showAll	= $params->get('showAllChildren');
			$items 		= $menu->getItems('menutype', $params->get('menutype'));

			$lastitem	= 0;

			if ($items) {
				foreach($items as $i => $item)
				{
					if (($start && $start > $item->level)
						|| ($end && $item->level > $end)
						|| (!$showAll && $item->level > 1 && !in_array($item->parent_id, $path))
						|| ($start > 1 && !in_array($item->tree[$start-2], $path))
					) {
						unset($items[$i]);
						continue;
					}

					$item->deeper = false;
					$item->shallower = false;
					$item->level_diff = 0;

					if (isset($items[$lastitem])) {
						$items[$lastitem]->deeper		= ($item->level > $items[$lastitem]->level);
						$items[$lastitem]->shallower	= ($item->level < $items[$lastitem]->level);
						$items[$lastitem]->level_diff	= ($items[$lastitem]->level - $item->level);
					}

					$item->parent = (boolean) $menu->getItems('parent_id', (int) $item->id, true);

					$lastitem			= $i;
					$item->active		= false;
					$item->flink = $item->link;

					// Reverted back for CMS version 2.5.6
					switch ($item->type)
					{
						case 'separator':
							// No further action needed.
							continue;

						case 'url':
							if ((strpos($item->link, 'index.php?') === 0) && (strpos($item->link, 'Itemid=') === false)) {
								// If this is an internal Joomla link, ensure the Itemid is set.
								$item->flink = $item->link.'&Itemid='.$item->id;
							}
							break;

						case 'alias':
							// If this is an alias use the item id stored in the parameters to make the link.
							$item->flink = 'index.php?Itemid='.$item->params->get('aliasoptions');
							break;

						default:
							$router = JSite::getRouter();
							if ($router->getMode() == JROUTER_MODE_SEF) {
								$item->flink = 'index.php?Itemid='.$item->id;
							}
							else {
								$item->flink .= '&Itemid='.$item->id;
							}
							break;
					}

					if (strcasecmp(substr($item->flink, 0, 4), 'http') && (strpos($item->flink, 'index.php?') !== false)) {
						$item->flink = JRoute::_($item->flink, true, $item->params->get('secure'));
					}
					else {
						$item->flink = JRoute::_($item->flink);
					}

					$item->title = htmlspecialchars($item->title);
					$item->anchor_css = htmlspecialchars($item->params->get('menu-anchor_css', ''));
					$item->anchor_title = htmlspecialchars($item->params->get('menu-anchor_title', ''));
					$item->menu_image = $item->params->get('menu_image', '') ? htmlspecialchars($item->params->get('menu_image', '')) : '';
				}

				if (isset($items[$lastitem])) {
					$items[$lastitem]->deeper		= (($start?$start:1) > $items[$lastitem]->level);
					$items[$lastitem]->shallower	= (($start?$start:1) < $items[$lastitem]->level);
					$items[$lastitem]->level_diff	= ($items[$lastitem]->level - ($start?$start:1));
				}
			}

			$cache->store($items, $key);
		}
		return $items;
	}
}

Get the code

[highlighter lang="php" linenums="true" startnums="1"]YOUR_CODE_HERE[/highlighter]
Суббота, 20 Апрель 2013 02:54

Social icon

Written by

Get the code

 [social type="facebook" opacity='dark']PLACE_LINK_HERE[/social] 
[social type="twitter" opacity='dark']PLACE_LINK_HERE[/social]
[social type="delicious" opacity='dark']PLACE_LINK_HERE[/social]
[social type="deviantart" opacity='dark']PLACE_LINK_HERE[/social]
[social type="digg" opacity='dark']PLACE_LINK_HERE[/social]
[social type="flickr" opacity='dark']PLACE_LINK_HERE[/social]
[social type="lastfm" opacity='dark']PLACE_LINK_HERE[/social]
[social type="picasa" opacity='dark']PLACE_LINK_HERE[/social]
[social type="rss" opacity='dark']PLACE_LINK_HERE[/social]
[social type="skype" opacity='dark']PLACE_LINK_HERE[/social]
[social type="stumble-upon" opacity='dark']PLACE_LINK_HERE[/social]
[social type="tumblr" opacity='dark']PLACE_LINK_HERE[/social]
[social type="youtube" opacity='dark']PLACE_LINK_HERE[/social]
[social type="vimeo" opacity='dark']PLACE_LINK_HERE[/social]
Суббота, 20 Апрель 2013 02:53

Pricing Tables

Written by
Starter Package

$19/month

  • 75 GB storage
  • 300 GB Bandwidth / month
  • 10 users
  • 3 MySQL Databases
Sign Up
Premium Package

$59/month

  • 300 GB storage
  • 1000 GB Bandwidth / month
  • 100 users
  • 100 MySQL Databases
Sign Up

Get The Code

 [pricing columns="3"]
[plan title="Starter Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$19" featured="false" per="month"]
<ul>
<li><strong>75 GB</strong> storage</li>
<li><strong>300 GB Bandwidth / month</strong></li>
<li><strong>10</strong> users</li>
<li><strong>3 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Standard Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$39" featured="true" per="month"]
<ul>
<li><strong>150 GB</strong> storage</li>
<li><strong>600 GB Bandwidth / month</strong></li>
<li><strong>40</strong> users</li>
<li><strong>20 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Premium Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$59" featured="false" per="month"]
<ul>
<li><strong>300 GB</strong> storage</li>
<li><strong>1000 GB Bandwidth / month</strong></li>
<li><strong>100</strong> users</li>
<li><strong>100 MySQL Databases</strong></li>
</ul>
[/plan]
[/pricing]
Starter Package

$19/month

  • 75 GB storage
  • 300 GB Bandwidth / month
  • 10 users
  • 3 MySQL Databases
Sign Up
Premium Package

$59/month

  • 300 GB storage
  • 1000 GB Bandwidth / month
  • 100 users
  • 100 MySQL Databases
Sign Up
Unlimited Package

$100/month

  • Unlimited GB storage
  • Bandwidth / month
  • Unlimited users
  • MySQL Databases
Sign Up

Get The Code

 [pricing columns="3"]
[plan title="Starter Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$19" featured="false" per="month"]
<ul>
<li><strong>75 GB</strong> storage</li>
<li><strong>300 GB Bandwidth / month</strong></li>
<li><strong>10</strong> users</li>
<li><strong>3 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Standard Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$39" featured="true" per="month"]
<ul>
<li><strong>150 GB</strong> storage</li>
<li><strong>600 GB Bandwidth / month</strong></li>
<li><strong>40</strong> users</li>
<li><strong>20 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Premium Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$59" featured="false" per="month"]
<ul>
<li><strong>300 GB</strong> storage</li>
<li><strong>1000 GB Bandwidth / month</strong></li>
<li><strong>100</strong> users</li>
<li><strong>100 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Unlimited Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$100" featured="false" per="month"]
<ul>
<li><strong>Unlimited GB</strong> storage</li>
<li><strong>Unlimited Bandwidth / month</strong></li>
<li><strong>Unlimited</strong> users</li>
<li><strong>100 MySQL Databases</strong></li>
</ul>
[/plan]
[/pricing]
Суббота, 20 Апрель 2013 02:53

Message Box

Written by
Donec laoreet
Curabitur ultricies tellus in sapien sodales vel mattis nulla tempor. Curabitur lacus purus, congue non rhoncus non, luctus ut nisl. Sed facilisis convallis augue, et facilisis magna lacinia a. Nulla facilisi. Nullam sit amet tellus nec eros blandit gravida. Curabitur at mi sit amet nisl hendrerit condimentum. Nunc bibendum tellus eget diam mollis a imperdiet neque condimentum. Ut vel nulla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae nisl at nisl sagittis ultrices et eu nulla. Praesent aliquet tincidunt quam vitae tempor.

Donec laoreet
Curabitur ultricies tellus in sapien sodales vel mattis nulla tempor. Curabitur lacus purus, congue non rhoncus non, luctus ut nisl. Sed facilisis convallis augue, et facilisis magna lacinia a. Nulla facilisi. Nullam sit amet tellus nec eros blandit gravida. Curabitur at mi sit amet nisl hendrerit condimentum. Nunc bibendum tellus eget diam mollis a imperdiet neque condimentum. Ut vel nulla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae nisl at nisl sagittis ultrices et eu nulla. Praesent aliquet tincidunt quam vitae tempor.

Donec laoreet
Curabitur ultricies tellus in sapien sodales vel mattis nulla tempor. Curabitur lacus purus, congue non rhoncus non, luctus ut nisl. Sed facilisis convallis augue, et facilisis magna lacinia a. Nulla facilisi. Nullam sit amet tellus nec eros blandit gravida. Curabitur at mi sit amet nisl hendrerit condimentum. Nunc bibendum tellus eget diam mollis a imperdiet neque condimentum. Ut vel nulla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae nisl at nisl sagittis ultrices et eu nulla. Praesent aliquet tincidunt quam vitae tempor.

Donec laoreet
Curabitur ultricies tellus in sapien sodales vel mattis nulla tempor. Curabitur lacus purus, congue non rhoncus non, luctus ut nisl. Sed facilisis convallis augue, et facilisis magna lacinia a. Nulla facilisi. Nullam sit amet tellus nec eros blandit gravida. Curabitur at mi sit amet nisl hendrerit condimentum. Nunc bibendum tellus eget diam mollis a imperdiet neque condimentum. Ut vel nulla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae nisl at nisl sagittis ultrices et eu nulla. Praesent aliquet tincidunt quam vitae tempor.

Get The Code

[message_box title='MESSAGE_TITLE' color='red' close='true']ADD_CONTENT_HERE[/message_box]
[message_box title='MESSAGE_TITLE' color='blue' close='true']ADD_CONTENT_HERE[/message_box]
[message_box title='MESSAGE_TITLE' color='yellow' close='true']ADD_CONTENT_HERE[/message_box]
[message_box title='MESSAGE_TITLE' color='green' close='true']ADD_CONTENT_HERE[/message_box]
Суббота, 20 Апрель 2013 02:51

List icon

Written by
  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Built as a sprite

Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

<i class="icon-search icon-white"></i>

There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Use cases

Icons are great, but where would one use them? Here are a few ideas:

  • As visuals for your sidebar navigation
  • For a purely icon-driven navigation
  • For buttons to help convey the meaning of an action
  • With links to share context on a user's destination

Essentially, anywhere you can put an <i> tag, you can put an icon.

Get the code


<div class="row-fluid">
<div class="span3">
<ul class="the-icons">
<li><i class="icon-glass">&nbsp;</i> icon-glass</li>
<li><i class="icon-music">&nbsp;</i> icon-music</li>
<li><i class="icon-search">&nbsp;</i> icon-search</li>
<li><i class="icon-envelope">&nbsp;</i> icon-envelope</li>
<li><i class="icon-heart">&nbsp;</i> icon-heart</li>
<li><i class="icon-star">&nbsp;</i> icon-star</li>
<li><i class="icon-star-empty">&nbsp;</i> icon-star-empty</li>
<li><i class="icon-user">&nbsp;</i> icon-user</li>
<li><i class="icon-film">&nbsp;</i> icon-film</li>
<li><i class="icon-th-large">&nbsp;</i> icon-th-large</li>
<li><i class="icon-th">&nbsp;</i> icon-th</li>
<li><i class="icon-th-list">&nbsp;</i> icon-th-list</li>
<li><i class="icon-ok">&nbsp;</i> icon-ok</li>
<li><i class="icon-remove">&nbsp;</i> icon-remove</li>
<li><i class="icon-zoom-in">&nbsp;</i> icon-zoom-in</li>
<li><i class="icon-zoom-out">&nbsp;</i> icon-zoom-out</li>
<li><i class="icon-off">&nbsp;</i> icon-off</li>
<li><i class="icon-signal">&nbsp;</i> icon-signal</li>
<li><i class="icon-cog">&nbsp;</i> icon-cog</li>
<li><i class="icon-trash">&nbsp;</i> icon-trash</li>
<li><i class="icon-home">&nbsp;</i> icon-home</li>
<li><i class="icon-file">&nbsp;</i> icon-file</li>
<li><i class="icon-time">&nbsp;</i> icon-time</li>
<li><i class="icon-road">&nbsp;</i> icon-road</li>
<li><i class="icon-download-alt">&nbsp;</i> icon-download-alt</li>
<li><i class="icon-download">&nbsp;</i> icon-download</li>
<li><i class="icon-upload">&nbsp;</i> icon-upload</li>
<li><i class="icon-inbox">&nbsp;</i> icon-inbox</li>
<li><i class="icon-play-circle">&nbsp;</i> icon-play-circle</li>
<li><i class="icon-repeat">&nbsp;</i> icon-repeat</li>
<li><i class="icon-refresh">&nbsp;</i> icon-refresh</li>
<li><i class="icon-list-alt">&nbsp;</i> icon-list-alt</li>
<li><i class="icon-lock">&nbsp;</i> icon-lock</li>
<li><i class="icon-flag">&nbsp;</i> icon-flag</li>
<li><i class="icon-headphones">&nbsp;</i> icon-headphones</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-volume-off">&nbsp;</i> icon-volume-off</li>
<li><i class="icon-volume-down">&nbsp;</i> icon-volume-down</li>
<li><i class="icon-volume-up">&nbsp;</i> icon-volume-up</li>
<li><i class="icon-qrcode">&nbsp;</i> icon-qrcode</li>
<li><i class="icon-barcode">&nbsp;</i> icon-barcode</li>
<li><i class="icon-tag">&nbsp;</i> icon-tag</li>
<li><i class="icon-tags">&nbsp;</i> icon-tags</li>
<li><i class="icon-book">&nbsp;</i> icon-book</li>
<li><i class="icon-bookmark">&nbsp;</i> icon-bookmark</li>
<li><i class="icon-print">&nbsp;</i> icon-print</li>
<li><i class="icon-camera">&nbsp;</i> icon-camera</li>
<li><i class="icon-font">&nbsp;</i> icon-font</li>
<li><i class="icon-bold">&nbsp;</i> icon-bold</li>
<li><i class="icon-italic">&nbsp;</i> icon-italic</li>
<li><i class="icon-text-height">&nbsp;</i> icon-text-height</li>
<li><i class="icon-text-width">&nbsp;</i> icon-text-width</li>
<li><i class="icon-align-left">&nbsp;</i> icon-align-left</li>
<li><i class="icon-align-center">&nbsp;</i> icon-align-center</li>
<li><i class="icon-align-right">&nbsp;</i> icon-align-right</li>
<li><i class="icon-align-justify">&nbsp;</i> icon-align-justify</li>
<li><i class="icon-list">&nbsp;</i> icon-list</li>
<li><i class="icon-indent-left">&nbsp;</i> icon-indent-left</li>
<li><i class="icon-indent-right">&nbsp;</i> icon-indent-right</li>
<li><i class="icon-facetime-video">&nbsp;</i> icon-facetime-video</li>
<li><i class="icon-picture">&nbsp;</i> icon-picture</li>
<li><i class="icon-pencil">&nbsp;</i> icon-pencil</li>
<li><i class="icon-map-marker">&nbsp;</i> icon-map-marker</li>
<li><i class="icon-adjust">&nbsp;</i> icon-adjust</li>
<li><i class="icon-tint">&nbsp;</i> icon-tint</li>
<li><i class="icon-edit">&nbsp;</i> icon-edit</li>
<li><i class="icon-share">&nbsp;</i> icon-share</li>
<li><i class="icon-check">&nbsp;</i> icon-check</li>
<li><i class="icon-move">&nbsp;</i> icon-move</li>
<li><i class="icon-step-backward">&nbsp;</i> icon-step-backward</li>
<li><i class="icon-fast-backward">&nbsp;</i> icon-fast-backward</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-backward">&nbsp;</i> icon-backward</li>
<li><i class="icon-play">&nbsp;</i> icon-play</li>
<li><i class="icon-pause">&nbsp;</i> icon-pause</li>
<li><i class="icon-stop">&nbsp;</i> icon-stop</li>
<li><i class="icon-forward">&nbsp;</i> icon-forward</li>
<li><i class="icon-fast-forward">&nbsp;</i> icon-fast-forward</li>
<li><i class="icon-step-forward">&nbsp;</i> icon-step-forward</li>
<li><i class="icon-eject">&nbsp;</i> icon-eject</li>
<li><i class="icon-chevron-left">&nbsp;</i> icon-chevron-left</li>
<li><i class="icon-chevron-right">&nbsp;</i> icon-chevron-right</li>
<li><i class="icon-plus-sign">&nbsp;</i> icon-plus-sign</li>
<li><i class="icon-minus-sign">&nbsp;</i> icon-minus-sign</li>
<li><i class="icon-remove-sign">&nbsp;</i> icon-remove-sign</li>
<li><i class="icon-ok-sign">&nbsp;</i> icon-ok-sign</li>
<li><i class="icon-question-sign">&nbsp;</i> icon-question-sign</li>
<li><i class="icon-info-sign">&nbsp;</i> icon-info-sign</li>
<li><i class="icon-screenshot">&nbsp;</i> icon-screenshot</li>
<li><i class="icon-remove-circle">&nbsp;</i> icon-remove-circle</li>
<li><i class="icon-ok-circle">&nbsp;</i> icon-ok-circle</li>
<li><i class="icon-ban-circle">&nbsp;</i> icon-ban-circle</li>
<li><i class="icon-arrow-left">&nbsp;</i> icon-arrow-left</li>
<li><i class="icon-arrow-right">&nbsp;</i> icon-arrow-right</li>
<li><i class="icon-arrow-up">&nbsp;</i> icon-arrow-up</li>
<li><i class="icon-arrow-down">&nbsp;</i> icon-arrow-down</li>
<li><i class="icon-share-alt">&nbsp;</i> icon-share-alt</li>
<li><i class="icon-resize-full">&nbsp;</i> icon-resize-full</li>
<li><i class="icon-resize-small">&nbsp;</i> icon-resize-small</li>
<li><i class="icon-plus">&nbsp;</i> icon-plus</li>
<li><i class="icon-minus">&nbsp;</i> icon-minus</li>
<li><i class="icon-asterisk">&nbsp;</i> icon-asterisk</li>
<li><i class="icon-exclamation-sign">&nbsp;</i> icon-exclamation-sign</li>
<li><i class="icon-gift">&nbsp;</i> icon-gift</li>
<li><i class="icon-leaf">&nbsp;</i> icon-leaf</li>
<li><i class="icon-fire">&nbsp;</i> icon-fire</li>
<li><i class="icon-eye-open">&nbsp;</i> icon-eye-open</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-eye-close">&nbsp;</i> icon-eye-close</li>
<li><i class="icon-warning-sign">&nbsp;</i> icon-warning-sign</li>
<li><i class="icon-plane">&nbsp;</i> icon-plane</li>
<li><i class="icon-calendar">&nbsp;</i> icon-calendar</li>
<li><i class="icon-random">&nbsp;</i> icon-random</li>
<li><i class="icon-comment">&nbsp;</i> icon-comment</li>
<li><i class="icon-magnet">&nbsp;</i> icon-magnet</li>
<li><i class="icon-chevron-up">&nbsp;</i> icon-chevron-up</li>
<li><i class="icon-chevron-down">&nbsp;</i> icon-chevron-down</li>
<li><i class="icon-retweet">&nbsp;</i> icon-retweet</li>
<li><i class="icon-shopping-cart">&nbsp;</i> icon-shopping-cart</li>
<li><i class="icon-folder-close">&nbsp;</i> icon-folder-close</li>
<li><i class="icon-folder-open">&nbsp;</i> icon-folder-open</li>
<li><i class="icon-resize-vertical">&nbsp;</i> icon-resize-vertical</li>
<li><i class="icon-resize-horizontal">&nbsp;</i> icon-resize-horizontal</li>
<li><i class="icon-hdd">&nbsp;</i> icon-hdd</li>
<li><i class="icon-bullhorn">&nbsp;</i> icon-bullhorn</li>
<li><i class="icon-bell">&nbsp;</i> icon-bell</li>
<li><i class="icon-certificate">&nbsp;</i> icon-certificate</li>
<li><i class="icon-thumbs-up">&nbsp;</i> icon-thumbs-up</li>
<li><i class="icon-thumbs-down">&nbsp;</i> icon-thumbs-down</li>
<li><i class="icon-hand-right">&nbsp;</i> icon-hand-right</li>
<li><i class="icon-hand-left">&nbsp;</i> icon-hand-left</li>
<li><i class="icon-hand-up">&nbsp;</i> icon-hand-up</li>
<li><i class="icon-hand-down">&nbsp;</i> icon-hand-down</li>
<li><i class="icon-circle-arrow-right">&nbsp;</i> icon-circle-arrow-right</li>
<li><i class="icon-circle-arrow-left">&nbsp;</i> icon-circle-arrow-left</li>
<li><i class="icon-circle-arrow-up">&nbsp;</i> icon-circle-arrow-up</li>
<li><i class="icon-circle-arrow-down">&nbsp;</i> icon-circle-arrow-down</li>
<li><i class="icon-globe">&nbsp;</i> icon-globe</li>
<li><i class="icon-wrench">&nbsp;</i> icon-wrench</li>
<li><i class="icon-tasks">&nbsp;</i> icon-tasks</li>
<li><i class="icon-filter">&nbsp;</i> icon-filter</li>
<li><i class="icon-briefcase">&nbsp;</i> icon-briefcase</li>
<li><i class="icon-fullscreen">&nbsp;</i> icon-fullscreen</li>
</ul>
</div>
</div>
Суббота, 20 Апрель 2013 03:00

Youtube

Written by

Get the code

[youtube height="HEIGHT" width="WIDTH"]PLACE_LINK_HERE[/youtube]
Суббота, 20 Апрель 2013 02:59

Vimeo

Written by

Get the code

[vimeo height='HEIGHT' width='WIDTH']PLACE_LINK_HERE[/vimeo]
Суббота, 20 Апрель 2013 02:58

Typography

Written by

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.

Heading Styles

This is Heading 1

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

This is Heading 2

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

This is Heading 3

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

This is Heading 4

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
 

Pre Code Styles

Below is a sample of <pre> or <div class="code">

#zt-body {
width: 180px;
float: right;
color: #EEEEEE;
}
#zt-body {
width: 180px;
float: right;
color: #EEEEEE;
}
 

Highlights

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight1">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight2">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a highlight phrase.

Use <span class="highlight3">Your highlight phrase goes here!</span>.

 

Icon set 1

This is a sample icon1 documents Use <p class="icon1">Your message goes here!</p>.

This is a sample icon2 documents Use <p class="icon2">Your message goes here!</p>.

This is a sample icon3 documents Use <p class="icon3">Your message goes here!</p>.

This is a sample icon4 documents Use <p class="icon4">Your message goes here!</p>.

This is a sample icon5 documents Use <p class="icon5">Your message goes here!</p>.

This is a sample icon6 documents Use <p class="icon6">Your message goes here!</p>.

This is a sample icon7 documents Use <p class="icon7">Your message goes here!</p>.

This is a sample icon8 documents Use <p class="icon8">Your message goes here!</p>.

This is a sample icon9 documents Use <p class="icon9">Your message goes here!</p>.

This is a sample icon10 documents Use <p class="icon10">Your message goes here!</p>.

This is a sample icon11 documents Use <p class="icon11">Your message goes here!</p>.

This is a sample icon12 documents Use <p class="icon12">Your message goes here!</p>.

This is a sample icon13 documents Use <p class="icon13">Your message goes here!</p>.

This is a sample icon14 documents Use <p class="icon14">Your message goes here!</p>.

This is a sample icon15 documents Use <p class="icon15">Your message goes here!</p>.

This is a sample icon16 documents Use <p class="icon16">Your message goes here!</p>.

This is a sample icon17 documents Use <p class="icon17">Your message goes here!</p>.

This is a sample icon18 documents Use <p class="icon18">Your message goes here!</p>.

This is a sample icon19 documents Use <p class="icon19">Your message goes here!</p>.

This is a sample icon20 documents Use <p class="icon20">Your message goes here!</p>.

This is a sample icon21 documents Use <p class="icon21">Your message goes here!</p>.

This is a sample icon22 documents Use <p class="icon22">Your message goes here!</p>.

This is a sample icon23 documents Use <p class="icon23">Your message goes here!</p>.

This is a sample icon24 documents Use <p class="icon24">Your message goes here!</p>.

This is a sample icon25 documents Use <p class="icon25">Your message goes here!</p>.

This is a sample icon26 documents Use <p class="icon26">Your message goes here!</p>.

This is a sample icon27 documents Use <p class="icon27">Your message goes here!</p>.

This is a sample icon28 documents Use <p class="icon28">Your message goes here!</p>.

This is a sample icon29 documents Use <p class="icon29">Your message goes here!</p>.

This is a sample icon30 documents Use <p class="icon30">Your message goes here!</p>.

 

Unordered lists

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

Warnings

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.

This is a sample clip note. Use <p class="box-info">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-warning">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-stickynote">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-upload">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-download">Your clip note goes here!</p> to form a clip note!

 
Суббота, 20 Апрель 2013 02:57

Toggle Box

Written by
  • Cras rhoncus

    Sed molestie lacinia massa et facilisis. Quisque vestibulum porta diam, eu ultrices nisi consectetur eget. Mauris elit mauris, viverra vel iaculis eu, aliquam id libero. Sed luctus urna non elit vehicula vulputate. Ut ac orci a lectus tincidunt varius. Suspendisse vestibulum justo a quam consectetur volutpat. Nulla sed ligula justo, non lobortis ligula. Fusce a dolor ut massa commodo pharetra. Pellentesque tincidunt imperdiet pellentesque. Morbi egestas, lacus posuere commodo sodales, ligula augue imperdiet ipsum, et venenatis quam turpis ut magna. Ut molestie diam vitae leo varius vestibulum. Suspendisse potenti. Nam a libero vitae libero consectetur mollis. Quisque eu posuere velit.
  • Curabitur vitae

    Duis id nunc sed urna ultricies laoreet. Cras rhoncus, nulla sit amet cursus cursus, velit ligula vestibulum nisi, nec pellentesque diam metus tempor lorem. Etiam et nisl mauris, et molestie turpis. Curabitur vitae velit odio. Nam viverra diam nec sapien condimentum porttitor. Sed aliquam, purus at euismod lacinia, lorem erat hendrerit augue, luctus fermentum sem lorem vel lacus. Nam vel lacus consequat urna ullamcorper sagittis sed eget lorem.

Get the code

[toggle_box]
[toggle_item title='ITEM_TITLE']ADD_CONTENT_HERE[/toggle_item]
[toggle_item title='ITEM_TITLE' active='true']ADD_CONTENT_HERE[/toggle_item]
[/toggle_box]
Суббота, 20 Апрель 2013 02:56

Testimonial

Written by
Praesent lobortis eleifend ultrices. In consectetur aliquam quam eu auctor. In sagittis sem a libero fermentum ultrices eu ut felis. Pellentesque vulputate, justo in sodales bibendum, tellus lectus vehicula dolor, quis sollicitudin diam diam quis dui. Sed volutpat sapien vitae lacus dictum facilisis. Etiam mattis auctor ligula eget convallis. Sed malesuada metus nec diam mattis auctor. Mauris tellus lacus, consequat quis dapibus in, feugiat vel dolor.
Zootemplate, Developer

Get the code

[testimonial author='TESTIMONIAL_AUTHOR' position='AUTHOR_POSITION']ADD_TESTIMONIAL_HERE[/testimonial]
Суббота, 20 Апрель 2013 02:55

Syntax Highlighting

Written by
class modMenuHelper
{
	/**
	 * Get a list of the menu items.
	 *
	 * @param	JRegistry	$params	The module options.
	 *
	 * @return	array
	 * @since	1.5
	 */
	static function getList(&$params)
	{
		$app = JFactory::getApplication();
		$menu = $app->getMenu();

		// If no active menu, use default
		$active = ($menu->getActive()) ? $menu->getActive() : $menu->getDefault();

		$user = JFactory::getUser();
		$levels = $user->getAuthorisedViewLevels();
		asort($levels);
		$key = 'menu_items'.$params.implode(',', $levels).'.'.$active->id;
		$cache = JFactory::getCache('mod_menu', '');
		if (!($items = $cache->get($key)))
		{
			// Initialise variables.
			$list		= array();
			$db			= JFactory::getDbo();

			$path		= $active->tree;
			$start		= (int) $params->get('startLevel');
			$end		= (int) $params->get('endLevel');
			$showAll	= $params->get('showAllChildren');
			$items 		= $menu->getItems('menutype', $params->get('menutype'));

			$lastitem	= 0;

			if ($items) {
				foreach($items as $i => $item)
				{
					if (($start && $start > $item->level)
						|| ($end && $item->level > $end)
						|| (!$showAll && $item->level > 1 && !in_array($item->parent_id, $path))
						|| ($start > 1 && !in_array($item->tree[$start-2], $path))
					) {
						unset($items[$i]);
						continue;
					}

					$item->deeper = false;
					$item->shallower = false;
					$item->level_diff = 0;

					if (isset($items[$lastitem])) {
						$items[$lastitem]->deeper		= ($item->level > $items[$lastitem]->level);
						$items[$lastitem]->shallower	= ($item->level < $items[$lastitem]->level);
						$items[$lastitem]->level_diff	= ($items[$lastitem]->level - $item->level);
					}

					$item->parent = (boolean) $menu->getItems('parent_id', (int) $item->id, true);

					$lastitem			= $i;
					$item->active		= false;
					$item->flink = $item->link;

					// Reverted back for CMS version 2.5.6
					switch ($item->type)
					{
						case 'separator':
							// No further action needed.
							continue;

						case 'url':
							if ((strpos($item->link, 'index.php?') === 0) && (strpos($item->link, 'Itemid=') === false)) {
								// If this is an internal Joomla link, ensure the Itemid is set.
								$item->flink = $item->link.'&Itemid='.$item->id;
							}
							break;

						case 'alias':
							// If this is an alias use the item id stored in the parameters to make the link.
							$item->flink = 'index.php?Itemid='.$item->params->get('aliasoptions');
							break;

						default:
							$router = JSite::getRouter();
							if ($router->getMode() == JROUTER_MODE_SEF) {
								$item->flink = 'index.php?Itemid='.$item->id;
							}
							else {
								$item->flink .= '&Itemid='.$item->id;
							}
							break;
					}

					if (strcasecmp(substr($item->flink, 0, 4), 'http') && (strpos($item->flink, 'index.php?') !== false)) {
						$item->flink = JRoute::_($item->flink, true, $item->params->get('secure'));
					}
					else {
						$item->flink = JRoute::_($item->flink);
					}

					$item->title = htmlspecialchars($item->title);
					$item->anchor_css = htmlspecialchars($item->params->get('menu-anchor_css', ''));
					$item->anchor_title = htmlspecialchars($item->params->get('menu-anchor_title', ''));
					$item->menu_image = $item->params->get('menu_image', '') ? htmlspecialchars($item->params->get('menu_image', '')) : '';
				}

				if (isset($items[$lastitem])) {
					$items[$lastitem]->deeper		= (($start?$start:1) > $items[$lastitem]->level);
					$items[$lastitem]->shallower	= (($start?$start:1) < $items[$lastitem]->level);
					$items[$lastitem]->level_diff	= ($items[$lastitem]->level - ($start?$start:1));
				}
			}

			$cache->store($items, $key);
		}
		return $items;
	}
}

Get the code

[highlighter lang="php" linenums="true" startnums="1"]YOUR_CODE_HERE[/highlighter]
Суббота, 20 Апрель 2013 02:54

Social icon

Written by

Get the code

 [social type="facebook" opacity='dark']PLACE_LINK_HERE[/social] 
[social type="twitter" opacity='dark']PLACE_LINK_HERE[/social]
[social type="delicious" opacity='dark']PLACE_LINK_HERE[/social]
[social type="deviantart" opacity='dark']PLACE_LINK_HERE[/social]
[social type="digg" opacity='dark']PLACE_LINK_HERE[/social]
[social type="flickr" opacity='dark']PLACE_LINK_HERE[/social]
[social type="lastfm" opacity='dark']PLACE_LINK_HERE[/social]
[social type="picasa" opacity='dark']PLACE_LINK_HERE[/social]
[social type="rss" opacity='dark']PLACE_LINK_HERE[/social]
[social type="skype" opacity='dark']PLACE_LINK_HERE[/social]
[social type="stumble-upon" opacity='dark']PLACE_LINK_HERE[/social]
[social type="tumblr" opacity='dark']PLACE_LINK_HERE[/social]
[social type="youtube" opacity='dark']PLACE_LINK_HERE[/social]
[social type="vimeo" opacity='dark']PLACE_LINK_HERE[/social]
Суббота, 20 Апрель 2013 02:53

Pricing Tables

Written by
Starter Package

$19/month

  • 75 GB storage
  • 300 GB Bandwidth / month
  • 10 users
  • 3 MySQL Databases
Sign Up
Premium Package

$59/month

  • 300 GB storage
  • 1000 GB Bandwidth / month
  • 100 users
  • 100 MySQL Databases
Sign Up

Get The Code

 [pricing columns="3"]
[plan title="Starter Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$19" featured="false" per="month"]
<ul>
<li><strong>75 GB</strong> storage</li>
<li><strong>300 GB Bandwidth / month</strong></li>
<li><strong>10</strong> users</li>
<li><strong>3 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Standard Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$39" featured="true" per="month"]
<ul>
<li><strong>150 GB</strong> storage</li>
<li><strong>600 GB Bandwidth / month</strong></li>
<li><strong>40</strong> users</li>
<li><strong>20 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Premium Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$59" featured="false" per="month"]
<ul>
<li><strong>300 GB</strong> storage</li>
<li><strong>1000 GB Bandwidth / month</strong></li>
<li><strong>100</strong> users</li>
<li><strong>100 MySQL Databases</strong></li>
</ul>
[/plan]
[/pricing]
Starter Package

$19/month

  • 75 GB storage
  • 300 GB Bandwidth / month
  • 10 users
  • 3 MySQL Databases
Sign Up
Premium Package

$59/month

  • 300 GB storage
  • 1000 GB Bandwidth / month
  • 100 users
  • 100 MySQL Databases
Sign Up
Unlimited Package

$100/month

  • Unlimited GB storage
  • Bandwidth / month
  • Unlimited users
  • MySQL Databases
Sign Up

Get The Code

 [pricing columns="3"]
[plan title="Starter Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$19" featured="false" per="month"]
<ul>
<li><strong>75 GB</strong> storage</li>
<li><strong>300 GB Bandwidth / month</strong></li>
<li><strong>10</strong> users</li>
<li><strong>3 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Standard Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$39" featured="true" per="month"]
<ul>
<li><strong>150 GB</strong> storage</li>
<li><strong>600 GB Bandwidth / month</strong></li>
<li><strong>40</strong> users</li>
<li><strong>20 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Premium Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$59" featured="false" per="month"]
<ul>
<li><strong>300 GB</strong> storage</li>
<li><strong>1000 GB Bandwidth / month</strong></li>
<li><strong>100</strong> users</li>
<li><strong>100 MySQL Databases</strong></li>
</ul>
[/plan]
[plan title="Unlimited Package" button_link="http://zo2framework.org" button_label="Sign Up" price="$100" featured="false" per="month"]
<ul>
<li><strong>Unlimited GB</strong> storage</li>
<li><strong>Unlimited Bandwidth / month</strong></li>
<li><strong>Unlimited</strong> users</li>
<li><strong>100 MySQL Databases</strong></li>
</ul>
[/plan]
[/pricing]
Суббота, 20 Апрель 2013 02:53

Message Box

Written by
Donec laoreet
Curabitur ultricies tellus in sapien sodales vel mattis nulla tempor. Curabitur lacus purus, congue non rhoncus non, luctus ut nisl. Sed facilisis convallis augue, et facilisis magna lacinia a. Nulla facilisi. Nullam sit amet tellus nec eros blandit gravida. Curabitur at mi sit amet nisl hendrerit condimentum. Nunc bibendum tellus eget diam mollis a imperdiet neque condimentum. Ut vel nulla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae nisl at nisl sagittis ultrices et eu nulla. Praesent aliquet tincidunt quam vitae tempor.

Donec laoreet
Curabitur ultricies tellus in sapien sodales vel mattis nulla tempor. Curabitur lacus purus, congue non rhoncus non, luctus ut nisl. Sed facilisis convallis augue, et facilisis magna lacinia a. Nulla facilisi. Nullam sit amet tellus nec eros blandit gravida. Curabitur at mi sit amet nisl hendrerit condimentum. Nunc bibendum tellus eget diam mollis a imperdiet neque condimentum. Ut vel nulla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae nisl at nisl sagittis ultrices et eu nulla. Praesent aliquet tincidunt quam vitae tempor.

Donec laoreet
Curabitur ultricies tellus in sapien sodales vel mattis nulla tempor. Curabitur lacus purus, congue non rhoncus non, luctus ut nisl. Sed facilisis convallis augue, et facilisis magna lacinia a. Nulla facilisi. Nullam sit amet tellus nec eros blandit gravida. Curabitur at mi sit amet nisl hendrerit condimentum. Nunc bibendum tellus eget diam mollis a imperdiet neque condimentum. Ut vel nulla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae nisl at nisl sagittis ultrices et eu nulla. Praesent aliquet tincidunt quam vitae tempor.

Donec laoreet
Curabitur ultricies tellus in sapien sodales vel mattis nulla tempor. Curabitur lacus purus, congue non rhoncus non, luctus ut nisl. Sed facilisis convallis augue, et facilisis magna lacinia a. Nulla facilisi. Nullam sit amet tellus nec eros blandit gravida. Curabitur at mi sit amet nisl hendrerit condimentum. Nunc bibendum tellus eget diam mollis a imperdiet neque condimentum. Ut vel nulla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae nisl at nisl sagittis ultrices et eu nulla. Praesent aliquet tincidunt quam vitae tempor.

Get The Code

[message_box title='MESSAGE_TITLE' color='red' close='true']ADD_CONTENT_HERE[/message_box]
[message_box title='MESSAGE_TITLE' color='blue' close='true']ADD_CONTENT_HERE[/message_box]
[message_box title='MESSAGE_TITLE' color='yellow' close='true']ADD_CONTENT_HERE[/message_box]
[message_box title='MESSAGE_TITLE' color='green' close='true']ADD_CONTENT_HERE[/message_box]
Суббота, 20 Апрель 2013 02:51

List icon

Written by
  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Built as a sprite

Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

<i class="icon-search icon-white"></i>

There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Use cases

Icons are great, but where would one use them? Here are a few ideas:

  • As visuals for your sidebar navigation
  • For a purely icon-driven navigation
  • For buttons to help convey the meaning of an action
  • With links to share context on a user's destination

Essentially, anywhere you can put an <i> tag, you can put an icon.

Get the code


<div class="row-fluid">
<div class="span3">
<ul class="the-icons">
<li><i class="icon-glass">&nbsp;</i> icon-glass</li>
<li><i class="icon-music">&nbsp;</i> icon-music</li>
<li><i class="icon-search">&nbsp;</i> icon-search</li>
<li><i class="icon-envelope">&nbsp;</i> icon-envelope</li>
<li><i class="icon-heart">&nbsp;</i> icon-heart</li>
<li><i class="icon-star">&nbsp;</i> icon-star</li>
<li><i class="icon-star-empty">&nbsp;</i> icon-star-empty</li>
<li><i class="icon-user">&nbsp;</i> icon-user</li>
<li><i class="icon-film">&nbsp;</i> icon-film</li>
<li><i class="icon-th-large">&nbsp;</i> icon-th-large</li>
<li><i class="icon-th">&nbsp;</i> icon-th</li>
<li><i class="icon-th-list">&nbsp;</i> icon-th-list</li>
<li><i class="icon-ok">&nbsp;</i> icon-ok</li>
<li><i class="icon-remove">&nbsp;</i> icon-remove</li>
<li><i class="icon-zoom-in">&nbsp;</i> icon-zoom-in</li>
<li><i class="icon-zoom-out">&nbsp;</i> icon-zoom-out</li>
<li><i class="icon-off">&nbsp;</i> icon-off</li>
<li><i class="icon-signal">&nbsp;</i> icon-signal</li>
<li><i class="icon-cog">&nbsp;</i> icon-cog</li>
<li><i class="icon-trash">&nbsp;</i> icon-trash</li>
<li><i class="icon-home">&nbsp;</i> icon-home</li>
<li><i class="icon-file">&nbsp;</i> icon-file</li>
<li><i class="icon-time">&nbsp;</i> icon-time</li>
<li><i class="icon-road">&nbsp;</i> icon-road</li>
<li><i class="icon-download-alt">&nbsp;</i> icon-download-alt</li>
<li><i class="icon-download">&nbsp;</i> icon-download</li>
<li><i class="icon-upload">&nbsp;</i> icon-upload</li>
<li><i class="icon-inbox">&nbsp;</i> icon-inbox</li>
<li><i class="icon-play-circle">&nbsp;</i> icon-play-circle</li>
<li><i class="icon-repeat">&nbsp;</i> icon-repeat</li>
<li><i class="icon-refresh">&nbsp;</i> icon-refresh</li>
<li><i class="icon-list-alt">&nbsp;</i> icon-list-alt</li>
<li><i class="icon-lock">&nbsp;</i> icon-lock</li>
<li><i class="icon-flag">&nbsp;</i> icon-flag</li>
<li><i class="icon-headphones">&nbsp;</i> icon-headphones</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-volume-off">&nbsp;</i> icon-volume-off</li>
<li><i class="icon-volume-down">&nbsp;</i> icon-volume-down</li>
<li><i class="icon-volume-up">&nbsp;</i> icon-volume-up</li>
<li><i class="icon-qrcode">&nbsp;</i> icon-qrcode</li>
<li><i class="icon-barcode">&nbsp;</i> icon-barcode</li>
<li><i class="icon-tag">&nbsp;</i> icon-tag</li>
<li><i class="icon-tags">&nbsp;</i> icon-tags</li>
<li><i class="icon-book">&nbsp;</i> icon-book</li>
<li><i class="icon-bookmark">&nbsp;</i> icon-bookmark</li>
<li><i class="icon-print">&nbsp;</i> icon-print</li>
<li><i class="icon-camera">&nbsp;</i> icon-camera</li>
<li><i class="icon-font">&nbsp;</i> icon-font</li>
<li><i class="icon-bold">&nbsp;</i> icon-bold</li>
<li><i class="icon-italic">&nbsp;</i> icon-italic</li>
<li><i class="icon-text-height">&nbsp;</i> icon-text-height</li>
<li><i class="icon-text-width">&nbsp;</i> icon-text-width</li>
<li><i class="icon-align-left">&nbsp;</i> icon-align-left</li>
<li><i class="icon-align-center">&nbsp;</i> icon-align-center</li>
<li><i class="icon-align-right">&nbsp;</i> icon-align-right</li>
<li><i class="icon-align-justify">&nbsp;</i> icon-align-justify</li>
<li><i class="icon-list">&nbsp;</i> icon-list</li>
<li><i class="icon-indent-left">&nbsp;</i> icon-indent-left</li>
<li><i class="icon-indent-right">&nbsp;</i> icon-indent-right</li>
<li><i class="icon-facetime-video">&nbsp;</i> icon-facetime-video</li>
<li><i class="icon-picture">&nbsp;</i> icon-picture</li>
<li><i class="icon-pencil">&nbsp;</i> icon-pencil</li>
<li><i class="icon-map-marker">&nbsp;</i> icon-map-marker</li>
<li><i class="icon-adjust">&nbsp;</i> icon-adjust</li>
<li><i class="icon-tint">&nbsp;</i> icon-tint</li>
<li><i class="icon-edit">&nbsp;</i> icon-edit</li>
<li><i class="icon-share">&nbsp;</i> icon-share</li>
<li><i class="icon-check">&nbsp;</i> icon-check</li>
<li><i class="icon-move">&nbsp;</i> icon-move</li>
<li><i class="icon-step-backward">&nbsp;</i> icon-step-backward</li>
<li><i class="icon-fast-backward">&nbsp;</i> icon-fast-backward</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-backward">&nbsp;</i> icon-backward</li>
<li><i class="icon-play">&nbsp;</i> icon-play</li>
<li><i class="icon-pause">&nbsp;</i> icon-pause</li>
<li><i class="icon-stop">&nbsp;</i> icon-stop</li>
<li><i class="icon-forward">&nbsp;</i> icon-forward</li>
<li><i class="icon-fast-forward">&nbsp;</i> icon-fast-forward</li>
<li><i class="icon-step-forward">&nbsp;</i> icon-step-forward</li>
<li><i class="icon-eject">&nbsp;</i> icon-eject</li>
<li><i class="icon-chevron-left">&nbsp;</i> icon-chevron-left</li>
<li><i class="icon-chevron-right">&nbsp;</i> icon-chevron-right</li>
<li><i class="icon-plus-sign">&nbsp;</i> icon-plus-sign</li>
<li><i class="icon-minus-sign">&nbsp;</i> icon-minus-sign</li>
<li><i class="icon-remove-sign">&nbsp;</i> icon-remove-sign</li>
<li><i class="icon-ok-sign">&nbsp;</i> icon-ok-sign</li>
<li><i class="icon-question-sign">&nbsp;</i> icon-question-sign</li>
<li><i class="icon-info-sign">&nbsp;</i> icon-info-sign</li>
<li><i class="icon-screenshot">&nbsp;</i> icon-screenshot</li>
<li><i class="icon-remove-circle">&nbsp;</i> icon-remove-circle</li>
<li><i class="icon-ok-circle">&nbsp;</i> icon-ok-circle</li>
<li><i class="icon-ban-circle">&nbsp;</i> icon-ban-circle</li>
<li><i class="icon-arrow-left">&nbsp;</i> icon-arrow-left</li>
<li><i class="icon-arrow-right">&nbsp;</i> icon-arrow-right</li>
<li><i class="icon-arrow-up">&nbsp;</i> icon-arrow-up</li>
<li><i class="icon-arrow-down">&nbsp;</i> icon-arrow-down</li>
<li><i class="icon-share-alt">&nbsp;</i> icon-share-alt</li>
<li><i class="icon-resize-full">&nbsp;</i> icon-resize-full</li>
<li><i class="icon-resize-small">&nbsp;</i> icon-resize-small</li>
<li><i class="icon-plus">&nbsp;</i> icon-plus</li>
<li><i class="icon-minus">&nbsp;</i> icon-minus</li>
<li><i class="icon-asterisk">&nbsp;</i> icon-asterisk</li>
<li><i class="icon-exclamation-sign">&nbsp;</i> icon-exclamation-sign</li>
<li><i class="icon-gift">&nbsp;</i> icon-gift</li>
<li><i class="icon-leaf">&nbsp;</i> icon-leaf</li>
<li><i class="icon-fire">&nbsp;</i> icon-fire</li>
<li><i class="icon-eye-open">&nbsp;</i> icon-eye-open</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-eye-close">&nbsp;</i> icon-eye-close</li>
<li><i class="icon-warning-sign">&nbsp;</i> icon-warning-sign</li>
<li><i class="icon-plane">&nbsp;</i> icon-plane</li>
<li><i class="icon-calendar">&nbsp;</i> icon-calendar</li>
<li><i class="icon-random">&nbsp;</i> icon-random</li>
<li><i class="icon-comment">&nbsp;</i> icon-comment</li>
<li><i class="icon-magnet">&nbsp;</i> icon-magnet</li>
<li><i class="icon-chevron-up">&nbsp;</i> icon-chevron-up</li>
<li><i class="icon-chevron-down">&nbsp;</i> icon-chevron-down</li>
<li><i class="icon-retweet">&nbsp;</i> icon-retweet</li>
<li><i class="icon-shopping-cart">&nbsp;</i> icon-shopping-cart</li>
<li><i class="icon-folder-close">&nbsp;</i> icon-folder-close</li>
<li><i class="icon-folder-open">&nbsp;</i> icon-folder-open</li>
<li><i class="icon-resize-vertical">&nbsp;</i> icon-resize-vertical</li>
<li><i class="icon-resize-horizontal">&nbsp;</i> icon-resize-horizontal</li>
<li><i class="icon-hdd">&nbsp;</i> icon-hdd</li>
<li><i class="icon-bullhorn">&nbsp;</i> icon-bullhorn</li>
<li><i class="icon-bell">&nbsp;</i> icon-bell</li>
<li><i class="icon-certificate">&nbsp;</i> icon-certificate</li>
<li><i class="icon-thumbs-up">&nbsp;</i> icon-thumbs-up</li>
<li><i class="icon-thumbs-down">&nbsp;</i> icon-thumbs-down</li>
<li><i class="icon-hand-right">&nbsp;</i> icon-hand-right</li>
<li><i class="icon-hand-left">&nbsp;</i> icon-hand-left</li>
<li><i class="icon-hand-up">&nbsp;</i> icon-hand-up</li>
<li><i class="icon-hand-down">&nbsp;</i> icon-hand-down</li>
<li><i class="icon-circle-arrow-right">&nbsp;</i> icon-circle-arrow-right</li>
<li><i class="icon-circle-arrow-left">&nbsp;</i> icon-circle-arrow-left</li>
<li><i class="icon-circle-arrow-up">&nbsp;</i> icon-circle-arrow-up</li>
<li><i class="icon-circle-arrow-down">&nbsp;</i> icon-circle-arrow-down</li>
<li><i class="icon-globe">&nbsp;</i> icon-globe</li>
<li><i class="icon-wrench">&nbsp;</i> icon-wrench</li>
<li><i class="icon-tasks">&nbsp;</i> icon-tasks</li>
<li><i class="icon-filter">&nbsp;</i> icon-filter</li>
<li><i class="icon-briefcase">&nbsp;</i> icon-briefcase</li>
<li><i class="icon-fullscreen">&nbsp;</i> icon-fullscreen</li>
</ul>
</div>
</div>

Выполненные объекты

Базовые станции сотовой связи

Монтаж 50 базовых станций для одного из провайдеров сотовой связи в Туле. 2013 год.

Строительство ВОЛС и СКС на ООО Каргилл.

Строительство волоконно-оптической линии связи и структурированной кабельной сети на предприятии ООО "Каргилл"

Монтаж СКС для компании "Магна-технопласт" г. Калуга

Строительство структурированной кабельной сети для компании "Магна-технопласт"

Безопасный город 2012

Монтаж 10 базовых станций, каналов ВОЛС и СКС для систем безопасный город по программе МЧС 2012 г.

Монтаж СКС для ОАО "Славянка"

Монтаж структурированной кабельной сети в центральном офисе ОАО "Славянка", г. Москва

ВОЛС и СКС в Федеральном Казначействе

Обслуживание ВОЛС и СКС в Федеральном Казначействе РФ, г. Москва

Монтаж СКС для ИФНС г.Тулы

Монтаж и пуско-наладочные работы СКС и системы электронной очереди для центральной налоговой инспекции Тульской области

Top of Page