March 7, 2015

Mobile Responsive Login Templates

Share this

How to setup your Member Login Page

STEP 1:   You’ll find a “DAP Member Pages” button in your WP Page/Post.

Click on it to get started.

 

STEP 2:  Select Member Login and click on Next

 

STEP 3:  Generate Login Shortcode

When you select “Member Login” option and click on the Next button, it’ll bring up a login shortcode generator.

 

Configure Post-Login URL

Be sure to set a  “Redirect URL”.

Here’s the format:

Responsive Forms

If you don’t set a shortcode level redirect, DAP will use the post-login redirect URL set in DAP config page or in the DAP products page.

If you want to setup a product specific post-login landing page,  just set the ‘redirect’ tag in the shortcode and the users will be redirected to that page upon login.

Select a Page or Sidebar login template. 

Here are the available Page Login Templates:

Here are the available Sidebar Login Templates:

SIDEBAR TEMPLATE 1                    SIDEBAR TEMPLATE 2:


 

 

 

 

 

 

 

 

 

Old Shortcode:
Email
Password
 
Remember me (for 2 weeks)

Forgot Password

The new shortcode is a replacement for the old

Email
Password
 
Remember me (for 2 weeks)

Forgot Password

shortcode. Simply upgrading LiveLinks on your site will not automatically install the new shortcode or login template.

You must replace the old shortcode

Email
Password
 
Remember me (for 2 weeks)

Forgot Password

– with the new one, in order to see the new login templates in action.

The old shortcode will still be valid, and your old login form will still work even after you upgrade DAP.

If you need to switch back to the old code at any time, it will still work just fine. But replace it with the new shortcode as the new templates are mobile-responsive.

 

Multiple Login Pages

Due to the new feature of setting a post-login URL right in the shortcode itself (via the redirect tag), you can now have multiple login pages on different parts of your web site. If you don’t specify a redirect tag, then the default post-login rules will apply. However, you can now override the default rules for specific login forms on specific pages, using the new shortcode. This is especially useful if you have a content hub where you have multiple WordPress installations on the same domain, for different niches (or different sub-niches).

Page & Sidebar Templates

We are releasing  5 pre-built login page templates and 2 sidebar templates. See video above for demo of all 7 templates.

5 PAGE TEMPLATES

You can use template1, template2, template3, template4 or template5  in the shortcode.

2 SIDEBAR TEMPLATES

Responsive Forms


Responsive Forms

Login Widget

To have the DAP login form show up in your web site’s sidebar, simply add the sidebar template shortcode to a text widget and add the widget to your sidebar.

Responsive Forms

OR

Responsive Forms

Customization Options

You will find the login template files under the /wp-content/plugins/DAP-WP-LiveLinks/includes/login/templates/ folder.

Updating the Templates:

Say you are using template1 and want to update the HTML of that template.

Just make a copy of /wp-content/plugins/DAP-WP-LiveLinks/includes/login/templates/template1/template1.html to /wp-content/plugins/DAP-WP-LiveLinks/includes/login/templates/template1/customtemplate1.html.

Make the updates to the custom HTML file and upload back to the template1 folder. Do not remove any merge tags from the template.

Updating the CSS:

To update the CSS of a template, make a copy of /wp-content/plugins/DAP-WP-LiveLinks/includes/login/templates/template1/style.css to /wp-content/plugins/DAP-WP-LiveLinks/includes/login/templates/template1/customstyle.css.

Make the updates to the custom CSS file and upload back to the template1 folder.

Login Form Width:

If you wish to change the login form’s width, you can update it in the style.css (look for  width: 400px in style.css). Of course, don’t change the default file, as it will be overwritten in a future release. So always make a custom copy of your own, and make the changes to that file.

Bring Your Own Template

You will probably not have a need to create your own template as there are 7 responsive pre-built templates that you can cust0mize, but if you want to create one, please follow these steps.

Create a new template under /wp-content/plugins/DAP-WP-LiveLinks/includes/login/templates.

Say you call it ‘mytemplate‘.

Then copy over the style.css and template1.html from template1 folder to this mytemplate folder.

Rename template1.html to  mytemplate.html.  Leave the name style.css as is.

Now make the updates to mytemplate.html and style.css and upload the mytemplate folder (and the files under it) to /wp-content/plugins/DAP-WP-LiveLinks/includes/login/templates/ folder.

Now you can reference this template in the shortcode:

Login Template Not Found

Quick Links

This new version of LiveLinks v1.11.3 is free for all Dappers with current upgrades & support.

And don’t forget to sign-up for Upsells Unleashed (it’s free!) 🙂

Cheers!

Veena Prashanth & Ravi Jayagopal
P.S: Please do leave a comment behind as we are eagerly awaiting your feedback!
P.P.S: We would love it if you clicked “Share” below.


You may also like

Member Engagement Builder is HERE…

How to setup a VIRAL Referral Loop!

Leave a Reply

Your email address will not be published. Required fields are marked

  1. I’ve never dabbled with CSS but the misaligned login fields always used to annoy me because it looked sloppy to clients – this looks fantastic, thank you!

  2. These are very welcome improvements, thank you.

    They resolve a number of issues with regards to styling, responsive forms, as well as login redirection.

    Keep up the good work!

  3. Thanks for investing the time and energy toward aesthetics.

    As advanced as DAP is, it’s surely easy to fill every spare development hour on features, workarounds and integrations… and they’re appreciated… but nice looking, mobile responsive login forms is a very welcome improvement and goes a long way in terms of customer experience.

  4. Thanks David :). We decided to go with 1.11.3 (after I did the video) because there are NO updates to CORE dap in this release. We will release livelinks 1.12 when we release a new version of DAP.

    So yes, please upgrade to DAPLiveLinks version 1.11.3 to use the new login templates.

    Thanks,
    Veena

  5. This is great. I had been hoping that one of the updates soon would address the login form which did not look very good. This is a far bigger improvement than I had hoped for. great job! Kevin

  6. I have been looking for an alternative solution to this for a long time, but it involves quite a work at back-end.

    Thanks for having this as a built-in feature within DAO. Now the fact that the worry of tools becoming incompatible is taken care by DAP team makes me happy 😉

  7. Anyone else having an issue with using the new shortcode within OptimizePress 2?

    Having to go back to the old code for the time being 🙁

  8. Hi Veena

    Thanks for all your hard work on DAP, I’m loving the new page templates and looks for DAP pages. Makes it look much cleaner and like a professional membership.

    @ Mark I have not tried it yet, I’ll let you know once I’ve tested it with OP 2.0.

    Mozie

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}