Hosting table from Clouddhost to Blueup

Hi,

Could you please guide me how to implement hosting table styles from Cloudhost to Blueup template.

Thank you

You need those 2 sets of styles:

Code: Select all

/* 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;
}


And style 1 color scheme:

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;
}


Sorry Cyberek. I suppose to be more specific. I was thinking about compare hosting plans table, from this page:
http://demo.gavick.com/joomla25/cloudho ... eb-hosting

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;
}


and

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;
}


Thank you. But how to copy this table style into Blueup:
the last html table on page: http://demo.gavick.com/joomla25/cloudho ... eb-hosting
Compare Dedicated Hosting Plans
Compare major features of our Dedicated Web Hosting.

Please put the styles into override.css and enable it in template settings.
Do you need original html code of the table?