Where is the HTML for the sign up form located?


My developer is wanting to know where HTML for the sign up form located? He says "There isn't a whole lot of markup or CSS selectors to use, so the form HTML will need to be edited. I'm looking for the Setup Your Site, Terms of Service, Select a Template, etc.".

He told me he "I just added a registration stylesheet to my theme because it's not ideal to work from the WYSIWG editor in the table admin page."

Any help from the gurus who created Pro Sites?

  • Predrag Dubajic

    Hey Blake,

    Hope you're doing well today :slight_smile:

    For prosites default registration form you can find the code inside /pro-sites/pro-sites-files/lib/ProSites/View/Front/Registration.php file around line 90.

    For Blog Templates I guess you're using New Blog Templates plugin, you can check files inside /blogtemplates/blogtemplatesfiles/template/ folder, depending on which selector is being used.

    As for TOS, again, I'm guessing you're using our TOS plugin and in that case you can check /signup-tos/signup-tos.php file around line 95.

    Hope this helps :slight_smile:

    Best regards,

  • Predrag Dubajic

    Hi Blake,

    Changes made in plugin files directly will indeed be overwritten by updates but there are no additional templates that could be pulled out of the plugin in order to keep changes after update.

    Could you tell me what changes are you actually looking to make because three plugins have unique ID's on their holder which can be used to apply CSS without affecting other elements on site or page?

    Best regards,

  • Adam Czajczyk

    Hello Blake!

    Pricing Tables - as well as content related to New Blog Templates and TOS - can be styled using solely custom CSS rules and there's no need to edit core files and/or templates for that.

    Here's a rough example of styling for Pricing Tables based on an image that you shared:

    #prosites-checkout-table {display:block;width:100%;margin:10px auto 10px auto;}
    #prosites-checkout-table .pricing-column {width:33.3%!important;text-align:center;}
    #prosites-checkout-table .pricing-column .title,
    #prosites-checkout-table .pricing-column .summary,
    #prosites-checkout-table .pricing-column .sub-title {background-color:#19BC9C;color:#FFF;border:0;}
    #prosites-checkout-table .pricing-column .price {background:none;border:0;box-shadow:none;color:#FFFFEE!important;}
    #prosites-checkout-table .pricing-column .button-box button {border:0;background-color:#19BC9C;border-radius:0;color:#FFFFEE;}

    That's not a complete styling but it should give your developer a good start and a fairly well idea of the general "way to go" with it. If you add this style either to the "Custom CSS" box of your theme (if there's any) or to a style.css file of your child-theme (if you are using a child-theme) or via a "Simple Custom CSS" plugin, it should affect your site and you should see the changes there.

    An example above was created with an assumption that there are three columns so this may need to be adjusted (see 33.3% width). The code can be also tweaked/adjusted to mach your screenshot nearly perfectly by adding more rules. All the elements that need styling can be found using browser's "Inspect Element" tool - which I used here as well (in this case of Firefox but Chrome has similar tool built-in).

    I hope that helps and if you need further assistance, let me know please.

    Best regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.