Murdle Work Skin

Skip header

Actions

Work Header

Rating:

General Audiences

Archive Warning:

No Archive Warnings Apply

Fandoms:

Additional Tags:

Language:

English

Collections:

Fic In A Box 2022

Stats:

Published:: 2022-09-06
Completed:: 2022-09-06
Words:: 14,988
Chapters:: 6/6
Comments:: 14
Kudos:: 61
Bookmarks:: 17
Hits:: 1,038

Summary:

A work skin and tutorial for creating Murdle-themed logic puzzles on AO3.
See Chapter 1 for an example of the style, Chapter 2 for how to set up the work skin, Chapter 3 for the full CSS code, Chapters 4 and 5 for an HTML tutorial on designing your own Murdle, and Chapter 6 for a premade template that you can simply copy-paste into your own work to make a basic 3x3x3 Murdle logic puzzle.

Notes:

(See the end of the work for other works inspired by this one.)

Chapter Text

The Case of the Murdle Workskin

Template for Fic-in-a-Box 2022

[UPDATE: Someone has now made a clickable Murdle work skin! If you want a version with clickable grids, check it out!]

Greetings, Murdlers! This is a work skin I made for creating murdle-related fanworks on AO3. It's my first time making an AO3 skin, so the code is probably not the most elegant or economical, but I hope it's useful all the same!

This space is, of course, where the main text of your mystery will go. You may want to put some of it in bold. You can describe the details of the case here, or just introduce the cards.

If you want to show the backs of the cards before they get "flipped," here's what they look like:

🔎

And here's the content on the front side of the cards:

👶

A Suspect

🔪

A Murdle Weapon

🌳

A Location

Here's a mid-sized version of the cards, if you want to include short descriptions:

👴

A Suspect

Mini cards for short clues.

Sagittarius

✂️

A Murdle Weapon

You can display three of these together.

Made of metal

🚪

A Location

But the space for text is limited.

Indoors

And here's a full-size version of a card, which can show more text:

🐸

A TOXIC FROG

This card will expand based on the amount of text you enter, so you can write as much as you want here. You can add special clues or just describe suspects, weapons, and locations on these cards.

Light-weight • Made of a live animal

Once you've got all your cards displayed in one or more of the formats above, you'll probably want to write up a list of evidence. It can go into a box, like this:

• You can write as many clues as you want here.
• The murdle weapon was found under velvet cushions.
• A toxic frog was not in a secret chamber.
• The suspect who brought the toxic frog was a Gemini.

Here's a notebook you can include as well, with a grid to help Deductive Logico solve your murdle:

NOTEBOOK

You can write notes in here if you want, or you can leave this space blank.

Here's a grid with space for three suspects, weapons, and locations:

👶

🌳

🔪

🌳

Here's a grid that includes motives, and uses a text-shadow over the emojis:

👶

🌳

💰

🔪

🌳

💰

And here's a Sunday-sized grid with space for six suspects, weapons, and locations:

👶

🌳

🔪

🌳

RESOLUTION

You can put the solution to your murdle at the end, like this, or you can hide it in a separate chapter. There's also some other extra stuff you can add below.

♔♞♗♞♕♚♘♝♖♝♗♛♘♜

EXTRA STUFF

Here are some cards you can use to indicate a hint:

🔮

Ask for a hint?

🔮

You can add any information here that Inspector Irratino may have gleaned from the collective unconscious.

Here are some grids with the colors set so that they can flow with the main text, rather than going inside the notebook:

*	👶	👶	👶	🌳	🌳	🌳
🔪
🔪
🔪
🔪
🌳
🌳
🌳

The version with motives, again with a text shadow:

*	👶	👶	👶	🌳	🌳	🌳	💰	💰	💰
🔪
🔪
🔪
🔪
🌳
🌳
🌳
💰
💰
💰

And the Sunday-sized grid:

👶

🌳

🔪

