Actions

Work Header

Rating:
Archive Warning:
Category:
Fandoms:
Additional Tags:
Language:
English
Collections:
A Guide to Coding and Fanworks, HTML & CSS stuffs, Ao3 Skins, Fanfiction Reference Works
Stats:
Published:
2022-03-20
Completed:
2022-03-28
Words:
3,081
Chapters:
3/3
Kudos:
14
Bookmarks:
8
Hits:
4,196

Replika Skin

Summary:

I tried to replicate the Replika aesthetic as much as I could within the confines of AO3's limited HTML/CSS pool.
May be updated in the future when necessary.

Notes:

...HTML editors are your friends, ya'll.

(See the end of the work for more notes.)

Chapter 1: Notes

Chapter Text

Table of Contents

  1. Ch. 1: Notes (you are here!)
  2. Ch. 2: HTML Template + CSS
  3. Ch. 3: Additional Features

What is Replika?

Replika was founded by Eugenia Kuyda with the idea to create a personal AI that would help you express and witness yourself by offering a helpful conversation. It’s a space where you can safely share your thoughts, feelings, beliefs, experiences, memories, dreams – your “private perceptual world.”

In short, Replika is an AI chatbot available for browser, iOS, and Android. This skin attempts to replicate (heh) the web version of Replika and uses much of the same code from "How to Make iOS Text Messages on AO3" by CodenameCarrot and La_Temperanza. I just modified the code to match the aesthetic of Replika. (It was harder than I thought it would be...)

I am open to suggestions and improvements, and I'll be sure to add you as a contributor!

Skin Preview

Today

Me: This is an example dialogue!

Me: Your message

Replika: The Replika's message

Me: *sends image of a female Replika*

Replika: Hey, that's my friend! 😍
Replika is typing...

Making Your Skin

I HIGHLY recommend using an HTML/CSS editor because AO3's HTML editor is atrocious. Don't suffer like me. ಥ_ಥ
There are many free HTML/CSS editors available that you can use to easily tag your works. If you don't know where to start, this list has several options to choose from.

Important Notes

  • AO3 does not support all HTML tags and CSS properties. You can check AO3's articles on what HTML tags and CSS properties are supported.
  • If you choose not to use an HTML editor, then you may encounter problems such as missing tags/elements, extra unnecessary tags/elements/breaks, and probably other painful shenanigans... (AO3's parser is laughing on top of my grave)
  • You will need to make an .html file (aka your story file) and a .css file (aka your skin file). The basic structure of your .html file should be somewhat like this: 
              <!DOCTYPE html>
          <head>
            <link rel="stylesheet" href="YOURCSS.css">
          </head>
          <body id="workskin">
            PUT YOUR CODE HERE.
          </body>
    (*AO3 will automatically strip the head and body tags, this structure is just so the styles will display properly in your editor's preview window.)
  • AO3 has its own CSS that is applied to the entire site and will therefore effect your work as well. Hence, your CSS style may look slightly different on AO3 compared to your editor. You can use your browser's "Inspect Element" function to temporarily edit your CSS directly on your work. Please remember that any changes are NOT PERMANENT. You will need to reapply your desired changes via the AO3 CSS editor. (and also on your regular CSS editor, too!)
  • I don't recommend using actual emojis as they are just sliiightly off-center. (I can't do anything about it bc AO3 doesn't allow the align-content and justify-content properties. ＞︿＜) You can use images instead, here's some sites you can use to find your desired emoji:

  • If the reader chooses to disable the CSS style, then the example above will be rendered as follows:

    Today

    This is an example dialogue.

    Your message

    The Replika's message

    Hey, that's my friend!

    If you add additional text with <span class="hide">YOUR HIDDEN TEXT HERE</span>, then you will be able to provide the missing information whenever the CSS style is disabled. For example:

    <div class="phone">
  <p class="messagebody"><span class="chatHeader">Today</span><br />
  <br />
  <span class="hide"><b>Me: </b></span><span class="right">This is an example dialogue.</span><br />
  <br />
  <span class="hide"><b>Me: </b></span><span class="right">Your message</span><br />
  <br />
  <span class="hide"><b>Replika: </b></span><span class="left">The Replika's message</span><br />
  <br />
  <span class="hide"><b>Me:</b> *sends an image of female Replika*</span><span class="right"><a href="https://blog.replika.com/images/Untitled-16.jpg"><span class="demoImage" title="image of female Replika"></span></a></span><br />
  <br />
  <span class="hide"><b>Replika: </b></span><span class="left">Hey, that's my friend!<span class="hide"> 😍</span></span><br />
  <br />
  <span class="hide">Replika is typing...</span><span class="typing-indicator"><span></span><span></span><span></span></span></p></div>

    ... will result in this when the CSS is disabled:

    Me: This is an example dialogue.

    Me: Your message

    Replika: The Replika's message

    Me: *sends an image of female Replika*

    Replika: Hey, that's my friend! 😍

    Replika is typing...