wordpress后台美化

          阅读(52)

    wordpress后台美化

    这段代码是从小幻那xx来的(>-<)

    效果:后台透明、自定义背景(需要改写图片地址)

    原来小幻有个bing每日图片api的,可以实现随机图片效果,现在失效了,改天博主抽空写一个

    说明一下,后台效果在wp更新后会失效哦~要重新部署

    wordpress后台美化

     

    <1.使用方法>

    1.将一下代码加入functions.php中

    不加这段代码,后台样式是不能更改的

    //自定义登录页面function custom_login_logo() { echo '<link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/admstyle.css" type="text/css" />';}add_action('login_head', 'custom_login_logo');

    2.在主题目录下新建一个admstyle.css文件,放上下面的代码,保存即可

    body,textarea{font-size:14px;font-family:"Microsoft Yahei",宋体,PMingLiU,Verdana,Arial,Helvetica,sans-serif !important;}input{font-size:14px;font-family:Tahoma,Arial,sans-serif !important;}body{background:#92C1D1 url("图片地址") fixed center top no-repeat !important;}.login h1 a {background-image:url('images/wordpress-logo.png') !important;background-size:170px 35px;background-position:top center;background-repeat:no-repeat;width:170px;margin:auto;margin-top:35px;height:35px;text-indent:-9999px;overflow:hidden;padding-bottom:15px;display:block;}#login {width:320px;background:rgba(0, 0, 0, 0.2);padding:0 20px 100% 12px;margin:auto;top:0px;right:15%;position:fixed;box-shadow:0px 0px 5px 0px #333;}.login form {margin-left:8px;padding:26px 24px 46px;font-weight:normal;background:rgba(255, 255, 255, 0.2);border:none;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:#000 0 0px 10px -1px;}#loginform {-webkit-border-radius:0px;border-radius:0px;}.login form .input, .login input[type="text"] {color:#555;font-weight:200;font-size:24px;line-height:1;width:100%;padding:5px;margin-top:2px;margin-right:6px;margin-bottom:16px;border:1px solid #FFF;background:#FFF !important;outline:0;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;}.login form .input, .login input[type="text"] {font-size:17px;padding-bottom:11px;padding-top:11px;text-indent:3px; }.login form .input, .login input[type="text"] {border:2px solid #DCE4EC;}input.button-primary{margin-top:8px;border:#000;font-weight:bold;text-shadow:#FFF 0 0px 10px;}.login .button-primary {font-size:14px!important;line-height:22px;padding:8px 117px;border-radius:0px;}input.button-primary { background:rgba(255, 255, 255, 0.5);color:#000; }input.button-primary:hover,input.button-primary:focus { background:rgba(255, 255, 255, 0.8);color:#000; }input.button-primary:active{ background:rgba(255, 255, 255, 0.2);color:#000; }.login form .forgetmenot {font-weight:normal;float:none;margin-top:-10px;}.login #nav, .login #backtoblog {text-shadow:none;float:right;margin:0 30px 0 0px;padding:16px 0px 0 20px;}.login #nav a, .login #backtoblog a{color:#FFF!important;text-decoration:none;}.login #nav a:hover, .login #backtoblog a:hover{color:#444!important;text-decoration:none;}div.error, .login #login_error {display:none;}div.updated, .login .message {background-color: #E0FFE1;border-color: #ACE655;}.wumii-footer{display:none !important;}

    images/wordpress-logo.png 文件是后台图标文件,如果大家觉得默认的wordpress不好看可以替换

     

    3.将一下代码加入admstyle.css,可以实现自适应效果

    //自适应代码body{background: url('图片地址');width:100%;height:100%;background-image:url('图片地址');-moz-background-size: 100% 100%;-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;-moz-border-image: url('图片地址') 0;background-repeat:no-repeat\9;background-image:none\9;}

    LeMe·青柠时光 | http://leme2014.com

    2016-08-26 19:24:36


    喜欢 1



还没有人抢沙发呢~

加载中……