L D

Twitter Generator

This is the twitter generator, currently the most complicated generator I have! There isn't an Ao3 page for it. This is still a work in progress, as I want to add polls that have been answered/are finished. Profile pictures are hidden when the workskin's disabled, and they don't have any alt text, so make sure your fic makes sense without that, or add alt text + unhide the pfps.

Editor

Post Reply

Username

Handle

Timestamp

Profile Pic:

Or add your own PFP:

Tweet

Add Image?

Add Poll?

Add Quote Tweet?

Replies

Retweets

Likes

Toggle Disable Workskin

This is the Twitter generator. the handle, timestamp, and stats at the bottom are all optional to add. There are some available profile pics to choose from, or you can use your own. Please keep in mind that when the workskin's disabled, the profil pic is hidden. You can change this in the HTML yourself if you need to

timestamped: 02:00 · May 9
[replies: 328] [retwts: 75] [likes: 4.5k]

Reply by: The Reader

Heres a reply!

Now here's a tweet showing every option available to you

Please host images on proper image hosting sites! Don't use timblr/discord/etc, the image will probably break within a year or two. One good site is squidge images (images.squidge.org) , they're specifically meant for fannish content!

-- Poll: --

Option option
Option option

39 votes · 2 hours left

Quoted Tweet by: The Reader @book.enjoyer

I don't know if having both an image and a poll and a quote tweet is allowed on twitter but you can do whatever you want!

timestamped: May 8
[likes: 3]

<div class=twt><div class="twt__post">
<p class="header" align=center center
><img class="twt__pfp__img" src="https://images.squidge.org/images/2025/05/09/katsushikahokusai.jpeg" hidden
          width="40"
          height="40"
          alt="" /><span class="header__details"
><b><samp class=for-no-ws>Post by: </samp>The Writer</b
><br hidden class='show-for-ws'> <small class="font-small"> @ficenjoyer</small></span></p
><p class="body">This is the Twitter generator. the handle, timestamp, and stats at the bottom are all optional to add. There are some available profile pics to choose from, or you can use your own. Please keep in mind that when the workskin's disabled, the profil pic is hidden. You can change this in the HTML yourself if you need to</p><p
><small class="timestamp font-small"><samp class=for-no-ws>timestamped: </samp>02:00 · May 9</small
><br class="for-no-ws" /><span class="stats"><small class="font-small stats__reply"><samp class=for-no-ws>[replies: </samp>328<samp class=for-no-ws>]</samp></small>
          <small class="font-small stats__retweet"><samp class=for-no-ws>[retwts: </samp>75<samp class=for-no-ws>]</samp></small>
          <small class="font-small stats__like"><samp class=for-no-ws>[likes: </samp>4.5k<samp class=for-no-ws>]</samp></small></span></p></div><div class="twt__post twt--reply"><p class="twt__pfp"><img  class="twt__pfp__img"
src="https://images.squidge.org/images/2025/05/09/p_rainbowflag.jpeg" hidden width="40" height="40" alt=""
></p><div class="reply__content"><p class="header__details" align=center center
><b><samp class=for-no-ws>Reply by: </samp>The Reader</b><small class="font-small"></small></p>
<p class="body">Heres a reply!</p
><p><span class="stats stats--reply"><small class="font-small stats__reply"> </small>
          <small class="font-small stats__retweet"> </small>
          <small class="font-small stats__like"> </small></span></p></div></div><div class="twt__post">
<p class="header" align=center center
><img class="twt__pfp__img" src="https://images.squidge.org/images/2025/05/09/katsushikahokusai.jpeg" hidden
          width="40"
          height="40"
          alt="" /><span class="header__details"
