Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Series:
Part 2 of #ao3_work_skins
Collections:
A Guide to Coding and Fanworks, Ao3 Skins, ao3 (kenmasimp), Fanfiction Reference Works, AO3 & Coding Layouts & Creative References, html guides save me html guides if you can hear me html guides
Stats:
Published:
2020-11-27
Completed:
2020-11-27
Words:
321
Chapters:
2/2
Comments:
3
Kudos:
42
Bookmarks:
26
Hits:
5,558

Zoom inspired AO3 skin

Summary:

are your characters stuck in quarantine and attending online zoom classes??? here's a really simple skin for that

Notes:

in your profile, go to Skins, Create Site Skin (or even update an existing one), then copy paste this css and name it whatever you want.
when you want to use this skin in a fic, you would pick it from the Select Work Skin dropdown

this ch has the CSS and next ch has the html mockups

Chapter 1: CSS

Chapter Text

.zoom-chatbox {
  max-width: 300px;
  border: .02em solid #dddddd;
  margin-left: auto;
  background-color: whtie;
  margin-right: auto;
}

.zoom-title {
  line-height: 1em;
  margin: 0em;
  text-align: center;
  font-weight: bold;
  font-family: "Arial Black", Gadget, sans-serif;
  background-color: #dddddd;
  margin-bottom: 0.5em;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
}

.zoom-content {
  padding-left: 0.5em;
  padding-bottom: 0.5em;
}

.zoom-from {
  padding-top: 0.8em;
  font-size: small;
  color: rgb(140,140,140);
  font-family: Tahoma, Geneva, sans-serif;
}

.zoom-msg {
  font-size: 13.5px;
  font-family: Tahoma, Geneva, sans-serif;
}

.zoom-private {
  color: red !important;
  font-family: inherit;
}

.zoom-public {
  color: blue !important;
}

.zoom-enter-box {
  height: 15px;
  border-top: .02em solid #dddddd;
  margin-top: 1.5em;
  margin-right: 0em;
  margin-left: 0em;
}

Chapter 2: html mockup

Summary:

disclaimer: i have used zoom a total of three (3) times in my life so I based this template off of google image search

Chapter Text

using ficbit from tired quaranteens as an example that shows all the css classes being used 

 

 

<div class="zoom-chatbox">

    <p class="zoom-title">

        Zoom Webinar Chat <br> 

        Lancer's English Literature class

    </p>

    <p class="zoom-content">

        <p class="zoom-from">

            From Lancer to <span class="zoom-public">Everyone</span>

        </p>

        <p class="zoom-msg">I'll have you all know that I can read all conversations on Zoom.</p>

        <p class="zoom-msg">Even private dms you send to each other.</p>

        <p class="zoom-msg">If you wish for your messages to be private, please use some other texting service aside from Zoom.</p>

        <p class="zoom-msg">That is all, class.</p>


        <p class="zoom-from">

            From Dash Baxter to <span class="zoom-private">Kwan (privately)</span>

        </p>

        <p class="zoom-msg"> Phantom's the imposter!</p>

        <p class="zoom-msg">*Fenton</p>

        

    </p>

    <p class="zoom-enter-box">&nbsp;</p>

</div>

 

 

Zoom Webinar Chat
Lancer's English Literature class

 

From Lancer to Everyone

I'll have you all know that I can read all conversations on Zoom.

Even private dms you send to each other.

If you wish for your messages to be private, please use some other texting service aside from Zoom.

That is all, class.

From Dash Baxter to Kwan (privately)

Phantom's the imposter!

*Fenton

 

kinda wish I added a right chevron to "zoom-enter-box" class but I was on a (self-imposed) time crunch and I might go back and add it later

 

 

Series this work belongs to: