NEED HELP STYLING REGISTRATION AND LOGIN FORM

hoping to finish 2016 strong lol..

I am trying to get the registration form located here.. mindfulscience.es/registro to look like what I have here http://seoinerg.com/registro/

same with the login form located here mindfulscience.es/iniciar-sesion/
to look like what I have here
http://seoinerg.com/iniciar-sesion/

I know this is a huge ask.. if you can point me in the right direction.. at least a starting point.. that would help..

thanks for your time on any of this and HAPPY NEW YEAR!

ej

  • Sajid

    Hello ME Admin,
    Hope you are doing good today :slight_smile:

    If you need just the style/css then I can try to provide CSS code to make it like that. However, if you need the exact same effect to labels and fields then I am afraid is not possible.

    As you said, the other site is also yours then I would suggest you to use the exact same form here too. You can then easily copy over the CSS code too on your new site.

    I am assuming, you are using a plugin for register and login forms on your other site.

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid

  • Sajid

    Hello ME Admin,
    Hope you are doing good and happy new year :slight_smile:

    To make it look closer to the other forms, try adding following code in style.css file of your child theme or add in Appearance -> Customise -> Additional CSS (WordPress 4.7 feature). If you are on an older version of WordPress then you can add the custom CSS on your site without editing files using Simple Custom CSS plugin.

    .mp_wrapper textarea, .mp_wrapper select, .mp_wrapper input[type=text], .mp_wrapper input[type=url], .mp_wrapper input[type=email], .mp_wrapper input[type=tel], .mp_wrapper input[type=number], .mp_wrapper input[type=password] {
        border-top: 0px !important;
        border-left: 0px !important;
        border-right: 0px !important;
        background: transparent !important;
    }
    .mp_wrapper {
        overflow-x: hidden;
        overflow-y: hidden;
        background: #fff;
        padding: 20px;
        border-radius: 2px;
    }
    .mp_wrapper input[type=submit] {
        background: transparent !important;
        border: 2px solid #f39364;
        color: #f39364 !important;
        border-radius: 50px !important;
        width: 100% !important;
        margin-left: 0px !important;
        box-shadow: none !important;
    }
    .mp_wrapper input[type=submit]:hover {
        background: #F39364 !important;
        color: #FFF !important;
    }

    I tried to write the code in a way so it work on login page too. But please add that and let me know if you see any issue.

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.