Customize Forms

  • Resolved backpackingseries

    (@backpackingseries)


    8 years, 7 months ago

    Hello,

    I want to customize the forms in the following ways:

    – Align some of the text on forms in a grid. For instance, on the Login form – can the link: ‘Forgot Password?’ be left-aligned to be on top of the text ‘Not a Member?’ and the link ‘Create Account’ be in line with ‘Not a Member?’? Similarly, on the Forgot Password form can the link “Login’ be left-aligned to be on top of the text ‘Not a Member?’ and ‘Create Account’ be in line with ‘Not a Member?’? Currently, the word Account of ‘Create Account’ goes on to occupy a third row – see attached. If ‘Create Account’ and ‘Not a Member?’ cannot fit in the same line, can I move the entire phrase (Create Account) underneath Not a Member? To make it aligned to a grid.

    – Branding on forms: I want to change the form color to white with a black border and include a logo (replacing the circular person icon).

    – Include editable postal-address (including zip code) fields on the profile display page.

    To change the look and feel of the forms, the plugin docuemntation advises to create a folder named ‘userswp’ inside the active child theme and copy the desired template in it. Could I request for few more steps please?

    1. Should the ‘userswp’ folder be created under public_html/wp-content/themes/childtheme/ or under public_html/wp-content/themes/childtheme/inc?
    2. Could you please advise what lines of code inside the php files should be replaced with what to do the above changes?

    Thank you

Viewing 9 replies - 1 through 9 (of 9 total)
  • Viruthagiri

    (@viruthagiri)

    8 years, 7 months ago

    It seems like those changes can be done using CSS.

    For css you don’t have to override the templates.

    To answer your question, if you are copying register.php file it should go here

    public_html/wp-content/themes/childtheme/userswp/register.php

    Thread Starter backpackingseries

    (@backpackingseries)

    8 years, 7 months ago

    Thanks very much for your reply 🙂

    I am not sure whether my second question above is within the scope of this plugin’s support. But, would it be possible for you to advise what lines of code to add to make the following changes?

    1. Align form-text to a grid
    2. Include a logo and change background color

    I remember you had a recommended plugin for adding CSS that I could make use of.

    Kind regards

    Viruthagiri

    (@viruthagiri)

    8 years, 7 months ago

    To change bg color

    .uwp-login, .uwp-registration, .uwp-forgot, .uwp-account {
    background-color: #000000;
}

    change the value 000000 with your color code.

    This code aligns the forgot password to left

    .uwp_page .uwp-forgotpsw, .uwp_widgets .uwp-forgotpsw, .uwp_adv_search_form .uwp-forgotpsw {
    float: left;
}
    Thread Starter backpackingseries

    (@backpackingseries)

    8 years, 7 months ago

    Thank you Giri. Grateful for your support.

    As advised, I tried this code (below) to change the text alignment. It works on the Login form. But distorts the the ‘Forgot Password’ form – kind of pushes the word Account (of the phrase Create Account) to the third line. Is there a way to tackle this bit?

    .uwp_page .uwp-forgotpsw, .uwp_widgets .uwp-forgotpsw, .uwp_adv_search_form .uwp-forgotpsw {
    float: left;
}

    Lastly, could you please advise a snippet to insert a logo (replacing the circle icon) on these forms?

    Thank you so much for your support.

    Viruthagiri

    (@viruthagiri)

    8 years, 7 months ago

    I have no idea whats going on in your site. I need your site url to asssit you better.

    But you can try this code.

    .uwp_page .uwp-forgotpsw, .uwp_widgets .uwp-forgotpsw, .uwp_adv_search_form .uwp-forgotpsw {
    float: left;
    display: block;
}

    Lastly, could you please advise a snippet to insert a logo (replacing the circle icon) on these forms?

    We use font awesome icons. You need to replace that with your image.

    So copy all the templates to your theme as advised earlier.

    Look for line like this

    
<div class="uwp-lf-icon"><i class="fa fa-user fa-fw"></i></div>

    Replace those lines with 

    <div class="uwp-lf-icon">
<img src="your image url here" />
</div>

    If you have trouble with that, you definitely need to hire a developer. Because these kind of customization is not part of our support.

    Thanks

    Thread Starter backpackingseries

    (@backpackingseries)

    8 years, 7 months ago

    Thank you Giri.

    Will give it try, howsoever intimidating it looks 🙂

    Grateful for your support.

    Viruthagiri

    (@viruthagiri)

    8 years, 7 months ago

    You are welcome.

    Thread Starter backpackingseries

    (@backpackingseries)

    8 years, 7 months ago

    Really appreciate your support!

    The logo works 😀

    Thank you, Giri

    Viruthagiri

    (@viruthagiri)

    8 years, 7 months ago

    You are welcome 🙂

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Customize Forms’ is closed to new replies.