Simplicity Template Price Table in Fest

Hello,

I was wondering if it is possible to use the same price table from the Simplicity template in FEST or other templates?

I tried copying the code from the gk.stuff.css and pasted it to the same file but it didn't work. Am I missing something or doing something wrong?

Thanks

If you have copied html markup and css for tables then it should work fine.

Html Markup for 3 columns

Code: Select all

<div class="gkPriceTable gkPriceTableAnimated col3">
<dl>
<dt>Basic</dt>
<dd class="gkPrice">$15<small>/ month</small></dd>
<dd>Unlimited Storage</dd>
<dd>Unlimited Transactions</dd>
<dd>Unlimited Contacts</dd>
<dd>Unlimited Users</dd>
<dd><a href="#">Choose</a></dd>
</dl>

<dl class="gkPremium">
<dt>Premium</dt>
<dd class="gkPrice">$99<small>/ month</small></dd>
<dd>Unlimited Storage</dd>
<dd>Unlimited Transactions</dd>
<dd>Unlimited Contacts</dd>
<dd>Unlimited Users</dd>
<dd>Try it for a month!</dd>
<dd><a href="#">Choose</a></dd>
</dl>

<dl>
<dt>Plus</dt>
<dd class="gkPrice">$29<small>/ month</small></dd>
<dd>Unlimited Storage</dd>
<dd>Unlimited Transactions</dd>
<dd>Unlimited Contacts</dd>
<dd>Unlimited Users</dd>
<dd><a href="#">Choose</a></dd>
</dl>
</div>


CSS Code.

Code: Select all

/* Price Table */
.gkPriceTable {
   padding: 60px 0 48px 0;
}
.gkPriceTable::after {
   clear: both;
   content: "";
   display: table;
}
.gkPriceTable.col1 dl {
   width: 100%;
}
.gkPriceTable.col2 dl {
   float: left;
   width: 50%;
}
.gkPriceTable.col3 dl {
   float: left;
   width: 33.3%;
}
.gkPriceTable.col4 dl {
   float: left;
   width: 25%;
}
.gkPriceTable.col5 dl {
   float: left;
   width: 20%;
}
.gkPriceTable dl {
   background: #fff;
   border: 1px solid #ddd;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin-left: -1px;
   padding: 25px;
}
.gkPriceTable.gkWhite dl {
   background: #f8f8f8;
}
.gkPriceTable dt {
   border-bottom: 1px solid #ddd;
   font-size: 27px;
   font-weight: 400;
   line-height: 65px;
   margin-top: -20px;
   text-align: center;
}
.gkPriceTable dd {
   font-size: 16px;
   font-weight: 36px;
   padding: 8px 0;
   text-align: center;
}
.gkPriceTable dd a {
   background: #4c90fe;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   color: #fff;
   display: inline-block;
   font-size: 18px;
   font-weight: 600;   
   height: 54px;
   line-height: 55px;
   margin: 20px auto;
   padding: 0 50px;
   -webkit-transition: background .3s ease-out;
   -moz-transition: background .3s ease-out;
   -ms-transition: background .3s ease-out;
   -o-transition: background .3s ease-out;
   transition: background .3s ease-out;   
}
.gkPriceTable dd a:active,
.gkPriceTable dd a:focus,
.gkPriceTable dd a:hover,
.gkPriceTable .gkPremium dd a {
   background: #fec54d;
}
.gkPriceTable .gkPremium dd a:active,
.gkPriceTable .gkPremium dd a:focus,
.gkPriceTable .gkPremium dd a:hover {
   background: #fff;
   color: #777;
}
.gkPriceTable dd.gkPrice {
   color: #fec54d;
   font-size: 68px;
   font-weight: 600;
}
.gkPriceTable dd.gkPrice small {
   color: #999;
   font-size: 16px;
   font-weight: 300;
}
.gkPriceTable dl.gkPremium {
   background: #4c90fe;
   margin: -34px -10px 0 -10px;
   position: relative;
   z-index: 1;
}
.gkPriceTable dl.gkPremium dt {
   border-bottom: 1px solid #80b1ff;
   color: #fff;
}
.gkPriceTable dl.gkPremium dd,
.gkPriceTable dl.gkPremium dd.gkPrice small {
   color: #fff;
}
.gkPriceTable dl.gkPremium dd.gkPrice {
   font-size: 90px;
}
.gkPriceTable dl.gkPremium dd {
   font-weight: 400;
   padding: 10px 0;
}
.gkPriceTableAnimated dl {
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
   transform: scale(0);
   -webkit-transition: -webkit-transform .6s ease;
   -moz-transition: -moz-transform .6s ease;
   -ms-transition: -ms-transform .6s ease;
   -o-transition: -o-transform .6s ease;
   transition: transform .6s ease;
}
.gkPriceTableAnimated dl.loaded {
   -webkit-transform: scale(1.0);
   -moz-transform: scale(1.0);
   -ms-transform: scale(1.0);
   -o-transform: scale(1.0);
   transform: scale(1.0);
}


See you around...

I did that. Could it be something to do with the transition/scrolling feature that FEST does not support? It creates a block of space as to where it would go but scrolling or anything never makes anything appear.

I did it again using the exact code you provided and this time it appears but just in plain text as shown below. Is there a certain module position that doesn't allow it to work or do I have some settings wrong? "Use Typography" in template manager is turned ON as well.

PRICE

Basic
$15/ month
Unlimited Storage
Unlimited Transactions
Unlimited Contacts
Unlimited Users
Choose
Premium
$99/ month
Unlimited Storage
Unlimited Transactions
Unlimited Contacts
Unlimited Users
Try it for a month!
Choose
Plus
$29/ month
Unlimited Storage
Unlimited Transactions
Unlimited Contacts
Unlimited Users
Choose

If your website is online please post a link to the page where you have used this price list otherwise let me know and I ll install fest and check it on there.

See you around...

I would like to use this price table too (simplicity template)

How could I use it?

Thank you

@cedacosur,

Simplicity template already has this feature. Please see following link and add the html content in a custom html module. Template already supports required css codes for this price table.

http://demo.gavick.com/joomla25/simplic ... rice-table

See you around...