><b><samp class=for-no-ws>Post by: </samp>The Writer</b
><br hidden class='show-for-ws'> <small class="font-small"> @ficenjoyer</small></span></p
><p class="body">Now here's a tweet showing every option available to you<p class="twt-image"><img src='https://images.squidge.org/images/2025/07/25/twitterworkskinworkshopplaceholderimage.png' width="400" alt="Please host images on proper image hosting sites! Don't use timblr/discord/etc, the image will probably break within a year or two. One good site is squidge images (images.squidge.org) , they're specifically meant for fannish content! "></p> <div class="poll"><p class="for-no-ws">-- Poll: --</p><ul>
<li><samp class="for-no-ws">Option </samp>option</li><li><samp class="for-no-ws">Option </samp>option</li></ul>
<p class="poll-info">39 votes · 2 hours left</p></div><blockquote class="quote"><p class="header">
          <img class=" twt__pfp__img twt__pfp__img--quote"
          src="https://images.squidge.org/images/2025/05/09/p_rainbowflag.jpeg"
          width="20" height="20" hidden
          ><span class="header__details"
          ><b><samp class=for-no-ws>Quoted Tweet by:</samp> The Reader</b> <small class="font-small"> @book.enjoyer </small></span
        ></p>
          <p class="body">I don't know if having both an image and a poll and a quote tweet is allowed on twitter but you can do whatever you want! <p class="twt-image"><img src='https://images.squidge.org/images/2023/12/09/railroad.jpeg' width="400" alt="railroad surrounded by vegetation"></p></p></blockquote></p><p
><small class="timestamp font-small"><samp class=for-no-ws>timestamped: </samp>May 8</small
><br class="for-no-ws" /><span class="stats"><small class="font-small stats__reply"> </small>
          <small class="font-small stats__retweet"> </small>
          <small class="font-small stats__like"><samp class=for-no-ws>[likes: </samp>3<samp class=for-no-ws>]</samp></small></span></p></div></div>

.for-no-ws {
    display: none;
  }

.show-for-ws {
    display: initial;
  }

.twt .font-small{
    opacity: 50%;
    font-size: small;
  }

.twt * {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
  }

.twt {
    max-width: 30rem;
    margin: auto;
  }
  .twt__post{
    display: block;
    position: relative;
    border: #8080809c 2px solid;
    border-bottom: 0px;
    padding: 8px;
    overflow: hidden;
  }

.twt--reply{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
  }

