Last time I have contributed to taking the designs of the Simple Wordpress Login
https://utopian.io/utopian-io/@vallesleoruther/form-design-for-simple-wordpress-login

And coding it to life here
https://utopian.io/utopian-io/@vallesleoruther/simple-wordpress-login-coding-the-form-designs-to-life-animations-and-styling

Visit this link for the full experience: https://renegade47.github.io/simple-wordpress-login/

The Problem

I then realized a big problem on the form, how can it be used and fully customized. So imagine this, the users WordPress Website theme is color pink, and then would want to install the plugin. The user then successfully adds the login form to his/her website. The problem? there is only one style for the login form, blue would not match with pink, or the user does not like the color combination, or simply hates the color blue. Without knowledge on styling and CSS the user then deletes the plugin instead of using it.

The Solution

So as a solution to the problem I will be making some themes for the forms which can help solve the problem. Adding color options, and default themes to the plugin will certainly help for the effectiveness, and usability of the plugin.

Implementing the Solution

Naming the Themes and making great color combinations

https://color.adobe.com is a great tool in making color combinations, so I went into the site and produced this color combinations. Inspired by the WordPress Admin Themes.

Blue: Color Palette: #0073aa, #23282d, and #fff 
Light: Color Palette: #f5f5f5, #888888, and #e5e5e5
Coffee: Color Palette: #c7a589, #59524c, #46403c
Ectoplasm: Color Palette: #a3b745, #523f6d, #413256
Midnight: Color Palette: #e14d43, #363b3f, #fff
Ocean: Color Palette: #e14d43, #363b3f, #fff
Sunrise: Color Palette: #dd823b, #cf4944, #be3631

From the original form design, I then implemented the Color Combinations to themify the forms. Using Photoshop.

Some Screenshots in themifying the forms

The themes

Well that is it it partially solves the problem, by adding themes that are compatible to most sites with different colors/themes.

Links

Google Drive - PNG, PSD
Github Commit

---

Posted on Utopian.io - Rewarding Open Source Contributors

---