🌳

Chapter 2: Tutorial Part 1: Creating Your Work Skin (CSS)

Chapter Text

For reference, here's a link to the Murdle website: https://murdle.com/

I tried to make the different parts of this work skin somewhat versatile so you can choose which elements to use and how to arrange them to create your own logic puzzle. In this chapter, I'll describe the important parts of the CSS code, and which parts you may want to edit. The next chapter contains the bare code for you to copy and paste, and Chapter 4 is the tutorial for using the skin by adding HTML to your work. The codes for the logic grids are in Chapter 5.

Step 1: Create a New Work Skin

The first thing you'll need to do is create a work skin. You can do this by going to your AO3 dashboard and clicking on "Skins" in the menu (which should be either at the top or on the lefthand side of your screen). You'll be creating a work skin (not a site skin), so choose the button that says "My Work Skins," and then select "Create Work Skin." On the next page, you'll need to give your skin a title. This won't be public, so you can call it whatever you want. (The title has to be unique, though, so it may be good to add your username to the end, in case someone else's skin has the same name.) Next, paste the code from Chapter 3 of this tutorial into the large text box labelled "CSS." Once you hit "Submit," your work skin will be ready to use.

(You can edit your work skin at any time. However, note that if you make changes to the CSS that contain errors or elements that aren't allowed on AO3, those changes will simply disappear as soon as you try to save them, and occasionally, other parts of the code will disappear with them. If you want to make edits, I'd recommend always keeping a copy of the most recent working version of your code in a separate document, so nothing gets lost.)

The next thing you'll need to do is post a new work and add the necessary HTML to apply the work skin. We'll come to that in a Chapter 4, but first I want to explain the CSS so you can make changes to it if you want.

If you don't plan to make any changes to the CSS, you can skip to Chapter 3 and copy the code now!

CSS Notes

The Basic Murdle Page Style

This is the overall container for everything else. It's the part of the code that sets the background color, the font, and the color and size of the text. I used the background color from the Murdle website (#fbfbf9) and put a border around it, but you could also delete the background color and border elements, and just use AO3's style for the background. (In that case, you might need to delete the background color settings in some other elements, e.g. the outer cells of the logic grids.)

#workskin .main {
background: #fbfbf9;
color: #000000;
font-family: "Courier New", Courier;
font-size: 18px;
line-height: 1.7;
border: 1px black solid;
border-bottom: 1px black solid;
padding-top: 1.5em;
padding-bottom: 1em;
padding-right: 1.3em;
padding-left: 1em;
border-radius: 10px;
}

Work Title

This section styles the title of the work, as it displays at the top center of the page. The code here will automatically transform the title to all-uppercase, like Murdle titles. To remove this feature, simply delete the line "text-transform: uppercase" from the code. If you want your whole title to appear in the normal AO3 style, not the Murdle style, you can delete this whole segment of code entirely.

#workskin .title {
font-family: "Courier New", Courier;
font-weight: bold;
color: #A30B37;
text-transform: uppercase;
}

Case Title and Subtitle

This piece of code imitates the way the Murdle website displays the name of the day's case and date, and looks like this:

The Mystery of the Toxic Blowfish

Murdle for Aug 16, 2022

You can of course use these for any other titles or subtitles you want to include in your work as well. Like the main title, these are set to automatically transform text into uppercase.

#workskin .case-title {
font-family: "Courier New", Courier;
font-size: 26px;
font-weight: bold;
color: #A30B37;
line-height: 1.5;
text-transform: uppercase;
}

#workskin .subtitle {
font-family: "Courier New", Courier;
font-weight: bold;
font-size: 18px;
color: #A30B37;
line-height: 1.5;
text-transform: uppercase;
}

Cards: Reverse Side

The following segments of code give the shape and color of the back (red) side of the evidence cards. The first part ("cardback") gives the size and color of the card, and the second part ("card-small-emoji") styles the emoji.