.reply__content{
  flex-grow: 1;
  max-width: 100%;
  overflow: hidden;
}
  .twt .twt__post:first-child{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

.twt .twt__post:last-child{
    border: #8080809c 2px solid;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

.twt .header {
    flex-grow: 1;
    word-wrap: break-word;
    vertical-align: top;
    text-align: initial;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
  }

.twt__pfp{
    flex-shrink: 0;
  }

.twt .twt__pfp__img {
    display: inline-block;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    margin-right: 5px;
    /* aspect ratio not allowed by ao3 :( */
  }

.twt .header__details {
    display: inline-block;
    vertical-align: top;
    text-align: initial;
    white-space: nowrap;
    margin: 4px;
    max-width: 100%;
    box-sizing: border-box;
  }

.twt .header__details::after{
    font-family: serif;
position: absolute;
  content: '...';
  font-size: 1.2rem;
  transform: rotate(180deg);
  font-weight: bold;
  top: 0px;
  right: 4px;
  margin: 4px;

}

.twt .body{
  display: block;
  width: 100%;
  margin: 5px 5px;
}

.twt .timestamp{
  display: block;
  padding: 5px 10px 2px 10px;
}

.twt .stats {
    display: flex;
    justify-content: space-evenly;
    border-top: #80808070 2px solid;
    padding-top: 8px;
    margin: 0px;
    user-select: none;
      min-height: 1em;

}

.twt .stats>*{
  position: relative;
  line-height: 1rem;

margin-left: 1.5em;
}
    .twt .stats__reply::before {
    position: absolute;
    left: -1.2rem;
    top: 0rem;
    content: "";
    height: 0.75rem;
    width: 1rem;
    background-color: currentColor;
    border-radius: .2rem;
  }

.twt .stats__reply::after {
    position: absolute;
    left: -.9em;
    top: 0.55rem;
    content: "";
    height: 0.35rem;
    width: 0.35rem;
    transform: matrix(-0.01, -1.00, 1.01, 0.90, 0.00, -0.30);
    background-color: currentColor;

}

.twt .stats__reply:hover::before, .twt .stats__reply:hover::after{
    background-color: rgb(0, 186, 233);
  }

.twt .stats__retweet::before {
    position: absolute;
    content: '';
    border: currentColor 2.5px solid;
    border-right: 0px;
    left: -1.1rem;
    top: 0rem;
    height: 0.55rem;
    width: 0.6rem;
    border-radius: 50%;
  }

.twt .stats__retweet::after {
    position: absolute;
    transform: rotate(-10deg);
    content: '';
    border: currentColor solid;
    border-width:0 2.5px 2.5px 0;
    left: -0.7rem;
    top: -.1rem;
    height: 0.3rem;
    width: 0.23rem;
  }

.twt .stats__retweet:hover::before, .twt .stats__retweet:hover::after  {
    border-color: rgb(0, 205, 7);

}

.twt .stats__like::before {

transform: rotate(-40deg);
    left: -0.88rem;
    top: 0rem;
    position: absolute;
    content: "";
    background-color: currentColor;
    height: 0.7rem;
    width: 0.4rem;
    border-radius: 3px 3px 3px 0;
  }

.twt .stats__like::after {

position: absolute;
      transform: rotate(40deg);
      left: -0.67rem;
      top: 0rem;
      content: "";
      background-color: currentColor;
      width: 0.4rem;
      height: 0.7rem;
    border-radius: 3px 3px 0 3px;
  }

.twt .stats__like:hover::before, .twt .stats__like:hover::after  {
    background-color: red;
    opacity: 100%;
  }

/* reply */

.twt .stats--reply{
    border: transparent;
  }

/* qtwt */

.twt .quote{
    border: #8080809c 1px solid;
    padding: 5px 7px;
    border-radius: 5px;
  }

.twt .twt__pfp__img--quote {
  height: 25px;
  width: 25px;
}

/* Image */

.twt-image>img{
width: 96%;
display: block;
background-color: #c7c7c791;
border-radius: 10px;

margin: 1em auto;
overflow: hidden;
line-height: 0;
}

/* Poll - unanswered */

.twt .poll ul{
margin: 2px auto;
}

.twt .poll li{

list-style-type: none none;
  margin-block-start: 0em;
  margin-inline-end: 0;
  margin-block-end: 0em;
  margin-inline-start: 0em;
  display: block;
  color: rgba(0, 172, 240, 0.89);
  font-weight: bold;
  font-size: 0.95em;
  border: 1.2px solid rgba(0, 172, 240, 0.89);
  border-radius: 25px;
  margin: 5px 0.5vw;
  text-align: center;
  padding: 5px 5px 5px 5px;

}
.twt .poll li:hover{
  background-color: rgba(0, 172, 240, 0.445);
}

.twt .answered li{
  background-color: #84848400;
  border: none;
  border-radius: 5px;
  text-align: left;
  color: unset;
  font-weight: normal;
  padding-left: 2em;
  overflow: hidden;
  text-wrap: nowrap;

}
.twt .poll .winner{
  background-color: #1DA1F2;
}

.twt .answered .percent--1{
  background: linear-gradient(90deg, #9babb956 0%, #9babb956 50%, rgb(0,0,0,0) 0%, rgb(0,0,0,0) 100%);
}

.twt .answered .percent--1-winner{
  background: linear-gradient(90deg, #1da0f29b 0%, #1DA1F29b 50%, rgb(0,0,0,0) 0%, rgb(0,0,0,0) 100%);
}

.twt .answered .percent--2{
  background: linear-gradient(90deg, #9babb956 0%, #9babb956 20%, rgb(0,0,0,0) 0%, rgb(0,0,0,0) 100%);
}

.twt .answered .percent--3{
  background: linear-gradient(90deg, #9babb956 0%, #9babb956 30%, rgb(0,0,0,0) 0%, rgb(0,0,0,0) 100%);
}

.twt .answered .percent--4{
  background: linear-gradient(90deg, #717d8826 0%, #9babb956 10%, rgb(0,0,0,0) 0%, rgb(0,0,0,0) 100%);
}

.twt .poll .poll-info{
  display: block;
  border: none;
  text-align:justify;
  background-color: unset;
  color: currentColor;
  opacity: 70%;
  font-weight: normal;
  font-size: small;
  padding-left: 15px;
  margin: 0;
}

.twt .poll img{
  display: inline-block;
  vertical-align: middle;
  height: 1.2em;
  width: 1.2em;
  margin: -5px auto 0 auto;
}

.twt .poll .percent--text{
  float: right;
  font-size: 0.9em;
  overflow: hidden;
  text-wrap: nowrap;

}