#coding help

🛠️ How to Add These Codes

It is completely safe! If you don't like the result, you can just delete the code and your theme returns to normal.

Go to your blog and click Edit Appearance (the palette icon).

Click Edit Theme.

Scroll down the sidebar and look for "Advanced Options" or "Add Custom CSS". You may also put this under your <style> tag.

Paste ONE of the codes below into that box.

The Design Collection

01. Soft Corners

If your theme feels too "sharp," this softens the edges of every image.

img { border-radius: 30px; }

02. The Noir (B&W Reveal)

A classic look. Images are black & white until you hover over them.

img { filter: grayscale(100%); transition: 0.6s ease; } img:hover { filter: grayscale(0%); }

03. Ethereal (Fade In)

Images are slightly faded and transparent, blending into your background, until you look at them.

img { opacity: 0.6; transition: 0.6s ease; } img:hover { opacity: 1; }

04. Levitate (3D Lift)

Makes your blog feel tactile. Images float upwards when hovered.

img { transition: 0.4s ease; } img:hover { transform: translateY(-10px); }

05. The Vintage

Applies a warm, sepia-toned filter for that old-school aesthetic.

img { filter: sepia(50%) contrast(0.9); transition: 0.5s ease; } img:hover { filter: sepia(0%) contrast(1); }

06. The Mystery (Blur)

Great for text-heavy blogs. Images are out of focus until you want to see them.

img { filter: blur(4px); transition: 0.8s ease; } img:hover { filter: blur(0px); }

07. The Spotlight

Dims your images so your content pops, but lights them up when selected.

img { filter: brightness(80%); transition: 0.5s ease; } img:hover { filter: brightness(110%); }

08. The Zoom

A high-end fashion editorial look. The image subtly grows closer.

img { transition: 0.6s ease; } img:hover { transform: scale(1.05); }

09. The Cameo (Circle)

Automatically crops your square images into perfect circles with a cute border.

