diff --git a/README.md b/README.md index 302eb32..4e417e1 100644 --- a/README.md +++ b/README.md @@ -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 "``". + +**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. \ No newline at end of file diff --git a/example.html b/example.html deleted file mode 100644 index 8e270c9..0000000 --- a/example.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - -

Ruby

-
-
- -

This thing you did in CSS is really cool!

-

11:50pm

-
-
-
-
-
-

yeah. but it was pain. PAIN.

-

11:50pm

-
-
-
-

Yang

-
- -
- -

Come on. Don't tell me you got yangry alone in your computer.

-

11:50pm

-
-
-
-
-
-

I have no idea waht to write here.

-

11:50pm

-
-
-
-
-
-
-

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

-

11:50pm

-
-

✓✓Seen

- -
-
- diff --git a/example_for_HTML_CSS_users.html b/example_for_HTML_CSS_users.html new file mode 100644 index 0000000..d56c51a --- /dev/null +++ b/example_for_HTML_CSS_users.html @@ -0,0 +1,66 @@ + + + + + + + +

Alfa

+ +
+ +
+ +

This is an example

+ +

11:50pm

+
+
+ +
+
+
+

Cool! 😁

+

11:50pm

+
+
+
+

Beta

+
+
+

I'm another character!

+

11:50pm

+
+
+
+
+

And I'm sending multiple messages in a row

+

11:50pm

+
+
+
+
+

But only the first one has the little triangle, as it should!

+

11:50pm

+
+
+
+
+
+

This also works for whoever is replying.

+

11:50pm

+
+
+
+
+
+
+

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

+

11:50pm

+
+ +

✓✓Seen

+ +
+
+ diff --git a/example_for_writters.html b/example_for_writters.html new file mode 100644 index 0000000..c902122 --- /dev/null +++ b/example_for_writters.html @@ -0,0 +1,75 @@ + + + + + + + +

Alfa

+ +
+ +
+ +

This is an example

+ +

11:50pm

+
+
+ + +
+
+ +
+ +

Cool! 😁

+ +

11:50pm

+
+
+
+ +

Beta

+
+
+

I'm another character!

+

11:50pm

+
+
+
+ +
+

And I'm sending multiple messages in a row

+

11:50pm

+
+
+
+
+

But only the first one has the little triangle, as it should!

+

11:50pm

+
+
+
+
+
+

This also works for whoever is replying.

+

11:50pm

+
+
+
+
+
+
+

As you can see

+

11:50pm

+
+ +

✓✓Seen

+ + +
+
+ diff --git a/img/example_image.png b/img/example_image.png new file mode 100644 index 0000000..3aa98da Binary files /dev/null and b/img/example_image.png differ diff --git a/img/help1.png b/img/help1.png new file mode 100644 index 0000000..87e60f4 Binary files /dev/null and b/img/help1.png differ diff --git a/img/help2.png b/img/help2.png new file mode 100644 index 0000000..599bb70 Binary files /dev/null and b/img/help2.png differ diff --git a/main_chat_style.css b/main_chat_style.css index 9d67630..a8a8c1c 100644 --- a/main_chat_style.css +++ b/main_chat_style.css @@ -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; @@ -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; @@ -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 @@ -90,6 +97,7 @@ p{ font-size: 0.85em; color:#4b4b4b } +/*Read recipts*/ .status{ text-align: right; margin: 0; @@ -97,9 +105,10 @@ p{ } .check{ margin-right: 0.2em; - color:rgb(0, 191, 255); + } .seen.check{ letter-spacing: -4pt; margin-right: 0.45em; + color:rgb(0, 191, 255); }