文章

PbootCMS后台风格美化

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

PbootCMS后台风格美化

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

  1. /*PbootCMS后台美化样式*/
  2. /*分页样式*/
  3. .layui-header {
  4.     height: 50px;
  5.     background-color:#1E9FFF !important;
  6. }
  7. .layui-body {
  8.     padding: 10px 15px;
  9.      
  10. }
  11. .layui-layout-admin .layui-body {
  12.     top: 50px;
  13.      
  14. }
  15. .layui-layout-admin .layui-logo {
  16.     color: #fff;
  17.     font-size: 20px;
  18.     line-height: 50px;
  19.     height: 50px;
  20.     overflow:hidden;
  21.     text-align: left;
  22.     width: 180px;
  23.     padding-left: 10px;
  24. }
  25. .layui-layout-admin .layui-logo .layui-badge{
  26.     font-size:10px;
  27.     padding: 3px;
  28.     height: 12px;
  29.     line-height: 12px;
  30.     top:-3px;
  31. }
  32. .layui-layout-admin .layui-logo img {
  33.     vertical-align: middle;
  34.     margin-top: -3px;
  35. }
  36. .layui-layout-admin .layui-logo a {
  37.     color: #fff;
  38. }
  39. .layui-layout-admin .layui-header .layui-nav .layui-nav-item {
  40.     height: 50px;
  41.     line-height: 50px;
  42. }
  43. .layui-layout-admin .layui-side {
  44.     top: 50px;
  45. }
  46. .layui-layout-admin .layui-side .layui-nav i {
  47.     margin-right: 10px;
  48. }
  49. .layui-layout-admin .layui-side .layui-nav-child dd {
  50.     padding-left: 20px;
  51. }
  52. .layui-form-label {
  53.     width: 100px;
  54. }
  55. .layui-input-block {
  56.     margin-left: 130px;
  57. }
  58. .layui-layout-left {
  59.     left: 220px;
  60. }
  61. .layui-table .layui-btn {
  62.     margin: 0.5px 0;
  63. }
  64. .layui-table .layui-btn + .layui-btn {
  65.     margin-left: 0px;
  66. }
  67. .layui-form-select dl {
  68.     z-index: 9999;
  69.     max-height: 250px;
  70. }
  71. .layui-text-red{
  72.     color:red;
  73. }
  74.  
  75.  
  76. /*菜单显示按钮*/
  77. .menu {
  78.     position: absolute !important;
  79.     left : 200px;
  80.     top: 10px;
  81.     line-height: 30px;
  82.     text-align: center;
  83.     z-index: 999;
  84. }
  85. .menu li {
  86.     width: 30px;
  87. }
  88. .menu a {
  89.     color: #ccc;
  90. }
  91. .menu .menu-ico {
  92.     font-size: 20px;
  93.     cursor: pointer;
  94.     color:#fff;
  95. }
  96. .area-select {
  97.     position: absolute;
  98.     left : 250px;
  99.     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. }
  167. a.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后台美化样式*/
Pbootcms
Pbootcms教程解决

Pbootcms伪静态配置教程（IIS7、Apache、Nginx）

2024-12-24 22:10:26

Pbootcms主题模板网络科技

 平面设计作品展示自适应网站模板

2024-12-23 23:57:56

0 条回复 A文章作者 M管理员
欢迎您，新朋友，感谢参与互动！
    暂无讨论，说说你的看法吧

请输入验证码

请输入图片中的验证码
点击发送按钮获取验证码

取消
×
×
￥undefined
请打开手机使用微信扫码支付
「」
×

....支付确认中....

「」
×
支付金额

￥

undefined
×
积分支付
您当前的积分为0

检测到您未绑定微信账户，请先绑定微信

立刻绑定
确定
×

举报

请选择举报类型*

政治有害
不友善
垃圾广告
违法违规
色情低俗
涉嫌侵权
网络暴力
涉未成年
自杀自残
不实信息
引人不适
抄袭
扰乱社区秩序
请输入举报内容 *

举报提交后，我们会以邮件的形式向您反馈处理结果。

×

打开微信扫一扫

扫码并「关注我们的公众号」安全快捷登录

×

下载海报：

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通

个人中心
购物车
优惠劵
今日签到
私信列表
搜索

  • 扫码打开当前页

返回顶部