Revelatrix Theme

Username | August 11th, 2024 5:39PM

---

How do I use this theme?

---

This theme is a bit unique as in it's designed where all your text will put in these "post" blocks! To start,
Put this line at the top of your page.

[[include :wanderers-library:component:revelatrix-theme]]

Once you've done that, edit the editable text in the side! That can be changed by pasting this below the theme import and editing the value.

[[module CSS]]
:root{
—editable-text:"YOUR TEXT GOES HERE!";
}
[[/module]]

Changing the profile picture is like this! If you're changing both, you can just copy the "logo-image" portion into the :root of the first one and it'll work!

[[module CSS]]
:root{
—logo-image: url("YOUR URL GOES HERE!");
}
[[/module]]

After that, it's time to make your first post!

---

💬 48 Comments 🔄 849 Reposts ❤️ 3852 Likes

Username | August 11th, 2024 5:15 PM

---

This is how you make a Post!

---

Past the code below into your page!

[[div_ class="fancyborder"]]
++++++ [[span style="color:rgb(var(--bright-accent));"]]Username[[/span]] | Month Xth, XXXX X:XXPM
-----
+ Title is here
-----

Post text goes here.

-----

++++++ 💬 X Comments 🔄 X Reposts ❤️ X Likes

[[/div]]

Edit the Timestamp, the Numbers at the bottom, and the Username. The body of your text should go in the part that says "Post goes here"! Anything you can add to a page can be added here.

This is SCP-PL-KOT by Arcydziegiel! Wow!

Username: You can put block quotes in here as comments

> [[span style="color:rgb(var(--bright-accent));"]]Username[[/span]]: This is the code for a comment!

Username: Make sure to put a space between the comments

Username: You can also have nested comments like nested Blockquotes.

---

💬 50 Comments 🔄 720 Reposts ❤️ 2931 Likes

Username | August 11th, 2024 4:58 PM

---

How do I use all the other bits?

---

A horizontal rules can be added anywhere in a post with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

---

Like that! Look at that cutting through the middle of the post.

Titles can be created by putting between 1-6 plus "+" at the start of the line

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

This is a tab view.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

This is a	table
You should know	how to make these
already

And that should be everything!

I'll leave you with the fonts and the source code!

---

The Body font and UI font is Courier New.
The title font is Oswald.
The header font is Cinzel.

+ Click to see code

/*dust jacket import*/
@import url("https://wanderers-library.wikidot.com/component:theme/code/1");

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

:root{

/*Header*/
--header-title: "Revelatrix";
--editable-text: "This Text Can be Edited. You can add quite a bit. This is what fits.";
--gradient-header: url("https://wanderers-library.wdfiles.com/local--files/revelatrix-theme/coastlinedither.png");
--logo-image: url("https://wanderers-library.wdfiles.com/local--files/revelatrix-theme/dither_lighthouselogo.png");

/*fonts*/
--body-font: Courier New, monospace;
--UI-font: Courier New, monospace;c
--header-font: Cinzel, serif;
--title-font: "Oswald", sans-serif;

/* Theme colors*/
    --white-monochrome: 17, 13,13;
/*black page color*/

--pale-gray-monochrome: var(--white-monochrome);
    --light-pale-gray-monochrome: var(--white-monochrome);
    --gray-monochrome:  var(--white-monochrome);
    --dark-gray-monochrome:  var(--white-monochrome);

    --black-monochrome: 255, 255, 255;
    /*white text color*/

    --light-gray-monochrome:var(--white-monochrome);

    --bright-accent:  230,  49, 50;
    /*red*/

    --dark-accent: var(--white-monochrome);
    /* black*/

    --alt-accent:   var(--black-monochrome);
    --very-light-gray-monochrome: var(--white-monochrome);
    --medium-accent: var(--bright-accent);
    --ui-button-bg:   var( --black-monochrome);
}

#page-title::after, .meta-title::after{
content: var(--editable-text);
font-size: 15px;
bottom: 0;
  position: absolute;
margin-bottom:10px;
margin-bottom: 10px;
margin-left: 35px;
  left: 0;
color: rgb(var( --black-monochrome));
width:100px; 
height: 80px;
  background-image: none;
  background-size: 100px;
  background-color: rgb(var(--white-monochrome));
}
.collection .collapsible-block-unfolded-link a, .collection .collapsible-block-folded a {
  color: rgb(var(--black-monochrome));
}
@media (max-width: 1000px) {
#page-content {
  padding-left: 0px !important;
-webkit-font-smoothing:none;
}
  #page-title {
    float: none !important;
    position: relative !important;
    width: 75% !important;
    padding: 170px 40px 60px 30px !important;
}

