KuberDock Template

Navigation:  Modifying Predefined Application Template >

KuberDock Template

Previous pageReturn to chapter overviewNext page

Edit styles settings and upload proper images when a user runs predefined application to change packages design:

 

1. Changing “Сhoсolate bar” package background:

 

choclatebar

 

Upload 119x205 px image to var/opt/kuberdock/kubedock/frontend/static/img/.

 

Edit plans.htm (var/opt/kuberdock/kubedock/frontend/templates/apps/plans.htm), specify new image name (in bold):

 

.plan .plan-img-wrapper{

       width: 119px;

       padding-top: 15px;

       position: relative;

       margin: 0 auto 18px;

       background: url('../static/img/chocolate.png') 0 0 no-repeat;

}

 

2. Changing overlay image.

 

overlay

 

Upload 119x133 px image to var/opt/kuberdock/kubedock/frontend/static/img/.

 

Edit plans.htm (var/opt/kuberdock/kubedock/frontend/templates/apps/plans.htm), specify new image file name (in bold):

 

.plan .plan-img-wrapper .price-wrapper {

       height: 133px;

       margin: 0 auto;

       position: relative;

       background: url('../static/img/price-area.png') 0 0 no-repeat;

   }

 

3. Package name spot. Edit plans.html (var/opt/kuberdock/kubedock/frontend/templates/apps/plans.html) to change view:

 

spot

 

Recommended package:

 

.plan.recommended .plan-img-wrapper .plan-name{

       background-color: #e65583;

   }

 

Other packages:

 

.plan .plan-img-wrapper .plan-name {

       top: -10px;

       z-index: 1;

       right: -15px;

       height: 47px;

       color: #fffefe;

       min-width: 47px;

       padding: 0 10px;

       font-size: 17px;

       line-height: 47px;

       position: absolute;

       text-align: center;

       background-color: #3d8acd;

       display: inline-block;

       -webkit-border-radius: 50px;

       -moz-border-radius: 50px;

       border-radius: 50px;

   }

 

4. Changing fonts. Edit the following classes:

 

Price:

 

price_font

 

.plan .plan-img-wrapper .price-wrapper .plan-price{

       color: #fff;

       font-size: 19px;

       padding-top: 50%;

       line-height: 26px;

       word-spacing: -4px;

       text-align: right;

       padding-right: 10%;

       margin-bottom: 5px;

   }

 

Currency and period:

 

usd_hour_font

 

.plan .plan-img-wrapper .price-wrapper .plan-period,

.plan .plan-img-wrapper .price-wrapper .plan-price-suffix{

       color: #fff;

       font-size: 14px;

   }

 

Most popular title view:

 

most_popular

 

.plan.recommended .title{

       top: -12px;

       left: 0;

       padding: 3px 0;

       right: 0;

       color: #fff;

       margin: auto;

       width: 119px;

       font-size: 12px;

       font-weight: 800;

       position: absolute;

       text-align: center;

       text-transform: uppercase;

       background-color: #e65583;

   }

 

Choose package button:

 

choose_package

 

.plan.recommended .buttons .submit-button -- for Choose package button in Recommended package:

 

.plan.recommended .buttons .submit-button{

       background-color: #e65583;

   }

 

.submit-button -- for other buttons Choose package:

 

.submit-button{

       -webkit-border-radius: 2px;

       -moz-border-radius: 2px;

       border-radius: 2px;

       -moz-background-clip: padding;

       -webkit-background-clip: padding-box;

       background-clip: padding-box;

       -webkit-transition: all 300ms;

       -moz-transition: all 300ms;

       -ms-transition: all 300ms;

       -o-transition: all 300ms;

       -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);

       -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);

       box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);

       border: none;

       color: #fff;

       height: 37px;

       padding: 0 31px;

       font-size: 12px;

       min-width: 105px;

       line-height: 37px;

       text-align: center;

       text-transform: uppercase;

       background-color: #2490EA;

       font-family: "open_sansregular";

   }

 

 

Good for section:

 

good_for

 

“Good for” line:

 

.plans .plan .plan-goodfor{

       color: #e65583;

       font-size: 13px;

       text-align: left;

       font-weight: 600;

       padding: 0 0 0 10px;

       margin-bottom: 15px;

}

 

Additionally you can change regular use line :

 

.plans .plan .plan-goodfor span{

       font-size: 17px;

}

 

Show details button:

 

show_hide_details

 

Show/hide details button:

 

.plans .plan .show-more{

       margin: 0 10px;

       font-size: 14px;

       cursor: pointer;

       font-weight: 400;

       text-align: left;

       position: relative;

       padding-left: 27px;

}

 

Show/hide button icon:

 

.plans .plan .show-more:before{

       top: 0;

       left: 0;

       bottom: 0;

       content: '';

       width: 18px;

       margin: auto;

       height: 18px;

       position: absolute;

       background: url('../static/img/item-arrow.png') 0 0 no-repeat;

}

 

Show details section text:

 

.plans .plan .plan-details p{

       color: #000;

       font-size: 13px;

       word-spacing: -1px;

       margin-bottom: 5px;

       letter-spacing: 0px;

  }

 

Note that you can set icon rotation by clicking Show details in .plans .plan .show-more.rotate:before.