PbootCMS后台风格美化

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

打开网站路径地址：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后台美化样式*/