Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Additional Tags:
Language:
English
Collections:
A Guide to Coding and Fanworks, Fanfiction Reference Works, AO3 Social Media AU Work Skins, Lyra's collection for bookmarks for ao3 references
Stats:
Published:
2020-10-02
Completed:
2024-08-06
Words:
2,746
Chapters:
3/3
Comments:
124
Kudos:
597
Bookmarks:
514
Hits:
21,045

Twitter Work Skin: Tweets & Profile (newest layout)

Summary:

This is a tutorial on how to create Twitter / X templates for AO3, includes both Tweets and profile card.
- Scalable so it's also accessible to mobile users.
- Tweets (chapter 1): text, tags, quote tweet, photo(s), replies, verified checkmark.
- Profile card (chapter 2): displays a user's profile as shown on Twitter.
- Please let me know if there are bugs and/or requests.

Notes:

(See the end of the work for other works inspired by this one.)

Chapter 1: Tweet

Chapter Text

barry
@barrythebee

According to all known laws of aviation, there is no way a bee should be able to fly...🐝

8:14 AM · Oct 2, 2020

23.3K Retweets    924 Quote Tweets    72.1K Likes

Step 1: Import the Workskin

Workskins are pieces of code (stylesheets) that allow you to change the formatting of your work. Go to [My Dashboard] > [Skins] > [My Work Skins] > [Create Work Skin]. In the CSS area, paste this:

#workskin .twt {
  float: center;
  max-width: 450px;
  min-width: 300px;
  margin: 0em auto;
  padding-left: 20px;
  padding-right: 20px;
  border: 1px solid #c7c7c7;
  border-radius: 10px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

#workskin .twt-header {
  overflow: hidden;
  margin-bottom: -3em;
}

#workskin .twt-icon-container {
  float: left;
}

#workskin .twt-icon {
  border-radius: 50%;
  width: 3.5em;
}

#workskin .twt-iconquote {
  border-radius: 50%;
  width: 2em;
}

#workskin .twt-id {
  font-size: 1em;
  padding-left: 1em;
  overflow: hidden;
}

#workskin .twt-name {
  font-weight: bold;
}

#workskin .twt-name:hover {
  text-decoration: underline;
  cursor: pointer;
}

#workskin .twt-handle {
  color: #657786;
}

#workskin .twt-handle:hover {
  cursor: pointer;
}

#workskin .twt-content {
  font-size: 1.3em;
  margin-bottom: -1em;
}

#workskin .twt-contentquote {
  margin-top: -1em;
  font-size: 1em;
}

#workskin .twt-timestamp {
  color: #657786;
  font-size: 1em;
}

#workskin hr.twt-sep,
#workskin hr.twt-sep-reply {
  border: none;
  height: 1px;
  width: 100%;
  background-color: #e6e6e6;
}

#workskin hr.twt-sep-reply {
  margin-left: -20px;
  padding-right: 40px;
}

#workskin .twt-stat1 {
  color: #657786;
  font-size: 0.9em;
}

#workskin .twt-quotebox {
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #c7c7c7;
  border-radius: 10px;
  margin-bottom: -1em;
}

#workskin .twt-image {
  float: center;
  max-width: 100%;
  border: 1px solid #c7c7c7;
  border-radius: 10px;
  margin-bottom: -1em;
}

#workskin .twt-replybox {
  margin-top: -2em;
}

#workskin .twt-icon-replycontainer {
  float: left;
}

#workskin .twt-replycontainer {
  padding-left: 1em;
  overflow: hidden;
}

#workskin .twt-replycontent {
  margin-top: -1em;
}

#workskin .twt-stat2 {
  color: #657786;
  font-size: 0.9em;
  margin-top: -1em;
}

#workskin .twt-social {
  float: left;
  margin-right: 2em;
  margin-bottom: -1em;
}

#workskin .twt-socialimg {
  height: 13px;
  margin-right: 3px;
}

#workskin .twt-hl {
  color: #1DA1F2;
}

