使用方法
将以下代码粘贴到页面的顶部:
首先你要调整页眉标题和标志的颜色。我把它们的PSD文件放在了本页里,下载并修改每个我标记为“HERE”的图层。或者,你可以通过复制同样的构图来制作新的你想要的。
你做完后,保存并上传到你的页面附件里,粘贴下方的代码到你页面的顶部,复制你图片的链接,替换 "--gradient-header" 一项里 “HERE” 的占位以更换页眉图片,替换 "--logo-image" 一项以更改标志。
之后,选择你钟意的 RGB 色码,然后替换相应位置。
记得加上分号!
:root {
/*Header*/
--gradient-header: url("HERE");
--logo-image: url("HERE");
/* Theme colors*/
—white-monochrome: R, G, B;
/*dark brown page color*/
—gray-monochrome: R, G, B;
/* red */
—dark-gray-monochrome: R, G, B;
/* orange */
—light-gray-monochrome: R, G, B;
/* yellow */
—bright-accent: R, G, B;
/* gold */
/* 你懂的。这个的话,确保你要的透明度的 A 值处于0 - 1之间。*/
}
[[/module]]
示例
可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
该版式修改了 fancyhr 的默认纹理,可以将 "-----" 置入类名 "fancyhr" 的 div 块,像这样:
[[div_ class="fancyhr"]]
-----
[[/div]]
效果如下:
content goes here
[[/div]]
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块1
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧 |
标题字体为:Quintessential / 瑞美加张清平硬笔楷书
代码块和底部按钮字体为:Merienda / 王汉宗中魏碑
编辑器字体为:Raleway.
/* Once Upon A Time WL Theme by IronShears * Built on Dust Jacket by Woedenaz which was built on Black Highlighter by Woedenaz and Croquembouche * Paper texture by Brent Leimenstoll and edited by IronShears, released under CC-BY-SA 2.0: https://www.flickr.com/photos/48046976@N08/8416357035 * Header image, gold foil texture, and logo by IronShears, released under CC-BY-SA 3.0 * Fonts used are */ /*dust jacket import*/ @import url("https://scp-wiki-cn.wdfiles.com/local--code/wanderers%3Adustjacket-theme/1"); /*font-imports*/ @import url('https://fonts.googleapis.com/css2?family=Quintessential&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700'); @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600'); :root:lang(cn){ /* Fonts */ --body-font: 'Quintessential', 'Ramega ZhangQingpingYingbiKaishu', 'YRDZST', cursive; --title-font: 'Quintessential', 'Ramega ZhangQingpingYingbiKaishu', 'YRDZST', cursive; } :root { /*Header*/ --gradient-header: url("https://wanderers-library.wdfiles.com/local--files/component%3Aonce-upon-a-time/OUATGenericHeader"); --logo-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Aonce-upon-a-time/OnceUponATimeLogo"); --paper-texture: url("https://wanderers-library.wdfiles.com/local--files/component%3Aonce-upon-a-time/papertexture.png"); --gold-foil: url("https://wanderers-library.wdfiles.com/local--files/component%3Aonce-upon-a-time/OnceUponATimeFoil.jpg"); --fancy-border: url("https://wanderers-library.wdfiles.com/local--files/component%3Aonce-upon-a-time/OnceUponATime-hr"); --fancy-hr: url("https://wanderers-library.wdfiles.com/local--files/component%3Aonce-upon-a-time/fancyborder"); /* Theme colors*/ --white-monochrome: 44, 33, 25; /*dark brown page color*/ --light-pale-gray-monochrome: 190, 166, 147; /* off-white paper edge color */ --gray-monochrome: 133, 63, 66; /* red */ --dark-gray-monochrome: 177, 104, 71; /* orange */ --light-gray-monochrome: 204, 134, 80; /* yellow */ --bright-accent: 241, 194, 85; /* gold */ --dark-accent: 29, 28, 31; /* black for Editor text/code/smallest nested blockquotes */ --shadow-accent: 32, 1, 0, .4; --alt-accent: var(--bright-accent); --very-light-gray-monochrome: var(--white-monochrome); --medium-accent: var(--bright-accent); --swatch-menubg-color: var(--light-gray-monochrome); --swatch-text-tertiary-color: var(--dark-accent); --swatch-secondary-color: var(--alt-accent); --black-monochrome: var(--bright-accent); } /*Header*/ div#extra-div-1 { background: var(--gradient-header); background-repeat: repeat; background-position: center; background-size: auto 100%; } #login-status #account-options{ background-image: var(--paper-texture); background-repeat: repeat; background-position: center; border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-right: none !important; border-left: none !important; border-bottom: none !important; box-shadow: 3px 3px 3px rgba(var(--shadow-accent)); } #header h1 a::before{ text-shadow: 3px 3px 3px rgba(var(--shadow-accent)); } #header h1 a, #header h1 a::before, #header h1 a::after { color: rgb(var(--bright-accent)); } #header h1 a::after { background-repeat: repeat; background-position: center; background-size: initial; background-image: var(--gold-foil) !important; } #page-title::before, .meta-title::before, #page-title::after, .meta-title::after { background-image: var(--gold-foil) !important; } .fancyborder { border-image: var(--fancy-hr) 600 round; border-image-width: 6; } .fancyhr>hr { background-image: none !important; border-image-source: var(--fancy-border); } hr { background: var(--gold-foil) !important; height: .125rem; border: 0; border-top: 0.0625rem solid transparent; background-color: rgba(var(--bright-accent)); background-size: cover; } #header::before { opacity: 1; } #top-bar{ --dropdown-bg-color: var(--dark-gray-monochrome); } #header div[class*=top-bar]>ul>li ul>li{ background-image: var(--paper-texture) !important; margin-top: 5px !important; border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; box-shadow: 3px 3px 3px rgba(var(--shadow-accent)); } #header div[class*=top-bar]>ul>li ul>li.sfhover{ background-image: var(--paper-texture) !important; background-image: none !important; margin-top: 5px !important; border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; box-shadow: 3px 3px 3px rgba(var(--shadow-accent)); } #top-bar > div.top-bar > ul > li.newpage > ul:first-of-type > li:first-of-type:hover{ background-image: var(--paper-texture) !important;} #top-bar div.top-bar div.newpage_dropdown div.new-page-box input.button{ background-color: rgb(var(--light-gray-monochrome)) !important; } /*blockquotes*/ blockquote{ background-repeat: repeat; background-position: center; border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-left: none !important; border-top: none !important; box-shadow: inset 5px 5px 5px rgba(var(--shadow-accent)) !important; padding:15px; margin-top: 15px; margin-left: 3.44%; margin-right: 3.44%; background-color: rgb(var(--gray-monochrome)) !important; background-image: var(--paper-texture); } blockquote>blockquote { background-repeat: repeat; background-position: center; background-color: rgb(var(--dark-gray-monochrome)) !important; padding:15px; margin: .7vw !important; background-image: var(--paper-texture); } blockquote>blockquote>blockquote { background-repeat: repeat; background-position: center; background-color: rgb(var(--light-gray-monochrome)) !important; padding:15px; background-image: var(--paper-texture); } blockquote>blockquote>blockquote>blockquote { background-repeat: repeat; background-position: center; background-color: rgb(var(--light-pale-gray-monochrome)) !important; color: rgb(var(--dark-accent)) !important; padding:15px; background-image: var(--paper-texture); font-family: 'Merienda', cursive !important; } /* Side Bar*/ .close-menu::after { background-color: rgb(var(--gray-monochrome)) !important; } #side-bar .heading, #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded{ box-shadow: none; border-image: var(--gold-foil) 6 round; border-bottom: solid rgb(var(--black-monochrome)) !important } .side-block div:nth-of-type(1) input.button, .side-block div:nth-of-type(1) input.text{ margin: 5px !important; border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; } #side-bar { box-shadow: 3px 3px 3px rgba(var(--shadow-accent)) !important; background: rgb(var(--white-monochrome)) var(--paper-texture) repeat scroll top center !important; --sidebar-bg-color: var(--gray-monochrome); } .side-block{ padding: 1vw; background-color: rgb(var(--gray-monochrome)) !important; background-image: var(--paper-texture) !important; border-left: none !important; border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-right: none !important; border-bottom: none !important; box-shadow: 3px 3px 3px rgba(var(--shadow-accent)); } #side-bar div.menu-item{ margin-top: 5px !important; margin-bottom: 5px !important; } #side-bar div.menu-item .text, #side-bar div.menu-item a, #side-bar div.menu-item a:visited{ background-color: rgb(var(--dark-gray-monochrome)) !important; background-image: var(--paper-texture) !important; background-repeat: repeat; background-position: center; border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-right: none !important; border-left: none !important; border-bottom: none !important; box-shadow: 3px 3px 3px rgba(var(--shadow-accent)); margin-top: 5px !important; } #side-bar div.menu-item input.text{ border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-left: none !important; border-top: none !important; box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent)); } /*Page*/ .page-source{ font-family: 'Raleway', sans-serif; } /*table*/ table, th, td, tr { background-image: var(--paper-texture); background-color: rgb(var(--white-monochrome)) !important; border-collapse: separate !important; border-image: var(--gold-foil) 6 round !important; border-width: 2px !important; } #page-content div.b-tables table.wiki-content-table td, #page-content table.wiki-content-table td{ background-image: var(--paper-texture) !important; border-image: var(--gold-foil) 6 round !important; } #page-content div.b-tables table.wiki-content-table th, #page-content table.wiki-content-table th{ background-image: var(--paper-texture) !important; border-image: var(--gold-foil) 6 round !important; border-width: 2px !important; } /*tabs*/ yui-navset yui-navset-top{ border: none !important; background-image: var(--paper-texture); background-color: rgb(var(--gray-monochrome)) !important; } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content{ border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-right: none !important; border-bottom: none !important; box-shadow: 5px 5px 5px rgba(var(--shadow-accent)) !important; background-image: var(--paper-texture); background-color: rgb(var(--gray-monochrome)) !important; } .yui-navset .yui-nav li, .yui-navset .yui-nav li a, .yui-navset .yui-nav li a::before{ border-radius: 0; } .yui-navset .yui-nav a:before{ border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-right: none !important; box-shadow: 0px 5px 5px rgba(var(--shadow-accent)); background-image: var(--paper-texture); background-color: rgb(var(--gray-monochrome)) !important; } @-webkit-keyframes tab-active { 0% { margin-top: 0; margin-right: 0; padding-top: 0; } 100% { margin-top: 0em; margin-right: 0; padding-top: 0em; } } @keyframes tab-active { 0% { margin-top: 0; margin-right: 0; padding-top: 0; } 100% { margin-top: 0em; margin-right: 0; padding-top: 0em; } } .code { background-repeat: repeat; background-position: center; background-color: rgb(var(--light-pale-gray-monochrome)) !important; color: rgb(var(--dark-accent)) !important; padding:15px; background-image: var(--paper-texture); border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-left: none !important; border-top: none !important; box-shadow: inset 5px 5px 5px rgba(var(--shadow-accent)) !important; } .code * { font-family: 'Merienda', cursive !important; } .hl-var{ color: var(--gray-monochrome); } .hl-special, .hl-string{ color: var(--dark-gray-monochrome); } .hl-number{ color: var(--light-gray-monochrome); } .hl-reserved{ color: var(--light-gray-monochrome); } div.page-watch-options a, div.page-watch-options a:visited{ --hover-link-color: var(--dark-accent); } #content-wrap { background-color: rgb(var(--white-monochrome)) !important; background-image: var(--paper-texture) !important; } .content.modal-body{ color: rgb(var(--black-monochrome)); } body { background-color: rgb(var(--white-monochrome)) !important; background-image: var(--paper-texture) !important; } #page-content{ font-size: 18px; } /*Editor*/ #main-content{ --editor-icon-color: var(--dark-accent); } .page-rate-widget-box { background-image: var(--paper-texture) !important; background-color: rgb(var(--gray-monochrome)) !important; background-repeat: repeat; background-position: center; border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-left: none !important; border-top: none !important; box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent)); } .wd-editor-toolbar-panel{ padding: 10px !important; } form#edit-page-form .wd-editor-toolbar-panel{ border: none !important; } form#edit-page-form .wd-editor-toolbar-panel div>ul>li>ul a{ background-image: var(--paper-texture) !important; background-repeat: repeat; background-color: rgb(var(--gray-monochrome)) !important; box-shadow: 3px 3px 3px rgba(var(--shadow-accent)); border-left: none !important; border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-right: none !important; border-bottom: none !important; font-family: 'Raleway', sans-serif; } form#edit-page-form .wd-editor-toolbar-panel a{ background-image: var(--paper-texture) !important; background-repeat: repeat; background-color: rgb(var(--dark-gray-monochrome)) !important; box-shadow: 3px 3px 3px rgba(var(--shadow-accent)); border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-right: none !important; border-bottom: none !important; font-family: 'Raleway', sans-serif; } form#edit-page-form, form#edit-page-form :not(#edit-page-textarea)>tbody>tr{ border: none !important; font-family: 'Raleway', sans-serif; } form#edit-page-form #edit-page-textarea{ font-family: 'Raleway', sans-serif!important; } textarea#edit-page-comments{ color: rgb(var(--dark-accent)) !important; font-family: 'Raleway', sans-serif; } textarea:not(:placeholder-shown){ font-family: 'Raleway', sans-serif; background-image: var(--paper-texture) !important; background-repeat: repeat; background-color: rgb(var(--light-pale-gray-monochrome)); color: rgb(var(--dark-accent)); box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent)) !important; border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-radius: 0px; font-family: 'Merienda', cursive; } :not(.page-rate-widget-box):not(#search-top-box-form) > .owindow .button-bar a, :not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input, :not(.page-rate-widget-box):not(#search-top-box-form) > input.button, :not(.page-rate-widget-box):not(#search-top-box-form) > button, :not(.page-rate-widget-box):not(#search-top-box-form) > .button, :not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input, :not(.page-rate-widget-box):not(#search-top-box-form) > input.button, :not(.page-rate-widget-box):not(#search-top-box-form) > button, :not(.page-rate-widget-box):not(#search-top-box-form) > .btn{ border-radius: 0px; background-image: var(--paper-texture) !important; background-repeat: repeat; background-color: rgb(var(--dark-gray-monochrome)) !important; color: rgb(var(--dark-accent)); box-shadow: 3px 3px 3px rgba(var(--shadow-accent)); border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; font-family: 'Merienda', cursive; border-right: none !important; border-bottom: none !important; } .wd-editor-toolbar-panel{ border-top: 0px; border-left: 0px; border-bottom: 0px; box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent)) !important; background-image: var(--paper-texture) !important; background-color: rgb(var(--swatch-menubg-color)) !important; border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; } form#edit-page-form table.form:first-of-type td:last-of-type input:not(:placeholder-shown) { background-color: rgb(var(--dark-gray-monochrome)); background-image: var(--paper-texture) !important; border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-left: none !important; border-top: none !important; border-radius: 0px; font-family: 'Raleway', sans-serif; } form#edit-page-form:not(.data-form){ background-color: rgb(var(--gray-monochrome)); background-image: var(--paper-texture) !important; } form#edit-page-form .wd-editor-toolbar-panel a{ color: rgb(var(--dark-accent)); } form#edit-page-form{ border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-left: none !important; border-top: none !important; box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent)); } form#edit-page-form .edit-page-bottomtable tr>td:first-of-type>div:first-of-type textarea:not(:placeholder-shown) { background-color: rgba(var(--dark-gray-monochrome)); border-right: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-bottom: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-left: none !important; border-top: none !important; box-shadow: inset 3px 3px 3px rgba(var(--shadow-accent)); } /*Footer*/ .footnotes-footer{ background-image: var(--paper-texture); background-color: rgba(var(--gray-monochrome)); border-left: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-top: 0.05em solid rgb(var(--light-pale-gray-monochrome)) !important; border-right: none !important; border-bottom: none !important; box-shadow: 3px 3px 3px rgba(var(--shadow-accent)); } .footnotes-footer a[href*=javascript]:before{ color: rgb(var(--dark-accent)); } #footer{ --footer-link-hover-color: var(--dark-accent); } #license-area { --license-link-hover-color: var(--dark-accent); } div#footer{ background-image: var(--paper-texture); background-color: rgb(var(--gray-monochrome)); box-shadow: inset 0px 3px 3px rgba(var(--shadow-accent)); } #license-area { background-image: var(--paper-texture); box-shadow: inset 0px 3px 3px rgba(var(--shadow-accent)); } /*Listpages more by author*/ .authorname{ color: rgb(var(--black-monochrome)) !important; } .collection .collapsible-block-unfolded-link { border: none; background-color: rgb(var(--white-monochrome)); background-image: var(--paper-texture); } .collection>.collapsible-block { background-image: var(--gold-foil); border: none; background-color: rgb(var(--black-monochrome)); text-align: center } .collection .collapsible-block-unfolded-link a, .collection .collapsible-block-folded a { color: rgb(var(--black-monochrome)); } .collection .collapsible-block-folded { border: none; background-color: rgb(var(--white-monochrome)); background-image: var(--paper-texture); }