#qtexted | Explore Tumblr posts and blogs

vanillabegonias · 4 years ago

Note

hey, sorry if this like, super annoying, but i really loved "the mysterious case of captain america" and i liked the formatting so much, i just wanted to ask how you did it, because i want to write a somewhat similar styled fic for a different fandom, and it's okay if you don't want to answer this lol i was just wondering because i think it's the nicest formatting i've ever seen in a fic and i'd really love to know how you did it, even if you don't answer this i hope you have a lovey day!

Hi anon! This wasn’t annoying at all, I’m so glad you liked it! I originally meant to post the skin but tbh I’m terrible at explaining things and have just been sitting on it incase anyone wanted it lol

I’ve included the workskin and a small explanation on how to use it but 1) Tumblr post formatting is beyond my ability to understand so it looks little janky and 2) there may be one or two mistakes that i’ve over looked but the workskin is directly pasted from Ao3 so I know that at least is functioning :)

Let me start by saying I have no idea what I'm doing and this is probably messy and overly complicated but here's the workskin I cobbled together for my fic.

/*all this is optional, all it does is hide chapter titles and turn the header and links red*/

#workskin .title {

color: #8B0000;

font-family: "Courier New", courier new, Monospace, Courier, Lucida Console;

font-weight: bold;

}

#workskin a:link {

color: #000000;

font-family: "Monospace", Courier New, Courier, Monospace, Lucida Console;

font-size: smaller;

}

#workskin a:visited {

color: #8B0000;

}

#workskin a:hover {

color: #8B0000;

font-weight: bold;

}

#workskin a:active {

color: #0033cc;

}

#workskin .chapter.preface.group .title {

visibility: hidden;

line-height: 0;

}

/*background ‘container'*/

#workskin .bdy {

background: #000000;

width: 100%;

margin: auto;

box-shadow: 0 2px 6px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.30);

}

/*buzzfeed box (container that centers everything)*/

#workskin .buzz {

background: #000000;

margin: auto;

max-width: 300px;

text-align: center;

display: block;

color: #ffffff;

}

/*facts and information text*/

#workskin .info {

background: #000000;

color: #ffffff;

max-width: 300px;

float: center;

font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;

font-size: 130%;

text-align: center;

padding: 6px;

margin-right: 2px;

margin-left: 2px;

display: inline-block;

}

/*red text*/

#workskin .ooo {

color: #8B0000;

font-weight: bold;

}

/*ryan and shane commentary section*/

#workskin .chat {

max-width: 290px;

font-family: "Sans-Serif", Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;

font-size: 120%;

padding: 6px;

display: inline-block;

}

/*shane dialogue*/

#workskin .sh {

color: #f7f200;

float: left;

text-align: left;

margin: 0;

padding: 0em 0em;

max-width: 70%;

clear: both;

display: block;

background: #000000;

position: align-left;

}

/*ryan dialogue*/

#workskin .ry {

color: #2E64FE;

float: right;

text-align: right;

margin: 0;

padding: 0em 0em;

max-width: 70%;

clear: both;

display: block;

background: #000000;

position: align-right;

}

/*transcript log*/

#workskin .transcript {

color: #ffffff;

max-width: 300px;

font-size: 120%;

padding: 6px;

font-family: "Sans-Serif", Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;

display: inline-block;

}

/*left person name (optional)*/

#workskin .lname {

color: #FFFFFF;

font-size: .70em;

text-align: left;

margin-bottom: -1.5em;

font-family: "monospace", monospace, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;

display: block;

clear: both;

}

/*left person dialogue*/

#workskin .lper {

float: left;

color: #FFFFFF;

text-align: left;

margin: 0;

padding: 0em 0em;

max-width: 70%;

clear: both;

position: align-left;

}

/*right person name (optional)*/

#workskin .rname {

color: #FFFFFF;

font-size: .70em;

text-align: right;

margin-bottom: -1.5em;

font-family: "monospace", monospace, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;

display: block;

clear: both;

}

/*right person dialogue*/

#workskin .rper {

float: right;

color: #FFFFFF;

text-align: right;

margin: 0;

padding: 0em 0em;

max-width: 65%;

clear: both;

position: align-right;

}

/*quote box*/

#workskin .qbox {

color: #ffffff;

max-width: 100%;

font-size: 120%;

margin: auto;

font-family: "Sans-Serif", Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;

display: inline-block;

text-align: left;

}

/*quote text*/

#workskin .qtext {

float: left;

color: #FFFFFF;

text-align: justify;

margin: auto;

max-width: 95%;

padding: 10px;