#workskin .twt-hl:hover {
  text-decoration: underline;
  cursor: pointer;
}

 

Step 2: Adding Work Skin to your work

In order to use this workskin, you must first add it to your work. Create a new work or edit an existing one. Under 'Associations', at 'Select Work Skin', select the workskin you just imported. Now you can use it. You have to edit your chapters in HTML mode when you use a workskin. It is strongly advised to add these codes after you have completed your story. This is to minimize the chances of the code being messed up during editing.

 

Plain tweet

barry
@barrythebee

According to all known laws of aviation, there is no way a bee should be able to fly...🐝

8:14 AM · Oct 2, 2020

23.3K Retweets    924 Quote Tweets    72.1K Likes

 

HTML:

<div class="twt">

    <div class="twt-header">

        <div class="twt-icon-container">
            <img class="twt-icon" src="https://i.imgur.com/Q31haWS.jpg">
        </div>

        <div class="twt-id">
            <span class="twt-name">barry</span><br />
            <span class="twt-handle">@barrythebee</span>
        </div>
    
    </div>
    
    <div class="twt-content">According to all known laws of aviation, there is no way a bee should be able to fly...🐝</div>
    
    <div class="twt-timestamp">8:14 AM · Oct 2, 2020</div>
    
    <hr class="twt-sep"><div class="twt-stat1"><strong>23.3K</strong> Retweets &nbsp;&nbsp; <strong>924</strong> Quote Tweets &nbsp;&nbsp; <strong>72.1K</strong> Likes</div>
    
</div>

Explanation:

twt-icon is your avatar
twt-name is your display name, and twt-handle is your @
twt-content is the body of your tweet

If you want to add a hashtag, use:

<span class="twt-hl">#hashtag</span>

to get #forever

 

If you want to add a verified checkmark, add this code after your name:

<img class="twt-socialimg" src="https://i.imgur.com/wStuVM9.png">

to get

 

Tweet with quote

barry
@barrythebee

According to all known laws of aviation, there is no way a bee should be able to fly...🐝

barry @donkey · Sept 5

i'm donkey!

8:14 AM · Oct 2, 2020

23.3K Retweets    924 Quote Tweets    72.1K Likes

HTML:

<div class="twt">

    <div class="twt-header">

        <div class="twt-icon-container">
            <img class="twt-icon" src="https://i.imgur.com/Q31haWS.jpg">
        </div>

        <div class="twt-id">
            <span class="twt-name">barry</span><br />
            <span class="twt-handle">@barrythebee</span>
        </div>
    
    </div>
    
    <div class="twt-content">According to all known laws of aviation, there is no way a bee should be able to fly...🐝</div>

    <div class="twt-quotebox">

        <div class="twt-header">

            <div class="twt-icon-container">
                <img class="twt-iconquote" src="https://i.imgur.com/D0aVIAd.png">
            </div>

            <div class="twt-id">
                <span class="twt-name">barry</span> <span class="twt-handle">@donkey · Sept 5</span>
            </div>
        </div>
        
        <div class="twt-contentquote">i'm donkey!</div>
    
    </div>
    
    <div class="twt-timestamp">8:14 AM · Oct 2, 2020</div>
    
    <hr class="twt-sep"><div class="twt-stat1"><strong>23.3K</strong> Retweets &nbsp;&nbsp; <strong>924</strong> Quote Tweets &nbsp;&nbsp; <strong>72.1K</strong> Likes</div>
    
</div>

 

Explanation:

twt-quotebox is is where the quoted tweet is contained in
twt-iconquote is the small icon in the quoted tweet
twt-id is where the display name and handle of the quoted tweet is contained in
twt-contentquote is the content of the quoted tweet

 

Tweet with image(s)

barry
@barrythebee

According to all known laws of aviation, there is no way a bee should be able to fly...🐝

8:14 AM · Oct 2, 2020

23.3K Retweets    924 Quote Tweets    72.1K Likes

HTML:

