Animated Login

Animated Login allows you to replace the standard WordPress logo with a custom image or logo, link it to the homepage, and pair it with a fun CSS3 animation. The plugin attempts to center the logo and with a little bit of CSS magic, keeps the image inside of the containing h1 anchor element. Your best bet is to create a graphic with a height of at least 133px. Animated Login will do the rest!

When you install the plugin, you will notice a new menu item under Settings. Navigate to
Settings→Animated Login.

 

 

This is what the main settings page looks like.

 

 

Fist you will need to either upload an new image to the Media Library or choose an existing one. Navigate to Media→Library and choose your image. Copy and paste the FULL url of the image.

copy-image-url-from-media-library

 

 

Navigate back to Settings Animated Login and paste the previously copied image url into the Upload image: meta box. When you click away from the Upload image meta box, the default image will be replace with the one located at the url you specified.

copy-paste-you-image-url

 

 

You can choose to have your new logo link to the homepage instead of wordpress.org.

link-logo-to-homepage

 

 

The problem: when a user navigates to the login page, we need to wait a certain amount of time before the animation begins, this way we can allow the page to load fully and give the user some time to appreciate the fun animation we are going to add.

The answer: A time delay!

set-animation-delay

 

 

Now the fun part! There are over 50 animations to choose from, all of which, are pretty awesome. Use the select box to choose an animation. When you click on one of the animation titles, you will see a preview of the animation along with the amount of time delay you set in the box above. This should be a pretty accurate representation, from start to finish, as if you had navigated to the login page with these same settings. Once you are happy with your adjustments. Click Save.

choose-an-animation

 

 

Last but not least! Don’t forget to rate my plugin!

dont-forget-to-rate-my-plugin

 

 

 

This entry was posted in . Bookmark the permalink.