Welcome to Kallyas Joomla Template, a wonderful and premium product for multipurpose websites 

Pricing table - Red Skin

Pricing table - Blue Skin with Rounded corners

Pricing table - Green Skin

Pricing table - Turquoise Skin

Pricing table - Orange Skin

Pricing table - Purple Skin

Pricing table - Yellow Skin

Pricing table - Green Lemon Skin

Pricing table - Dark Skin

Pricing table - Light Skin

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

BUTTONS SHORTCODES

[btn size="" type="" class="" class="" disabled="" link="" target="" icon="" icontheme=""][/btn]

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

<p>
  <button class="btn btn-large btn-primary" type="button">Large button</button>
  <button class="btn btn-large" type="button">Large button</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Default button</button>
  <button class="btn" type="button">Default button</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">Small button</button>
  <button class="btn btn-small" type="button">Small button</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  <button class="btn btn-mini" type="button">Mini button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
<button class="btn btn-large btn-block" type="button">Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

Primary button Button

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled>Button</button>

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

<a class="btn" href="/">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

SOCIAL ICONS

• Twitter
• Dribbble
• Facebook
• Envato
• flickr
• forrst
• gplus
• gplus2
• icloud
• lastfm
• linkedin
• myspace
• paypal
• piacasa
• pinterest
• reedit
• rss
• skype
• stumbleupon
• tumblr
• vimeo
• wordpress
• yahoo
• youtube
• blogger
• deviantart
• digg
• foursquare
• friendfeed
• mail
• html5
• technorati
• soundcloud
• quora
• bebo
• aim
• gosquared
• dropbox
• github
• spotify
• apple

<ul class="social-icons fixclear">
 <li class="social-twitter"><a href="#">Twitter</a></li>
 <li class="social-dribbble"><a href="#">Dribbble</a></li>
 <li class="social-facebook"><a href="#">Facebook</a></li>
 ...
</ul>

SOCIAL ICONS - Colored

• Twitter
• Dribbble
• Facebook
• Envato
• flickr
• forrst
• gplus
• gplus2
• icloud
• lastfm
• linkedin
• myspace
• paypal
• piacasa
• pinterest
• reedit
• rss
• skype
• stumbleupon
• tumblr
• vimeo
• wordpress
• yahoo
• youtube
• blogger
• deviantart
• digg
• foursquare
• friendfeed
• mail
• html5
• technorati
• soundcloud
• quora
• bebo
• aim
• gosquared
• dropbox
• github
• spotify
• apple

<ul class="social-icons colored fixclear">
 <li class="social-twitter"><a href="#">Twitter</a></li>
 ...
</ul>

SOCIAL ICONS - Colored only on :hover

• Twitter
• Dribbble
• Facebook
• Envato
• flickr
• forrst
• gplus
• gplus2
• icloud
• lastfm
• linkedin
• myspace
• paypal
• piacasa
• pinterest
• reedit
• rss
• skype
• stumbleupon
• tumblr
• vimeo
• wordpress
• yahoo
• youtube
• blogger
• deviantart
• digg
• foursquare
• friendfeed
• mail
• html5
• technorati
• soundcloud
• quora
• bebo
• aim
• gosquared
• dropbox
• github
• spotify
• apple

<ul class="social-icons coloredHov fixclear">
  <li class="social-twitter"><a href="#">Twitter</a></li>
 ...
</ul>

or Shortcode:

[socialicons class="" type="" style="" ]
 [socialicon network="" url="#"]
[/socialicons]

Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

<table class="table">
  …
</table>

Optional classes

Add any of the following classes to the .table base class.

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

<table class="table table-striped">
  …
</table>

.table-bordered

Add borders and rounded corners to the table.

<table class="table table-bordered">
  …
</table>

.table-hover

Enable a hover state on table rows within a <tbody>.

<table class="table table-hover">
  …
</table>

.table-condensed

Makes tables more compact by cutting cell padding in half.

<table class="table table-condensed">
  …
</table>

Optional row classes

Use contextual classes to color table rows.

...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Supported table markup

List of supported table HTML elements and how they should be used.

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>