<div class="twt">

  <div class="twt-header">

      <div class="twt-icon-container">
          <img class="twt-icon" src="https://i.imgur.com/Q31haWS.jpg">
      </div>

      <div class="twt-id">
          <span class="twt-name">barry</span><br />
          <span class="twt-handle">@barrythebee</span>
      </div>
  
  </div>
  
  <div class="twt-content">According to all known laws of aviation, there is no way a bee should be able to fly...🐝</div>

  <img class="twt-image" src="https://scx2.b-cdn.net/gfx/news/hires/2019/donkey.jpg" />
  
  <div class="twt-timestamp">8:14 AM · Oct 2, 2020</div>
  
  <hr class="twt-sep"><div class="twt-stat1"><strong>23.3K</strong> Retweets &nbsp;&nbsp; <strong>924</strong> Quote Tweets &nbsp;&nbsp; <strong>72.1K</strong> Likes</div>
  
</div>

 

Explanation: The setup of this code is similar to the previous one

twt-image is where you insert the link to your image
If you want to add more images, simply add the code 

<img class="twt-image" src="/" />

as many times as needed.

 

Tweet with replies

barry
@barrythebee

According to all known laws of aviation, there is no way a bee should be able to fly...🐝

8:14 AM · Oct 2, 2020

23.3K Retweets    924 Quote Tweets    72.1K Likes

barry @donkey · Sept 5 Replying to @doraemon

blabla

2

2

2

HTML:

<div class="twt">

  <div class="twt-header">

      <div class="twt-icon-container">
          <img class="twt-icon" src="https://i.imgur.com/Q31haWS.jpg">
      </div>

      <div class="twt-id">
          <span class="twt-name">barry</span><br />
          <span class="twt-handle">@barrythebee</span>
      </div>
  
  </div>
  
  <div class="twt-content">According to all known laws of aviation, there is no way a bee should be able to fly...🐝</div>
  
  <div class="twt-timestamp">8:14 AM · Oct 2, 2020</div>
  
  <hr class="twt-sep"><div class="twt-stat1"><strong>23.3K</strong> Retweets &nbsp;&nbsp; <strong>924</strong> Quote Tweets &nbsp;&nbsp; <strong>72.1K</strong> Likes</div>
  
  <hr class="twt-sep-reply">

  <div class="twt-replybox">

    <div class="twt-icon-replycontainer">
      <img class="twt-icon" src="https://i.imgur.com/GJB38Dv.jpg">
    </div>

    <div class="twt-replycontainer">
      <span class="twt-name">barry</span> <span class="twt-handle">@donkey · Sept 5</span>
      <span class="twt-handle">Replying to</span> <span class="twt-hl">@doraemon</span>

      <div class="twt-replycontent">blabla</div>

      <div class="twt-stat2">
        <div class="twt-social"><img class="twt-socialimg" src="https://i.imgur.com/dJg9v1v.png">2</div>
        <div class="twt-social"><img class="twt-socialimg" src="https://i.imgur.com/UeOnwXk.png">2</div>
        <div class="twt-social"><img class="twt-socialimg" src="https://i.imgur.com/eM56CN2.png">2</div>
      </div>

    </div>

  </div>

</div>


  Explanation:

The reply starts after 
<hr class="twt-sep-reply">

The rest works same as above.
To add another reply, simply copy this code and add it just before the last </div>:

  

    
<hr class="twt-sep-reply">

    
  <div class="twt-replybox">

    
    <div class="twt-icon-replycontainer">
      <img class="twt-icon" src="https://i.imgur.com/GJB38Dv.jpg">
    </div>

    
    <div class="twt-replycontainer">
      <span class="twt-name">barry</span> <span class="twt-handle">@donkey · Sept 5</span>
      <span class="twt-handle">Replying to</span> <span class="twt-hl">@doraemon</span>

    
      <div class="twt-replycontent">blabla</div>

    
      <div class="twt-stat2">
        <div class="twt-social"><img class="twt-socialimg" src="https://i.imgur.com/dJg9v1v.png">2</div>
        <div class="twt-social"><img class="twt-socialimg" src="https://i.imgur.com/UeOnwXk.png">2</div>
        <div class="twt-social"><img class="twt-socialimg" src="https://i.imgur.com/eM56CN2.png">2</div>
      </div>

    
    </div>

    
  </div>

  


 