#workskin .cardback {
background: #A30B37;
color: #fbfbf9;
border: 5px black solid;
border-bottom: 5px black solid;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1em;
padding-left: 1em;
border-radius: 10px;
width: 105px;
height: 190px;
margin: auto;
float: left;
}

#workskin .card-small-emoji {
font-family: "Courier New", Courier;
font-weight: bold;
font-size: 90px;
line-height: 190px;
display: block;
text-align: center;
margin: auto;
}

Cards: Front Side, Small Version

The pieces of code below are for displaying small images of the front side of the cards. These are just an emoji and a name or short description, like the cards you see on the Murdle site before you click to "investigate" them.

The first part of this code styles the card (size, color, border). The second part styles the text.

#workskin .card-small {
background: #ffffff;
color: black;
font-size: 18px;
font-family: "Courier New", Courier;
line-height: 18px;
display: block;
border: 5px black solid;
border-bottom: 5px black solid;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1em;
padding-left: 1em;
border-radius: 10px;
width: 105px;
height: 190px;
margin: auto;
float: left;
}

#workskin .card-small-name {
font-family: "Courier New", Courier;
font-size: 18px;
text-align: center;
color: #000000;
font-weight: bold;
text-transform: uppercase;
}

Card Emojis

This is the code for styling the emojis that display on the front sides of all the cards.

#workskin .card-emoji {
font-family: "Courier New", Courier;
font-size: 65px;
text-align: center;
font-weight: bold;
margin: auto;
}

Cards: Front Side, Mid-Sized Version

The next four pieces of code are all for styling the mid-sized versions of the evidence cards. This includes styling for the overall card (color, size, border), the name/title, the main text (describing the suspect/weapon/location), and the statistics (star sign, material something is made of, indoors or outdoors, etc.).

#workskin .card {
background: #ffffff;
color: black;
font-size: 18px;
font-family: "Courier New", Courier;
line-height: 1.7;
display: block;
border: 5px black solid;
border-bottom: 5px black solid;
padding-top: .5em;
padding-bottom: .5em;
padding-right: .5em;
padding-left: .5em;
border-radius: 10px;
width: 200px;
height: 350px;
margin: auto;
float: left;
}

#workskin .card-name {
font-family: "Courier New", Courier;
font-size: 22px;
text-align: center;
color: #A30B37;
font-weight: bold;
text-transform: uppercase;
}

#workskin .card-text {
font-family: "Courier New", Courier;
font-size: 18px;
text-align: center;
color: black;
}

#workskin .card-stats {
font-family: "Courier New", Courier;
font-size: 18px;
text-align: center;
color: black;
font-weight: bold;
text-transform: uppercase;
}

Cards: Front Side, Large Version

The next two pieces of code are for styling the full-sized cards, to set the basic size and colors and to style the text of the description. Apart from these elements, the styling for the large cards is the same as for the small and mid-sized ones above (the same code is used for the emojis, titles, and statistics).

As an aside, note that the "max-width" for this element (and several others) is set to "85%." This is to prevent these elements from overflowing or stretching out the page when viewed on mobile or small tablet screens. If you want to change the width of the card, use the "width" option, and keep "max-width" at 85% or lower.

#workskin .card-large {
background: #ffffff;
color: black;
font-size: 18px;
font-family: "Courier New", Courier;
line-height: 1.7;
display: block;
border: 5px black solid;
border-bottom: 5px black solid;
padding-top: .5em;
padding-bottom: .5em;
padding-right: 1.5em;
padding-left: 1.5em;
border-radius: 10px;
width: 300px;
max-width: 85%;
min-height: 500px;
margin: auto;
}

#workskin .card-large-text {
font-family: "Courier New", Courier;
font-size: 18px;
color: black;
text-align: left;
padding-right: .2em;
padding-left: 1.2em;
}

Card Display Tables