#page-title::after, .meta-title::after{
width:75%;
margin-left:15%;
margin-right:15%;
height: 40px !important;
}

#page-title::before, .meta-title::before{
width: 43% !important;
aspect-ratio: auto !important;
margin-left: 28% !important;
margin-right: 28% !important;

}

}

#odialog-container div.owindow{
color: rgb(var( --black-monochrome));
}

#main-content hr {
background-image:none;
-webkit-font-smoothing:none;
}

#header::before {
opacity: 1;
}

#action-area form{
color: rgb(var(--black-monochrome));
}

  #content-wrap {
    background-image: url("https://wanderers-library.wdfiles.com/local--files/revelatrix-theme/SmokeDither.png");
 background-position: right bottom;
   background-repeat: no-repeat; 
background-color: #633E3B;
background-attachment: fixed;
  }

#page-title::before, .meta-title::before{
content:"";
  position: absolute;
margin-top:10px;
margin-left:10px;
top:0;
left:0;
width: 150px;
height: 150px;
  background-image: url("https://i.imgur.com/sMMoSuO.png");
  background-size: 150px;
}
#page-title{
  float: left;
position: absolute;
text-align:center;
margin: 10px;
width: 100px;
color: rgb(var(--bright-accent));
background-color: rgb(var(--white-monochrome));
padding: 170px 40px 100px 30px;
border-radius: 10px;
border-width: 2px;
border-color:  rgb(var(--bright-accent));
border-style: solid;

}

div.page-rate-widget-box, #page-content div.rate-box-with-credit-button {
  box-shadow: none;
  border-bottom-width: 2px;
  padding: 10px;
  border-color: rgb(var(--bright-accent));
  border-style: solid;
  border-radius: 10px;
}

a:hover{
color: rgb(var(--black-monochrome));
}

#page-content {
  padding-left: 200px;
-webkit-font-smoothing:none;
}

.yui-navset .yui-nav li, .yui-navset .yui-nav li a, .yui-navset .yui-nav li a::before {
  border-radius: none;
  color: rgb(var(--bright-accent));
}

:is(blockquote, .blockquote, div.blockquote, [class*="blockquote"]), .fancyborder  {
border-radius:10px;
border-width: 2px;
border-image: none;
background-color: rgb(var(--white-monochrome));
border-color:  rgb(var(--bright-accent));
border-style: solid;
}
.fancyborder {
padding-bottom: 10px;
padding-top: 10px;
margin-top:20px;
margin-bottom:20px;
}

 .fancyborder>h1,  .fancyborder>h2,  .fancyborder>h3,  .fancyborder>h4, .fancyborder>h5, .fancyborder>h6{
text-align:center;
}

h1{
color:  rgb(var(--bright-accent));
}

div.page-watch-options a {
  --hover-link-color: rgb(var(--black-monochrome));
}

#odialog-container #rename-error-block + table tbody tr:first-of-type td:first-of-type, #action-area form[onsubmit*="RenamePage"] table tbody tr:first-of-type td:first-of-type {
color: rgb(var(--white-monochrome));
}

div#page-options-bottom,div.page-watch-options, div#page-info, #action-area{

border-radius:10px;
border-width: 2px;
background-color: rgb(var(--white-monochrome));
border-color:  rgb(var(--bright-accent));
border-style: solid;
padding: 10px 10px 10px 10px;
margin:2px;
}n

: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;
}

:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) .wd-editor-toolbar-panel a {
  background-color: rgb(var(--black-monochrome));

}

:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) table.form:first-of-type tr td:last-of-type input:not(:placeholder-shown),:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) .edit-page-bottomtable tr > td:first-of-type > div:first-of-type textarea:not(:placeholder-shown) {
  background-color: rgb(var(--black-monochrome));
color: rgb(var(--white-monochrome));
}

 #header h1 a::after {
  content: none;
}
#header h1 a {
font-family: "Cinzel", serif;
}
 #header h1 a::before{
  color: rgb(var(--bright-accent));
}

---

💬 51 Comments 🔄 938 Reposts ❤️ 1827 Likes

+Translations

More From This Author

IronShears's Other Works
Entries	"Mutualism" • the world will have to wait on us today. • The Bramble Hedge • p/partnerships • Playing Pretend •
Other