Work Text:
Due to the passage of time, the original newspaper workskin on AO3, created by La_Temperanza, now has some formatting errors. I've made a series of updated two and three column newspaper workskin codes you can copy and work off of.
If you have some code knowhow, you may want to refer to the original explanation post by La_Temperanza, and use the HTML and CSS I posted in my Updated Newspaper Work skins series. This guide is meant for absolute beginners, so if you're in between, just bear with me. The original workskin uses <table>, which is no longer necessary. You can just use <div>. The older column widths now put so much space between columns, but that's easily fixed.
Preview of updated two and three column newspaper work skins.
First, you need to make a work skin. Work skins are AO3's CSS files, CSS being a type of code used to format and beautify your text. Go to your Dashboard, then click on Skins on your left-side column. You will see a panel of Site Skins, Work Skins, etc. Be sure to click on My Work Skins before clicking on Create a New Work Skin, in the top-right corner. If you don't, you might end up making a site skin.
Let's make a two column newspaper work skin. In Create a New Work Skin, copy and paste CSS Code from the HTML and CSS Code to Two Column Newspaper Workskin post, or from here:
#workskin tr:hover,
#workskin td:hover {
background: none;
color: #000000;
}
#workskin .newspaper {
width: 50%;
height: 100%;
background-color: #EEEEEE;
font-family: "Times New Roman", Times, serif;
padding: 2px;
-moz-box-shadow: 5px 5px 7px rgba(33,33,33,1);
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
margin-bottom: 15px;
color: #000000;
}
#workskin .headline {
font-size: 130%;
width: 100%;
text-align: center;
margin-top: -10px;
margin-left: auto;
margin-right: auto;
display: block;
}
#workskin .article {
text-align: justify;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 10%;
-moz-column-gap: 50%;
column-gap: 10%;
-webkit-column-rule: 1px solid #000000;
-moz-column-rule: 1px solid #000000;
column-rule: 1px solid #000000;
margin-top: 0px;
margin-right: 15px;
margin-left: 15px;
padding: 0px;
}
#workskin img.float {
width: 100%;
height: 100%;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#workskin .border {
border: 1px solid #000000;
padding: 0px;
}
#workskin .hide {
display: none;
}
Name your work skin, and click Submit.
Work skin has been made! Now, create a new work. In the Associations tab, click on the Work Skin drop-down menu and select the workskin you just made.
Hoorah! Your work will now be able to use that work skin. Now, in Work Text, paste the below HTML code:
<center>
<p></p><div class="newspaper">
<p><br />
<span class="headline">
<b>Headline Headline Headline Headline Headline Headline</b>
</span>
</p>
<p></p><div class="article">
<p><img src="https://66.media.tumblr.com/a18a4989c3a30a620835a21bb4aa5e31/tumblr_inline_nrw6p033Sm1r97j2q_500.png" class="float border" align="“right”" alt="“description" /></p>
<p>
This is the first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. </p>
<p>This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article.<br />
</p>
</div>
</div>
</center>
(To anyone professional, yes, I know there is a lot of unnecessary code. This is after AO3 auto corrected the code. Take out as you will, AO3 will put those empty <p> brackets back in.)
Remember to click on HTML, not Rich Text. See where it says:
<p>
This is the first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. </p>
This is where you can input your first paragraph of text. After all, <p> stands for paragraph. For every subsequent paragraph, remember to encircle them in the <p></p> tag. For example, I'll input the following text:
<p> By Jason Todd</p>
<p> GOTHAM –– Billionaire Playboy and Wayne Heir Richie Grayson sure has a great ass.</p>
<p> No, I'm not stalking him, I'm not the paparazzi. No, I just obsessively track his Instagram account, and glimpse at him whenever I'm invited to a Wayne Gala. Jesus, the photographs do not lie. Was he blessed by an angel? What does he eat? Does a childhood in trapeze artistry lend to an ample bottom? Science needs to take a crack at this.</p>
<p>Get it. Crack.</p>
Would you look at that! Text will spill over the column on its own, you don't have to do anything for that. By the way, don't worry about lengthening the work skin. It adapts to how much text you have, as .newspaper is set to height=100%, or in relation to the amount of text in it. I also changed the headline and picture. You can change the headline in this part of the template:
<p><br />
<span class="headline">
<b>Headline Headline Headline Headline Headline Headline</b> <!-- Input your headline in between the <b></b> tags! -->
</span>
</p>
This is where I changed the image:
<p><img src="https://66.media.tumblr.com/a18a4989c3a30a620835a21bb4aa5e31/tumblr_inline_nrw6p033Sm1r97j2q_500.png" class="float border" align="“right”" alt="“description" /></p>
Just put a new image url where I bolded it! Remember, you cannot just upload an image to AO3. You need to upload to imgur, photobucket or another online photo uploading platform, then copy the image link (the link must end in .png, .jpg, .tiff, whichever) and paste it in.
Now, remember those lines in the CSS code we had copied?
#workskin .newspaper {
#workskin .headline {
#workskin .article {
.name usually refers to a class, or the name to a group set of CSS code. Under .newspaper, we set fonts, the off-white background colour, the width of each column in the work skin. In the HTML, we need to use this class name to establish the format, so we can use the work skin in the first place.
Now, look back at your HTML code. In the beginning of the text, you will see <div>. <div> is simply a division, or a lil invisible box to put code into. If you wanted to make two separate articles, you can make two <div>s and put code into it. You can also put <div>s into <div>s, as was done above. A box inside a box. As you can see, the first div was tagged with a class:
<div class ="newspaper">. Don't use the . in front of .newspaper when tagging it into HTML. HTML and CSS are two different languages, this is how it translates.
Why do I tell you this? Because, if you want to tweak anything inside these <div>s, you will understand how. Say, you want to change the background colour of the newspaper to a yellow-y tinge, like I did in the above example? As the master div uses the newspaper class, and it is .newspaper that controls the background colour, you would go into your work skin, and edit inside .newspaper's brackets. See below:
Original
#workskin .newspaper {
width: 50%;
height: 100%;
background-color: #EEEEEE; /*you can change the back ground colour hex code here.*/
font-family: "Times New Roman", Times, serif;
padding: 2px;
-moz-box-shadow: 5px 5px 7px rgba(33,33,33,1);
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
margin-bottom: 15px;
color: #000000;
}
After
#workskin .newspaper {
width: 50%;
height: 100%;
background-color: #FFFFCC; /*hex code changed to yellow-y tinge!*/
font-family: "Times New Roman", Times, serif;
padding: 2px;
-moz-box-shadow: 5px 5px 7px rgba(33,33,33,1);
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
margin-bottom: 15px;
color: #000000;
}
Once you're done editing, update the work skin, and refresh your work post.
Before After
You see those lines between the columns. Maybe you want to take those off? It is the class .article that controls those lines.
Original
#workskin .article {
text-align: justify;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 10%;
-moz-column-gap: 50%;
column-gap: 10%;
-webkit-column-rule: 1px solid #000000; /*Here is where I set the column to have an in-between line, 1px thick*/
-moz-column-rule: 1px solid #000000; /*Here too*/
column-rule: 1px solid #000000; /*Here three!*/
margin-top: 0px;
margin-right: 15px;
margin-left: 15px;
padding: 0px;
}
After
#workskin .article {
text-align: justify;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 10%;
-moz-column-gap: 50%;
column-gap: 10%;
-webkit-column-rule: 0px solid #000000; /*Voila, no line between!*/
-moz-column-rule: 0px solid #000000; /*Make it 0px here too*/
column-rule: 0px solid #000000; /*Here three!*/
margin-top: 0px;
margin-right: 15px;
margin-left: 15px;
padding: 0px;
}
Now, if you want to use a three-column newspaper work skin, you need to make a new work skin and link it to a new work. All other rules apply. Either get the HTML and CSS code here, or copy it from below:
HTML Code
<p></p><center>
<p></p><div class="newspaper">
<p><br />
<span class="headline">
<b>Headline Headline Headline Headline Headline Headline</b>
</span>
</p>
<p></p><div class="article2">
<p><img src="https://66.media.tumblr.com/a18a4989c3a30a620835a21bb4aa5e31/tumblr_inline_nrw6p033Sm1r97j2q_500.png" class="float border" align="“right”" alt="“description" /></p>
<p>
This is the first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. This is your first paragraph of your article. </p>
<p>This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article.<br />
</p>
<p>This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article. This is your second paragraph of your article.<br />
</p></div></div></center>
CSS Code
#workskin tr:hover,
#workskin td:hover {
background: none;
color: #000000;
}
#workskin .newspaper {
width: 80%;
height: 100%;
background-color: #EEEEEE;
font-family: "Times New Roman", Times, serif;
padding: 2px;
-moz-box-shadow: 5px 5px 7px rgba(33,33,33,1);
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
margin-bottom: 15px;
color: #000000;
}
#workskin .headline {
font-size: 400%;
width: 100%;
text-align: center;
margin-top: -10px;
margin-left: auto;
margin-right: auto;
display: block;
}
#workskin .article2 {
text-align: justify;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 10%;
-moz-column-gap: 10%;
column-gap: 10%;
-webkit-column-rule: 1px solid #000000;
-moz-column-rule: 1px solid #000000;
column-rule: 1px solid #000000;
margin-top: 0px;
margin-right: 15px;
margin-left: 15px;
padding: 0px;
}
#workskin img.float {
width: 100%;
height: 100%;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#workskin .border {
border: 1px solid #000000;
padding: 0px;
}
#workskin .hide {
display: none;
}Found this a little confusing? Maybe a little too babying? The original maker of this skin, La_Temperanza has a more comprehensive guide on how to use these skins. Till then, JayDick Challengees, I hope you found this useful!