The following pieces of code are for styling the tables that display multiple cards side by side. The first part is the code for the table of smaller cards (front or back), and the second part is the code for the table of mid-sized (front) cards. The third code segment below, called "divider," creates extra padding around the cards so that there's space between them.

You can adjust how far apart the cards are by increasing the amount of padding around them (currently set at .2em on all sides). You may also need to increase the "width" value in the relevant table, to prevent the cards from splitting onto two separate lines. (Keeping the "width" setting close to the actual width of the cards keeps them centered on the page, so try to only increase the width as much as you need to. That is, unless you don't care about having the cards centered, in which case you can delete the "width" element altogether, and the cards will align to the left.)

Similarly, if you want to display four cards side by side (e.g. in order to include a "motive" card), you'll need to set the "width" to a higher value to give enough room for four cards to display in a row. (Or, again, simply delete the "width" element, if you don't want the cards to be centered.)

#workskin table.card-smalltable {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 490px;
max-width: 85%;
margin: auto;
}

#workskin table.cards {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 715px;
max-width: 85%;
margin: auto;
}

#workskin .divider {
position: relative;
float: left;
padding-top: .2em;
padding-bottom: .2em;
padding-right: .2em;
padding-left: .2em;
border: none;
margin: auto;
}

Evidence Box

The code below is for styling the box with the list of evidence.

#workskin .evidence {
background: #fff5e2;
color: black;
border: 5px black solid;
border-bottom: 5px black solid;
font-family: "Courier New", Courier;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1.5em;
padding-left: 1.5em;
line-height: 1.7;
border-radius: 10px;
font-size: 18px;
font-weight: bold;
width: 85%;
max-width: 600px;
margin: auto;
}

Notebook

The next two pieces of code are for styling the notebook. The first part sets the color, size, border, and overall font properties. The second part sets the font properties for the title (e.g. the word "NOTEBOOK"). The actual Murdle notebook does not display any title, so you can of course omit this element entirely if you want. It's currently set to red ("color: #A30B37") and to automatic uppercase ("text-transform: uppercase"), but you can change or remove these properties.

#workskin .notebook {
background: #fff5e2;
color: black;
border: 5px black solid;
border-bottom: 5px black solid;
font-family: "Courier New", Courier;
padding-top: .3em;
padding-bottom: 1.5em;
padding-right: 1.5em;
padding-left: 1.5em;
line-height: 1.7;
border-radius: 10px;
display: block;
font-size: 18px;
width: 85%;
max-width: 600px;
margin: auto;
}

#workskin .notebook-title {
text-align: center;
font-family: "Courier New", Courier;
font-weight: bold;
font-size: 25px;
color: #A30B37;
line-height: 1.7;
text-transform: uppercase;
}

Logic Grids Inside the Notebook

The next few pieces of code are for styling the table that forms the logic grid. The first three codes, "table.grid-small," "table.grid-med," and "table.grid-large," are for styling the three different sizes of grid (the small one works best for a 3x3x3 grid, the medium-sized for 3x3x3x3, and the large-sized for anything with four or more suspects). The other parts are for styling the individual cells of the table.

The cells styled with "td.grid" will have a dark outline. The cells styled with "td.grid-none" will have no outline; you can use these to fill out the parts of the table where you don't want any grid to show. The other styles ("corner" and "emoji") are redundant (they have the same style as "grid-none"), but are included in case you want to make changes that affect the emoji cells or the upper-left corner cell without changing the other parts of the table.

You can change the font size if you want the emojis to be smaller or larger. Note that this may change the dimensions of the whole table, though.

#workskin table.grid-small {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 85%;
max-width: 305px;
}

#workskin table.grid-med {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 85%;
max-width: 450px;
}

#workskin table.grid-large {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 85%;
max-width: 550px;
}

#workskin td.grid {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border: 2px solid;
border-collapse: collapse;
width: 30px;
height: 30px;
}

#workskin td.grid-none {
background: #fff5e2;
color: #fff5e2;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border: none;
border-collapse: collapse;
width: 30px;
height: 30px;
}

#workskin td.corner {
background: #fff5e2;
color: #fff5e2;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 30px;
height: 30px;
border: none;
}

#workskin td.emoji {
background: #fff5e2;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 30px;
height: 30px;
border: none;
}

Logic Grids Outside the Notebook

The next set of codes is identical to those above, except that the background colors are set to display against the background of the main page rather than the notebook. Use these versions of the code if you don't want to put the logic grid inside the notebook container. (You can, of course, also change the background colors if you want to match a different background, or delete the background colors if you want to use AO3's colors.)

#workskin table.grid2-small {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 85%;
max-width: 305px;
}

#workskin table.grid2-med {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 85%;
max-width: 450px;
}

#workskin table.grid2-large {
background: #fbfbf9;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 85%;
max-width: 550px;
}

#workskin td.grid2 {
background: #ffffff;
color: black;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border: 2px solid;
border-collapse: collapse;
width: 30px;
height: 30px;
}

#workskin td.grid2-none {
background: #fbfbf9;
color: #fbfbf9;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border: none;
border-collapse: collapse;
width: 30px;
height: 30px;
}

#workskin td.corner2 {
background: #fbfbf9;
color: #fbfbf9;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 30px;
height: 30px;
border: none;
}

#workskin td.emoji2 {
background: #fbfbf9;
font-family: Courier;
text-align: center;
font-size: 18px;
line-height: 1.7;
border-collapse: collapse;
width: 30px;
height: 30px;
border: none;
}

Text Color

Some parts of the Murdle website, such as the resolution text, are in red. The following code will let you create red text with a "span" tag.

#workskin .redtext {
color: #A30B37;
}

You can use this same piece of code to allow fonts in other colors as well. Simply make a copy of the CSS code above, change the hex code to the color you want, and give the code segment a new name (e.g. "greentext" instead of "redtext"). In your HTML, you can then use <span class="greentext"></span> tags around any text you want to change to that color.

Chess Pieces

This code styles the chess pieces to display at a larger size than the rest of the text. You can also make the colors of the pieces alternate, using the text color code just above. To change the size of the chess pieces, simply adjust the value of "font-size" below.

#workskin .chess {
display: block;
line-height: 1.7;
word-break: break-word;
font-family: "Courier New", Courier;
text-align: center;
font-weight: bold;
font-size: 40px;
border: none;
}

Hint Cards: Reverse Side, No Text

The next two pieces of code are for styling the back side of a card to display Inspector Irratino's crystal ball, the symbol that shows on the "hint" page if you choose to ask him for a hint. The first part of the code styles the color and size of the card, and the second part styles the emoji.

The code below is designed for displaying a single hint card. If you want to display several of them together (like the three clue cards you see at the beginning of a Murdle puzzle, together in a horizontal row), add the line "float: left;" to the end of the first CSS segment below. This will prevent the cards from overflowing the width of the screen on mobile. You'll then be able to copy the HTML for one of the tables for small cards (you can find these tables in Chapter 4) and substitute the hint cards in place of the clue cards.

#workskin .cardhintback {
background: #000000;
color: #ffffff;
font-size: 18px;
line-height: 18px;
display: block;
font-family: "Courier New", Courier;
border: 5px white solid;
border-bottom: 5px white solid;
outline: 2px black solid;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1em;
padding-left: 1em;
border-radius: 10px;
width: 105px;
height: 190px;
margin: auto;
}

#workskin .card-hint-back-emoji {
font-family: "Courier New", Courier;
font-weight: bold;
font-size: 90px;
line-height: 190px;
display: block;
text-align: center;
margin: auto;
}

Hint Cards: Reverse Side, With Text

The next two pieces of code are for styling the contents of a version of a "hint card" with text (e.g. "Ask for a hint?").

