Actions

Work Header

Rating:
Archive Warning:
Category:
Fandoms:
Additional Tags:
Language:
English
Series:
Part 2 of AO3 Work Skins/Tutorials
Collections:
Fanfiction Reference Works, A Guide to Coding and Fanworks, The Witch's Brew, AO3 Useful Work Skins
Stats:
Published:
2015-07-20
Words:
204
Chapters:
1/1
Comments:
24
Kudos:
381
Bookmarks:
133
Hits:
27,873

How to Make Deadpool's Thinking Boxes on AO3

Summary:

This is a live example of my AO3 skin that allows the author to recreate the look of Deadpool's thinking boxes in their fic. To learn more about it, you can find the tutorial here.

Notes:

If you are unable to access the tutorial on tumblr, hit "Hide Creator's Style" here and the workskin and example coding will show up here.

Work Text:

“Yellow thinking boxes? Courier-font thinking boxes? Are you back inside me, where you belong?”

{ You tell me, genius. }

“Ugh! That was awful…”

[ Like we needed even more reason to hate you. ]

(Original text from here)

WORK SKIN: 

#workskin .ybox {
  background-color: #fff799;
  background: radial-gradient(circle, #fffeee, #fffbcc, #fff799);
  border-color: #000000;
  border-width: 1px;
  border-style: solid;
  border-spacing: 0px;
  margin-left: 0px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
  padding-left: 5px;
  font-family: "Comic Sans MS", "Chalkboard SE", sans-serif;
  text-transform: uppercase;
  font-size: small;
  text-align: center;
  display: table;
  color: #000000;
}

#workskin .wbox {
  background-color: #ffffff;
  border-color: #000000;
  border-width: 1px;
  border-style: solid;
  margin-left: 0px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
  padding-left: 5px;
  font-family: "Courier New", Courier;
  text-align: center;
  font-size: medium;
  display: table;
  color: #000000;
}

#workskin .hide {
  display: none;
}

EXAMPLE TEXT CODING:

<p>“Yellow thinking boxes? Courier-font thinking boxes? Are you back <b><i>inside</i></b> me, where you belong?”</p>

<p class="ybox"><span class="hide">{</span> <b><i>You</i></b> tell <b><i>me</i></b>, genius. <span class="hide">}</span></p>

<p>“<b><i>Ugh!</i></b> That was <b><i>awful</i></b>…”</p>

<p class="wbox"><span class="hide">[</span> Like we needed even <b><i>more</i></b> reason to hate you. <span class="hide">]</span></p>

Series this work belongs to: