设为首页收藏本站
开启辅助访问 切换到宽版
快捷导航 发布信息
搜索
自丢网»社区论坛 › 建站程序/IT教程 › 修罗xiuno教程 › 用大白自定义PRO，制作风格模板教程【修罗教程】 ...

用大白自定义PRO，制作风格模板教程【修罗教程】

[复制链接]
查看3061 | 回复1 | 2019-2-2 16:05 | 显示全部楼层 |阅读模式
这里我们来学习一下，用大白自定义PRO，制作风格模板教程【修罗教程】

实际上最简单的风格模板插件仅仅是通过一个新的css样式覆盖原来的css样式，达到修改外观的目的。
其中大白开发的《小镇风格》和《简约风格》主题模板就是以单文件的方式对原本样式做了覆盖，以达到修改美化外观的目的。
那么现在，我不需要安装这两个插件，我通过使用《大白自定义PRO》也可以修改风格，原理就是在页头添加css样式代码
如图：


用大白自定义PRO，制作风格模板教程【修罗教程】

用大白自定义PRO，制作风格模板教程【修罗教程】

那么，这样的话，是不是就可以少安装一些风格插件了呢，而且自己修改部分代码也方便多了。
大白自定义可以这样玩，但是上面的做法自丢网并不推荐，新手学习练手可以玩玩。

附录：
《小镇风格》代码

  1. <style>
  2. /* town theme */
  3. :root {
  4.         --dark: #4f2b15;
  5.         --town: #e0c287;
  6.         --town-100: #ffeebb;
  7.         --town-200: #f5dc9f;
  8.         --town-300: #e0c287;
  9.         --town-400: #c7a96d;
  10.         --town-500: #8c6235;
  11.         --town-600: #69442b;
  12.         --town-700: #4f2b15;
  13.         --grass: #82b03d;
  14.         --grass-100: #baef5d;
  15.         --grass-200: #9ecf51;
  16.         --grass-300: #82b03d;
  17.         --grass-400: #689232;
  18.         --grass-500: #467022;
  19.         --grass-600: #3d5e08;
  20.         --brick-300: #fbbc6e;
  21.         --brick-400: #9c5319;
  22.         --gray-200: var(--town-300);
  23. }
  24. a {
  25.         color: var(--dark);
  26. }
  27. body {
  28.         background: var(--town-300);
  29.         font-family: "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  30. }
  31. .btn-secondary {
  32.         border-color: var(--town-300);
  33.         background-color: var(--town-400);
  34.         color: var(--town-500);
  35. }
  36. .btn-secondary:hover {
  37.         border-color: var(--town-300);
  38.         background-color: var(--town-500);
  39. }
  40. /* header navbar */
  41. .navbar {
  42.         padding: 0;
  43.         border-bottom: 4px solid var(--grass-400);
  44.         -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
  45.         box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
  46. }
  47. .navbar > .container {
  48.         padding-right: 0;
  49.         max-width: none;
  50.         border-bottom: 1px solid var(--grass-300);
  51. }
  52. .navbar.bg-dark {
  53.         background-color: var(--town-600)!important;
  54. }
  55. .navbar-dark .navbar-toggler {
  56.         padding: 1rem;
  57.         border-color: transparent!important;
  58.         color: var(--town-100);
  59. }
  60. .navbar-dark .navbar-toggler:before {
  61.         display: inline-block;
  62.         content: "\f0c9";
  63.         font: normal normal normal 14px/1 FontAwesome;
  64.         font-size: inherit;
  65.         text-rendering: auto;
  66.         -webkit-font-smoothing: antialiased;
  67.         -moz-osx-font-smoothing: grayscale;
  68. }
  69. .navbar-dark .navbar-toggler-icon {
  70.         display: none;
  71. }
  72. .navbar-dark .navbar-brand {
  73.         padding: 0;
  74.         color: var(--town-100);
  75. }
  76. .navbar-dark .navbar-nav .nav-item {
  77.         border-right: 1px solid var(--town-700);
  78.         border-left: 1px solid var(--town-500);
  79. }
  80. .navbar-dark .navbar-nav .nav-link {
  81.         padding: 0.75rem 1rem;
  82.         color: var(--town-100);
  83. }
  84. .navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {
  85.         color: var(--town-100);
  86. }
  87. .navbar-dark .navbar-nav .nav-item.active > .nav-link {
  88.         border-right: 1px solid var(--town-600);
  89.         background-color: var(--town-600);
  90. }
  91. .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  92.         background: var(--town-500);
  93.         color: var(--town-100);
  94. }
  95. .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
  96.         color: var(--town-100);
  97. }
  98. /* aside button */
  99. .aside > a.btn {
  100.         padding: 0.75rem 1rem;
  101.         border-width: 0;
  102.         border-radius: 0;
  103.         background: var(--grass-400)!important;
  104.         box-shadow: 3px 3px 2px var(--town-400);
  105.         color: var(--town-100)!important;
  106. }
  107. .aside .form-group {
  108.         box-shadow: 3px 3px 2px var(--town-400);
  109. }
  110. .aside #search_form .btn-primary, .aside #search_form .form-control {
  111.         border-color: var(--town-400);
  112.         border-radius: 0;
  113.         background-color: var(--town-100);
  114.         color: var(--town-500);
  115. }
  116. .aside #search_form .form-control:focus {
  117.         box-shadow: 0 0 0 0.2rem var(--town-400);
  118. }
  119. .aside .text-muted {
  120.         color: var(--town-500)!important;
  121. }
  122. /* form */
  123. #form .form-control,#form .btn-primary {
  124.         border-color: var(--town-400);
  125.         border-radius: 0;
  126.         background-color: var(--town-100);
  127.         color: var(--town-500);
  128. }
  129. #form .form-group .custom-select {
  130.         border-color: var(--town-400);
  131.         background-color: var(--town-200);
  132. }
  133. .modal-content {
  134.         border-color: var(--town-500);
  135.         border-radius: 0;
  136.         background-color: var(--town-100);
  137.         box-shadow: 3px 3px 0 var(--town-600);
  138. }
  139. .modal-header,.modal-footer {
  140.         border-color: var(--town-500);
  141. }
  142. /* card */
  143. .card {
  144.         border-color: var(--town-400);
  145.         border-width: 1px;
  146.         border-radius: 0;
  147.         background: var(--town-100);
  148.         box-shadow: 3px 3px 2px var(--town-400);
  149.         color: var(--town-500);
  150. }
  151. .card > .card-header {
  152.         border-color: var(--town-400);
  153.         border-radius: 0;
  154.         background-color: var(--town-200);
  155.         background-image: none;
  156.         color: var(--town-500);
  157.         border-bottom-width: 1px;
  158. }
  159. .card > .card-body {
  160.         border-top-width: 0;
  161. }
  162. .card-header-tabs {
  163.         margin-top: -0.25rem;
  164. }
  165. .card-header-dropdown span {
  166.         color: var(--grass-100)!important;
  167. }
  168. .card-header-tabs > .nav-item > .nav-link {
  169.         color: var(--town-500);
  170. }
  171. .card-header-tabs > .nav-item > .nav-link:hover:not(.active) {
  172.         border-color: var(--town-400);
  173.         background: var(--town-200);
  174.         color: var(--town-500);
  175. }
  176. .card-header-tabs > .nav-item > .nav-link.active {
  177.         border-color: var(--town-400);
  178.         background: var(--town-100);
  179.         background-image: none;
  180.         color: var(--town-500);
  181.         border-bottom-color: var(--town-100);
  182. }
  183. .card-header-dropdown .dropdown .dropdown-toggle {
  184.         color: var(--town-500);
  185. }
  186. .card-header-dropdown .dropdown .dropdown-menu {
  187.         border: 1px solid var(--town-400)!important;
  188.         border-radius: 0;
  189.         background-color: var(--town-100)!important;
  190. }
  191. .card-header-dropdown .dropdown-menu .dropdown-item {
  192.         color: var(--town-500)!important;
  193. }
  194. .card-header-dropdown .dropdown-item:hover, .card-header-dropdown .dropdown-item:focus {
  195.         background-color: var(--town-200)!important;
  196.         color: var(--town-500)!important;
  197. }
  198. .card-header-dropdown .text-primary {
  199.         color: var(--town-500)!important;
  200. }
  201. .card-header-dropdown span.text-muted {
  202.         color: var(--town-500)!important;
  203. }
  204. .card.card-threadlist > .card-body {
  205.         padding: 0;
  206. }
  207. .threadlist li {
  208.         padding: 0.7rem;
  209. }
  210. .threadlist > .thread {
  211.         padding: 0.7rem;
  212. }
  213. .threadlist > .thread:hover {
  214.         background-color: var(--town-200);
  215. }
  216. .threadlist .d-flex span {
  217.         color: var(--town-500)!important;
  218. }
  219. .threadlist .avatar-3 {
  220.         padding: 1px;
  221.         border: 1px solid var(--town-400);
  222. }
  223. .threadlist .ml-2.d-none {
  224.         display: inline-flex!important;
  225. }
  226. .threadlist .d-flex.justify-content-between.small {
  227.         font-size: 13px;
  228. }
  229. .thread, .post {
  230.         border-color: var(--town-200);
  231. }
  232. .card.card-postlist {
  233.         border-top-right-radius: 0!important;
  234.         border-top-left-radius: 0!important;
  235.         font-size: 14px;
  236. }
  237. .postlist-sort svg {
  238.         fill: var(--town-500)!important;
  239. }
  240. .card.card-postlist a,.card.card-postlist span, .card.card-postlist .text-muted {
  241.         color: var(--town-500)!important;
  242. }
  243. .card.card-postlist .form-control {
  244.         border-color: var(--town-400)!important;
  245.         border-radius: 0;
  246.         background-color: var(--town-200)!important;
  247. }
  248. .card.card-postlist .form-control:focus {
  249.         box-shadow: 0 0 0 0.2rem rgba(224, 194, 135, 0.83);
  250. }
  251. .postlist .btn.btn-secondary {
  252.         border-color: var(--grass-400);
  253.         border-radius: 0;
  254.         background-color: var(--grass-300);
  255.         color: var(--town-100);
  256. }
  257. .card.card-thread {
  258.         border-bottom-right-radius: 0!important;
  259.         border-bottom-left-radius: 0!important;
  260.         color: var(--town-500)!important;
  261. }
  262. .card.card-thread .card-body .media {
  263.         margin: -1.25rem;
  264.         padding: 1.25rem;
  265.         border-bottom: 1px solid var(--town-300);
  266.         background: var(--town-200);
  267. }
  268. .card.card-thread .card-body .media .avatar-3 {
  269.         padding: 0.25rem;
  270.         border: 2px solid var(--town-300);
  271.         border-radius: 0;
  272.         background-color: var(--white);
  273. }
  274. .card.card-thread hr {
  275.         border-color: transparent;
  276. }
  277. .card.card-thread span, .card.card-thread a {
  278.         color: var(--town-500)!important;
  279. }
  280. .postlist .text-muted,.postlist .text-grey {
  281.         color: var(--town-500)!important;
  282. }
  283. /* .breadcrumb */
  284. .breadcrumb {
  285.         border-color: var(--town-400);
  286.         border-radius: 0;
  287.         background-color: var(--town-200)!important;
  288.         /*box-shadow: 3px 3px 2px var(--town-400);*/
  289.         color: var(--town-500);
  290.         font-size: 14px;
  291. /*        border-top-color: var(--town-100);
  292.         border-left-color: var(--town-100);*/
  293. }
  294. .breadcrumb:hover {
  295.         background-color: var(--town-200)!important;
  296. }
  297. .breadcrumb-item + .breadcrumb-item::before, .breadcrumb a {
  298.         color: var(--town-500);
  299. }
  300. /* nav_tag_list */
  301. .nav_tag_list {
  302.         display: flex;
  303.         flex-direction: column;
  304. }
  305. .nav_tag_list .text-muted {
  306.         color: var(--town-500)!important;
  307. }
  308. /* card list-group*/
  309. .card .list-group-item {
  310.         background-color: var(--town-200);
  311.         border-color: var(--town-300);
  312. }
  313. .card .list-group-item:hover {
  314.         background-color: var(--town-100);
  315. }
  316. .card .list-group-item.active {
  317.         background-color: var(--town-400);
  318.         border-color: var(--town-400);
  319.         color: var(--town-600);
  320. }
  321. .card > .list-group:last-child .list-group-item:last-child {
  322.         border-radius: 0;
  323. }
  324. /* noticelist */
  325. #my_main .noticelist {
  326.         color: var(--town-500)!important;
  327. }
  328. #my_main .noticelist > .notice a,.noticelist > .notice span, .noticelist > .notice .comment-info {
  329.         color: var(--town-400)!important;
  330. }
  331. #my_main .noticelist > .notice:not(:last-child) {
  332.         border-color: var(--town-300);
  333. }
  334. #my_main .text-muted {
  335.         color: var(--town-500)!important;
  336. }
  337. #my_main .btn-light {
  338.         border-color: var(--town-400);
  339.         background-color: var(--town-300);
  340.         color: var(--town-400)!important;
  341. }
  342. #my_main .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
  343.         background-color: var(--town-500);
  344. }
  345. .input-group-prepend .input-group-text {
  346.         border: 1px solid var(--town-400);
  347.         border-radius: 0;
  348.         background-color: var(--town-300);
  349. }
  350. #my_main .custom-file-input {
  351.         cursor: pointer;
  352. }
  353. #my_main .form-group.custom-file .custom-file-label {
  354.         border-color: var(--town-400);
  355.         border-radius: 0;
  356.         background-color: var(--town-100);
  357. }
  358. #my_main .form-group.custom-file .custom-file-label::after {
  359.         border-left: 1px solid var(--town-400);
  360.         background-color: var(--town-200);
  361.         color: var(--town-400);
  362.         content: "Ñ¡Ôñ";
  363. }
  364. #my_main .progress {
  365.         background-color: var(--town-200);
  366. }
  367. /* edui-container */
  368. .edui-container {
  369.         border-color: var(--town-400)!important;
  370. }
  371. .edui-container .edui-toolbar {
  372.         border-color: var(--town-400)!important;
  373.         background-color: var(--town-100)!important;
  374. }
  375. /* fieldset */
  376. .fieldset {
  377.         border-color: var(--town-200)!important;
  378.         background-color: var(--town-300)!important;
  379.         font-size: 12px;
  380. }
  381. /*btn btn-secondary btn-block xn-back*/
  382. .btn.xn-back {
  383.         border-color: var(--town-200);
  384.         border-radius: 0;
  385.         background-color: var(--town-200)!important;
  386.         box-shadow: 3px 3px 2px var(--town-400);
  387.         color: var(--town-500);
  388. }
  389. input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
  390.         color: var(--town-300);
  391. }
  392. .pagination .page-link {
  393.         border-color: var(--town-300);
  394.         background-color: var(--town-200);
  395.         color: var(--town-500);
  396. }
  397. .pagination .page-link:hover {
  398.         /*border-color: var(--town-400);*/
  399.         background-color: var(--town-100);
  400.         color: var(--town-400);
  401. }
  402. .pagination .page-item.active .page-link {
  403.         border-color: transparent;
  404.         background-color: var(--town-400);
  405.         color: var(--town-100);
  406. }
  407. .postlist .blockquote {
  408.         background-color: var(--town-200);
  409.         background-image: none;
  410. }
  411. #footer.bg-dark {
  412.         padding: 1rem 0!important;
  413.         border-top: 3px solid var(--town-400)!important;
  414.         background: var(--town-500)!important;
  415.         color: var(--town-200)!important;
  416.         font-size: 12px;
  417. }
  418. #footer a {
  419.         color: var(--town-300)!important;
  420. }
  421. #nav > ul > li > a.nav-link {
  422.         border-bottom: 0;
  423. }
  424. /* icon */
  425. [class^="icon-top-"]:before {
  426.         content: "\f0aa";
  427. }
  428. @media screen and (min-width: 1408px) {
  429.         html {
  430.                 font-size: 16px;
  431.         }
  432.         #body > .container, #footer > .container {
  433.                 width: 1344px;
  434.                 max-width: 1344px;
  435.         }
  436. }
  437. @media (max-width: 576px) {
  438.         html {
  439.                 font-size: 12px;
  440.         }
  441.         .navbar-dark .navbar-nav .nav-item {
  442.                 border-right: none;
  443.                 border-left: none;
  444.         }
  445.         #nav {
  446.                 padding-top: 0;
  447.                 padding-left: 0;
  448.         }
  449. }
  450. </style>
复制代码
《简约风格》代码
  1. <style>
  2. /* simple theme */
  3. /* 定义全局的颜色变量 */
  4. :root {
  5.     --dark: #000;
  6. }
  7. a {
  8.     color: var(--dark)
  9. }
  10. body {
  11.     font-family: "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  12.     background: #e2e2e2;
  13. }
  14. /* header navbar */
  15. .navbar {
  16.     padding: 0;
  17.     -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
  18.     box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
  19. }
  20. .navbar > .container {
  21.     max-width: none;
  22.     padding-right: 0;
  23. }
  24. .navbar.bg-dark {
  25.     background-color: var(--white)!important;
  26. }
  27. .navbar-dark .navbar-toggler {
  28.     border-color: transparent!important;
  29.     color: var(--dark);
  30.     padding: 1rem
  31. }
  32. .navbar-dark .navbar-toggler:before {
  33.     display: inline-block;
  34.     font: normal normal normal 14px/1 FontAwesome;
  35.     font-size: inherit;
  36.     text-rendering: auto;
  37.     -webkit-font-smoothing: antialiased;
  38.     -moz-osx-font-smoothing: grayscale;
  39.     content: "\f0c9";
  40. }
  41. .navbar-dark .navbar-toggler-icon {
  42.     display: none;
  43. }
  44. .navbar-dark .navbar-brand {
  45.     color: var(--dark);
  46.     padding: 0;
  47. }
  48. .navbar-dark .navbar-nav .nav-link {
  49.     color: var(--dark);
  50.     padding: 0.87rem 1rem;
  51. }
  52. .navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {
  53.     color: var(--dark);
  54. }
  55. .navbar-dark .navbar-nav .nav-item.active > .nav-link {
  56.     background-color: var(--gray-200);
  57. }
  58. .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  59.     color: var(--dark);
  60.     background: var(--gray-100)
  61. }
  62. .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
  63.     color: var(--dark);
  64. }
  65. /* aside button */
  66. .aside > a.btn {
  67.     padding: 0.75rem 1rem;
  68.     border-width: 0;
  69. }
  70. /* card */
  71. .card {
  72.     background: var(--white);
  73.     box-shadow: none;
  74.     border-color: var(--gray-400)
  75. }
  76. .card > .card-header {
  77.     background-image: none;
  78.     background-color: transparent;
  79.     border-color: var(--gray-200)
  80. }
  81. .card-header-tabs {
  82.     margin-top: -0.25rem;
  83. }
  84. .card-header-tabs > .nav-item > .nav-link {
  85.     border-width: 0 0 2px 0;
  86. }
  87. .card-header-tabs > .nav-item > .nav-link:hover:not(.active) {
  88.     border-width: 0 0 2px 0;
  89. }
  90. .card-header-tabs > .nav-item > .nav-link.active {
  91.     background-image: none;
  92.     background: var(--white);
  93.     border-color: var(--dark);
  94.     border-width: 0 0 2px 0;
  95. }
  96. .card.card-threadlist > .card-body {
  97.     padding: 0.25rem 1rem;
  98. }
  99. .card.card-threadlist > .card-body > .threadlist .ml-2.d-none {
  100.     display: inline-flex!important;
  101. }
  102. .card.card-threadlist > .card-body > .threadlist .d-flex.justify-content-between.small {
  103.     font-size: 13px;
  104. }
  105. .card.card-postlist {
  106.     border-top-width: 0;
  107.     border-top-left-radius: 0!important;
  108.     border-top-right-radius: 0!important;
  109.     font-size: 14px;
  110. }
  111. .card.card-thread {
  112.     margin-bottom: 0;
  113.     border-bottom-left-radius: 0!important;
  114.     border-bottom-right-radius: 0!important;
  115. }
  116. .card.card-thread hr {
  117.     border-color: transparent;
  118. }
  119. /* .breadcrumb */
  120. .breadcrumb {
  121.     background-color: var(--white)!important;
  122.     font-size: 14px;
  123. }
  124. /* nav_tag_list */
  125. .nav_tag_list {
  126.     display: flex;
  127.     flex-direction: column;
  128. }
  129. /* icon */
  130. [class^="icon-top-"]:before {
  131.     content: "\f0aa";
  132. }
  133. @media screen and (min-width: 1408px) {
  134.     html {
  135.         font-size: 16px;
  136.     }
  137.     #body > .container, #footer > .container {
  138.         max-width: 1344px;
  139.         width: 1344px;
  140.     }
  141. }
  142. @media (max-width: 576px) {
  143.     html {
  144.         font-size: 12px;
  145.     }
  146. }
  147. </style>
复制代码
在此感谢大白分享。
xiuno模板, 修罗风格, xiuno模板开发

相关帖子
回复

举报

xiangwei520 | 2019-8-19 23:27 | 显示全部楼层
学习了，感谢自丢教程网
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

乐乐

UID
3
贡献
0
丢币
0
主题
45
回帖
368
注册时间
2018-9-26
最后登录
2019-9-17
回复楼主 返回列表