WordPress Custom Login Page

WordPress Custom Login Page allows you to customize your login page beyond any plugin previously available. Your background image, logo image, text colors, link colors, button background image, and form div background are all customizable. You can also remove the “<– back to blog” link via css, and edit anything else in your login.css file via the built in CSS editor.

Screenshoot from prigadshop:

1How to sets and upload do this:

1. Download here

2. Upload to wp-content/plugins

3. Activate it via the Plugins page in your WordPress Admin section

4. Navigate to Settings>Custom Login Page to edit the settings


Advanced Help
Login Page Background (1500px by 400px maximum)
1. Create an image for the background, a maximum size of 1500px by 400px.
2. Upload to WordPress, using media uploader in WordPress Admin.
3. Copy the full url to the image and paste under Background Image URL option.
4. Enter position of image in the Background Image Position option.

Form Div Background Color
1. HEX Value (#FFFFFF). Use “none” if using a semi-transparent background image.

Other Options
For Label Font Color, Text Box Border Color, Login Button Font Color, Login Button Font Mouseover Color, Login Button Border Color, Login Button Border Mouseover Color, “Lost your password?” Link Font Color, and “Lost your password?” Link Mouseover Font Color.
1. HEX Values (#FFFFFF)

Login Button Background Image URL
1. Create any image width the size 68px by 22px. Non-repeating.
2. Upload via WordPress Media Uploader.
3. Insert link in plugin options page.
4. The button looks best if you pick a Login Button Border Color closest to your background color.

List of Background Position Values
If you only specify one keyword, the second value will be “center”. Default value is: 0% 0%.
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y% (The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.)

xpos ypos (The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions)

inherit (Specifies that the setting of the background-position property should be inherited from the parent element.)

Background Repeat Values
repeat (Will repeat both horizontally and vertically.)
repeat-x (Will repeat only horizontally.)
repeat-y (Will repeat only vertically.)
no-repeat (Will not repeat at all.)
inherit (Will be inherited from the parent element.)

Custom CSS
1. You can enter css codes here, to overwrite default login page CSS.
2. For example, hiding the back to Example.com link, simply enter the following in the Custom CSS option.
#backtoblog { display:none; }
3. Do not include the opening and closing style CSS/HTML tags.

The result:


Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>