Tweet with everything!
If you are wondering whether you can combine all of those, yes, yes you can! Check out this behemoth:

  

    

      

        
      

    

    

      
barry 
@barrythebee

    

  

  

    
Best friends #forever

  

  

    
  

  

    

      

        

          
        

      

      

        
doraemon @doraemon · Sept 5

      

    

    

      
Another one!

    

    

      
    

  

  

    
8:14 AM · Oct 2, 2020

  

  

  

    
23.3K Retweets    924 Quote Tweets    72.1K Likes

  

  

  

    

      

        
      

    

    

      
barry @donkey · Sept 5 Replying to @doraemon

      

        
this is a reply!

      

      

        
      

      

        

          
2

        

        

          
2

        

        

          
2

        

      

    

  


HTML:

  

    
<div class="twt">

    
  <div class="twt-header">

    
      <div class="twt-icon-container">
          <img class="twt-icon" src="https://i.imgur.com/Q31haWS.jpg">
      </div>

    
      <div class="twt-id">
          <span class="twt-name">barry</span> <img class="twt-socialimg" src="https://i.imgur.com/wStuVM9.png"><br />
          <span class="twt-handle">@barrythebee</span>
      </div>
  
  </div>
  
  <div class="twt-content">Best friends <span class="twt-hl">#forever</span> </div>

    
  <img class="twt-image" src="https://freegametips.com/wp-content/uploads/2019/11/1573594992_Doraemon-Nobita39s-New-Dinosaur-arrives-in-2020-on-Switch-1200x900.jpg" />
  
  <div class="twt-quotebox">

    
    <div class="twt-header">

    
        <div class="twt-icon-container">
            <img class="twt-iconquote" src="https://i.imgur.com/NzmiXOw.jpg">
        </div>

    
        <div class="twt-id">
            <span class="twt-name">doraemon</span> <span class="twt-handle">@doraemon · Sept 5</span>
        </div>
    </div>
    
    <div class="twt-contentquote">Another one!</div>

    
    <img class="twt-image" src="https://media1.tenor.com/images/434bedd934f43e68f4d5392ba78174f8/tenor.gif" />

    
  </div>

    
  <div class="twt-timestamp">8:14 AM · Oct 2, 2020</div>
  
  <hr class="twt-sep"><div class="twt-stat1"><strong>23.3K</strong> Retweets &nbsp;&nbsp; <strong>924</strong> Quote Tweets &nbsp;&nbsp; <strong>72.1K</strong> Likes</div>
  
  <hr class="twt-sep-reply">

    
  <div class="twt-replybox">

    
    <div class="twt-icon-replycontainer">
      <img class="twt-icon" src="https://i.imgur.com/GJB38Dv.jpg">
    </div>

    
    <div class="twt-replycontainer">
      <span class="twt-name">barry</span> <span class="twt-handle">@donkey · Sept 5</span>
      <span class="twt-handle">Replying to</span> <span class="twt-hl">@doraemon</span>

    
      <div class="twt-replycontent">this is a reply!</div>

    
      <img class="twt-image" src="https://i.pinimg.com/originals/e0/bc/b1/e0bcb1ce0dbbacade677fa52788cf005.jpg" />
      

    
      <div class="twt-stat2">
        <div class="twt-social"><img class="twt-socialimg" src="https://i.imgur.com/dJg9v1v.png">2</div>
        <div class="twt-social"><img class="twt-socialimg" src="https://i.imgur.com/UeOnwXk.png">2</div>
        <div class="twt-social"><img class="twt-socialimg" src="https://i.imgur.com/eM56CN2.png">2</div>
      </div>

    
    </div>

    
  </div>

    
</div>

  


 

  Explanation:

This looks daunting but it's basically the same things as above, but combined into one. I would advise not to use this too often, as it can be overwhelming.
 