clear: both;

position: align-justify;

}

(/*character image*/

#workskin .mpic1 {

width: 100px;

max-width: 100px;

}

/*photograph*/

#workskin .mpic2 {

width: 300px;

max-width: 300px;

}

How to use:

**You'll notice the is everywhere, that's just a personal stylization choice and not mandatory.

Enclose EVERYTHING in these two <div class="bdy"> and <div class="buzz"> The entire story should begin with these -meaning place them where you want to start the formatting and at the end of the formatted area add </div></div>

<div class="info"> TEXT HERE </div> -will format the text, if you want to add the "ooo creepy and important" red text just enclose that part with (this can be used in the info section, transcript section and the quote section)

example:

During the Second World War a man only publicly known as CAPTAIN AMERICA was presented by the UNITED SERVICE ORGANIZATION or USO to the American public. Their hope was that his fictitious exploits and all-American look would appeal to Americans to enlist and purchase bonds for the war effort.

The show consisted of three acts –an opening dance number featuring 30 female dancers, a stunt involving 3 SHOWGIRLS BEING LIFTED ABOVE THE CAPTAIN'S HEAD ON A MOTORCYCLE, and a another act that consisted of talking up war bonds and PUNCHING A FAKE ADOLF HITLER ON STAGE

</div>

The conversation between Shane and Ryan (or Left speaker and Right speaker) are put into <div class="chat"> CONVERSATION </div> and each speakers section is put between or followed by a

example:

(scoff)

what?

…that's ridiculous…

it’s not that ridiculous

</div>

The "transcript" follows a similar layout as the chat, except there's an extra bit that allows you to mark who's speaking.

example:

THE TRANSCRIPT READS:

THE CAPTAIN:

COME IN. COME IN. THIS IS CAPTAIN-

CARTER:

WHAT’S GOING ON

THE CAPTAIN:

TARGET’S DEAD

CARTER:

WHAT ABOUT THE PLANE

THE CAPTAIN:

THAT’S A LITTLE BIT TOUGHER TO EXPLAIN

</div>

The quote coding section begins with <div class="qbox"> followed by the start of the paragraph, , encase the quote with and if you want a multi paragraph quote just add the code again, don't close off the paragraph until the end of your quote section and close off everything with </div> to end the "qbox" section.

example:

QUOTE

“THEY DIDN’T WANT US TO KNOW HIS NAME. WE KNEW IT WAS A HUGE SECRET BUT IT WAS SORT OF FUNNY TO US THAT THEY TREATED HIM LIKE SUCH HUGE SECRET WHEN HE WOULD GET NERVOUS TALKING TO US GIRLS.

CAP WAS AN INCREDIBLY SHY AND KIND MAN. WE ALL THOUGHT OF HIM LIKE A LITTLE BROTHER. HE’D WALK US HOME AFTER WILD NIGHTS AND GAVE US LITTLE DOODLES WHEN WE WERE MISSING OUR GUYS. HE WAS A SWEET ONE FOR SURE.”

END QUOTE

</div>

The two image codes are for locking the image to a certain size, they won't mess up the dimensions of your image but they will lock the width to a certain size so that they don't bleed over the side of the "container". I'm pretty sure they can be placed in any section but you might have a problem with alignment.

example:

JAMES BARNES DIED DURING A MISSION in the Austrian Alps, marking the FIRST AND ONLY HOWLING COMMANDO WHO WOULD LOSE HIS LIFE IN BATTLE

SO, the full layout would be

INFORMATION TEXT

INFORMATION RED TEXT FOR MAKING AN EERIE POINT

</div>

LEFT TEXT

RIGHT TEXT

LEFT TEXT

RIGHT TEXT

</div>

QUOTE

“QUOTE PART 1

QUOTE PART 2”

END QUOTE

</div>

THE TRANSCRIPT READS:

LEFT NAME:

LEFT TEXT

RIGHT NAME:

RIGHT TEXT

</div>

</div></div>

Obviously you can rearrange the sections however you want, what's important is that you always close off a section when you move onto another and enclose the ENTIRE formatted area with </div></div>

You WILL spend an insane amount of time adding and so beware!!

If anyone has any questions or a cleaner way of doing this please don't be too shy to hit up my ask or msgs, and have a lovely day anon!

****I would appreciate that if you use this or get help out of it you leave a like or reblog (even cooler would be shoutout) ♡♡♡ and feel free to edit this anyway you like :)

#asks #I am v bad with words forgive me anon this was nice to read ty #the skin tutorials on Ao3 were a godsend for this

24 notes · View notes