Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Collections:
Fanfiction Reference Works
Stats:
Published:
2021-08-31
Completed:
2021-08-31
Words:
874
Chapters:
4/4
Comments:
3
Kudos:
90
Bookmarks:
60
Hits:
2,768

Reddit Work Skin CSS & HTML

Summary:

AO3 work skin CSS & HTML formatting for imitating reddit in a work. CSS is my own and not copied from somewhere else. Feel free to use as you wish.

Chapter 1: The CSS

Chapter Text

#workskin .reddit {
  font-family: "Arial";
}

#workskin .postscore {
  display: inline-block;
  color: #969698;
  text-decoration: bold;
  font-size: 13px;
  text-align: center;
  float: left;
}

#workskin .posttitle {
  color: #287FD0;
  font-size: 20px;
  margin-top: 0px;
  margin-bottom: -10px;
  margin-left: 40px;
}

#workskin .self {
  color: #969698;
  font-size: 12px;
}

#workskin .timestampOP {
  color: #969698;
  font-size: 12px;
  margin-left: 40px;
}

#workskin .usernameOPtitle {
  color: #287FD0;
  font-size: 12px;
}

#workskin .postOP {
  color: #222246;
  background-color: #FAFAFC;
  border-color: #366797;
  border-style: solid;
  border-width: 1px;
  border-radius: 6px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: -8px;
  margin-left: 40px;
}

#workskin .commentcount {
  font-size: 12px;
  font-weight: bold;
  color: #888888;
  margin-top: -15px;
  margin-left: 40px;
}

#workskin .commentcount:after {
  content: "    share    save    hide    report";
}

#workskin .username {
  font-weight: bold;
  color: #366797;
  font-size: 14px;
  margin: 5px;
  margin-top: 10px;
}

#workskin .username:before {
  font-weight: normal;
  font-size: 12px;
  content: "[ - ] ";
  margin-top: 5px;
}

#workskin .usernameOPcomments {
  background-color: #0E5ADC;
  color: #ffffff;
  font-size: 14px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 0px;
  padding-top: 0px;
  font-weight: bold;
  float: left;
  margin-left: 5px;
  margin-top: 20px;
}

#workskin .usernameOPcomments:before {
  font-weight: normal;
  font-size: 12px;
  content: "[ - ] ";
}

#workskin .usernamemod {
  background-color: #288728;
  color: #ffffff;
  font-size: 14px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 0px;
  padding-top: 0px;
  font-weight: bold;
  float: left;
  margin-left: 5px;
  margin-top: 20px;
}

#workskin .usernamemod:before {
  font-weight: normal;
  font-size: 12px;
  content: "[ - ] ";
}

#workskin .commentscore {
  font-weight: bold;
  color: #333333;
  font-size: 12px;
  background-color: none;
}

#workskin .commentscore:before {
  content: "  ";
  white-space: pre-wrap;
  background-color: none;
}

#workskin .timestamp {
  color: #969698;
  font-size: 12px;
  font-weight: normal;
  white-space: normal;
}

#workskin .commentA {
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  border-color: #E6E6E6;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
}

#workskin .commentB {
  background-color: #F8F8F8;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  border-color: #E6E6E6;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
}

#workskin .commentbody {
  color: #222222;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 0px;
  font-weight: normal;
  font-size: 15px;
  margin-top: 0px;

margin-left: 10px;
}

#workskin .commentbody:after {
  content: " permalink    save    report    reply";
  color: #888888;
  font-size: 12px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 3px;
}