#workskin .card-hint-back-emoji2 {
font-family: "Courier New", Courier;
font-weight: bold;
font-size: 90px;
display: block;
text-align: center;
margin: auto;
}

#workskin .card-hint-back-text {
font-family: "Courier New", Courier;
font-size: 18px;
text-align: center;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
}

Hint Cards: Front Side

The code below is for styling the front side of a large/full-sized "hint card." This is essentially the same styling used on the large evidence cards, but with the colors from Irratino's hint page.

#workskin .card-hint-large {
background: #000000;
color: #ffffff;
font-size: 18px;
font-family: "Courier New", Courier;
line-height: 1.7;
display: block;
border: 5px white solid;
border-bottom: 5px white solid;
outline: 2px black solid;
padding-top: .5em;
padding-bottom: .5em;
padding-right: 1.5em;
padding-left: 1.5em;
border-radius: 10px;
width: 300px;
max-width: 85%;
min-height: 500px;
margin: auto;
}

#workskin .card-hint-large-text {
font-family: "Courier New", Courier;
font-size: 18px;
color: #ffffff;
text-align: left;
padding-right: .2em;
padding-left: 1.2em;
}

Color Codes

The code segments below are for styling the emojis in different colors, including the canonical colors of all the recurring Murdle suspects.

#workskin .NavyColor {
color: transparent;
text-shadow: 0 0 0 #000080;
}

#workskin .BlueColor {
color: transparent;
text-shadow: 0 0 0 #016FB9;
}

#workskin .MaroonColor {
color: transparent;
text-shadow: 0 0 0 #AF3B6E;
}

#workskin .AzureColor {
color: transparent;
text-shadow: 0 0 0 #007FFF;
}

#workskin .SlateColor {
color: transparent;
text-shadow: 0 0 0 #708090;
}

#workskin .TuscanyColor {
color: transparent;
text-shadow: 0 0 0 #CDA2AB;
}

#workskin .AubergineColor {
color: transparent;
text-shadow: 0 0 0 #693B58;
}

#workskin .RaspberryColor {
color: transparent;
text-shadow: 0 0 0 #E30B5D;
}

#workskin .ChampagneColor {
color: transparent;
text-shadow: 0 0 0 #F4C97A;
}

#workskin .VerdigrisColor {
color: transparent;
text-shadow: 0 0 0 #48A9A6;
}

#workskin .GlaucousColor {
color: transparent;
text-shadow: 0 0 0 #6082B6;
}

#workskin .CrimsonColor {
color: transparent;
text-shadow: 0 0 0 #BA181B;
}

#workskin .GreyColor {
color: transparent;
text-shadow: 0 0 0 #8F8F8F;
}

#workskin .MangoColor {
color: transparent;
text-shadow: 0 0 0 #F08A4B;
}

#workskin .CoffeeColor {
color: transparent;
text-shadow: 0 0 0 #322214;
}

#workskin .RoseColor {
color: transparent;
text-shadow: 0 0 0 #FF66CC;
}

#workskin .PineColor {
color: transparent;
text-shadow: 0 0 0 #097A74;
}

#workskin .VioletColor {
color: transparent;
text-shadow: 0 0 0 #A54CFF;
}

#workskin .LavenderColor {
color: transparent;
text-shadow: 0 0 0 #967BB6;
}

#workskin .HoneyColor {
color: transparent;
text-shadow: 0 0 0 #F6AE2D;
}

#workskin .SaffronColor {
color: transparent;
text-shadow: 0 0 0 #F4C430;
}

#workskin .TangerineColor {
color: transparent;
text-shadow: 0 0 0 #F28500;
}

#workskin .CopperColor {
color: transparent;
text-shadow: 0 0 0 #B87333;
}

#workskin .AmaranthColor {
color: transparent;
text-shadow: 0 0 0 #B6244F;
}