Final Notes
That's it, I hope it was clear! If you have any bugs/questions/suggestions, please let me know!

  

  







          


  


  

    

      Chapter 2: Twitter Profile
    


    


  


  
  

    
Chapter Text

    
 
Preview

  

    
  

  

    

      
    

    

      

        

Follow
      

    

  

  

    

      
Bob Bobson

    

    

      
@BobBobson

    

    

      
Avid gardener, good with tools.

    

    

      

        
Utah, USA

      

      

        
Born September 30, 2002

      

      

        
Joined August 2020

      

    

    

      
958 Following    2,345 Followers

    

  


Step 1: Import the Workskin
Workskins are pieces of code (stylesheets) that allow you to change the formatting of your work. Go to [My Dashboard] > [Skins] > [My Work Skins] > [Create Work Skin]. In the CSS area, paste this:
#workskin .twt-profile {
  float: center;
  max-width: 600px;
  min-width: 350px;
  margin: 0em auto;
  border: 1px solid #c7c7c7;
  border-radius: 10px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  position: relative;
}

#workskin .twt-profile-header {
  width: 100%;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  margin-top: -1.3em;
  height: 13em;
  z-index: -1;
}

#workskin .twt-profile-id {
  margin-top: -7.5em;
  position: relative;
  padding-left: 1.3em;
  padding-right: 1.3em;
  z-index: 1;
  overflow: hidden;
}

#workskin .twt-iconprofile {
  border-radius: 50%;
  width: 9em;
  border: 3px solid white;
  float: left;
}

#workskin .twt-profile-social {
  float: right;
  width: 9em;
  margin-top: 2.3em;
}

#workskin .twt-profile-share {
  height: 15px;
  padding: 0.8em;
  border: 1px solid #cbcbcb;
  border-radius: 50%;
  margin-right: 0.6em;
  float: left;
  margin-top: 1.6em;
}

#workskin .twt-profile-share:hover {
  background-color: #e7e7e8;
  cursor: pointer;
}

#workskin .twt-profile-follow {
  border: 1px solid white;
  background-color: black;
  border-radius: 1.5em;
  color: white;
  font-weight: bold;
  padding: 0.6em 1em;
  float: right;
}

#workskin .twt-profile-follow:hover {
  background-color: #282c30;
  cursor: pointer;
}

#workskin .twt-profile-container {
  padding-left: 1.3em;
  padding-right: 1.3em;
}

#workskin .twt-profile-name {
  font-size: 1.3em;
  font-weight: bold;
  margin-top: -1em;
  margin-bottom: -1.5em;
}

#workskin .twt-profile-handle {
  color: #657786;
  margin-top: -1em;
  margin-bottom: -1em;
}

#workskin .twt-profile-info {
  overflow: hidden;
  color: #657786;
}

#workskin .twt-profile-description {
  margin-bottom: -1em;
}

#workskin .twt-profile-socialcontainer {
  float: left;
  margin-right: 1em;
  margin-top: -1em;
  margin-bottom: -1em;
}

#workskin .twt-profile-socialimg {
  height: 13px;
  margin-right: 4px;
}

#workskin .twt-following {
  color: #657786;
  margin-top: -1em;
}

#workskin .twt-following-no {
  font-weight: bold;
}






Step 2: Adding Work Skin to your work
In order to use this workskin, you must first add it to your work. Create a new work or edit an existing one. Under 'Associations', at 'Select Work Skin', select the workskin you just imported. Now you can use it. You have to edit your chapters in HTML mode when you use a workskin. It is strongly advised to add these codes after you have completed your story. This is to minimize the chances of the code being messed up during editing.
 
Step 3: Twitter Profile

  

    
  

  

    

      
    

    

      

        

Follow
      

    

  

  

    

      
Bob Bobson

    

    

      
@BobBobson

    

    

      
Avid gardener, good with tools.

    

    

      

        
Utah, USA

      

      

        
Born September 30, 2002

      

      

        
Joined August 2020

      

    

    

      
958 Following    2,345 Followers

    

  


 

  HTML


  

    
