Pricing Plan Style about

Have my pricing plan style..I how to do make it design ? Can you help me this ?
https://ibb.co/jiKfUe image here demo

  • Adam Czajczyk

    Hi imdat

    This will require some additional custom CSS. I'm not able to do entire custom styling for you but I can give you a foundation that you can then expand/adjust/tweak further.

    Add this style to the site via "Appearance -> Customize -> Additional CSS":

    #prosites-checkout-table .psts-level-0 {
    	display:none;
    }
    
    #prosites-checkout-table .pricing-column {
    	width:30%!important;
    	margin:0 1.5%;
    	-webkit-border-radius: 15px 15px 15px 15px;
      border-radius: 15px 15px 15px 15px;
    	border-width:0;
      background: #fe0743; /* Old browsers */
      background: -moz-linear-gradient(top, #fe0743 0%, #f47b57 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #fe0743 0%,#f47b57 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, #fe0743 0%,#f47b57 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe0743', endColorstr='#f47b57',GradientType=0 ); /* IE6-9 */
    }
    
    #prosites-checkout-table .featured {
    	border:0!important;
    	background: #4a5bce; /* Old browsers */
      background: -moz-linear-gradient(top, #4a5bce 0%, #28dae4 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #4a5bce 0%,#28dae4 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, #4a5bce 0%,#28dae4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a5bce', endColorstr='#28dae4',GradientType=0 ); /* IE6-9 */
    }
    
    #prosites-checkout-table .pricing-column .title {
    	-webkit-border-radius: 15px 15px 0px 0px;
      border-radius: 15px 15px 0px 0px;
    	border-width:0px!important;
    	background:none;
    	color:#FFF;
    }
    
    #prosites-checkout-table .pricing-column .summary {
    	border:0;
    	background:none;
    }
    #prosites-checkout-table .pricing-column .summary div {
    	background:none;
    	border:0!important;
    	box-shadow:none!important;
    	-moz-box-shadow:none!important;
    	-webkit-box-shadow:none!important;
    	color:#FFF;
    	padding:5px 10px;
    }
    
    #prosites-checkout-table .pricing-column .sub-title {
    	border:0;
    	background:none;
    }
    
    #prosites-checkout-table .pricing-column .feature-section {
    	border:0!important;
    	background:none!important;
    }
    #prosites-checkout-table .pricing-column .feature-section li {
    	background:0;
    	color:#FFF;
    }
    
    #prosites-checkout-table .pricing-column .feature-indicator {
    	display:none;
    }
    
    #prosites-checkout-table .pricing-column .button-box {
    	border:0;
    }
    
    #prosites-checkout-table .pricing-column .button-box button {
    	 border-radius: 15px;
    	 border-width:0px!important;
    	 width:auto;
    	 padding:10px 25px;
    	background:#FFF;
    	color:#777777;
    }

    Then also:

    1. Go to "Network Admin -> Pro Sites -> Settings -> Pricing Tables -> Feature Table" and make sure that "Eanble Feature Table" checkbox is checked
    2. On the very same page add your features and make sure that the text for each feature that you want to see in Pricing Table are added to "Custom Text" colum there.

    All together this should give you a start. I can't guaranteed that it will work fine "out of the box" as it might also be affected by the theme and/or other plugins and some additional modifications might be required but when tested with Twenty Seventeen and Twenty Sixteen themes, it gives a solid base for further modification.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.