Hosting table from Clouddhost to Blueup

Post a reply
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Sat Apr 12, 2014 4:15 pm
Reply with quote
Report this post
Hi,

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

Thank you
User avatar
Fresh Boarder
GK User
Sat Apr 12, 2014 4:58 pm
Reply with quote
Report this post
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;
}
User avatar
Moderator
GK User
Sat Apr 12, 2014 5:06 pm
Reply with quote
Report this post
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
User avatar
Fresh Boarder
GK User
Sat Apr 12, 2014 5:10 pm
Reply with quote
Report this post
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;
}
User avatar
Moderator
GK User
Sat Apr 12, 2014 5:58 pm
Reply with quote
Report this post
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.
User avatar
Fresh Boarder
GK User
Sun Apr 13, 2014 10:06 am
Reply with quote
Report this post
Please put the styles into override.css and enable it in template settings.
Do you need original html code of the table?
User avatar
Moderator
Post a reply
cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.