#workskin .ApplegreenColor {
color: transparent;
text-shadow: 0 0 0 #66B447;
}

#workskin .CeladonColor {
color: transparent;
text-shadow: 0 0 0 #ACE1AF;
}

#workskin .EmeraldColor {
color: transparent;
text-shadow: 0 0 0 #33CA7F;
}

#workskin .RuleanColor {
color: transparent;
text-shadow: 0 0 0 #1DACD6;
}

#workskin .LapisColor {
color: transparent;
text-shadow: 0 0 0 #125E8A;
}

#workskin .AureolinColor {
color: transparent;
text-shadow: 0 0 0 #F2DB00;
}

#workskin .VermillionColor {
color: transparent;
text-shadow: 0 0 0 #E34234;
}

#workskin .MauveColor {
color: transparent;
text-shadow: 0 0 0 #E0B0FF;
}

#workskin .EminenceColor {
color: transparent;
text-shadow: 0 0 0 #6C3082;
}

#workskin .TanColor {
color: transparent;
text-shadow: 0 0 0 #FFF5E2;;
}
#workskin .BlackColor {
color: transparent;
text-shadow: 0 0 0 #000000;
}

#workskin .WhiteColor {
color: transparent;
text-shadow: 0 0 0 #FFFFFF;
}

#workskin .Color {
color: #000000;
}

Odds and Ends

Finally, these last small pieces of code were added to help the rest of the code work in places where it would otherwise not display properly. The "noMargin" code (adopted from lirin's Old!Reddit work skin) prevents AO3 from putting large margins between paragraphs; I've used it in a few places where the spacing was otherwise too wide. The "floatleft" code allows cards to display in a row on desktop without overflowing the screen on mobile. The "clearleft" clears the "float" property so that it doesn't mess up other parts of the page.

#workskin .noMargin {
margin: 0;
}

#workskin .floatleft {
float: left;
color: transparent;
}

#workskin .clearleft {
clear: left;
}

That's all the CSS. You can find a full copy of it in the next chapter. Copy and paste it into the CSS box when you create your new work skin, and then proceed to Chapter 4 for instructions on how to apply the skin to a work.

Chapter 3: CSS Code

Chapter Text

Copy the CSS code from the text box below and paste it into the CSS box when you create your new work skin. (See Chapter 2 of this guide for information about what the different segments of code are for, and see Chapter 4 for instructions on how to use the work skin once you've saved it. Chapter 5 has the code for the logic grids, and Chapter 6 has a full blank template for a 3x3x3 Murdle puzzle.)

#workskin .title {
font-family: "Courier New", Courier;
font-weight: bold;
color: #A30B37;
text-transform: uppercase;
}

#workskin .case-title {
font-family: "Courier New", Courier;
font-size: 26px;
font-weight: bold;
color: #A30B37;
line-height: 1.5;
text-transform: uppercase;
}

#workskin .subtitle {
font-family: "Courier New", Courier;
font-weight: bold;
font-size: 18px;
color: #A30B37;
line-height: 1.5;
text-transform: uppercase;
}

#workskin .card-small-emoji {
font-family: "Courier New", Courier;
color: transparent;
font-weight: bold;
font-size: 90px;
line-height: 190px;
display: block;
text-align: center;
margin: auto;
text-shadow: 0 0 0 #fff5e2;
}

#workskin .card-small-name {
font-family: "Courier New", Courier;
font-size: 18px;
text-align: center;
color: #000000;
font-weight: bold;
text-transform: uppercase;
}

#workskin .card-emoji {
font-family: "Courier New", Courier;
font-size: 65px;
text-align: center;
color: transparent;
font-weight: bold;
margin: auto;
text-shadow: 0 0 0 #000000;
}

#workskin .card-name {
font-family: "Courier New", Courier;
font-size: 22px;
text-align: center;
color: #000000;
font-weight: bold;
text-transform: uppercase;
}