WordPress.org

Ready to get started?Download WordPress

Forums

WP Custom Login
[resolved] Please can you show an example of what a wp-custom-login.css should look like? (2 posts)

  1. caradal
    Member
    Posted 1 year ago #

    Please can you show an example of what a wp-custom-login.css should look like?
    (that is, what content should be in wp-custom-login.css ?)

    The installations instructions says - "5. Create a wp-custom-login.css in your theme directory"

    The current theme that I am using is "Twenty Ten" version 1.4 by the WordPress team.

    ********

    My apologies if this is a stupid question. I am quite new to WordPress, php and CSS.

    I am not experienced in looking "under the hood" within WordPress.

    http://wordpress.org/extend/plugins/wp-custom-login/

  2. Ninos
    Member
    Plugin Author

    Posted 1 year ago #

    sure

    .menu {
    	padding-top: 0 !important;
    }
    .menu ul {
    	margin: 0 !important;
    }
    #main {
    	padding: 0 !important;
    }
    #headerbox form {
    	background: none;
    	padding: 0;
    	border: 0;
    	box-shadow: none;
    	-moz-box-shadow: none;
    	-webkit-box-shadow: none;
    }
    #login {
    	margin: 0 auto;
    	width: 1000px !important;
    	padding: 30px 0 !important;
    }
    #login h1 {
    	display: none;
    }
    #login .message {
    	margin: 0 !important;
    }
    #login_error,
    .login .message {
    	margin: 0 !important;
    	padding: 6px !important;
    }
    #login h1 a {
        padding: 0;
    	color: inherit;
    	text-align: left;
    }
    #login form {
    	padding: 6px 0;
    }
    #loginform label, #registerform label, #lostpasswordform label {
        display: block;
        font-size: 16px;
        font-weight: 600;
        line-height: 23px;
        padding: 7px 0 4px;
    }
    #login form input {
        font-size: 16px;
        line-height: 23px;
        padding: 5px;
        width: 260px;
        background: none repeat scroll 0 0 #FFFFFF !important;
        border: 1px solid #999999 !important;
        color: #333333;
    	border-radius: 0;
    	-moz-border-radius: 0;
    	-webkit-border-radius: 0;
    	box-shadow: 0 !important;
    	-moz-box-shadow: 0 !important;
    	-webkit-box-shadow: 0 !important;
    }
    #login form input:hover {
    	box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1) inset;
    	-moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1) inset;
    	-webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1) inset;
    }
    #login form #user_email {
    	width: 248px;
    	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
    	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
    	-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
    }
    #login form #user_email:hover {
    	box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1) inset;
    	-moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1) inset;
    	-webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1) inset;
    }
    #login form #wp-submit {
    	width: 248px;
        text-shadow: none;
    }
    #login form #wp-submit:hover {
    	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
    	-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
    	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
    }
    #login form .forgetmenot label {
        font-size: 13px;
        line-height: 18px;
    }
    #login form .forgetmenot input {
    	width: auto;
    }

    Just remove not using sheets and edit or add using themes..

    The wp-custom-login.css will be included in the login/register page to solve styling issues. So you have to style with this stylesheet your own login page customized to your theme..

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic