How do I use this theme?
Put this line at the top of your page.
First you'll change the header and logo colors. I have added the PSD files for both in the file section of this page. Just download them and change the color of each layer that I labeled "HERE". Alternatively, you can make your own new ones by copying the same structure.
Once you're done, save and upload the new images to your page, paste the text below at the top of your page, copy the static link to each image, and replace the word "HERE" next to "--gradient-header" with the link to the header image and the one next to "--logo-image" with the link to the logo image.
After that, find the RGB color of each of the colors you picked and paste them into the R, G, and B of the colors you would like to replace.
Make sure to leave the semicolons!
: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 */
/*Self-explanatory. For this one, make sure the A is somewhere between 1-0 depending on desired opacity*/
}
[[/module]]
示例
可通过 5 个连字符“-----”创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
如果将“-----”放入类(class)为 “fancyhr” 的 div 元素中,则可以显示另一种水平线样式,如下所示:
[[div_ class="fancyhr"]]
-----
[[/div]]
效果如下:
文字内容
[[/div]]
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块1
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧 |
The body and title font is Quintessential.
The code block and editor button font is Merienda.
The Editor font is 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://wanderers-library.wikidot.com/component:theme/code/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 { /*Header*/ --gradient-header: url("https://i.imgur.com/8ExFD1y.png"); --logo-image: url("https://i.imgur.com/lQXz8jq.png"); --paper-texture: url("https://i.imgur.com/zypUmPn.png"); --gold-foil: url("https://i.imgur.com/DMm97xi.jpg"); --fancy-hr: url("https://i.imgur.com/jcFoqz4.png"); --fancy-border: url("https://i.imgur.com/PZQEGUh.png"); /* 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); /* Fonts */ --body-font: 'Quintessential', cursive; --title-font: 'Quintessential', cursive; } /*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 .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; } 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)); }