Could I use the "HOme Price table" in "Startup template"

Hi,

I will like to know if its possible to use the "home price table" of cloud host template in "startup template"

Im using the price table of simplicity but it does work good (no responsive) thats why I will like to replace for the price list of "cloud host"

http://www.publicat.com.co/index.php/servicios/hostingweb

Thank you.

This can be done in few steps.
1. You need correct custom html code:

Code: Select all

<h1 class="gkBigTitle">Cloud managed hosting</h1>
<p>With over 50 operating system installations available, design, develop and deploy your custom, scalable, secure cloud environment in under a minute! To get started select the amount of resources you will need from the slider below&hellip;</p>

<div class="gkColorPriceTable col3">
<dl>
<dt>Basic</dt>
<dd class="gkPrice"><span>Starting from:</span>$ 19.99<small> /month</small></dd>
<dd>30 GB Space</dd>
<dd>100 GB Traffic</dd>
<dd>100 Mailboxes</dd>
<dd>PHP, Perl/CGI, MySQL</dd>
<dd class="gkLink"><a href="#">More</a></dd>
</dl>

<dl class="gkPremium">
<dt>Dedicated</dt>
<dd class="gkPrice"><span>Starting from:</span>$ 499.99<small> /month</small></dd>
<dd>5000 GB Space</dd>
<dd>5 TB Traffic</dd>
<dd>200 Mailboxes</dd>
<dd>PHP, Perl/CGI, MySQL</dd>
<dd class="gkLink"><a href="#">More</a></dd>
</dl>

<dl class="gkColor">
<dt>Cloud VPS</dt>
<dd class="gkPrice"><span>Starting from:</span>$ 39.99<small> /month</small></dd>
<dd>200 GB Space</dd>
<dd>500 GB Traffic</dd>
<dd>200 Mailboxes</dd>
<dd>PHP, Perl/CGI, MySQL</dd>
<dd class="gkLink"><a href="#">More</a></dd>
</dl>
</div>


Remember to addd this code with default editor set to none instead of tinyMCE.

2. To make this look correct, please use /templates/startup/css/override.css and past this code into it (remember to enable "CSS override" in template settings - advanced section):

Code: Select all

