Styles that you can use directly in your Webcontent editor

Buttons

 

Colored Buttons

 

Blue

 

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

 

Red

 

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

 

Green

 

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

 

Pink

 

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

 

grey

 

<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>

 

Warning Message

 

<div class="portlet-msg-alert" >Warning 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>

 

 


 

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

 

<blockquote >
 <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>
</blockquote>