Hello, Delicious Friend! If you're reading this, maybe you read my Final Voyage project and wanted to ask how to do something similar! Maybe you saw a meme in the Fallen London Discord and wanted to make your own. Maybe you have some interesting storytelling you wanted to do and wanted to make some weird items for your own amusement.

Regardless, during my aforementioned Final Voyage project, there were requests from people that I teach them how to make something similar. Since I am now done with that project, I decided, y'know what? Let's do it.

Introduction

This guide will teach you how to make the mockups for Fallen London screenshots. For the most part, we will basically be working with the same (visual) building blocks for the game that the devs themselves do -- this also means that a lot of the work is technically automated, so the job is not nearly as difficult as you'd think.

None of what we use here can be used for cheating. In practice, all we'll be doing is changing how the game looks, but not how it actually functions. Even if a piece of text says that the value of something is 500, the game doesn't necessarily interpret it as 500. This is purely for creative nerds like me who really love Fallen London and want to express themselves using the Fallen London aesthetics and conventions.

What You Need

• A browser that has the Inspect Element feature (for this guide, I'll be using Firefox).
• Some knowledge of HTML5 (if you don't have it, I'll walk you through it)
• A Fallen London account.

...And that's it. If you're savvy enough with Inspect Element and HTML5, you probably already know what you need to do for these and the rest of this guide is redundant. Seriously, you don't even need to touch CSS, and the only real HTML5 knowledge you'll need is text editing. None of this is complicated, but I'll walk the newbies and the less IT-inclined folks through the process anyway.

Otherwise, let's get started:

IMPORTANT: THE FANWORK GUIDELINES AND DISCLAIMER

Okay, I lied, before we can get started, I need to link you to the official FBG Fan Project Guidelines which has recently (Nov. 1st, 2023) been updated to cover their stance on Fallen London mockups such as the ones we're going to create. You can click the link I provided for the full statement, but the general gist of it for our purposes is that, no matter what kind of fake we're making, we need to make it abundantly obvious that it is a fake, usually with a disclaimer of some sort. Importantly, this needs to be done as part of the work itself.

This makes sense: We are going to be using the exact same visual building blocks that FBG uses to make the game, and because of this, it is exceedingly easy to make a Fallen London mockup that is functionally indistinguishable from the real thing. This is especially true because Fallen London is a very large game¹ and a huge chunk of that is locked behind content which is not free for players (FATE locked stories, exceptional or otherwise), or stuff that not every player can access (ambitions and relevant tie-ins) or just obscure text and options².

This is further compounded by the fact that in 2023, a major hardware failure with the wiki led to catastrophic loss of data, which required restoring a backup from several months prior. Recovery efforts are ongoing (at the time of writing), but most of them have to be done manually, and since a lot of stories in Fallen London can only be played once (or require irl money to reset them in order to play again), not many people have the ability to go back and manually add in what's missing (to say nothing of how few people have the patience to learn how to do wiki editing in the first place). Even if that wasn't the case, like every wiki, new content has to be added in manually, which not everyone has the time to do.

I enumerate all of these things extensively in order to emphasize the point: It is extremely fucking easy to make a fake Fallen London screenshot that is not just indistinguishable from the real thing, but extremely hard - if not actively impossible - to check its veracity.

And just to further illustrate my point: Here's a fake Fallen London screenshot. See if you can catch every part of it that is fake. I'll even give you a hint: I changed five things in the screenshot.

So have some courtesy for your fellow Fallen London players (and FBG itself) and tag your fakes obviously and appropriately. (I also recommend reading point 6 in the official guidelines, just as a reminder).

Now that I have hopefully and thoroughly beaten this point into your head, let's get started with something simple:

Part 0: Getting Started

This is a very simple process that will be the absolute basis of everything we do, so I'm giving it its own section so you can come back to this in case you forget.

Step 1: Open your browser's development tools (F12 in Firefox)

That should get you a panel on the bottom of the page. It looks roughly like this:

This is the devtools panel. You can see here that this is a tool with a lot of different uses. Someone more webdev inclined might be able to tell you what all these things do, but alas, I quit compsci. Fortunately, at least on Firefox, it starts with the Inspector tab already selected, and that's the only tab we'll really need.

Step 2: Select the Inspect Element tool.

It's this button right here:

Clicking on it will make your mouse start highlighting things as you pass it through the web page, like this:

When your mouse is in this state, mousing over something on the webpage will also shift the Inspector tab to the part of the webpage's code that handles the section you moused over. You can then click on it to turn the effect off and start your work.

And that's it! You now have the absolute basic knowledge necessary to do all the work we're going to do here. This entire guide will basically just be "using the inspector tool to find what we want to edit, and going into the code to edit it", and since all we'll be doing is text editing, this is all really simple.

Part 1: The Disclaimer

After spending all that time talking about how important disclaimers are on these things, obviously I'd start with teaching you how to make one.

Let me be clear here: Your disclaimer can be whatever you want, so long as it's obvious. You can use, for example, image editing to just add the disclaimer in as text after you've done your thing. I'm simply teaching you how to make the disclaimer I personally use, which also doubles as a decent introduction to how we're going to make edits.

For this, we are going to be using the game's various tabs:

They sit directly below the area header.

For this, we are going to change the text of a tab in order to be our disclaimer, to do this, follow these steps:

Step 1: Use the Inspect Element tool (as instructed in Part 0) to select the text of one of the tabs (in this case, we're using the Story tab).

This will get us into the part of the code that handles the tab itself, which should look like this:

Step 2: Double-click on the "Story" text and edit it.

(Once you finish editing the text, press Enter for your change to take effect.)

Congratulations you now know how to edit most of the game's text.

Also, if you notice closely, I wrote "this is fake" (all lowercase) in the console, but the game renders it as "THIS IS FAKE" (all uppercase). This is what I mean when I say that most of the work we're doing here is automated: FBG already handled the CSS part of things, we're just changing the text itself. Like I said at the beginning, this is a lot simpler than it first looks.

Now, personally, I find that doing just this is a little ugly, and not as obvious as I like since it can be missed among all the tabs, so I'm going to go a little further beyond here.

Step 3 (Optional): Delete all the tabs you won't use.

Okay that might sound extreme but just trust me on this one.

(Remember! This is not just hiding the tab, this is actively deleting it from your browser. If you do this, you will have to refresh the page in order to get it back.)

First, you'll want to select the tab you're going to delete using the Inspector Tool.

Again, this will show you the tab's code in the console:

You might have noticed that the tab itself is nestled between two statements, the one above it starting with "<li" and the one below it being "</li>". In case you don't know programming, this is how things are easily separated in HTML: You designate when a thing starts, usually with some special characters and denominations, and you designate when it ends with the same special characters and denominations, but with a / in it (I'm pretty sure this is not 100% universal but it's close enough to universal that going into exceptions here would be a waste of time).

You don't need to know exactly what <li> is for this guide. All you need to know is that this entire thing is how the game's code knows that this is supposed to be one of the tabs.

Now, right click on the line of code right above the text - the one without the /

Then, you need to click "Delete Node". This will delete everything nestled inside of the <li></li> combination.

And presto! The tab you selected is now missing. You can use the "delete" button on your keyboard to do this, mind, but I find that sometimes it just doesn't work, or only deletes part of the node for some reason? I've never had issues using the Delete Node button, so I find that to be more reliable.

You can now repeat the process to delete the other tabs, but remember to leave one of them.

Personally, I dislike the little bar below your currently active tab, and the actual color scheme of it, so I tend to delete the Story tab when making these mockups and only leave one of them. Any of the other tabs will work, I just leave the possessions tab there because that's the habit I formed while making these things.

Step 4: Write the disclaimer text

Now, all we need to do is go into the Possession tab text and change it to the disclaimer. For our purposes, we will be using the example used on the official guidelines page: Fallen London is © 2013 and ™ Failbetter Games Limited: www.fallenlondon.com. This is an unofficial fan work.

Oh, that's... not good. The text is spilling over into a second line! While this is fine strictly speaking, it's also aesthetically unpleasant, and that's upsetting! We're making art here!

Fortunately, there's a very easy way to fix this: You can edit the text itself to have the exact same meaning while taking less space. In this case, by swapping the first "and" with a &, "Limited" with "LTD", and removing the "an" from "an unofficial fan work".

If your monitor's resolution is the same as mine (1920x1080), this should be enough to get the text to fit on a single line. If your resolution is larger, this might not even be necessary! But if it's smaller, you'll have to use some different disclaimer to get your point across. I used a modified version of the example text given by the official guidelines, but in practice anything that states "THIS IS FAKE PLEASE DON'T FALL FOR IT" in an obvious way should be fine.

And a reminder: This is how I like to do my disclaimers, and the upside of doing it this way is that this change will stay regardless of any other changes I make, so long as I don't refresh the page or otherwise click on another (in game) tab. This is very useful when you're making several edits as part of an ongoing story.

Part 2: Images

This is effectively identical to working on text! If you were able to do part 1, you should be able to do part 2 no problems. For this section, I will be using the moloch street storylet "Into the Boardroom":

My goal here will be simple: I will be swapping the chair image with a different one, and I wil also be changing the image for the requirement (on the bottom right) with a different one. That way, I can talk about the two most often used images in Fallen London: Storylet images, and icons.

You should be used to using Inspect Tool by now.

Most of this code doesn't matter for our purposes. At the end of the highlighted section of whatever image you're changing, you'll always see a code that reads src="[X]". We are interested in changing what the [X] is.

To be clear: What this code is doing is just telling your browser to show you a specific image hosted on a specific url, and the given url is something hosted in the FBG servers, and all we want to do is to change the url to something else.

Previously, it was pointing to chair.png hosted on images.fallenlondon.com/icons. That basic url is where FBG puts all of their images for storylets and icons! In other words, the vast majority of the time, you'll only ever need to change the text directly before the .png!

So what happens if we change it?

Yeah that's about how I feel when I go into a meeting too.

So you might be going "okay, but for that I need to know the exact name of the image to be able to use it like that! How do I find that?"

The answer is the ever wonderful Fallen London Wiki!

The wiki copies the name of the images 1:1 to the game. Go on the wiki and search for a storylet or action that has the image you want to use.

Important: Do not use the Fandom wiki! The Fallen London Wiki migrated off of Fandom years ago, and it has much more recent updates and saner UI.

Then, just click on the image itself and you'll be shown the name of the file!

Fallen London universally uses .png files for its game, so the name is really all you need. It's just that easy!

Now that we've changed the image for the storylet itself, let's change the image for the requirement. The process is the exact same, there's only a very tiny difference.

The keen eyed have already noticed what the difference is; the url being used now has a suffix: small.

This is a convention that the game uses for organizational purposes. Since every image in the game must have a "storylet image" version and a "quality/item icon" version, they are given the same name, but the latter is given the "small" suffix.

I imagine that these are made manually by the devs, as while some of them are literally just scaled-down versions of the originals, some of them are actually quite different.

I could make a bee pun here, however, I will spare you that agony.

Regardless, this is the basis on how to change every single image in the game. Between the changing of text, and the changing of images, you're already equipped to make the vast majority of what we can make for these mockups!

Part 3: Squircles, Disabled and other properties.

Let's take a look at the code for the quality icon again:

In the highlighted segment above, you'll see the text <div class="icon icon--circular quality-requirement quality-requirement--storylet">. Everything past the class= is there to basically tell the site's CSS how to show you these images with more granularity.

The vast majority of the time, we have zero reason to change any of these. But of note is the icon--circularpart of the text. What happens if we remove that?

For comparison, here's what the icon looks with the code as-is:

And here is what it looks like if we remove the icon--circular part of the code (you can do this by double clicking it, similar to how you'd change any other text in the game):

As you can see, the icon is now a regular square! icon--circular turns all the regular quality and item icons from a perfect square into a rounded square. This is a very minor detail in general, but it is important if you care for authenticity, as Fallen London actually uses both versions of the icons!

The above is an example from moving anywhere in the Hinterlands back to main London. In general, Fallen London uses regular squares for three things: Icons depicting area changes, item icons, and icons depicting challenge successes and failures. It will generally use rounded squares for everything else.

Now, let's take a look at something a little more useful: Disabled storylets, missing requirements, and disabled buttons.

Fallen London does some visual tricks to more easily help you distinguish an action that you can take, and an action that you cannot. Unavailable storylets change color, missing requirements get a little filter, and the action button itself changes to a duller color. All of these can be replicated with properties!

If we use Inspect Element on an unavailable storylet, this is the code we'll see:

The highlighted line is what we care about, and specifically, we care about the part of the code that says media--locked. This is the property that tells the site's CSS to show the differently-colored storylet to us. If we remove that...

It looks just like the storylet that's available! Well, almost. The requirement is still greyed out the button is still clearly different. How do we change that? Well, the idea is the same.

This is the code for the requirement we are missing. As you can see on the highlighted line, it has the icon--locked property. Edit that out and it will look like the same as a fulfilled requirement!

Finally, the button:

You might be thinking that the thing to do here is to edit out the button--disabled property. Unfortunately, that doesn't work, or at least, not by itself.

You see, the game actually checks twice for if the button should work. The button--disabled property, yes, but also the disabled="" property. If either of them exists, then the button is disabled! You will need to remove both.

Note, however, that while doing so will make the button clickable, it won't actually do anything. Again, all we are doing in this guide is visual changes to the game: the game's servers run their own checks on your actions to see if you can do the things you're trying to do. This is to stop Filthy Cheaters.

With all the knowledge from this section, you should be able to make a mockup of an unavailable storylet without issues!

Part 4: Making a storylet

Now we're getting to the juicy stuff.

First, let's get acquainted: This is how a Fallen London storylet looks like by default:

I've already shown you how to change an image, so this should be simple.

Now, one thing I haven't talked about yet is Card Borders. Actions in Fallen London generally have Card Borders - not all of them. In the above screenshot, neither of the actions have borders themselves. However, entry points to Storylets and Opportunity Cards generally have them - images in storylet results, however, don't.

Now, if you look again on the code, you'll see that, one layer before the section which handles the image we changed, we'll see a section of the code with background-image: url

This is what handles which card border will be placed on our image. By default, most cards and storylets in Fallen London use the Card-Unspecialised.png image. There are, however, over ten different card borders in the game!

Unfortunately, I don't know them all, and this time, we can't actually ask the wiki for help. The images they use for the card borders don't actually reflect their names 1:1 in the game. This is because the wiki generally follows the border's color (as that's how they are remembered in the community) while FBG prefers to name them after their function.

The ones I know of are:
White, generic cards are Card-Unspecialised.
Red, auto-activate cards are Card-Autofire.
Purple, rare cards are Card-Fancy.
Golden, cards for paid stories are Card-Premium.
Bronze, cards for ongoing stories are Card-Ongoing.
Silver, cards often used for Ambitions are Card-Ambition.
Black, cards associated with Mr. Eaten are Card-Sinister.
Christmas, cards associated with Christmas are Card-Snow.

There are others that I'm not aware of, of course, but this should cover most needs.

The above screenshot shows a change to the card border into golden (the image I'm using is from the Banded Sleuth, a character from an Exceptional Story, which uses the Premium border) and changes the name of the Storylet. This is done in the same way you change any other text in the game, which you should be well used to by now.

However, changing the actual text of the storylet gets a little trickier. Here's why:

Each of these ... can be clicked, which will reveal the text inside. The <p></p> node depicts a paragraph. The text for each individual paragraph is in each of these separate nodes!

However, you might've noticed that the storylet text has three paragraphs, but there are four nodes. What gives?

Yeah the fourth <p></p> is extra and is empty, so it doesn't get rendered in game. HTML just does that sometimes, I'm not sure why.

However, this is important to remember! If you try to put all of your text inside of a single node, this happens:

The game thinks it's just one paragraph (because it is) so it just renders it all as a single line. "No worries!" you might think, "I just need to create the new nodes!"

Good thinking! But not quite.

To maybe oversimplify a little bit: When we edit things in the dev console itself, we're not editing HTML itself, but rather changing the HTML's text. This is an important distinction, because special characters in text like that are automatically changed within the browser in order to prevent problems. If, for example, we for some reason ended a text with <p>, we wouldn't want the browser to treat that as the opening of a new paragraph when making it, as that would be bad. This is just general HTML security stuff: special characters get handled so as to avoid security risks.

In order to change things here, we're going to need to get a little bit more creative. Go to the node of the text you want to edit, and right click it.

And right at the top, click on "Edit as HTML".

And here we can see that aforementioned text handling in action! Special characters get changed to specific code combinations that browsers render as these special characters, without needing to think of them as actual code. This is also another reason why the game has to run checks on its own servers, because otherwise, people who are craftier with HTML than I am could wreck some serious havoc.

Remember: All programming is fake. The more real it looks, the more fake it is.

Fortunately, everything we write in this console is taken as actual HTML, which means our plan from earlier actually works now!

Important: Because this console can take multiline text, you need to click off of it in order for your changes to save.

There we go! Now we can cook with fire.

This is how you're going to be handling writing all the text in the game if it requires multiple paragraphs. That generally comes in the form of storylet and action result narrative text.

However, there is one more important thing we have to learn: Text styles!

HTML is capable of a lot of different text styles, but Fallen London only uses Itallics, Bold and both of them simultaneously, so those are the only ones I'll be covering here.

We are still using what we learned and separating each paragraph using separate <p></p> nodes, but we've also started using new nodes to depict the differences in the text. <i></i> nodes are for itallics (<em></em> also works but that's less intuitive to write) and <b></b> are for bolded text.

You might think that if you put some text within both of these, you'll get text that's both bolded and in itallics. You'd be correct! However, there's something a little different happening with that last paragraph.

Fallen London uses text that is both bolded and in itallics as gameplay descriptive text. This is how the devs actively communicate with the players, outside-of-the-narrative, in case they want to warn us of something, like when we're about to make a bad decision, or when the action we're taking is purely gameplay-informational in nature, or otherwise a tutorial. Because of this, the game has a dedicated syntax it uses for this kind of text. <span></span> will create what's effectively a generic new node of text inside the current node, and class="descriptive" tells their pre-prepared CSS that this will be descriptive text, which they've pre-prepared as both bolded and in itallics.

You might be asking yourself if putting class="descriptive" as a property inside the <p></p> node itself works.

Yes it does! The reason why the <span></span> node gets created is likely because they've got development tools on their side that auto generate it for granularity reasons. Unlike us, they're not out here manually editing HTML whenever they want to make a new storylet. That'd be incredibly inefficient.

Everything we have learned here also works for changing actions, although keep in mind that actions in the game don't have their descriptive text as multiple paragraphs.

You now know how to edit text, how to create paragraphs, how to change images, how to handle the few properties that are relevant to what we want to make, how to do text styles... What else is left?

Part 5: Items, Qualities, Equipment and Requirements.

Working on those is effectively identical, so I'll cover them all here.

For this, I'll be editing my Übergoat:

See, basically everything I've already shown you can be used here. For example, I want to change my Übergoat icon to one using the Banded Sleuth, so I'll change the image to bandedsleuthsmall.png (as explained in Part 2).

The problem in the above screenshot is obvious: We've changed the base image, but the icon on the tooltip remains unchanged.

There's another issue: If we try to inspect element the tooltip, we find that we have to mouse our cursor away from the tooltip in order to click on the button, which makes the tooltip go away! Even if we use a hotkey to do this (CTRL+SHIFT+C on Firefox), we find that it's impossible to click on the tooltip itself! (Or at least it is for me.)

Despite all this, we can still change tooltips, but it akes a bit more finagling.

First: Inspect element the icon that contains the tooltip you're trying to change. This goes for items, equipment, qualities and storylet requirements.

Keen eyed observers will have already noticed this, but after each of these things which have a tooltip, there's an "event" button in the code. When we click on it, we find out solution:

Here, we can see all the events associated with the item (and their code, if we cared to). We can also manually disable each event. Because programming likes to be as granular as possible, there are separate events for mouseenter and mouseleave (you might need to scroll on the event list to find them). If we leave the first one active, and deactive the other...

Mousing over the item will show up the tooltip, but removing the mouse from it will not make it go away. This is important, because the code for the tooltip does not exist in our inspector console if the tooltip is not onscreen, and we cannot edit it if it's not there.

Unfortunately, we cannot click it still, so what's next?

See at the end of the highlighted line? While the tooltip is onscreen, the code aria-describedby="tippy-1047" has shown up. The number can be either a 3 or 4 digit number, but the tippy part always exists.

Important: The number after tippy indicates the tooltip's ID, however, this number is randomized with each page refresh and action you do. This number will not always be the same, so always check!

Now, we need to find the code for the tooltip without using inspect element. Fortunately, the unique ID makes this easy.

I don't know if this is a universal feature, but at least on Firefox, the Inspector Devconsole has a Search HTML feature. We can just plug in tippy-1047 (replacing 1047 with the actual number you get) in there and we'll always get two results: the code we've just highlighted, which calls the tooltip, and the actual code of the tooltip.

There we go! Since this is code created when the tooltip shows up, it will generally be around the bottom of the HTML. Good to check regardless.

You will likely have to click a lot of ... buttons to find what you're looking for. Specifically, we're looking for a <div class="icon tooltip__icon"></div> node and a <div class="tooltip__desc"></div> node, both of which exist inside a <div class="tooltip"></div> node.

The tooltip icon should be easy for you to edit by now, as it functions exactly that like image we've worked with so far. Just remember to use the small suffix on the image's name, and you're good.

The description is a little bit more complicated, but nothing groundbreaking. You will find the name of the item, how many of the item you have, as well as its description within the <div class="tooltip__desc"></div> node, as well as more text regarding the items stats. There is no fancy HTML to do here, just edit the text, and try to copy its style exactly, as the CSS for tooltip stat bonuses can be a little wonky.

And we are done! This is how you change any tooltip in the game, and this basically gives you the tools to change anything in the game right now.

The most technically intensive part, however, is yet to come.

Part 6: How To Add Stuff

Now, generally speaking, you want to keep things simple for yourself. If you want to make a storylet, you go into an ingame storylet and change what's there. You want to make result text, you go into result text and change what's there. You want to make an item, you go to an item and change what's there.

If you want to make a mockup of a storylet which involves 3 actions and one of them is unavailable, and all three of them have requirements, then you want to find a storylet which fulfills these conditions, and then change each individual piece to suit your storytelling.

For a variety of reasons, this is not always possible. Maybe you want to make a storylet with 10 actions in it. Maybe you want to make an action with 15 different requirements. Maybe you want to make result text whose mechanical changes have more stuff in them than what you currently have.

Adding stuff is not hard, but it can be slightly finnicky. I will show you the easy and preferred method first. Then, I will show you the slightly more complicated version. None of this is stuff we haven't seen before, mind.

So, first, find a storylet suitable to your needs. In this case, I'll be using my Laboratory.

Now, laboratory research has a billion different options. Maybe I just want one, or two. I've already shown you how to delete nodes before, so any excess can be deleted in the same manner.

There we go, much more manageable. Now, let's say that I want to change that second option to have more requirements. The easy way to do that, is as follows:

First, inspect element on the requirement itself.

Now, you want to go a few nodes back from what's highlighted, specifically <div class="icon quality-requirement">, right-click it, and click on Duplicate Node.

And that's that. You now have two requirements whereas there was only one. This is the easy way to do it: You find something that already exists, and you duplicate it, then you change the duplicate as you see fit.

Want more requirements on your action? Duplicate an existing requirement! Want more options for your storylet? Duplicate an existing option! It's that simple.

However, there is a caveat when it comes to requirements:

Requirements created this way cannot have tooltips. This is not a limitation we can work around.

Now, let's say that I want to add something that doesn't have it by default: Requirements to an action that has no requirements, or in this case, challenges to an action that has none.

The complicated way to do this is still pretty simple, however. First, we open a new Fallen London tab.

I am using a Dark Mode skin for Fallen London here to better illustrate that this is a separate tab. You generally shouldn't use separate tabs when playing Fallen London, as that can make things a little wonky, but since we're not actually playing the game in the tab we're using for edits, this is fine.

Next, you want to inspect element the challenge section, right below the cutoff line.

Next, you're going to want to right-click the highlighted line (the node that starts with <div class="challenges">, and edit as HTML.

This is how HTML code actually looks like when being handled by computers, by the way. It's an unreadable mess. Fortunately, we don't need to read it, we just need to copy all of it.

Then, we want to open a specific part of our original action's code. The part we're looking for is the <div></div> that comes right after the <div class="media__body branch__body"> opener.

You'll want to open that one as HTML, and then paste the stuff you copied AFTER the code that shows up.

If you did it correctly, then it should work as intended.

Important: Remember that challenges for the four basic qualities have Second Chance toggles on the side, but those disappear if the success rate is 100%, and are never there for any other type of challenge! I haven't fooled around on how to remove those once they're there, so if you don't want those showing up, remember to copy a challenge that doesn't have them!

Editing a challenge is effectively identical to editing anything else we've seen here so far. The only difference is that the text depicting the difficulty ("almost impossible" in this example) has a different color depending on your chances.

If you inspect element on it, you'll see that itself is a separate node, which makes it really easy to find, and you'll find that the text itself is in a <em class="diffX"></em> node. where X is a number between 0 and 6. 0 is for challenges which have a 100% chance of success, 6 is for challenges which have a 0% chance of success (or close enough to it), and the other numbers are for basically everything in between.

I don't know the actual breakpoints of the other numbers though, so I can't give you exact details. I just go with vibes, tbh.

Part 7: All Manner Of Things (Being Put Together)

I noticed that this guide had reached 6 parts and since 7 is an important number in Fallen London, I might as well put one last part just as a victory lap. So, I'll show you how I go about making one of those from scratch.

Step 1: Find a storylet that has what I want.

For the purposes of this exercise, I will be recreating my Banded Sleuth Spouse opportunity card but with some changes so as to be more comprehensive to what we've learned.

In this case, I want three actions, one with a challenge, and two with requirements.

This is not what I'm looking for, but that's okay.

Step 2: The Disclaimer.

I do this first so I don't give myself the option to forget.

Delete every tab except Possessions.

Change the possessions text to the disclaimer text. I actually keep it in a .txt document for easy copy-pasting. Remember, the one I use is Fallen London is © 2013 & ™ Failbetter Games LTD: www.fallenlondon.com. This is unofficial fan work.

Step 3: The Image

Now I change the main storylet image and card border.

Card border changed from Card-Unspecialised to Card-Premium, and honeydetective.png changed to bandedsleuth.png. Opportunity Cards for spouses generally keep the Unspecialised one, but I'll stick with Premium for the sake of completeness.

Step 4: Title & Narrative

Now I change the title and the narrative text, remembering the little finnicky-ness of working with multi paragraph text.

Step 5: The Actions

There is only one action in the original storylet, and I want three, so I duplicate the existing one twice.

My idea for the first action on this Opportunity Card is that it gives you a random favor between Church, Bohemians, Society or Docks. However, since Fallen London only lets you have up to 7 favors of the same faction, this means that every Favor-Giving action has to be locked out if you already have 7. In truth, an action that gives random favors like this one wouldn't be locked out for the sake of convenience, it just wouldn't give you a favor if it rolled the one it was capped, however, for the sake of teaching, I will add the given requirements.

devilsmall.png on the first requirement changed to shipsmall.png to represent the docks, while chapposhsmall.png on the second requirement changed to bishopsmall.png to represent the Church.

This is not, however, the correct image for Church Favors, so I go on the wiki to figure out what the name actually is, and find that it's clergysmall.png

There we go. Now, duplicate the clergy requirement twice, and change the two new icons to salon2small.png (for Society Favours) and bohogirl1small.png (for Bohemians).

Now change the image, title and descriptive text of the first action.

gossip.png changed to magnifyingglass.png

Idea: Maybe my character already has capped Church and Docks Favours. They're both, after all, quite valuable, so stacking on sources of them is good. This means that I would fail the requirements for this action, and be unable to play it. This means that we now have to copy it as an unavailable action.

The three properties we talked about in Part 3 are here in full force. media--locked, icon--locked and disabled="". Remember that either option for the button works.

Problem: Every action that you cannot do in a storylet is always at the very bottom of your choices, regardless of where it would be otherwise. This one, however, is at the very top.

Simple fix, edit it as HTML, copy the whole text, delete the node, add the HTML after the node of the last action.

Done. Problem: Doing this means we deleted the original source of the tooltips, and effectively created new ones. We now cannot change the tooltips of any of the qualities here (because none of them have tooltips, as we cannot change any of them). Please do keep things like this in mind when making your edits. The correct option here, if we wanted to show the tooltip thing, would have been to put the added actions above the original action, rather than below.

However, one of the beauties of working with this format is that a lot can be inferred just from this. If you know Fallen London, you already know that actions which give favors are locked if you have more than 6 of them for a given faction, and you know what the icons for the favors of each faction looks like. A savvy player can absolutely tell what the failed requirements are just from a look.

Now let's work on the other actions.

Removed extraneous requirements from the first and second actions and fully changed the first one. Fallen London doesn't typically warn you when an action will lead to quirk changes, but again, sake of completion here.

I didn't specifically mention this before, but buttons can have their text changed just like anything else. This is also how you'd make "zero action" choices, or choices with custom text.

gossip.png becomes lipsblack.png. Title and description of the second action changes, and it gets informative text.

Finally, devilsmall.png changes to sidebarwoundssmall.png, for the action's singular requirement. The wounds requirement implies something about the action, and it shouldn't really be that hard to guess what it is.

Makes sense that the option to help someone with a detective case would involve a challenge, so I went and grabbed one from another tab. However, it likely shouldn't be Dangerous: Watchful is more like it.

bearsmall.png changes to owlsmall.png, and the text now calls out that it's a Watchful challenge, rather than a Dangerous challenge. Since the original challenge I grabbed had a 100% chance, there is no Second Chance option on the right, so any other edits would not be accurate to the game.

And this is the final version of the Storylet, if I was going for 100% accuracy with how Fallen London does things. All I did was remove the quirk-related descriptive text from the first two actions and change the card border to Unspecialised.

Indistinguishable from a real storylet.

Conclusion

Now you have everything you need to make Fallen London mockups!

If you have any questions, please send me an Ask or leave it down in the comments! I'm always happy to answer questions.

Now go be wild and let your imaginations fly, Delicious Friends!

1. The last official statement I remember puts the total word count above every single work made by J.R.R Tolkien combined, and this was from before the 2020 content boon, and reportedly about 30% of the game's word count comes from content released after that period.

2. Anecdote time! When the second set of Mysteries happened, one of the questions asked was "What is the Great Game played for?", and the vast majority of the playerbase was blindsided when the answers were posted and the correct answer was "the secret currencies of the Bazaar". This is despite the fact that the game explicitly spells this out unambiguously at one point. However, because that option is in direct opposition to a mechanically much better option, on weekly-limited content that back at the time was not very popular for various reasons, no one had seen that text in literal years, so almost everyone got it wrong.