cPanel Template

Navigation:  Modifying Predefined Application Template >

cPanel Template

Previous pageReturn to chapter overviewNext page

Edit styles settings and upload proper images when a user runs predefined application to change packages design. To change styles edit Styles file in cPanel which is located here /usr/local/cpanel/base/frontend/paper_lantern/KuberDock/assets/css/styles.css (for peper_lantern theme).

 

1. Change background of a recommended package:

 

package_background

 

.preapp-plan-page form.palans .item.recommended{

   background: white;

   border: 1px solid #e0e0e0;

}

 

2. Changing “Сhoсolate bar” background:

 

choclatebar

Upload 119x205 px image to /usr/local/cpanel/base/frontend/paper_lantern/KuberDock/assets/images/ on cPanel server.

 

Change styles, specify new image file name (in bold):

 

.preapp-plan-page form.palans .item .img-wrapper{

   width: 119px;

   padding-top: 30px;

   position: relative;

   margin: 0 auto 18px;

   background: url(../images/chocolate.png) 0 0 no-repeat;

}

 

3. Changing overlay image:

 

overlay

 

Upload 119x133 px image to /usr/local/cpanel/base/frontend/paper_lantern/KuberDock/assets/images/ on cPanel server.

 

Change styles, specify new image file name (in bold):

 

.preapp-plan-page form.palans .item .img-wrapper .price-wrapper{

   height: 133px;

   margin: 0 auto;

   position: relative;

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

}

 

4. Package name spot. To change, edit the following classes:

 

name_spot

 

Recommended package

 

.preapp-plan-page form.palans .item.recommended .img-wrapper .plan-name{

   background-color: #e65583;

}

 

Other packages:

 

.preapp-plan-page form.palans .item .img-wrapper .plan-name{

   position: absolute;

   top: -10px;

   z-index: 1;

   min-width: 47px;

   padding: 0 10px;

   right: -15px;

   height: 47px;

   color: #fffefe;

   font-size: 17px;

   line-height: 47px;

   text-align: center;

   background-color: #3d8acd;

   display: inline-block;

   -webkit-border-radius: 50px;

   -moz-border-radius: 50px;

   border-radius: 50px;

}

 

5. Changing fonts. Edit the following classes:

 

Price:

 

price1

 

Currency and period:

 

currency_period

 

Most popular title view:

 

most_popular

 

 

.preapp-plan-page form.palans .item.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_button

 

.preapp-plan-page form.palans .item.recommended .margin-top a.btn.btn-primary -- for Choose package button in Recommended package

 

.preapp-plan-page form.palans .item.recommended .margin-top a.btn.btn-primary{

   background-color: #e65583;

}

.preapp-plan-page form.palans .item.recommended .margin-top a.btn.btn-primary:hover{

   background-color: #CD3C6A;

}

 

.preapp-install-page button.btn.btn-primary .preapp-install-page a.btn.btn-default .preapp-plan-page a.btn.btn-primary -- for other buttons Choose package

 

.preapp-install-page button.btn.btn-primary,

.preapp-install-page a.btn.btn-default,

.preapp-plan-page a.btn.btn-primary{

   border-color: transparent;

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

   -webkit-border-radius: 0;

   -moz-border-radius: 0;

   border-radius: 0;

}

.preapp-install-page button.btn.btn-primary:hover,

.preapp-install-page a.btn.btn-default:hover,

.preapp-plan-page a.btn.btn-primary:hover{

   cursor: pointer;

   -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18);

   -moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18);

   box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18);

}

 

Good for section:

 

good_for2

 

Good for line:

 

.preapp-plan-page form.palans .item .description{

   color: #e65583;

   font-size: 14px;

   font-weight: 800;

   line-height: 14px;

   padding-bottom: 0;

   margin-bottom: 15px;

}

 

Additionally you can change the line “regular use”:

 

.preapp-plan-page form.palans .item .description span{

   font-size: 19px;

   line-height: 19px;

}

 

Show details button:

 

show_details

 

Show/hide details button:

 

.preapp-plan-page form.palans .item .show-details,

.preapp-plan-page form.palans .item .hide-details{

   color: #000000;

   font-size: 14px;

   cursor: pointer;

   padding-left: 27px;

   position: relative;

   margin-bottom: 15px;

   display: inline-block;

}

 

Show/hide button icon:

 

.preapp-plan-page form.palans .item .show-details:before,

.preapp-plan-page form.palans .item .hide-details:before{

   top: 0;

   left: 0;

   bottom: 0;

   width: 18px;

   content: '';

   height: 18px;

   margin: auto;

   position: absolute;

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

}

 

Show details section text:

 

.preapp-plan-page form.palans .item .product-description{

   padding: 10px;

   font-size: 12px;

   text-align: left;

   margin-bottom: 20px;

   background-color: #f5f5f5;

   border: 1px solid #e0e0e0;

}

 

 

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