Prosites - Checkout Page - Customization - CSS - Buttons - Text

Hi

I am having some trouble customizing the checkout page for the Prosites plugin. There must be a CSS conflict here as the alignment of the table is off by quite a bit. Also I would like to style the 'red' button so it would look like the subscribe button in the image, with a regular gray on hover click/active so it will correspond to the theme I am using. If anyone could point me in the right direction I would really appreciate this....

*Also, is it possible that users do not have to click on the red button in order to sign up, this is confusing in my opinion.

  • calvinrogercanas

    Hi @Richard,

    Thanks for reaching us.

    It seems you have a basic authentication on your site. So for that reason I can't see the checkout page which I need to access so I can help you out on customizing it. Could you please remove the basic authentication or tell me the username/password so I can access the site. By Basic Authentication I mean this not your WordPress Admin credentials so we are just clear.

    Looking forward for your reply.

    Kind Regards,
    Calvin

  • calvinrogercanas

    Hi @Richard,

    Thanks for your reply and sorry for the delay.

    Try to insert this code in the css plugin(noticed you have one) and it will look like this: http://prntscr.com/6tj75o

    table#psts_checkout_grid div.pblg-checkout-opt span.pblg-price {
    	color: black;
      	text-shadow: none;
    
    }
    
    table#psts_checkout_grid .pblg-checkout-opt {
    	background: #FCFCFC;
    	border: 3px solid #000;
    	border-radius: 3px;
    	margin: 0 auto;
    }
    
    table#psts_checkout_grid .pblg-checkout-opt:hover {
    	background: #000;
    }
    
    #psts_checkout_grid div.opt-selected,
    #psts_checkout_grid div.opt-selected:hover,
    #psts_checkout_grid div.opt-current:hover,
    #psts_checkout_grid div.pblg-checkout-opt:hover span.pblg-price,
    table#psts_checkout_grid div.opt-selected span.pblg-price {
    	background: transparent;
    }
    
    #psts_checkout_grid div.opt-selected, #psts_checkout_grid div.opt-selected:hover, #psts_checkout_grid div.opt-current:hover {
    	border: 3px solid #000;
    }
    
    #psts_checkout_grid tr {
      text-align: center;
    }
    
    .psts_level h3 {
      margin-bottom: 0;
    }

    It seems a bit off because of whitespace and the space occupied by the button. Also it seems the button is already selected when I got there but If the button is not you current subscription or not selected it will have different style(I also provided one).

    Let me know if it helps.

    Kind Regards,
    Calvin

  • Richard
    /* Enter Your Custom CSS Here */header, footer {padding: 20px 0px 70px; width: 50%;}
    .tabs, .subtext, #reviews .meta, .form-row label, .gform_wrapper .top_label .gfield_label, .widget span.reviewer, .hidden-sidebar.sidebar, .hidden-sidebar.sidebar p, .entry-content .portfolio-social li a, .widget ul.product_list_widget li .amount, .widget ul.product_list_widget li .quantity, .bean-pricing-table .pricing-column li{line-height: 1em !important;}
    h1.logo_text{text-transform: uppercase !important;}
    .sidebar.dark, .sidebar.dark p, .sidebar.dark .widget_bean_portfolio_menu li span{color: #999999 !important;}
    .sidebar.dark .widget_bean_portfolio_menu li span {line-height: 1.7em !important;}
    body, body p, body h1, body h5, body .btn, body .button, body textarea, body .rss-date, body .testimonial h1 p, body h3#reply-title, body .viewer .caption, body .archives-list h6, body input[type="tel"], body input[type="url"], body input[type="text"], body input[type="date"], body input[type="time"], body #author-wrapper h6, body .wpcf7-form select, body input[type="email"], body .btn[type="submit"], body input[type="reset"], body input[type="number"], body .comment-author span, body .comment-author cite, body #wp-calendar caption, body input[type="search"], body input[type="button"], body input[type="submit"], body input[type="password"], body input[type="datetime"], body .button[type="submit"], body #cancel-comment-reply-link, body .home-slide a.post-edit-link, body .entry-content .wp-playlist-item-length, body .widget_bean_tweets a.twitter-time-stamp, body .bean-pricing-table .table-mast h5.title, body #edd_checkout_form_wrap select.edd-select, body .bean-pricing-table .table-mast h6.price, body .bean-pricing-table, .bean-pricing-table .table-mast p {font-size: 16px !important; font-family: sans-serif !important;}
    .mu_register .mu_alert{display: none !important;}
    .bean-pricing-table .pricing-highlighted {font-size: 0px !important;}
    .bean-pricing-table .table-mast h5.title {font-size: 25px!important;}
    .sidebar.dark, .sidebar.dark p, .sidebar.dark .widget_bean_portfolio_menu li span {line-height: 1.7em !important;}
    input#signupblog {display: none !important;}
    input#signupuser {display: none !important;}
    label.checkbox {display: none !important;}
    p.privacy-intro{display: none !important;}
    header.min h1, header .logo img {width: 50% !important;}
    .price {
      border: 1px solid #EEE;
      border-radius: 0px;
      display: inline-block;
      margin-bottom: 30px;
      padding: 0px 8px;
      font-size: 18px !important;
    }
    .products li .product-content {display: none !important}
    .entry-meta li span {line-height: 1.7em !important;}
    .bean-likes {line-height: 1.7em !important;}
    .buttons .button {-moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    }
    .single-product .four.columns.meta .button {-moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    }
    
    .primary ul li {-moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    }
    header .sf-menu li {-moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    }
    header ul li, footer ul li {-moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    }
    li {-moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    }
    ul, menu, dir {-moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
    }
    #cc_checkout {
    background: #ffffff !important;
    color: #000000!important;
    text-shadow: none;
    float: left;
    margin-left: 300px;
    font-weight: normal;
    font-size: 14px;
    margin-bottom: 300px;
    }
    table#psts_checkout_grid label span { color: #fff; }
    .btn, .button, .btn[type="submit"], input[type="reset"], input[type="button"], input[type="submit"], .button[type="submit"], .products li a.added_to_cart, #edd_checkout_wrap .edd-submit.button {-moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
      border-radius: 0px !important;}
    
    .hidden-sidebar.dark .widget h6.widget-title {font-size: 17px !important;}
    .bean-pricing-table .table-mast h6.price {text-transform: none !important;}
    .woocommerce-message {display: none !imporant;}
    .bean-license-notification {display: none !important;}
    table#psts_checkout_grid div.pblg-checkout-opt span.pblg-price {
    	color: black;
      	text-shadow: none;
    
    }
    
    table#psts_checkout_grid .pblg-checkout-opt {
    	background: #FCFCFC;
    	border: 3px solid #000;
    	border-radius: 3px;
    	margin: 0 auto;
    }
    
    table#psts_checkout_grid .pblg-checkout-opt:hover {
    	background: #000;
    }
    
    #psts_checkout_grid div.opt-selected,
    #psts_checkout_grid div.opt-selected:hover,
    #psts_checkout_grid div.opt-current:hover,
    #psts_checkout_grid div.pblg-checkout-opt:hover span.pblg-price,
    table#psts_checkout_grid div.opt-selected span.pblg-price {
    	background: transparent;
    }
    
    #psts_checkout_grid div.opt-selected, #psts_checkout_grid div.opt-selected:hover, #psts_checkout_grid div.opt-current:hover {
    	border: 3px solid #000;
    }
    
    #psts_checkout_grid tr {
      text-align: center;
    }
    
    .psts_level h3 {
      margin-bottom: 0;
    }
  • calvinrogercanas

    Hi @Richard,

    Thanks for your reply.

    I couldn't access the site instead it returns an error: http://prntscr.com/6txi71 . The button is automatic selected so you are seeing the style when a button is on selected state. Also, I can tell that the button is selected by having the classname opt-selected when I first visit your site.

    As you can see on my provided code, that I used the right selectors to style the button. So you might as well use it as you go on with the project. May I know the theme you are using? Is it pre-made or customize?

    Looking forward for your reply! :slight_smile:

    Kind Regards,
    Calvin

    P.S Please don't forget to re-grant the access. Also the site is unaccessible could you confirm this? Seems to be redirect loop: http://prntscr.com/6txk45