title
菜鸟吧 首页 站长学堂 pbootcms教程 查看内容

PbootCMS后台风格美化

2024-12-17 19:17| 发布者: admin| 查看: 1| 评论: 0|原作者: 菜鸟哥

摘要: 使用PbootCMS建站的朋友都知道,PbootCMS后台是layui默认的绿色的,那么如何改成自己喜欢的颜色呢,下面我就把方法分享出来,先看下调整之后的效果吧。打开网站路径地址:apps/admin…… ...

使用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后台美化样式*/



路过

雷人

握手

鲜花

鸡蛋

最新评论

Archiver 手机版 小黑屋 网站地图

Copyright © 2015-2026 菜鸟吧论坛 |找资源研究学习当然上菜鸟吧论坛

警告:本站所有资源收集世界互联网,请下载后24小时之内删除,否則後果自負!
WARNING: ‌All resources from the web. Delete within 24 hours or consequences at your own risk!
郑重声明:站内所有资源均来自互联网或会员投稿发布, 如果侵犯了权益请联系删除,E-mail:cainiaovip8@qq.com 商用请购买正版。

返回顶部