您好,欢迎来到菜鸟吧源码网-本站资源仅供学习与参考,禁止用于商业或违法行为!
  • 首 页
  • 下载APP
  • 菜鸟吧APP1.0于2024.9.15 正式上线,请首页右上角进入下载,本站资源均来源于互联网及会员投稿发布,所有资源仅供学习参考研究使用,请勿商用或其它非法用途,商用请购买正版,否则产生一切后果由用户自行承担!谢谢!

     

    当前位置:主页 > 站长学堂 > pbootcms >
    PbootCMS后台风格美化
    时间:2024-12-17 19:17 作者:菜鸟哥 浏览:收藏 挑错 打印

    使用PbootCMS建站的朋友都知道,PbootCMS后台是layui默认的绿色的,那么如何改成自己喜欢的颜色呢,下面我就把方法分享出来,先看下调整之后的效果吧。

    PbootCMS后台风格美化

    打开网站路径地址:apps/admin/view/default/css/comm.css,打开comm.css文件,在最底部新增样式:

    查看源码

    /*PbootCMS后台美化样式*/

    /*分页样式*/

    .layui-header {

        height: 50px;

        background-color:#1E9FFF !important;

    }

    .layui-body {

        padding: 10px 15px;

         

    }

    .layui-layout-admin .layui-body {

        top: 50px;

         

    }

    .layui-layout-admin .layui-logo {

        color: #fff;

        font-size: 20px;

        line-height: 50px;

        height: 50px;

        overflow:hidden;

        text-align: left;

        width: 180px;

        padding-left: 10px;

    }

    .layui-layout-admin .layui-logo .layui-badge{

        font-size:10px;

        padding: 3px;

        height: 12px;

        line-height: 12px;

        top:-3px;

    }

    .layui-layout-admin .layui-logo img {

        vertical-align: middle;

        margin-top: -3px;

    }

    .layui-layout-admin .layui-logo a {

        color: #fff;

    }

    .layui-layout-admin .layui-header .layui-nav .layui-nav-item {

        height: 50px;

        line-height: 50px;

    }

    .layui-layout-admin .layui-side {

        top: 50px;

    }

    .layui-layout-admin .layui-side .layui-nav i {

        margin-right: 10px;

    }

    .layui-layout-admin .layui-side .layui-nav-child dd {

        padding-left: 20px;

    }

    .layui-form-label {

        width: 100px;

    }

    .layui-input-block {

        margin-left: 130px;

    }

    .layui-layout-left {

        left: 220px;

    }

    .layui-table .layui-btn {

        margin: 0.5px 0;

    }

    .layui-table .layui-btn + .layui-btn {

        margin-left: 0px;

    }

    .layui-form-select dl {

        z-index: 9999;

        max-height: 250px;

    }

    .layui-text-red{

        color:red;

    }

     

     

    /*菜单显示按钮*/

    .menu {

        position: absolute !important;

        left : 200px;

        top: 10px;

        line-height: 30px;

        text-align: center;

        z-index: 999;

    }

    .menu li {

        width: 30px;

    }

    .menu a {

        color: #ccc;

    }

    .menu .menu-ico {

        font-size: 20px;

        cursor: pointer;

        color:#fff;

    }

    .area-select {

        position: absolute;

        left : 250px;

        top: 10px;

    }

    .area-select select {

        height: 30px;

        border: 1px solid #fafafa;

        padding-left: 5px;

        border-radius: 2px;

    }

    .area-select .layui-select-title {

    }

    /*桌面快捷图标*/

    .deskbox {

        height: 90px;

        border-radius: 5px;

        color: #666;

        text-align: center;

        background: #f2f2f2;

        margin: 5px;

    }

    .deskbox:hover {

        background: #e0e0e0;

    }

    .deskbox dd {

        font-size: 30px;

        line-height: 50px;

        color:#1E9FFF;

    }

    .deskbox dt {

        padding-top:15px;

        color:#999;

        font-weight: normal;

    }

    .page {

        clear: both;

        margin: 10px 0;

        text-align: center;

    }

    .page a:hover {

        color:#1E9FFF;

    }

    .page-status{

        border-radius: 2px 0 0 2px;

    }

    .page-last{

        border-radius: 0 2px 2px 0;

    }

    .page-status,.page-index,.page-pre,.page-num,.page-next,.page-last{

        display: inline-block;

        *display: inline;

        *zoom: 1;

        vertical-align: middle;

        padding: 0 15px;

        height: 28px;

        line-height: 28px;

        margin: 0 -1px 5px 0;

        background-color: #fff;

        color: #333;

        font-size: 12px;

        border: 1px solid #e2e2e2;

    }

    .page-num-current{

        background-color: #1E9FFF;

        height:30px;

        line-height: 30px;

        border-top:none;

        border-bottom:none;

        color:#fff;

    }

    a.page-num-current:hover{

        color:#fff;

    }

    .readonly {

        background: #fafafa;

    }

    .table-input {

        padding: 0px 15px!important;

    }

    .table-input input {

        height: 30px;

        max-width: 50px;

        padding: 0px;

        text-align: center;

        color: #666;

    }

    .table-two tbody td {

        text-align: left;

    }

    .table-two tbody th {

        text-align: right;

        width: 110px;

    }

    .fa-toggle-on {

        font-size: 20px;

        color:#1E9FFF;

    }

    .fa-toggle-off {

        font-size: 20px;

        color: #d2d2d2;

    }

    .pic {

        margin-left: 130px;

    }

    .pic dl {

        float: left;

        position: relative;

    }

    .pic dl dd {

        position: absolute;

        right: 5px;

        top: 5px;

        cursor: pointer;

        background: #666;

        color: #fff;

        padding: 2px;

    }

    .pic img {

        max-height: 100px;

        margin: 5px 0;

        margin-right: 5px;

    }

    .layui-layout-admin .layui-logo {

            color:#1E9FFF !important;

    }

    .layui-elem-quote {

        border-left: 5px solid #1E9FFF !important;

    }

    .layui-btn {

        background-color:#1E9FFF ;

    }

    .layui-btn-danger {

        background-color: #FF5722 !important;

    }

    .layui-btn-primary {

     

        background-color: #fff !important;

     

    }

    .layui-btn-primary:hover {

        border-color: #1E9FFF !important;

    }

    .layui-btn-group .layui-btn-primary:hover {

        color: #1E9FFF !important;

    }

     

    .layui-laypage a:hover {

        color: #1E9FFF !important;

    }

    .layui-laypage .layui-laypage-curr .layui-laypage-em {

        background-color: #1E9FFF !important;

    }

    .layui-laypage input:focus,

    .layui-laypage select:focus {

        border-color: #1E9FFF !important;

    }

    .layui-upload-drag[lay-over] {

        border-color: #1E9FFF !important;

    }

    .layui-nav-tree .layui-nav-bar {

        background-color: #1E9FFF !important;

    }

    .layui-nav-tree .layui-this>a:hover {

        background-color: #1E9FFF !important;

    }

    .layui-tab-brief>.layui-tab-title .layui-this {

        color: #000 !important;

         

    }

    .layui-tab-brief>.layui-tab-more li.layui-this:after,

    .layui-tab-brief>.layui-tab-title .layui-this:after {

        border-bottom: 2px solid #1E9FFF !important;

    }

    .layui-slider-input-btn i:hover {

        color: #1E9FFF !important;

    }

     

    .layui-form-radio>i:hover,

    .layui-form-radioed>i {

        color:  #1E9FFF !important;

    }

    .layui-nav-tree .layui-nav-child dd.layui-this,

    .layui-nav-tree .layui-nav-child dd.layui-this a,

    .layui-nav-tree .layui-this,

    .layui-nav-tree .layui-this>a,

    .layui-nav-tree .layui-this>a:hover {

        background-color: #1E9FFF !important;

    }

    .layui-form-select dl dd.layui-this {

        background-color: #1E9FFF !important;

         

    }

    .layui-nav .layui-this:after,

    .layui-nav-bar,

    .layui-nav-tree .layui-nav-itemed:after {

     

        background-color:  #7FD8FF !important;

     

    }

    .layui-icon-ok-circle{

        color: ##1E9FFF

    }

    .layui-nav .layui-nav-child dd.layui-this a,

    .layui-nav-child dd.layui-this {

        background-color: #1E9FFF !important;

        }

    @media only screen and (min-width: 450px) {

    .layui-form-item .layui-input-inline {

        width: 260px;

    }

    }

     

    @media only screen and (max-width: 750px) {

    .layui-body {

        left: 0px !important;

    }

    .layui-layout-admin .layui-logo {

        width: 180px;

        text-align: left;

        padding-left: 5px;

        color:#1E9FFF !important;

    }

    .menu {

        left: 185px;

    }

    .area-select {

        right: 5px;

        left: auto;

    }

    .layui-layout-admin .layui-footer {

        left: 0px !important;

    }

    .layui-layout-admin .layui-side {

        display: none;

    }

    .layui-body {

        overflow-x: auto;

    }

    .hidden-xs {

        display: none;

    }

    .layui-form-label {

        width: 80px;

    }

    .pic {

        margin-left: 110px;

    }

    .layui-input-block {

        margin-left: 110px;

    }

    }

     

    @media only screen and (max-width: 450px) {

    .layui-form-item.nospace .layui-input-inline {

        margin: 0 0 10px 0px;

    }

    }

     

    .layui-input:hover,.layui-textarea:hover{

        border-color:#1E9FFF!important;

         

        }

    .layui-input:focus,.layui-textarea:focus{

        border-color:#1E9FFF!important;

        box-shadow:0 0 4px #1E9FFF !important

        }

     

    /*PbootCMS后台美化样式*/


    郑重声明:
    本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
    我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。
    如有侵犯您的版权,请给我们来信:cainiaovip8@qq.com,我们尽快处理。

    pbootcms标题和摘要描述字数控制标签pbootcms标题和摘要描述字数控制标签
    PbootCMS采集工具推荐及采集注意事项PbootCMS采集工具推荐及采集注意事项
    PbootCMS后台访问地址及默认帐号密码PbootCMS后台访问地址及默认帐号密码