Styles that you can use directly in your Webcontent editor

 

Buttons

 

Colored Buttons

 

Bleu

<a class="button " href="#">Bleu</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>

 

 

Sizes

 

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>

 

 

Icons Button

 

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 Boxes

 

Info Message

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

 

Note Message

<div class="portlet-msg-note" >Note Message</div>

 

Warning Message

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

 

Download Message

<div class="portlet-msg-download" >Download Message</div>

 

Error Message

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

Columns

 

 

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>