PbootCMS后台风格美化

使用PbootCMS建站的朋友都知道，PbootCMS后台是layui默认的绿色的，那么如何改成自己喜欢的颜色呢，下面我就把方法分享出来，先看下调整之后的效果吧。
PbootCMS后台风格美化
打开网站路径地址：apps/admin/view/default/css/comm.css，打开comm.css文件，在最底部新增样式：
001/*PbootCMS后台美化样式*/
002/*分页样式*/
003.layui-header {
004    height: 50px;
005    background-color:#1E9FFF !important;
006}
007.layui-body {
008    padding: 10px 15px;
009     
010}
011.layui-layout-admin .layui-body {
012    top: 50px;
013     
014}
015.layui-layout-admin .layui-logo {
016    color: #fff;
017    font-size: 20px;
018    line-height: 50px;
019    height: 50px;
020    overflow:hidden;
021    text-align: left;
022    width: 180px;
023    padding-left: 10px;
024}
025.layui-layout-admin .layui-logo .layui-badge{
026    font-size:10px;
027    padding: 3px;
028    height: 12px;
029    line-height: 12px;
030    top:-3px;
031}
032.layui-layout-admin .layui-logo img {
033    vertical-align: middle;
034    margin-top: -3px;
035}
036.layui-layout-admin .layui-logo a {
037    color: #fff;
038}
039.layui-layout-admin .layui-header .layui-nav .layui-nav-item {
040    height: 50px;
041    line-height: 50px;
042}
043.layui-layout-admin .layui-side {
044    top: 50px;
045}
046.layui-layout-admin .layui-side .layui-nav i {
047    margin-right: 10px;
048}
049.layui-layout-admin .layui-side .layui-nav-child dd {
050    padding-left: 20px;
051}
052.layui-form-label {
053    width: 100px;
054}
055.layui-input-block {
056    margin-left: 130px;
057}
058.layui-layout-left {
059    left: 220px;
060}
061.layui-table .layui-btn {
062    margin: 0.5px 0;
063}
064.layui-table .layui-btn + .layui-btn {
065    margin-left: 0px;
066}
067.layui-form-select dl {
068    z-index: 9999;
069    max-height: 250px;
070}
071.layui-text-red{
072    color:red;
073}
074 
075 
076/*菜单显示按钮*/
077.menu {
078    position: absolute !important;
079    left : 200px;
080    top: 10px;
081    line-height: 30px;
082    text-align: center;
083    z-index: 999;
084}
085.menu li {
086    width: 30px;
087}
088.menu a {
089    color: #ccc;
090}
091.menu .menu-ico {
092    font-size: 20px;
093    cursor: pointer;
094    color:#fff;
095}
096.area-select {
097    position: absolute;
098    left : 250px;
099    top: 10px;
100}
101.area-select select {
102    height: 30px;
103    border: 1px solid #fafafa;
104    padding-left: 5px;
105    border-radius: 2px;
106}
107.area-select .layui-select-title {
108}
109/*桌面快捷图标*/
110.deskbox {
111    height: 90px;
112    border-radius: 5px;
113    color: #666;
114    text-align: center;
115    background: #f2f2f2;
116    margin: 5px;
117}
118.deskbox:hover {
119    background: #e0e0e0;
120}
121.deskbox dd {
122    font-size: 30px;
123    line-height: 50px;
124    color:#1E9FFF;
125}
126.deskbox dt {
127    padding-top:15px;
128    color:#999;
129    font-weight: normal;
130}
131.page {
132    clear: both;
133    margin: 10px 0;
134    text-align: center;
135}
136.page a:hover {
137    color:#1E9FFF;
138}
139.page-status{
140    border-radius: 2px 0 0 2px;
141}
142.page-last{
143    border-radius: 0 2px 2px 0;
144}
145.page-status,.page-index,.page-pre,.page-num,.page-next,.page-last{
146    display: inline-block;
147    *display: inline;
148    *zoom: 1;
149    vertical-align: middle;
150    padding: 0 15px;
151    height: 28px;
152    line-height: 28px;
153    margin: 0 -1px 5px 0;
154    background-color: #fff;
155    color: #333;
156    font-size: 12px;
157    border: 1px solid #e2e2e2;
158}
159.page-num-current{
160    background-color: #1E9FFF;
161    height:30px;
162    line-height: 30px;
163    border-top:none;
164    border-bottom:none;
165    color:#fff;
166}
167a.page-num-current:hover{
168    color:#fff;
169}
170.readonly {
171    background: #fafafa;
172}
173.table-input {
174    padding: 0px 15px!important;
175}
176.table-input input {
177    height: 30px;
178    max-width: 50px;
179    padding: 0px;
180    text-align: center;
181    color: #666;
182}
183.table-two tbody td {
184    text-align: left;
185}
186.table-two tbody th {
187    text-align: right;
188    width: 110px;
189}
190.fa-toggle-on {
191    font-size: 20px;
192    color:#1E9FFF;
193}
194.fa-toggle-off {
195    font-size: 20px;
196    color: #d2d2d2;
197}
198.pic {
199    margin-left: 130px;
200}
201.pic dl {
202    float: left;
203    position: relative;
204}
205.pic dl dd {
206    position: absolute;
207    right: 5px;
208    top: 5px;
209    cursor: pointer;
210    background: #666;
211    color: #fff;
212    padding: 2px;
213}
214.pic img {
215    max-height: 100px;
216    margin: 5px 0;
217    margin-right: 5px;
218}
219.layui-layout-admin .layui-logo {
220        color:#1E9FFF !important;
221}
222.layui-elem-quote {
223    border-left: 5px solid #1E9FFF !important;
224}
225.layui-btn {
226    background-color:#1E9FFF ;
227}
228.layui-btn-danger {
229    background-color: #FF5722 !important;
230}
231.layui-btn-primary {
232 
233    background-color: #fff !important;
234 
235}
236.layui-btn-primary:hover {
237    border-color: #1E9FFF !important;
238}
239.layui-btn-group .layui-btn-primary:hover {
240    color: #1E9FFF !important;
241}
242 
243.layui-laypage a:hover {
244    color: #1E9FFF !important;
245}
246.layui-laypage .layui-laypage-curr .layui-laypage-em {
247    background-color: #1E9FFF !important;
248}
249.layui-laypage input:focus,
250.layui-laypage select:focus {
251    border-color: #1E9FFF !important;
252}
253.layui-upload-drag[lay-over] {
254    border-color: #1E9FFF !important;
255}
256.layui-nav-tree .layui-nav-bar {
257    background-color: #1E9FFF !important;
258}
259.layui-nav-tree .layui-this>a:hover {
260    background-color: #1E9FFF !important;
261}
262.layui-tab-brief>.layui-tab-title .layui-this {
263    color: #000 !important;
264     
265}
266.layui-tab-brief>.layui-tab-more li.layui-this:after,
267.layui-tab-brief>.layui-tab-title .layui-this:after {
268    border-bottom: 2px solid #1E9FFF !important;
269}
270.layui-slider-input-btn i:hover {
271    color: #1E9FFF !important;
272}
273 
274.layui-form-radio>i:hover,
275.layui-form-radioed>i {
276    color:  #1E9FFF !important;
277}
278.layui-nav-tree .layui-nav-child dd.layui-this,
279.layui-nav-tree .layui-nav-child dd.layui-this a,
280.layui-nav-tree .layui-this,
281.layui-nav-tree .layui-this>a,
282.layui-nav-tree .layui-this>a:hover {
283    background-color: #1E9FFF !important;
284}
285.layui-form-select dl dd.layui-this {
286    background-color: #1E9FFF !important;
287     
288}
289.layui-nav .layui-this:after,
290.layui-nav-bar,
291.layui-nav-tree .layui-nav-itemed:after {
292 
293    background-color:  #7FD8FF !important;
294 
295}
296.layui-icon-ok-circle{
297    color: ##1E9FFF
298}
299.layui-nav .layui-nav-child dd.layui-this a,
300.layui-nav-child dd.layui-this {
301    background-color: #1E9FFF !important;
302    }
303@media only screen and (min-width: 450px) {
304.layui-form-item .layui-input-inline {
305    width: 260px;
306}
307}
308 
309@media only screen and (max-width: 750px) {
310.layui-body {
311    left: 0px !important;
312}
313.layui-layout-admin .layui-logo {
314    width: 180px;
315    text-align: left;
316    padding-left: 5px;
317    color:#1E9FFF !important;
318}
319.menu {
320    left: 185px;
321}
322.area-select {
323    right: 5px;
324    left: auto;
325}
326.layui-layout-admin .layui-footer {
327    left: 0px !important;
328}
329.layui-layout-admin .layui-side {
330    display: none;
331}
332.layui-body {
333    overflow-x: auto;
334}
335.hidden-xs {
336    display: none;
337}
338.layui-form-label {
339    width: 80px;
340}
341.pic {
342    margin-left: 110px;
343}
344.layui-input-block {
345    margin-left: 110px;
346}
347}
348 
349@media only screen and (max-width: 450px) {
350.layui-form-item.nospace .layui-input-inline {
351    margin: 0 0 10px 0px;
352}
353}
354 
355.layui-input:hover,.layui-textarea:hover{
356    border-color:#1E9FFF!important;
357     
358    }
359.layui-input:focus,.layui-textarea:focus{
360    border-color:#1E9FFF!important;
361    box-shadow:0 0 4px #1E9FFF !important
362    }
363 
364/*PbootCMS后台美化样式*/
商业模板（特惠）

您现在的位置：麦站网 > PBoot教程 > 使用教程 >

热门标签

PbootCMS后台风格美化

相关阅读

发表评论

评论列表（0条）

商业模板（特惠）

您现在的位置： 麦站网 > PBoot教程 > 使用教程 >

热门标签

PbootCMS后台风格美化

相关阅读

发表评论

评论列表（0条）

您现在的位置：麦站网 > PBoot教程 > 使用教程 >