<div class="twt-profile">

    
    <img class="twt-profile-header" src="https://pbs.twimg.com/media/Ck1Z3olUgAA_W86.jpg">

    


    <div class="twt-profile-id">

    
      <img class="twt-iconprofile" src="https://i.pinimg.com/474x/62/17/b9/6217b9dd84b1b6569d87252877f6235d.jpg">

    
      <div class="twt-profile-social">

        <img class="twt-profile-share" src="https://i.imgur.com/x17lJFv.png">

        <span class="twt-profile-follow">Follow</span>

      </div>

    
    </div>

    
    <div class="twt-profile-container">

      <div class="twt-profile-name">Bob Bobson</div>

      <div class="twt-profile-handle">@BobBobson</div>

      <div class="twt-profile-description">Avid gardener, good with tools.</div>

    
      <div class="twt-profile-info">

        <div class="twt-profile-socialcontainer"><img class="twt-profile-socialimg" src="https://i.imgur.com/nIwDEMj.png">Utah, USA</div>

        <div class="twt-profile-socialcontainer"><img class="twt-profile-socialimg" src="https://i.imgur.com/AzoMGy8.png">Born September 30, 2002</div>

        <div class="twt-profile-socialcontainer"><img class="twt-profile-socialimg" src="https://i.imgur.com/7I2zIp1.png">Joined August 2020</div>

      </div>

    
      <div class="twt-following"><span class="twt-following-no">958</span> Following &nbsp;&nbsp; <span class="twt-following-no">2,345</span> Followers</div>

    </div>

</div>

  


 
twt-profile-header: put your header image here. preferably 3:2 dimensions (for example: 1500px width, 500px height)

twt-iconprofile: your icon, preferably square size

twt-profile-name: display name

twt-profile-handle: tag

twt-profile-description: description

twt-profile-info: location, birthday, join date

twt-following: amount of followers and following

  

  







          


  


  

    

      Chapter 3: FAQ and Others
    


    


  


  
  

    
Chapter Text

    
Hello all!
Sorry to be away for so long. I have finally taken the time to reply to the questions.
If you have a question or problem with the template,
Please answer the following:
- What device are you viewing this on? (Web/Phone)
- Are you using a site skin?
- Have you imported both the workskin and the HTML?
- Can you share the piece of code that you are having trouble with?
 

  Frequently Asked Questions (FAQ)

Q: My icon is not showing up as square?
A: Please make sure that the height and width of your icon is the same. The ideal dimensions are 50px width, 50px height.
Q: How do I add a Twitter Blue tick?
A: You can do this by adding an in-line image next to the username
<img class="twt-socialimg" src="https://i.imgur.com/wStuVM9.png">
Q: How to add a padlock that indicates a private account?
A: You can do this by adding an in-line image next to the username
<img class="twt-socialimg" src="https://i.imgur.com/HdwGiZf.png">
Q: How do I @tag another account, and make the text blue?
A: You can use the same code for the highlight color for that. Example:
<span class="twt-hl">@username</span>
Q: How do I get dark mode?
A: It requires a few tweaks in the work skin. For the following things:
Add the following to #workskin .twt
#workskin .twt {
   ...
   background-color: black;
   color: white;
}
AND
Replace all occurrences of
color: #657786;
With
color: #dedede;
Q: I am using multiple work skins, how do I make sure that both work skins function correctly together?
A: In cases where you are combining multiple work skins, it can be possible that the code of the work skins share the same 'names', which means the code will get confused on which one to follow. To avoid this, make sure that the .names on both work skins are entirely unique.
You can fix this by adding a unique prefix to each one. Like .0001-twitter and .0002-wiki .
Make sure to then also change these names in your code.
Q: Is it possible to add a vertical bar between replies? Like when you reply to someone on Twitter?
A: Yes, this is possible. Though I personally decided against it, because it requires layering the images (the icon and the vertical bar) over each other, which I'm afraid wouldn't scale well on different screen sizes. I decided to keep it simple with just the replies.