How to integrate price table from another template?

Hi, Teitbite (again, I hope it's you )
Storefront dont have Price Table. How to integrate Price Table from another template? May be from Creativity or Msocial or Blueap.
Thanks in advance.

Hi

I'm copying a style from Creativity as example. A HTML as I can see it in our demo:

Code: Select all

<div class="gkPriceTable col4">
  <dl>
    <dt>Basic</dt>
    <dd class="gkPrice">$15<small>/ month</small></dd>
    <dd>Access to all themes</dd>
    <dd>Regular theme updates</dd>
    <dd>Email /  Phone Support</dd>
    <dd>Use your own domain</dd>
    <dd><a href="#">Choose</a></dd>
  </dl>
  <dl class="gkPremium">
    <dt>Premium</dt>
    <dd class="gkPrice">$99<small>/ month</small></dd>
    <dd>Access to all themes</dd>
    <dd>Regular theme updates</dd>
    <dd>Email /  Phone Support</dd>
    <dd>Use your own domain</dd>
    <dd><a href="#">Choose</a></dd>
  </dl>
  <dl>
    <dt>Plus</dt>
    <dd class="gkPrice">$29<small>/ month</small></dd>
    <dd>Access to all themes</dd>
    <dd>Regular theme updates</dd>
    <dd>Email /  Phone Support</dd>
    <dd>Use your own domain</dd>
    <dd><a href="#">Choose</a></dd>
  </dl>
  <dl>
    <dt>Life Time</dt>
    <dd class="gkPrice">$19<small>/ month</small></dd>
    <dd>Access to all themes</dd>
    <dd>Regular theme updates</dd>
    <dd>Email /  Phone Support</dd>
    <dd>Use your own domain</dd>
    <dd><a href="#">Choose</a></dd>
  </dl>
</div>


and a css:

Code: Select all

.gkPriceTable {
    padding: 60px 0 48px;
}
.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 none repeat scroll 0 0;
    border: 1px solid #ddd;
    box-sizing: border-box;
    margin-left: -1px;
    padding: 20px 32px;
}
.gkPriceTable.gkWhite dl {
    background: #f8f8f8 none repeat scroll 0 0;
}
.gkPriceTable dt {
    border-bottom: 1px solid #ddd;
    color: #000;
    font-size: 22px;
    font-weight: 400;
    line-height: 65px;
    margin-top: -20px;
    text-align: center;
}
.gkPriceTable dd {
    font-size: 16px;
    padding: 6px 0;
    text-align: center;
}
.gkPriceTable dd a {
    display: inline-block;
    float: none;
    margin: 23px 0 15px;
}
.gkPriceTable .gkPremium dd a {
    background: #fff none repeat scroll 0 0;
    color: #fff !important;
}
.gkPriceTable .gkPremium dd a:hover {
    background: #fff none repeat scroll 0 0 !important;
    border-color: #fff !important;
    color: #5a69de !important;
}
.gkPriceTable dd.gkPrice {
    color: #000;
    font-size: 60px;
    font-weight: 600;
}
.gkPriceTable dd.gkPrice small {
    color: #999;
    font-size: 16px;
    font-weight: 300;
}
.gkPriceTable dl.gkPremium {
    background: #5a69de none repeat scroll 0 0;
    border-color: #5a69de;
}
.gkPriceTable dl.gkPremium dt {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}
.gkPriceTable dl.gkPremium dd, .gkPriceTable dl.gkPremium dd.gkPrice small {
    color: #fff;
}


Thank you. Almost OK. Was having a little problems with a colours and buttons but solved it. But have another big problem - price table didnt look correctly at small or mobile screens...

pricetable.PNG

technical site address at PM
Hope you can help...

Hi

Here a piece of code to add to smal.tablet.css:

Code: Select all

.gkPriceTable dl {
   padding: 20px 10px;
}

.gkPriceTable dt {
   font-size: 16px;
}

.gkPriceTable dl dd.gkPrice {
   font-size: 32px;
}

.gkPriceTable dd a {
   margin: 10px 0;
   padding: 0 20px;
}


and this one to mobile.css

Code: Select all

.gkPriceTable {
   padding: 20px 0;
}

.gkPriceTable dl {
   margin: 20px auto!important;
   width: 100%!important;
}


Hi, Teitbite.
Price table is almost ok. Tablet looks fine. Mobile fine. Wide mobile columns looks too close to each other end too narrow...

tiktak 2.PNG

And after fixing price table we have a big problems with ALL gkColumns modules in mobile and tablet versions:

tiktak 1.PNG

tiktak 11.PNG

Its all too narrow and placed under each other...
Technical url in PM
Please, help to fix it

Hi

Try remove:

Code: Select all

.demo-typo-col3 {
    width: 33%;
    float: left;
}


from override.css

Thank you. It helps

Hi

Great to hear that. Closing this thread than.