Price table

I'm trying to add the price table from the Cloud host template to the Events template. I have added the HTML code and the CSS overrides but Í am unable to get the 'more' button to appear. Any help would be greatly appreciated. http://www.melbournebasketball.com.au/tigers. Thanks

screenshot..jpeg

Hi

You are missing a javascript part, but I think easier would be to edit class:

Code: Select all

.gkColorPriceTable .gkLink a {
    background: #fff none repeat scroll 0 0;
    border: 5px solid #7ec0f2;
    border-radius: 50%;
    color: #3c99df;
    display: block;
    font-size: 16px;
    font-weight: 500;
    height: 96px;
    line-height: 97px;
    margin: 20px auto 0;
    text-align: center;
    text-transform: uppercase;
    transform: scale(1);
    transition: all 0.3s ease-out 0s;
    width: 96px;
}


in override.css

and remove

Code: Select all

    transform: scale(1);
    transition: all 0.3s ease-out 0s;


related code.

Thanks. I didn't remove the below code but everything seems to be OK because I couldn't find it.

Should it be removed?

Code: Select all

    transform: scale(1);
    transition: all 0.3s ease-out 0s;


Hi

Please paste the code You've used for css. It may not look exactly as the lines I told You, but similar for sure.

Thanks for your help Teitbite.

Below is what I have put in the ccs override. It's a lot of code. It all seems OK except on a mobile device. All 3 options are squashed together. Any help would be greatly appreciated.

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: #FF3636;
   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;
}
.gkPriceTable dd.gkPrice > .button {
   background: #111;
}
.gkPriceTable dd.gkPrice > .button:active,
.gkPriceTable dd.gkPrice > .button:focus,
.gkPriceTable dd.gkPrice > .button:hover {
   background: #FB2929;
}
.gkPriceTable .gkPopular:before {
   background: #9ec22a;
}
.gkColorPriceTable dl {
   background: #FF0202;
}
.gkColorPriceTable dt {
   border-bottom: 1px solid #FF3636;
}
.gkColorPriceTable dd {
   color: #c7e7ff;
}
.gkColorPriceTable .gkPrice > span {
   color: #FFFFFF;
}
.gkColorPriceTable .gkPrice > small {
   color: #FFFFFF;
}
.gkColorPriceTable .gkLink a {
   border: 5px solid #FF3636;
   color: #FF0202;
}
.gkColorPriceTable .gkLink a:active,
.gkColorPriceTable .gkLink a:focus,
.gkColorPriceTable .gkLink a:hover {
   background: #FF3636;
}
.gkColorPriceTable dl.gkColor { background: #FFC902; }
.gkColorPriceTable .gkColor dt { border-bottom: 1px solid #FFD643; }
.gkColorPriceTable .gkColor dd { color: #FFFFFF; }
.gkColorPriceTable .gkColor .gkPrice > span { color: #FFFFFF; }
.gkColorPriceTable .gkColor .gkPrice > small { color: #FFFFFF; }
.gkColorPriceTable .gkColor .gkLink a {
   border: 5px solid #FFD643;
   color: #FFC902;
}
.gkColorPriceTable .gkColor .gkLink a:active,
.gkColorPriceTable .gkColor .gkLink a:focus,
.gkColorPriceTable .gkColor .gkLink a:hover {
   background: #FFD643;
}
.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;
}

.gkColorPriceTable .gkLink a {
    background: #fff none repeat scroll 0 0;
    border: 5px solid #FF3636;
    border-radius: 50%;
    color: #FF3636;
    display: block;
    font-size: 16px;
    font-weight: 500;
    height: 96px;
    line-height: 97px;
    margin: 20px auto 0;
    text-align: center;
    text-transform: uppercase;
    transform: scale(1);
    transition: all 0.3s ease-out 0s;
    width: 96px;
}


Hi

Looks good. Add this one class for mobile:

Code: Select all

@media only screen and (max-width:910px) {
.gkColorPriceTable.col3 dl {
    float: none;
    margin: 0 auto 75px !important;
    width: 310px !important;
}
}


Thanks. That fixed it.

Hi


Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro