Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Additional Tags:
Language:
English
Series:
Part 3 of #ao3_work_skins
Collections:
Fanfiction Reference Works, A Guide to Coding and Fanworks, Ao3 Skins, AO3 & Coding Layouts & Creative References, html guides save me html guides if you can hear me html guides
Stats:
Published:
2022-12-31
Completed:
2022-12-31
Words:
2,940
Chapters:
2/2
Comments:
10
Kudos:
54
Bookmarks:
28
Hits:
3,509

Dialogue workskin (with Parallax BG effect)

Summary:

quick html / css reference to writing in-person "chats" or "skits" for your html fic , while styling the skit in a way that might fit in with your html / chat fic.

(documenting how i did the skin for a particular fic, and a useful html guide overall)

this is "generic", but css could be customized to fit any fandom / video game etc.
for skits, think: tales of series, fire emblem, cookie run kingdom, etc

Notes:

Chapter 1: css dump

Notes:

in your profile, go to Skins, Create Site Skin, 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

html template and explanation are in the next ch, so that you can copy paste this css and follow along

Chapter Text

.convo-container {
display: table;
padding: 10px;
min-width: 300px;
max-width: 416px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
font-family: sans-serif;
font-size: 13px;
background-color: green;
}
p.convo-break {
display: flex;
width: 100%;
margin: 0;
}
p.convo-pad {
display: flex;
width: 100%;
margin: 24em auto;
}
.gz {
background: url("https://i.imgur.com/ig6AvJU.png") no-repeat center center fixed;
background-size: cover;
}
.gz2 {
background: url("https://i.imgur.com/Ys1XcUY.png") repeat center center scroll;
background-size: contain;
background-attachment: fixed;
}
.center {
text-align: center;
font-size: 20px;
}
.padding-up {
padding-top: 3.5em;
}
/* left aligned icon and dia */
.convo-left {
min-height: 80px;
float: left;
display: flex;
}
.convo-left > p > .dia::after {
content: '';
border: 10px solid transparent;
border-right-color: #8f8e8f;
border-left: 0;
position: absolute;
left: -10px;
top: 50%;
margin-top: -10px;
}
/* .convo-left > p:nth-child(1) {
margin-top: 50%;
} */
.convo-left > p > .convo-icon {
max-width: 80px;
max-height: 80px;
min-width: 80px;
margin-right: 10px;
/* top: 50%; */
}
/* right aligned icon and dia */
.convo-right {
float: right;
min-height: 80px;
display: flex;
margin-left: auto;
}
/* .convo-right > p > .dia {
text-align: right;
} */
/* .convo-right > p:nth-child(2) {
margin-top: 50%;
} */
.convo-right > p > .dia::after {
content: '';
border: 10px solid transparent;
border-left-color: #8f8e8f;
border-right: 0;
position: absolute;
right: -10px;
top: 50%;
margin-top: -10px;
}
.convo-right > p > .convo-icon {
max-width: 80px;
max-height: 80px;
min-width: 80px;
margin-left: 10px;
}
.convo-icon {
max-width: 80px;
min-width: 80px;
margin: auto;
height: auto;
}
/* center the dialogue box */
.convo-left > p:nth-child(1), .convo-right > p:nth-child(2) {
margin: auto;
}
.dia {
position: relative;
display: inline-block;
text-align: left;
border: 2px solid #8f8e8f;
border-radius: 10px;
max-width: 470px;
padding: 10px;
margin-top: 3%;
margin-bottom: 3%;
height: auto;
z-index: 5;
}
.dia-desc {
position: relative;
text-align: center;
border: 2px solid #8f8e8f;
border-radius: 10px;
max-width: 100px;
padding: 10px;
margin: 3% auto;
}
.dia-desc > p {
margin: 0;
}
.white {
background-color: white !important;
color: black !important;
}
.black {
background-color: black !important;
color: white !important;
}
/* ------------------------------------ thought bubbles ------------------------------------*/
/* thought bubbles */
.dia-thinking:before,
.dia-thinking:after {
content: "";
position: absolute;
border-radius: 100%;
background: white;
border: none;
}
.convo-left > p > .dia-thinking:before {
bottom: 0.5em;
left: -1.5em;
width: 1em;
top: 40%;
height: 1em;
border: #8f8e8f;
border-bottom-style: solid;
border-left-style: solid;
border-top-style: solid;
border-width: thin;
border-style: single;
}
.convo-left > p > .dia-thinking:after {
bottom: 0.4em;
left: -1em;
top: 35%;
width: 1.5em;
height: 1.5em;
border: #8f8e8f;
border-bottom-style: solid;
border-top-style: solid;
border-width: thin;
}
.convo-right > p > .dia-thinking:before {
bottom: 0.5em;
right: -1.5em;
width: 1em;
top: 40%;
height: 1em;
border: #8f8e8f;
border-bottom-style: solid;
border-left-style: solid;
border-top-style: solid;
border-width: thin;
border-style: single;
}
.convo-right > p > .dia-thinking:after {
bottom: 0.4em;
right: -1em;
top: 35%;
width: 1.5em;
height: 1.5em;
border: #8f8e8f;
border-bottom-style: solid;
border-top-style: solid;
border-width: thin;
}
.dia-thinking {
position: relative;
display: inline-block;
text-align: left;
border: 2px solid #8f8e8f;
border-radius: 10px;
max-width: 470px;
padding: 10px;
margin-top: 3%;
margin-bottom: 3%;
height: auto;
}
.thinking-small:after, .thinking-small:before {
content: ''
}
.convo-left .thinking-small:after {
left: -.5em !important;
/* top: 31% !important; */
width: 1em !important;
height: 1em !important;
}
.convo-left .thinking-small:before {
left: -1em !important;
width: 0.5em !important;
top: 40% !important;
height: 0.5em !important;
}
 
.convo-right .thinking-small:after {
right: -0.75em !important;
/* left: -.5em !important; */
/* top: 31% !important; */
width: 1em !important;
height: 1em !important;
}
.convo-right .thinking-small:before {
/* left: -1em !important; */
 
right: -1.1em !important;
width: 0.5em !important;
top: 40% !important;
height: 0.5em !important;
}
/* ------------------------------------end thought bubbles------------------------------------*/



 /* ------------------------------------ offline look ------------------------------------*/

.hide {
display: none;
}

.bg-convo-icon {
width: 80px;
height: 80px;
background-size: contain;
background-repeat: no-repeat;
padding-right: 10px;
}

.bg-flex-p {
display: flex;
}

.bg-dia-span {
display: block;
margin: auto;
}

.danny-1 {
background-image: url(https://i.imgur.com/3EsrGVC.png);
}