/* Price Table and Color Price Table */
.gkPriceTable { padding: 0 0 80px; }
.gkPriceTable:after,
.gkColorPriceTable:after {
   clear: both;
   content: "";
   display: table;
}
.gkPriceTable.col1 dl { width: 100%; }
.gkPriceTable.col2 dl {
   float: left;
   margin: 2%;
   width: 46%;
}
.gkPriceTable.col2 { margin: 0 -2%; }
.gkPriceTable.col3 dl {
   float: left;
   margin: 0 1.5%;
   width: 30.333333%;
}
.gkPriceTable.col3 { margin: 0 -1.5%; }
.gkPriceTable.col4 dl {
   float: left;
   margin: 0 1%;
   width: 23%;
}
.gkPriceTable dl {
   background: #fff;
   border: 1px solid #e5e5e5;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin-left: -1px;
   overflow: hidden;
   padding: 0;
}
.gkPriceTable dt {
   color: #111;
   display: block;
   font-size: 32px;
   font-weight: 500;
   line-height: 44px;
   margin: 0;
   padding: 15px 0 20px 0;
   text-align: center;
   text-transform: uppercase;
}
.gkPriceTable dt small {
   color: #888;
   display: block;
   font-size: 12px;
   line-height: 1.2;
   text-transform: uppercase;
}
.gkPriceTable dd {
   font-size: 18px;
   font-weight: 300;
   line-height: 30px;
   padding: 0;
   text-align: center;
}
.gkPriceTable dd strong { color: #444; }
.gkPriceTable dd.gkImage {
   border-bottom: 1px solid #e5e5e5;
   margin: 0 0 36px 0;
   padding: 0;
}
.gkPriceTable dd.gkImage img {
   display: block;
   height: auto !important;
   margin: 0;
   max-width: 100% !important;
}
.gkPriceTable dd.gkPrice {
   background: #f5f5f5;
   border-top: 1px solid #e5e5e5;
   margin: 36px 0 0 0;
   overflow: hidden;
   padding: 20px 25px;
}
.gkPriceTable dd.gkPrice > strong {
   color: #444;
   float: left;
   font-size: 30px;
   line-height: 38px;
}
.gkPriceTable dd.gkPrice > .button {
   background: #111;
   float: right;
   font-weight: 500;
}
.gkPriceTable dd.gkPrice > .button:active,
.gkPriceTable dd.gkPrice > .button:focus,
.gkPriceTable dd.gkPrice > .button:hover { background: #3c99df; }
.gkPriceTable .gkPopular { position: relative; }
.gkPriceTable .gkPopular:before {
   background: #9ec22a;
   color: #fff;
   content: "popular";
   display: block;
   font-size: 12px;
   font-weight: 600;
   height: 26px;
   line-height: 27px;
   position: absolute;
   right: -36px;
   text-align: center;
   text-transform: uppercase;
   top: 14px;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
   width: 125px;
}
/* Col 4 */

.gkPriceTable.col4 dd.gkPrice { background: #fff; }
.gkPriceTable.col4 dd.gkPrice > strong { float: none }
.gkPriceTable.col4 dd.gkPrice > .button {
   float: none;
   margin: 24px auto 0;
}
/* Color price table */
.gkColorPriceTable.col1 dl { width: 84%; }
.gkColorPriceTable.col2 dl {
   float: left;
   width: 40%;
}
.gkColorPriceTable.col3 dl {
   float: left;
   margin: 0 2%;
   width: 25%;
}
.gkColorPriceTable.col4 dl {
   float: left;
   width: 25%;
}
.gkColorPriceTable {
   margin: 0 auto;
   padding: 0 0 118px 0;
   width: 88%;
}
.gkColorPriceTable.col1 dl {
   margin: 0 3%;
   width: 94%;
}
.gkColorPriceTable.col2 dl {
   float: left;
   margin: 0 3%;
   width: 44%;
}
.gkColorPriceTable.col3 dl {
   float: left;
   margin: 0 3%;
   width: 27.333333%;
}
.gkColorPriceTable.col4 dl {
   float: left;
   margin: 0 2%;
   width: 21%;
}
.gkColorPriceTable dl {
   background: #3c99df;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 20px;
}
.gkColorPriceTable dt {
   border-bottom: 1px solid #74b3e2;
   color: #fff;
   font-size: 36px;
   font-weight: 400;
   line-height: 72px;
   margin: -8px -20px 32px -20px;
   text-align: center;
   text-transform: uppercase;
}
.gkColorPriceTable dd {
   color: #c7e7ff;
   font-size: 16px;
   font-weight: 300;
   line-height: 26px;
   padding: 0;
   text-align: center;
}
.gkColorPriceTable .gkPrice {
   color: #fff;
   font-size: 36px;
   font-weight: 600;
   margin: 0 0 40px 0;
}
.gkColorPriceTable .gkPrice > span {
   color: #c7e7ff;
   display: block;
   font-size: 14px;
   font-weight: 400;
   line-height: 32px;
   text-align: center;
}
.gkColorPriceTable .gkPrice > small {
   color: #c7e7ff;
   font-size: 18px;
   font-weight: 400;
   position: relative;
   top: 4px;
}
.gkColorPriceTable .gkLink { margin: 0 0 -65px 0; }
.gkColorPriceTable .gkLink a {
   background: #fff;
   border: 5px solid #7ec0f2;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   color: #3c99df;
   display: block;
   font-size: 16px;
   font-weight: 500;
   height: 96px;
   line-height: 97px;
   margin: 20px auto 0 auto;
   text-align: center;
   text-transform: uppercase;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   width: 96px;
}
.gkColorPriceTable .gkLink a.loaded {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
}
.gkColorPriceTable .gkLink a:active,
.gkColorPriceTable .gkLink a:focus,
.gkColorPriceTable .gkLink a:hover {
   background: #7ec0f2;
   color: #fff;
}
.gkColorPriceTable dl.gkColor { background: #9ec22a; }
.gkColorPriceTable .gkColor dt { border-bottom: 1px solid #b6d25a; }
.gkColorPriceTable .gkColor dd { color: #e3f5a9; }
.gkColorPriceTable .gkColor .gkPrice { color: #fff; }
.gkColorPriceTable .gkColor .gkPrice > span { color: #e3f5a9; }
.gkColorPriceTable .gkColor .gkPrice > small { color: #e3f5a9; }
.gkColorPriceTable .gkColor .gkLink a {
   border: 5px solid #bedf54;
   color: #9ec22a;
}
.gkColorPriceTable .gkColor .gkLink a:active,
.gkColorPriceTable .gkColor .gkLink a:focus,
.gkColorPriceTable .gkColor .gkLink a:hover {
   background: #bedf54;
   color: #fff;
}
.gkColorPriceTable dl.gkPremium { background: #111; }
.gkColorPriceTable.col2 dl.gkPremium {
   margin: -32px 1.5% 0 1.5%;
   width: 47%;
}
.gkColorPriceTable.col3 dl.gkPremium {
   margin: -32px 1.5% 0 1.5%;
   width: 30.333333%;
}
.gkColorPriceTable.col4 dl.gkPremium {
   margin: -32px 1% 0 1%;
   width: 23%;
}
.gkColorPriceTable .gkPremium dt {
   border-bottom: 1px solid #373737;
   font-size: 41px;
   line-height: 83px;
   margin: -8px -20px 48px -20px;
}
.gkColorPriceTable .gkPremium dd {
   color: #adadad;
   font-size: 18px;
   line-height: 30px;
}
.gkColorPriceTable .gkPremium .gkPrice {
   color: #fff;
   font-size: 41px;
}
.gkColorPriceTable .gkPremium .gkPrice > span {
   color: #adadad;
   font-size: 16px;
}
.gkColorPriceTable .gkPremium .gkPrice > small {
   color: #adadad;
   font-size: 21px;
}
.gkColorPriceTable .gkPremium .gkLink a {
   border: 5px solid #757575;
   color: #111;
   margin: 32px auto 0 auto;
}
.gkColorPriceTable .gkPremium .gkLink a:active,
.gkColorPriceTable .gkPremium .gkLink a:focus,
.gkColorPriceTable .gkPremium .gkLink a:hover {
   background: #757575;
   color: #fff;
}


Its a lot of code, but it will make price table look as it should.

Last step would be to find best looking color scheme for the table. They are provided in files:
/templates/cloudhost/css/styleX.css (where X is a number of style), and they all begin with:

Code: Select all

.gkColorPriceTable


so you would need to copy all those lines from chosen color style file and past them at the end of override.css.

For example for style1.css the complete code scheme looks this way:

Code: Select all

.gkPriceTable dd.gkPrice > .button {
   background: #111;
}
.gkPriceTable dd.gkPrice > .button:active,
.gkPriceTable dd.gkPrice > .button:focus,
.gkPriceTable dd.gkPrice > .button:hover {
   background: #3c99df;
}
.gkPriceTable .gkPopular:before {
   background: #9ec22a;
}
.gkColorPriceTable dl {
   background: #3c99df;
}
.gkColorPriceTable dt {
   border-bottom: 1px solid #74b3e2;
}
.gkColorPriceTable dd {
   color: #c7e7ff;
}
.gkColorPriceTable .gkPrice > span {
   color: #c7e7ff;
}
.gkColorPriceTable .gkPrice > small {
   color: #c7e7ff;
}
.gkColorPriceTable .gkLink a {
   border: 5px solid #7ec0f2;
   color: #3c99df;
}
.gkColorPriceTable .gkLink a:active,
.gkColorPriceTable .gkLink a:focus,
.gkColorPriceTable .gkLink a:hover {
   background: #7ec0f2;
}
.gkColorPriceTable dl.gkColor { background: #9ec22a; }
.gkColorPriceTable .gkColor dt { border-bottom: 1px solid #b6d25a; }
.gkColorPriceTable .gkColor dd { color: #e3f5a9; }
.gkColorPriceTable .gkColor .gkPrice > span { color: #e3f5a9; }
.gkColorPriceTable .gkColor .gkPrice > small { color: #e3f5a9; }
.gkColorPriceTable .gkColor .gkLink a {
   border: 5px solid #bedf54;
   color: #9ec22a;
}
.gkColorPriceTable .gkColor .gkLink a:active,
.gkColorPriceTable .gkColor .gkLink a:focus,
.gkColorPriceTable .gkColor .gkLink a:hover {
   background: #bedf54;
}
.gkColorPriceTable dl.gkPremium {
   background: #111;
}
.gkColorPriceTable .gkPremium dt {
   border-bottom: 1px solid #373737;
}
.gkColorPriceTable .gkPremium dd {
   color: #adadad;
}
.gkColorPriceTable .gkPremium .gkPrice > span {
   color: #adadad;
}
.gkColorPriceTable .gkPremium .gkPrice > small {
   color: #adadad;
   font-size: 21px;
}
.gkColorPriceTable .gkPremium .gkLink a {
   border: 5px solid #757575;
   color: #111;
}
.gkColorPriceTable .gkPremium .gkLink a:active,
.gkColorPriceTable .gkPremium .gkLink a:focus,
.gkColorPriceTable .gkPremium .gkLink a:hover {
   background: #757575;
}


thanks a lot, it works !!

I'm glad I could help .

I'm trying to get the same price table on my Events template. I've been able to input the code you provided below but I can't seem to get the 'More' button to appear. Can you please assist with some advice on how I can achieve this? My URL is www.melbournebasketball.com.au/tigers. Thanks