Create AO3-compatible text message screenshots for your fanfiction
Message Editor
Conversation Settings
Messages (0)
Preview
No messages yet. Add some messages to see the preview!
Generated AO3 Code
×
HTML Code
CSS Code (for AO3 Work Skin)
How to use on AO3:
Go to Dashboard → Skins → Create Work Skin
Give your skin a title (e.g., "Text Message Skin")
Paste the CSS Code into the CSS field
Click Submit to save the skin
When posting/editing your work, go to the Associations section
Select your work skin from the Select Work Skin dropdown
In the work text editor, click the HTML button (not Rich Text)
Paste the HTML Code where you want the messages to appear
Note: This format follows the standard AO3 text message format with message tails. The CSS uses #workskin selectors which only work within AO3 Work Skins.