Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Language:
English
Collections:
A Guide to Coding and Fanworks, Fanfiction Reference Works, HTML & CSS stuffs, AO3 Social Media AU Work Skins
Stats:
Published:
2021-06-19
Completed:
2021-06-20
Words:
471
Chapters:
2/2
Comments:
7
Kudos:
97
Bookmarks:
69
Hits:
5,676

Twitter Mock-Up (Heavily Inspired by aerynevenstar's work)

Summary:

This is me trying out aerynevenstar's workskin for the tweet format. So big thanks to them!
I also end up tweeking a bit of the CSS to fit my personal preferences.

Notes:

Chapter 1

Chapter Text

Sample Tweet ft. Kamado Nezuko from Kimetsu no Yaiba

ChocoPan4Everyone 🍫🥯
@kamadonezuko
@kamadotanjiro Uwah~ ヾ(•ω•`)o 💕💝💖 5:26 PM - 6 June 2019 10k 1.1k

Chapter 2

Notes:

(See the end of the chapter for notes.)

Chapter Text

Here's the CSS

#workskin .tw {
  max-width: 300px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: table;
  margin: auto;
}

#workskin .twBody {
  overflow: hidden;
  background-color: #ffffff;
  border-style: solid;
  border-width: .1em;
  border-color: #dddddd;
  border-radius: .3em;
  float: left;
  min-width: 100%;
  position: relative;
  padding: 1em;
  margin-left: -1em;
}

#workskin .twImage {
  width: 111%;
  height: auto;
  border-radius: .5em;
  margin: .2em 1em .2em 0em;
}

#workskin .twAvatar {
  width: 45px;
  height: auto;
  float: left;
  margin: 0em 0.3em .3em 0em;
  border-radius: 50%;
}

#workskin .twIcon {
  width: 17px;
  height: auto;
}

#workskin .twFollow {
  position: relative;
  top: -1.4em;
  width: 17px;
  height: auto;
  display: inline-block;
  float: right;
  color: #5EA9DD;
}

#workskin .twReplyIcon {
  width: 17px;
  height: auto;
}

#workskin .twRetweetIcon {
  width: 22px;
  height: auto;
  margin-right: .1em;
}

#workskin .twHeartIcon {
  width: 13px;
  height: auto;
  margin-right: .1em;
}

#workskin .twUserName {
  position: relative;
  top: -.2em;
  font-size: 16px;
  font-weight: 500;
  color: #101010;
}

#workskin .twUserHandle {
  position: relative;
  top: -.5em;
  font-size: 13px;
  font-weight: 300;
  color: #697882;
}

#workskin .twText {
  display: inline-block;
  color: #101010;
}

#workskin .twTimeStamp {
  display: inline-block;
  font-size: 14px;
  width: 100%;
  font-weight: 300;
  color: #697882;
  padding: .5em 0em .5em 0em;
}

#workskin .twRetweet {
  font-size: 14px;
  color: #697882;
  margin: 1em 1em 1em 1em;
}

#workskin .twLike {
  font-size: 14px;
  color: #697882;
}

#workskin .twLink {
  color: #2C7BB8;
  text-decoration: none;
}


Here's the HTML

<div class="tw">
<p class="twBody">
<span>
<img class="twAvatar" src="[Insert the link to the Twitter avatar picture]" />
</span>
<span class="twUser"></span>
<span class="twUserName">
<strong>[Insert a Twitter username] </strong>
</span>
<img class="twIcon" src="http://imgur.com/eVQzzhT.png" /><br /> ← Optional; Can delete this line
<span class="twUserHandle">
[Insert a Twitter user handle]
</span>
<img class="twFollow" src="http://imgur.com/p6lbN22.png" /><br />  ← Optional; Can delete this line
<img class="twImage" src="[Insert the link to a picture that you would upload on tweet]" /> ← Optional; Can delete this line
<span class="twText">
<a class="twLink" rel="nofollow">[Insert a Twitter user handle you're replying to]</a>  ← Optional; Can delete this line
[Insert text for tweet]
</span>
<span class="twTimeStamp">
[Hour]:[Minute] [AM/PM] - [Day] [Month] [Year]
</span>
<span></span>
<img class="twReplyIcon" src="http://imgur.com/9dwkilY.png" />
<span class="twRetweet">
<img class="twRetweetIcon" src="http://imgur.com/ToOoCJz.png" /> ← *[1 Take a look at the links]
[Number of Retweet(/s)]
</span>
<span class="twLike">
<img class="twHeartIcon" src="http://imgur.com/67stmhs.png" /> ← *[2 Take a look at the links]
[Number of Likes(/s)]
</span>
</p>
</div>

Links for Twitter Icons
Verified Icon (or twIcon) = http://imgur.com/eVQzzhT.png
Follow Icon = http://imgur.com/p6lbN22.png
Reply Icon = http://imgur.com/9dwkilY.png
1Retweet Icon = (green) https://i.imgur.com/tDQ2y8H.png; (grey) http://imgur.com/ToOoCJz.png [return to text]
2Like Icon = (red) https://i.imgur.com/vYvRDsj.png; (grey) http://imgur.com/67stmhs.png [return to text]

Notes:

If anyone has any questions/criticisms, please feel free to give feedback! ^-^