img { border-radius: 50%; border: 3px solid #ff99ac; transition: 0.5s ease; } img:hover { transform: rotate(10deg); }

10. The Snapshot (Polaroid)

Adds a white border and a casual tilt, like photos scattered on a desk.

img { border: 10px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: 0.4s ease; } img:hover { transform: rotate(-3deg) scale(1.03); }

11. The Pulse

A cute interaction. The image shrinks slightly, like a heartbeat or a button press.

img { transition: 0.5s ease; } img:hover { transform: scale(0.95); opacity: 0.8; }

12. The Candy (Vibrant)

Makes your colors super bright and saturated when hovered!

img { filter: saturate(100%); transition: 0.5s ease; } img:hover { filter: saturate(180%); border-radius: 50px; }

💡 Quick Tips

Don't paste them all! Pick just one effect for the best result.

Customize: You can change the numbers! For example, change 0.6s to 1s for a slower movement, or 30px to 10px for less rounded corners.

Happy editing! Let me know which one is your favorite! 💖

Dragging and dropping text

This method works under the following conditions:

The dialogue is a single unbroken line (no line breaks).

There is at least one SakuraScript tag within it.

Basically, it works for dialogues that look like this:

\0\s[0]This is a test dialogue.\w8\w8\1\s[10]Neat!

Simply click and drag to highlight that dialogue, and drop it on the ghost that you want to play it!

This method is really handy for quick and easy stuff, and it also works with the SakuraScript examples on Ukadoc's SakuraScript list! It does have some limitations, for example it doesn't work when I try to drag and drop text from Tumblr's post editor. But if you're doing it from a text editor or plain text on a website like Ukadoc, it should work!

Note: for YAYA specifically, if you're using an English template, you almost certainly have a snippet of code that will run embedded elements for you! That means you can test dialogue with %(these) and see the expected result, usually.

Other than that, SHIORI-specific syntax will generally not work with this method, including string interpolation ( ${these} in Kawari, {these} in Aosora, etc. ). It may be possible in some cases to get it working, but I am not currently aware of methods to do so outside of YAYA!

Script input

Similar to the above, but more helpful in some circumstances.

This method works under the following conditions:

The dialogue is a single unbroken line (no line breaks).

You can open script input by clicking your ghost and pressing Ctrl + S. Or, you can open the developer palette (in the Utilities section of the right click menu, or by pressing Ctrl + Shift + D), and open script input from there.

Script input looks like this with SSP's default balloon:

Once you have it open, either type a script into it, or copy and paste a script from elsewhere. Then click OK or press enter, and the script will play!

This method is super handy because you can quickly tweak the dialogue in the script input box and see the changes with just one click.

A couple of notes for YAYA specifically:

As above, string interpolation ( %(these) ) will work here if you have the setup for it.

Script input always inserts a \e tag after the end of dialogue. This can interfere with YAYA's syntax for starting chains. If you want to start a chain dialogue, you'll need to use the next method instead.

Running a test event

This method can test absolutely anything because it is simply the same as making a ghost in general. But in this case, we'll set it up for testing purposes.

The key thing to know here is that for any ghost, in any SHIORI, you can define arbitrary SHIORI events as you see fit. Then, you can call those SHIORI events by any method you like, such as the \![raise] tag.

For example, let's say we have a YAYA dialogue like this:

"I'm currently feeling " -- "red" "green" "blue"

We can't test this in script input since it's spread across multiple lines. However, we can easily put it into a SHIORI event and then call that event. For this to work, the event's name must start with On (which is what makes it callable as a SHIORI event).

OnTest { "I'm currently feeling " -- "red" "green" "blue" }

Now all we need to do is save the file and reload the ghost, run the tag \![raise,OnTest] in script input, and we should see the dialogue play.

You can use this to test practically anything. In fact, if you just want to test the dialogue in a specific event (user-made or otherwise), you can call that event directly! This is mainly useful for things other than RandomTalk, stuff that only has a few dialogues. For example, I can use \![raise,OnBoot] to run OnBoot with no references.

If you need to test events and send dummy data to test specific conditions, you can just write a raise tag and put the reference data into it. For example, this tag will run the email checking event with reference0 set to 50, which in this case would make it think there are 50 emails: \![raise,OnBIFFComplete,50]

Testing optimization

I do want to quickly mention some optimizations you can do that make testing easier. For example, you may notice that the 3rd method listed above is basically the same as the "test variable" that some English ghost templates come with. Indeed, that is just an arbitrary function for you to test code and dialogue in! (The "variable" in the name doesn't strictly have anything to do with variables, it is entirely arbitrary.)

So of course, if you want, you can put your test event into your ghost's menu so that you don't need to use the raise tag. It will work just the same. For example, I can call the event OnTest with the menu choice \q[Test,OnTest], and I can do the same email test event as before with \q[Email demo,OnBIFFComplete,50]. The key thing to realize here is that you can call SHIORI events at will, and put whatever you want in them!

Debug mode

Something else that you might want to do is hide these tester menu options from users. There's a very simple way to do that! In the developer palette there is a check box for Enable SHIORI debug mode. You can set up your ghost to change behavior based on this.

In YAYA, the code for this is already handled for you, and you can simply write a check using SHIORI3FW.DebugMode in any menu (or other function that you want):

if SHIORI3FW.DebugMode { "\q[Test,OnTest]" }

This if check will only be true if that check box is ticked! This makes it easy to set up debugging tools and information without needing to worry about removing it later.

You can use this with other SHIORI as well, but you may need to set up the code yourself. The event you'll need is enable_debug.

Reloading methods

Another thing worth mentioning is the method you use to reload, since this significantly impacts how quickly you can test dialogue. Quicker reloads mean much faster development!

The quickest way to reload for testing dialogue is to reload just the SHIORI from the dev palette. Just open the dev palette, click Reload…, and then select SHIORI. This reloads everything controlled by the SHIORI, which for our purposes means the dictionary files that you write dialogue and code in. This does not reload the shell, which saves time!

If you click Reload… and then Ghost, it will reload every part of the ghost, but without prompting any dialogue. This is a fast way to reload if you need to reload both shell and dialogue/code.

You can also reload by right clicking the ghost, going to the Utilities submenu, and selecting Reload ghost. This will make the ghost play its close dialogue, then reload, then play its opening dialogue.

This is slow, but you can also set custom dialogue for reloading here if you enjoy that kind of interaction with your ghost. If you don't set custom reload dialogue, then this is also a really useful way to test your open and close dialogues.

Finally, you can also effectively reload by completely closing SSP and opening it again. This isn't a method I would recommend using for general-purpose reloading, however, if SSP is behaving very strangely it is probably a good idea to try this. Occasionally developers have had problems that require an SSP restart (or even a full computer restart!) to resolve, so it's worth keeping in mind.

Hotkeys

Hotkeys can also make testing a lot faster! For example, you can set up a hotkey to reload your ghost, and another hotkey to run your test function. Here's an example of a setup in YAYA:

OnKeyPress { if SHIORI3FW.DebugMode //Only use these hotkeys if debug mode is enabled { if reference0 == "f5" //Reload when F5 is pressed { "\![reload,shiori]" } elseif reference0 == "v" //Run test event when V is pressed { "\![raise,OnTest]" } } }

There are multiple reload tags listed on Ukadoc, so you can use hotkeys to reload things other than just the SHIORI if you like!

It takes a little bit of effort up front to make a setup like this, but once you have it set up then it pays off by letting you test things much more efficiently.

SHIORI-specific methods

There are a couple of SHIORI-specific methods that it may be worth mentioning as well.

If you use the SHIORI Aosora and the text editor VSCode, you can use Aosora's VSCode extension to send dialogues straight to the ghost. As far as I am aware this has some limitations and only works with stuff that's relatively straightforward, but it seems very useful! If you happen to be using Aosora and VSCode, definitely give it a try.

Similarly, the SHIORI Satori has the tools such as Satolist, which I believe can be used to send dialogues to ghosts directly for testing. I'm not exactly sure on the specifics here (I might have the wrong program), and there are very few English ghosts this would be applicable to, but it is mainly to illustrate that these things are possible!