Skip to content

Commit

Permalink
v1.0
Browse files Browse the repository at this point in the history 
First release.
  • Loading branch information
@Aura-Mancer
Aura-Mancer committed Oct 13, 2021
1 parent 7eb32fb commit 600bbf8
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 59 deletions.
28 changes: 28 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,30 @@
# chat-style-ao3-friendly
An easy to use chat Work Skin for AO3

(Please credit me in your notes.)

![Example image](img\example_image.png)

## Setup

1. Copy [the CSS file](main_chat_style.css) to a text file in your computer You can also download it and open it with a text editor. **(CAUTION: Word or GDocs is not recommended. Use Notepad or [Notepad++](https://notepad-plus-plus.org/downloads/v8.1.6/))**
2. Set the characters you want to use for the fic. On line 82, you can set the characters you want to use. You will see something like this.
```css
.name.character1{
color: #cb11f9;
```
Change, or add characters, by coping that block of code, changing "character1" with your character's name with a text editor. Then, you can give it a colour. After "colour:" you will see a [hex code](https://www.w3schools.com/html/html_colors_hex.asp). Replace it with the desired hex code.

3. After adding your characters, go to your ao3 profile (while logged in), and click on "Skins". Select "Work skins" and then "Create Work Skin"
![Help image](img/help1.png)
![Help image](img/help2.png)
4. Fill in the details, and on the text field titled "CSS", copy and paste the CSS file with your modifications. Make sure to copy **all of it**.
5. Enter the editing screen of the work you wish to use the skin on. After the language, you will see "Select Work Skin". Select the Work Skin you have created.
## Use
In the "Chapter Text" while editting your work, select HTML. In [the example for writters, (or for those not familiar with CSS)](example_for_writters.html), you will have an example on the HTML code, with "comments". These comments do not affect the code, and are simply there to help you understand it. They will start with "`<!--`" an end with "`-->`".

**If you are familiar with CSS**, [the example for HTML and CSS users](example_for_HTML_CSS_users.html) has comments more suited for people with your knowledge.

#### Possible upgrades:
[ ] Support for picture messages.
[ ] Small wiki with further explanations.
49 changes: 0 additions & 49 deletions example.html
View file

This file was deleted.

66 changes: 66 additions & 0 deletions example_for_HTML_CSS_users.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!--This is to use a CSS file in normal HTML. In ao3 you don't write this from here-->
<head>
<link rel="stylesheet" href="main_chat_style.css">
</head>
<!--to here-->
<body>
<!--Character name. Use the class name and any of your characters' created class.-->
<p class="name character1">Alfa</p>
<!--Every message bubble is wrapped in a "messagerow" to keep them from overlapping-->
<div class="messagerow">
<!--Use the first class to give it the "triangle" that messages at the beggining of a chain have-->
<div class="recieved first">
<!--Message text-->
<p>This is an example</p>
<!--Timestamp-->
<p class="timerecieved">11:50pm</p>
</div>
</div>
<!--Sent message-->
<div class="messagerow">
<div class="sent">
<div class="sentbubble first">
<p align="right" >Cool! 😁</p><!--The aligned attribute is used so in the event that the user disables the Work Skin, it would remain legible.-->
<p align="right" class="timesent" >11:50pm</p>
</div>
</div>
</div>
<p class="name character2">Beta</p>
<div class="messagerow">
<div class="recieved first">
<p>I'm another character!</p>
<p class="timerecieved">11:50pm</p>
</div>
</div>
<div class="messagerow">
<div class="recieved">
<p>And I'm sending multiple messages in a row</p>
<p class="timerecieved">11:50pm</p>
</div>
</div>
<div class="messagerow">
<div class="recieved">
<p>But only the first one has the little triangle, as it should!</p>
<p class="timerecieved">11:50pm</p>
</div>
</div>
<div class="messagerow">
<div class="sent">
<div class="sentbubble first">
<p align="right">This also works for whoever is replying.</p>
<p align="right" class="timesent">11:50pm</p>
</div>
</div>
</div>
<div class="messagerow">
<div class="sent">
<div class="sentbubble">
<p align="right">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p align="right" class="timesent">11:50pm</p>
</div>
<!--"Seen" and "Sent" texts.-->
<p class="status" align="right"><span class="check seen">✓✓</span>Seen</p>
<!--<p class="status" align="right"><span class="check">✓</span>Sent</p>-->
</div>
</div>
</body>
75 changes: 75 additions & 0 deletions example_for_writters.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!--This is to use a CSS file in normal HTML. In ao3 you don't write this from here-->
<head>
<link rel="stylesheet" href="main_chat_style.css">
</head>
<!--to here-->
<body>
<!--Character name. Replace "character1" with your own character class, and the "Alfa" with your character's name.-->
<p class="name character1">Alfa</p>
<!--From here-->
<div class="messagerow">
<!--Recieved message. in class, "recieved" makes it to be the recieved message. "first" makes it the first message in chain, giving it the "triangle"-->
<div class="recieved first">
<!--Message text-->
<p>This is an example</p>
<!--Timestamp-->
<p class="timerecieved">11:50pm</p>
</div>
</div>
<!--To here, you have a recieved text message. Copy all of this and change the text. To make your own messages.-->
<!--This is a sent message. Do the same.-->
<div class="messagerow">
<div class="sent">
<!--Again, the "first" makes the triangle appear.-->
<div class="sentbubble first">
<!--Message text-->
<p align="right">Cool! 😁<!--You can use emotes as well.--></p>
<!--Timestamp-->
<p align="right" class="timesent" >11:50pm</p>
</div>
</div>
</div>
<!--Sent message ends here.-->
<p class="name character2">Beta</p>
<div class="messagerow">
<div class="recieved first">
<p>I'm another character!</p>
<p class="timerecieved">11:50pm</p>
</div>
</div>
<div class="messagerow">
<!--The "first" is missing from the class="[]" so the triange doesen't appear.-->
<div class="recieved">
<p>And I'm sending multiple messages in a row</p>
<p class="timerecieved">11:50pm</p>
</div>
</div>
<div class="messagerow">
<div class="recieved">
<p>But only the first one has the little triangle, as it should!</p>
<p class="timerecieved">11:50pm</p>
</div>
</div>
<div class="messagerow">
<div class="sent">
<div class="sentbubble first">
<p align="right">This also works for whoever is replying.</p>
<p align="right" class="timesent">11:50pm</p>
</div>
</div>
</div>
<div class="messagerow">
<div class="sent">
<div class="sentbubble">
<p align="right">As you can see</p>
<p align="right" class="timesent">11:50pm</p>
</div>
<!--This is the "Seen" text. Just copy it from here-->
<p class="status" align="right"><span class="check seen">✓✓</span>Seen</p>
<!--This is the "Sent" text. It is commented, so it won't appear. Just copy it from here.-->
<!--
COPY THIS: <p class="status" align="right"><span class="check">✓</span>Sent</p>
-->
</div>
</div>
</body>
Binary file added img/example_image.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/help1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/help2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 19 additions & 10 deletions main_chat_style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@
p{
margin: 2pt 0;
}
/*This encloses the message so the messages don't overlap eachother*/
.messagerow{
width: 100%;
overflow: hidden;
margin-top: 0px;
}
.senttext, .recieved{
/*text bubbles*/
.sentbubble, .recieved{
padding: 10px;
margin: 3px 10px;
border-radius: 15px;
Expand All @@ -27,11 +29,11 @@ p{
background-color: #e5e5ea;
color:black;
border-radius: 1.15rem;
line-height: 1.25;
line-height: 1.25rem;
padding: 0.5rem .875rem;
}

.senttext.first:before{
/*Triangles of the chat bubbles*/
.sentbubble.first:before{
content: "";
height: 0px;
position: absolute;
Expand All @@ -57,31 +59,36 @@ p{
border-top: 15px solid #e5e5ea;
border-bottom: 15px solid transparent;
}
.senttext{
/*Sent bubble*/
.sentbubble{
text-align: right;
background-color:#248bf5;
color:white;
padding-right: 2.5vw;
}
.senttext > p, .recieved > p{
/* Text formatting for the text bubbles*/
.sentbubble > p, .recieved > p{
padding: 0.4vw;
margin: 0;
word-wrap: break-word;
}
/* Name formatting*/
.name{
font-weight: bold;
font-size: 1.1em;
margin: 10px 0px 0px 0px;
}
.name.blake{
/*Differnt contacts/characters colours. Add ".name.[Your character name all in lower case] like seen here, and use a hex code to determine the colour. You can get this codes here: https://www.google.com/search?q=hex+color+picker Other CSS formatting can be used as well.*/
.name.character1{
color: #cb11f9;
}
.name.yang{
.name.character2{
color: #f9c63a;
}
.name.ruby{
.name.character3{
color: #ff0000;
}
/*Timestamps*/
.timesent{
font-size: 0.85em;
color:#e6e6e6
Expand All @@ -90,16 +97,18 @@ p{
font-size: 0.85em;
color:#4b4b4b
}
/*Read recipts*/
.status{
text-align: right;
margin: 0;
margin-right: 1em;
}
.check{
margin-right: 0.2em;
color:rgb(0, 191, 255);

}
.seen.check{
letter-spacing: -4pt;
margin-right: 0.45em;
color:rgb(0, 191, 255);
}

0 comments on commit 600bbf8

Please sign in to comment.