I've set up PPV and am using the shortcode on one of my

Hello,

I've set up PPV and am using the shortcode on one of my posts here:
http://clientflow.io/blog/33-ways-to-get-more-clients/

If you scroll to "2" in the list the pay box is showing up but it is not styled and the rest of the content is not hidden. Screenshot attached.

Any ideas?

  • Vinod Dalvi

    Hi @marco ,

    Welcome to the WPMU Dev community and thanks for posting on the forum.

    I can see the button is not getting styled due to CSS conflict.

    To style the button try adding the following CSS code in the style.css file of your child theme or add it in your site using the following plugin.

    https://wordpress.org/plugins/simple-custom-css/

    .ppw_form_container input.ppw_submit_btn {
    width: auto;
    border: 1px solid;
    padding: 12px;
    background: #2da5da;
    color: #fff;
    }

    Please advise if you have more questions.

    Best Regards,
    Vinod Dalvi

  • Vinod Dalvi

    Hi @marco ,

    To make the button look like as displayed in your shared screenshot, try using the following CSS code.

    .ppw_form_container input.ppw_submit_btn {
    color: #4e4d4d;
    	font-size: 13px;
    	cursor: pointer;
    	display: inline-block;
    	background-color: #f6f6f6;
    	background-repeat: no-repeat;
    	font-family: Lucida Grande, Helvetica Neue, Helvetica, Arial;
    	text-shadow: 0 1px 0 #ffffff;
    	background: #f8f8f8; /* Old browsers */
    	background: -moz-linear-gradient(top,  #f8f8f8 0%, #eae9e9 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#eae9e9)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top,  #f8f8f8 0%,#eae9e9 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top,  #f8f8f8 0%,#eae9e9 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top,  #f8f8f8 0%,#eae9e9 100%); /* IE10+ */
    	background: linear-gradient(top,  #f8f8f8 0%,#eae9e9 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#eae9e9',GradientType=0 ); /* IE6-9 */
    	padding: 6px 14px 6px;
    	line-height: normal;
    	border: 1px solid #e3e3e3;
    	border-bottom-color: #d1d1d1;
    	border-radius: 3px;
    
    	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
    	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
    	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
    
    	-webkit-transition: 0.1s linear all;
    	-moz-transition: 0.1s linear all;
    	-ms-transition: 0.1s linear all;
    	-o-transition: 0.1s linear all;
    	transition: 0.1s linear all;
    
    	text-decoration:none;
    	width: auto;
    font-weight: normal;
    text-transform: none;
    }

    Regards,
    Vinod Dalvi

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.