Divi Theme css and pro-site

Hello good day.

Plesae am having issue in customizing the CSS of pro-site regisrtation page and checkout page. am running the divi theme.

Please can anyone be my hero?

Thanks

  • James Morris
    • WordPress Enthusiast

    Hello Dennis,

    I apologize for the delay in resolving this issue for you.

    I hope you don’t mind me jumping in on this thread, but I was able to fix the padding issues with your pricing tables for you.

    If you look at the following screenshot, the gap in the pricing tables was caused by some excessive padding. I’ve changed the padding to the following in your Divi ePanel and the results look a lot nicer.

    New CSS:

    #left-area ul li ul, .entry-content ul li ol, .comment-content ul li ul, .comment-content ul li ol, body.et-pb-preview #main-content .container ul li ol {
    padding: 2px 0;
    }

    Screenshot before: https://monosnap.com/file/00x1DASIIsxl6mVXDM6OLbtMRbaIFe

    Screenshot after: https://monosnap.com/file/dfOU1kMsoPSCC1ra7eW5MG8ALBX4bM

    Add Custom look to the input fields, drop-down field and the buttons.

    Could you give me a little more detail about what you want these elements to look like? Do you have an example elsewhere on your network of what you want your form fields to resemble?

    Best regards,

    James Morris

  • Dennis
    • Flash Drive

    Thanks so much James Morries.

    I really apprecaite your help.

    But is there a way I can alliegn the text and input fields in the pro-site page?

    and add some touches to the buttoms on the page as well.

    Thank you so much for your anticipated support.

  • James Morris
    • WordPress Enthusiast

    Hello Dennis,

    But is there a way I can alliegn the text and input fields in the pro-site page?

    Which text do you want to align? How do you want them aligned? Left/Center/Right?

    By using Google Chrome’s Developer Tools (Ctrl+Shift+i on your keyboard), I was able to find the following CSS declarations. In the sample below, this will more closely match the styles on your Contact page.

    div#prosites-signup-form-checkout {
    margin: 2em 0 0 0;
    }

    div.blogname {
    width: 50%;
    float: left;
    }
    div.blogname label {
    padding:0 1em 0 0;
    font-size: 2em;
    }
    div.blog_title {
    width: 50%;
    float: left;
    }
    div.blog_title label{
    padding:0 1em 0 0;
    font-size: 2em;
    }

    input[type=text], input[type=password], input[type=tel], input[type=email], input.text, input.title, textarea, select, option, button {
    padding: 16px;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color: #999;
    background-color: #eee;
    font-size: 14px;
    }

    button:hover {
    background-color: #820082
    color: white;
    }

    If you add the following to your ePanel in Divi, it should be a good starting point for styling your forms. This, of course, will need a little tweaking to match what it is you’re wanting to do.

    If you could clarify what text you’re wanting to adjust, I’ll be happy to help you find the CSS that needs edited.

    Best regards,

    James Morris

  • Ash
    • WordPress Hacker

    Hello Dennis

    You can’t make it exactly same as the image you gave above due to html structure, but maybe with the following css it will improve. Please add and let us know how it looks.

    #prosites-user-register label, #prosites-user-register input {
    display: block;
    }

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers

    Ash

  • Ash
    • WordPress Hacker

    Sure, please try the following:

    #check-prosite-blog{
    width: 100%;
    margin-top: 10px;
    font-size: 0.8em;
    padding: 0.8em 0.1em;
    background-color: #cc00cc;
    color: #000000;
    border: 1em;
    }

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers

    Ash

  • Dennis
    • Flash Drive

    Hello am trying to style the submit button and I have not been able to do so

    `#submit-prosite-blog{

    width: 50%;

    margin-top: 15px;

    font-size: 1.0em;

    padding: 0.8em 0.1em;

    background-color: #cc00cc;

    color: #000000;

    border: 1em;

    }

    #submit-prosite-blog:hover{

    background-color: #D750D7;

    color: #ffffff;

    }

    I did this.

    Please how do I go about it?

    Thanks in anticipation for your support.

  • Ash
    • WordPress Hacker

    Hello Dennis

    The selector of that button is not #submit-prosite-blog but #check-prosite-blog. Please replace the selector and it should be fine.

    Or are you talking about a different selector? If so, please share a link of that page so that I can check.

    Have a good day!

    Cheers

    Ash

  • Luís
    • Support

    Hi Dennis ,

    Hope you’re doing well today!

    Are you mentioning the “Submit” button, in the payment section?

    If yes, this button uses the “#psts-manual-submit” selector, so, your CSS code should be, as an example:

    #psts-manual-submit{
    width: 50%;
    margin-top: 15px;
    font-size: 1.0em;
    padding: 0.8em 0.1em;
    background-color: #cc00cc;
    color: #000000;
    border: 1em;
    }

    To change the “Reserve your site” button, as my teammate Ash mentioned, use the “#check-prosite-blog” selector:

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • James Morris
    • WordPress Enthusiast

    Hello chris,

    While I can certainly understand the desire to share your site with the community, it’s pretty clear the site you shared is an affiliate site and sharing the link here really added nothing to the conversation at hand and did not assist the original poster with the question they asked. Please note that it is against community guidelines to post affiliate links on the forums.

    If you have an issue you would like our assistance with, feel free to contact us via Live Support so we can assist you one on one. https://premium.wpmudev.org/live-support/

    Best regards,

    James Morris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.