Php 自定义Wordpress登录到中心CSS
我有一个简单的CSS问题,将内容对齐到中心,基本上我在左侧有一个徽标,在右侧有登录输入。这是我的function.php代码Php 自定义Wordpress登录到中心CSS,php,jquery,html,css,wordpress,Php,Jquery,Html,Css,Wordpress,我有一个简单的CSS问题,将内容对齐到中心,基本上我在左侧有一个徽标,在右侧有登录输入。这是我的function.php代码 function custom_login_css() { echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login-styles.css" >'; } add_action('login_head', 'cust
function custom_login_css()
{
echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login-styles.css" >';
}
add_action('login_head', 'custom_login_css');
我还将包括一张我心目中的图像。尝试将输入字段和徽标设置为显示块,然后应用所需的CSS将其居中。相反,将这段庞大的代码制作成一个小提琴,这将帮助我们了解真正发生的事情。为什么不使用呢?这是在wordpress中,我相信小提琴在那里不起作用。但那不是我的问题
body.login {
background: #525763;
background-repeat: no-repeat;
background-size: cover;
padding: auto !important;
margin: 0px auto 0px auto !important;
overflow: hidden;
}
#login {
border: 1px solid #000 !important;
box-shadow: none;
background-image: url('../login/loginbg.png');
background-size: 350px 500px;
background-repeat: no-repeat;
background-position: center;
padding-left: 10px !important;
padding-right: 10px !important;
margin: 0px auto 0px auto !important;
height: 100%;
overflow: hidden;
}
.login h1 a {
background-image: none;
/*background-size: 212px 219px;
width: 212px;
height: 219px;*/
}
.login form {
margin-left: auto;
margin-right: auto;
background: transparent;
border: 0;
box-shadow: none;
}
form#loginform {
top: 10;
text-align: center !important;
}
#user_login, #user_pass {
background: #606674;
}
input#wp-submit {
margin-top: 20px;
width: 300px !important;
background: yellow;
color: #606674;
border: 0px;
}
#login:before {
content: " ";
display: block;
background-image: url('../login/logo1.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
height: 200px;
width: 207px;
position: absolute;
left: 250px;
top: 100px
}
#login:after {
content: "Here at The Design Cereal, we aspire to share real and valuable knowledge to any individual-both new and experienced-who's looking to grow creatively in tech world especially in the advent of creative tools such as Adobe Photoshop and Illustrator. Our easy-to-understand method of writing articles hopes to simplify daunting technical requirements a designer needs to propel himself forward in his creative venture.";
display: block;
color: #fff;
width: 300px;
position: absolute;
left: 200px;
top: 340px
}