Стилове които можете да използвате директно в редактора за Уеб съдържание.

Lightbox (изкачащ мултимедиен прозорец)

Картинкa

<a class="fancybox" href="url-to-full-size-image" title="Sample image">
<img alt="" src="url-to-thumbnail-image" style="width: 100px; height: 75px; margin: 5px;" />
</a>

 

Галерия от снимки

<a class="fancybox" href="url-to-full-size-image" rel="gallery">
<img alt="" src="url-to-thumbnail-image" style="margin: 5px; width: 20%;" />
</a>

<a class="fancybox" href="url-to-full-size-image" rel="gallery">
<img alt="" src="url-to-thumbnail-image" style="margin: 5px; width: 20%;" />
</a>

<a class="fancybox" href="url-to-full-size-image" rel="gallery">
<img alt="" src="url-to-thumbnail-image" style="margin: 5px; width: 20%;" />
</a>

Iframe (например линк от youtube видео)

Open video

<a class="fancybox iframe" href="http://www.youtube.com/embed/DO0CFBvYMC4" title="Sample video">Open video</a>

 

Бутони

Цветни бутони

Blue

 

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

 

Red

 

<a class="red " href="#">red</a>

 

Orange

 

<a class="orange " href="#">orange</a>

 

Teal

 

<a class="teal " href="#">teal</a>

 

Aqua

 

<a class="aqua " href="#">aqua</a>

 

Green

 

<a class="green " href="#">green</a>

 

Pink

 

<a class="pink " href="#">pink</a>

 

purple

 

<a class="purple " href="#">purple</a>

 


Размери

Small

<a class="button small " href="#">Small</a>

 

  Default

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

 

Large

<a class="button large " href="#">Large</a>

 

XLarge

<a class="button xl" href="#">XLarge</a>

 

 


С икони

Note

<a class="icone-button-note" href="#">Note</a>

 

  Tick

<a class="icone-button-tick" href="#">Tick</a>

 

  Alert

<a class="icone-button-alert" href="#">Alert</a>

 

  Info

<a class="icone-button-info" href="#">Info</a>

 

  Downlaod

<a class="icone-button-download" href="#">Downlaod</a>

 


Съобщения

Info Message

 

<div class="portlet-msg-info" >Info Message</div>

 

Warning Message

 

<div class="portlet-msg-alert" >Warning Message</div>

 

Error Message

 

<div class="portlet-msg-error" >Error Message</div>

 


Колони

 

Two columns Your first column contents goes here

Two columns Your second column contents goes here

 

 

<div class="col-full">
	<div class="twocol-one">
		<p>
			<strong>Two columns</strong><br />
			Your first column contents goes here
		</p>
	</div>
	<div class="twocol-one last">
		<p>
			<strong>Two columns</strong><br />
			Your second column contents goes here.
		</p>
	</div>
	<div class="fix"></div>
</div>

 


 

Three columns your first column contents goes here

Three columns your second column contents goes here

Three columns your third column contents goes here

 
<div class="col-full">
	<div class="threecol-one">
		<p>
			<strong>Three columns</strong><br />
			your first column contents goes here.
		</p>
	</div>
	<div class="threecol-one">
		<p>
			<strong>Three columns</strong><br />
			your second column contents goes here.
		</p>
	</div>
	<div class="threecol-one last">
		<p>
			<strong>Three columns</strong><br />
			your third column contents goes here.
		</p>
	</div>
	<div class="fix"></div>
</div>

 


 

Two column 30-70 Your first column contents goes here.

Two columns Your second column contents goes here.

 
<div class="col-full">
	<div class="twocol-onethird">
		<p>
			<strong>Two column 30-70</strong><br />
			Your first column contents goes here.
		</p>
	</div>
	<div class="twocol-twothird last">
		<p>
			<strong>Two columns</strong><br />
			Your second column contents goes here.
		</p>
	</div>
	<div class="fix"></div>
</div>

 


 

Four columns Your first column contents goes here.

Four columns Your second column contents goes here.

Four columns Your third column contents goes here.

Four columns Your forth column contents goes here.

 
<div class="col-full">
	<div class="fourcol-one">
		<p>
			<strong>Four columns</strong><br />
			Your first column contents goes here.
		</p>
	</div>
	<div class="fourcol-one">
		<p>
			<strong>Four columns</strong><br />
			Your second column contents goes here.
		</p>
	</div>
	<div class="fourcol-one">
		<p>
			<strong>Four columns</strong><br />
			Your third column contents goes here.
		</p>
	</div>
	<div class="fourcol-one last">
		<p>
			<strong>Four columns</strong><br />
			Your forth column contents goes here.
		</p>
	</div>
	<div class="fix"></div>
</div>

 


 

 Three columns Your first column contents goes here.

 Three columns Your second column contents goes here.

 Three columns Your third column contents goes here.

 
<div class="col-full">
	<div class="threecol-onequarter">
		<p>
			<strong> Three columns</strong><br />
			Your first column contents goes here.
		</p>
	</div>
	<div class="threecol-onequarter">
		<p>
			<strong> Three columns</strong><br />
			Your second column contents goes here.
		</p>
	</div>
	<div class="threecol-onehalf last">
		<p>
			<strong> Three columns</strong><br />
			Your third column contents goes here.
		</p>
	</div>
	<div class="fix"></div>
</div>

 


 

Two columns (1/4)-(3/4) Your first column contents goes here.

Two columns Your Second column contents goes here.

 
<div class="col-full">
	<div class="twocol-onequarter">

	<p>
		<strong>Two columns (1/4)-(3/4)</strong><br />
		Your first column contents goes here.
	</p>
	</div>
		<div class="twocol-threequarter last">
			<p>
				<strong>Two columns</strong><br />
				Your Second column contents goes here.
			</p>
		</div>
		<div class="fix"></div>
	</div>

	

 


 

Blockquote

Maecenas vestibulum faucibus enim vel gravida quisq acinter

congue nec consectetur libero fusce neque libero, consectetur sit amet cursus a, tempor quis neque. Suspendisse diam lacus, pellentesque ac interdum vitae, vehicula

 

<div id="quote">
	<h3>Maecenas vestibulum faucibus enim vel gravida quisq acinter</h3>
	<p>
		congue nec consectetur libero fusce neque libero, consectetur sit
		amet cursus a, tempor quis neque. Suspendisse diam lacus, pellentesque
		ac interdum vitae, vehicula
	</p>
</div>