Newspaper/Magazine Article Template

Note as of 18/01/2026: This is currently under revision; I wrote the original template when I was less experienced with CSS (specifically flexbox), and the updated version now uses flexbox to format the clickbait thumbnails. I also got rid of the awful styling of the code lol, so hopefully it’s easier to parse and copy. I have also drawn in the width of the article, as most text columns tend to be no wider than 60–70 characters for readability reasons. This can be reverted by changing the value of max-width on the #workskin .article ruleset to 72em to fit with the default AO3 styling (or by removing that declaration entirely).

Here’s something I whipped up for a current project which I thought I might as well throw onto the Archive, since it could be useful to someone. As you can see, it’s a fairly basic template for a newspaper or magazine article with a disappearing navigation bar and extra clickbait at the bottom, if you want to include that. Scroll down to see it in action; the associated HTML and CSS are jsut below that.

I’ve tried to keep this simple and add appropriate comments so that people without a great deal of knowledge of HTML/CSS will be able to parse it; if you want more information on how to read and write HTML/CSS, there are plenty of resources on both the Archive and the wider Web. I’ve attached a few at the bottom of this post – bear in mind that I’ve only skimmed most of them, so they may not be perfect!

Demonstration

Who’s afraid of some HTML?

By [author] | [date]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis tincidunt dolor. Maecenas imperdiet massa justo, id tristique erat vestibulum et. Duis laoreet metus non malesuada euismod. Quisque finibus ultricies vulputate. Aliquam quis velit ornare, aliquam dolor porttitor, rhoncus orci. Vivamus egestas lacinia diam, at porta nisl iaculis aliquet. Etiam euismod, metus id maximus sollicitudin, turpis lectus lacinia erat, a ullamcorper arcu enim et sem. Duis sit amet cursus erat, at commodo lectus. Etiam eleifend odio ut gravida venenatis. Proin finibus sollicitudin erat, a mattis odio molestie tempor. Ut arcu velit, consectetur in hendrerit ut, vestibulum in massa.

Nulla nec odio sagittis, convallis ante in, tristique nulla. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam id hendrerit mauris, id accumsan augue. Ut id venenatis eros. Fusce quis ipsum diam. Nunc nulla arcu, mollis et ullamcorper eget, pretium et ex. Fusce ullamcorper aliquet semper. Fusce euismod ante metus, pellentesque fringilla eros commodo non. Maecenas sit amet nunc ante. Nam a faucibus diam, eu sodales tortor. Fusce gravida, arcu sit amet posuere posuere, magna diam fringilla nisl, sit amet tempor risus ex eget lorem. Duis dignissim, metus id tempor pretium, dui quam vulputate velit, in sollicitudin leo ligula vitae sem. Vivamus non sem euismod sapien porta sodales a sed massa. Phasellus viverra felis sapien, ac porta magna malesuada id. Maecenas leo magna, egestas sed libero eu, vehicula lobortis massa.

Curabitur pharetra tincidunt felis eu suscipit. In hac habitasse platea dictumst. Vivamus vestibulum semper ex, vel tempus magna bibendum sit amet. Etiam consectetur rutrum sapien eget ultricies. Suspendisse mattis hendrerit sem, quis interdum sapien gravida laoreet. Praesent dapibus augue quis risus dapibus, ut dapibus ante tincidunt. Fusce mattis libero non dui tincidunt, id dapibus lectus tincidunt. Duis venenatis tortor at dapibus gravida. Suspendisse ac consequat arcu. Mauris tincidunt lectus sed tellus cursus, in pharetra enim imperdiet. Nullam bibendum justo eu leo interdum pellentesque. Fusce tristique ligula erat, non placerat lectus consequat eu. Sed aliquet vel ligula quis pulvinar.

Vivamus non nunc accumsan, dapibus mauris in, vulputate sem. Donec lacinia imperdiet efficitur. Pellentesque quis arcu et mi posuere ullamcorper. Vestibulum dapibus auctor dui, a vulputate diam pulvinar quis. Pellentesque non congue mauris. Integer luctus, risus ac sagittis tempor, ipsum enim sodales turpis, a iaculis est tortor in libero. Etiam ut lorem sed magna pellentesque luctus. Fusce sit amet diam dolor. Phasellus quis lacinia velit, et viverra neque. Quisque pharetra cursus risus, blandit interdum ante fermentum in. Quisque non quam interdum, venenatis augue vitae, volutpat leo. In hac habitasse platea dictumst. Vestibulum eget nisl eget arcu aliquam auctor non ac nibh. Integer nec risus pellentesque, consequat massa id, ultricies risus.

Phasellus porta, leo in vestibulum porttitor, metus nisi dapibus nunc, quis efficitur magna metus non turpis. Aliquam elit sapien, dictum nec ornare non, euismod vel purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. In ac nulla aliquam, aliquet ex eu, efficitur metus. Vestibulum id eros arcu. In commodo elementum quam, sed tristique turpis accumsan vitae. Maecenas ac vestibulum dolor. Sed quis quam vitae nisi tempus elementum. Cras feugiat nisl et porta sagittis. Sed magna nibh, accumsan a consectetur quis, tempor eu nisl. Cras lacinia, dui efficitur dictum semper, ligula nisl placerat est, sed lobortis velit orci a nisi. Aliquam at felis metus. Aliquam et diam tincidunt, lacinia tortor nec, feugiat tellus. Vivamus et ligula feugiat, rhoncus metus eget, rutrum sem. Suspendisse dictum mi in erat ultrices, id lobortis dui ultricies.

As part of an opinion piece, the views contained herein are neither endorsed nor condemned by The Daily Star.

You might also like . . .

NEWS
Five things you should know about this year’s election
HEALTH
Scientists discover MIRACLE WEIGHT LOSS PILL: read on for more!
SPORT
The elusive history of women in sport

Code

Click to view HTML

<div class="article">
<div class="header">
<h1>The Daily Star</h1>
<div class="navbar">
<ul class="nobullets">
<li>Home</li>
<li>News</li>
<li>Sport</li>
<li>Culture</li>
					
<li>Health</li>
</ul>
</div>
</div>
<div class="content">
<div class="textbody">
<h2>Who’s afraid of some HTML?</h2>
<p class="byline">By <span class="author">[author]</span> |
						[date]</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis
						tincidunt dolor. Maecenas
						imperdiet massa justo, id tristique erat vestibulum et. Duis laoreet metus non malesuada
						euismod.
						Quisque finibus ultricies vulputate. Aliquam quis velit ornare, aliquam dolor porttitor, rhoncus
						orci.
						Vivamus egestas lacinia diam, at porta nisl iaculis aliquet. Etiam euismod, metus id maximus
						sollicitudin, turpis lectus lacinia erat, a ullamcorper arcu enim et sem. Duis sit amet cursus
						erat, at
						commodo lectus. Etiam eleifend odio ut gravida venenatis. Proin finibus sollicitudin erat, a
						mattis odio
						molestie tempor. Ut arcu velit, consectetur in hendrerit ut, vestibulum in massa.
</p>
<p>
Nulla nec odio sagittis, convallis ante in, tristique nulla. class aptent taciti sociosqu ad litora
						torquent per conubia nostra, per inceptos himenaeos. Etiam id hendrerit mauris, id accumsan
						augue. Ut id
						venenatis eros. Fusce quis ipsum diam. Nunc nulla arcu, mollis et ullamcorper eget, pretium et
						ex. Fusce
						ullamcorper aliquet semper. Fusce euismod ante metus, pellentesque fringilla eros commodo non.
						Maecenas
						sit amet nunc ante. Nam a faucibus diam, eu sodales tortor. Fusce gravida, arcu sit amet posuere
						posuere, magna diam fringilla nisl, sit amet tempor risus ex eget lorem. Duis dignissim, metus
						id tempor
						pretium, dui quam vulputate velit, in sollicitudin leo ligula vitae sem. Vivamus non sem euismod
						sapien
						porta sodales a sed massa. Phasellus viverra felis sapien, ac porta magna malesuada id. Maecenas
						leo
						magna, egestas sed libero eu, vehicula lobortis massa.
</p>
<p>
Curabitur pharetra tincidunt felis eu suscipit. In hac habitasse platea dictumst.
						Vivamus vestibulum
						semper ex, vel tempus magna bibendum sit amet. Etiam consectetur rutrum sapien eget ultricies.
						Suspendisse mattis hendrerit sem, quis interdum sapien gravida laoreet. Praesent dapibus augue
						quis
						risus dapibus, ut dapibus ante tincidunt. Fusce mattis libero non dui tincidunt, id dapibus
						lectus
						tincidunt. Duis venenatis tortor at dapibus gravida. Suspendisse ac consequat arcu. Mauris
						tincidunt
						lectus sed tellus cursus, in pharetra enim imperdiet. Nullam bibendum justo eu leo interdum
						pellentesque. Fusce tristique ligula erat, non placerat lectus consequat eu. Sed aliquet vel
						ligula quis
						pulvinar.
</p>
<p>
Vivamus non nunc accumsan, dapibus mauris in, vulputate sem. Donec lacinia
						imperdiet efficitur.
						Pellentesque quis arcu et mi posuere ullamcorper. Vestibulum dapibus auctor dui, a vulputate
						diam
						pulvinar quis. Pellentesque non congue mauris. Integer luctus, risus ac sagittis tempor, ipsum
						enim
						sodales turpis, a iaculis est tortor in libero. Etiam ut lorem sed magna pellentesque luctus.
						Fusce sit
						amet diam dolor. Phasellus quis lacinia velit, et viverra neque. Quisque pharetra cursus risus,
						blandit
						interdum ante fermentum in. Quisque non quam interdum, venenatis augue vitae, volutpat leo. In
						hac
						habitasse platea dictumst. Vestibulum eget nisl eget arcu aliquam auctor non ac nibh. Integer
						nec risus
						pellentesque, consequat massa id, ultricies risus.
</p>
<p>
Phasellus porta, leo in vestibulum porttitor, metus nisi dapibus nunc, quis
						efficitur magna metus non
						turpis. Aliquam elit sapien, dictum nec ornare non, euismod vel purus. Interdum et malesuada
						fames ac
						ante ipsum primis in faucibus. In ac nulla aliquam, aliquet ex eu, efficitur metus. Vestibulum
						id eros
						arcu. In commodo elementum quam, sed tristique turpis accumsan vitae. Maecenas ac vestibulum
						dolor. Sed
						quis quam vitae nisi tempus elementum. Cras feugiat nisl et porta sagittis. Sed magna nibh,
						accumsan a
						consectetur quis, tempor eu nisl. Cras lacinia, dui efficitur dictum semper, ligula nisl
						placerat est,
						sed lobortis velit orci a nisi. Aliquam at felis metus. Aliquam et diam tincidunt, lacinia
						tortor nec,
						feugiat tellus. Vivamus et ligula feugiat, rhoncus metus eget, rutrum sem. Suspendisse dictum mi
						in erat
						ultrices, id lobortis dui ultricies.
</p>
<p class="disclaimer">
As part of an opinion piece, the views contained herein are neither endorsed nor
						condemned by <i>The Daily Star</i>.
</p>
</div>
<div class="clickbait">
<h3>You might also like
						.&thinsp;.&thinsp;.</h3>
<ul class="nobullets">
<li class="thumbnail">
<p class="category">
					
<span class="news">NEWS</span>
</p>
<h4>Five things you should know about this year’s
						election</h4>
</li>
<li class="thumbnail">
<p class="category">
					
<span class="health">HEALTH</span>
</p>
<h4>Scientists discover MIRACLE WEIGHT LOSS PILL:
						read on for more!</h4>
</li>
<li class="thumbnail">
<p class="category">
					
<span class="sport">SPORT</span>
</p>
<h4>The elusive history of women in
						sport</h4>
</li>
</ul>
</div>
</div>
</div>

CSS comments are contained /* like this */ – these will be removed by AO3’s sanitiser if you save this as a work skin.

View the CSS

#workskin .nobullets,
#workskin .nobullets li {
/* Remove bullet points */
list-style-type: none;
}

#workskin .article {
background:
							hsl(60, 25%, 98%);
						
/* Page border */
border:
							1px solid hsl(0, 0%, 60%);
						
box-shadow:
							0 0 15px 1px #0002;
						
box-sizing:
							border-box;
						
font-family:
							"Trebuchet MS", Tahoma, Arial, sans-serif;
						
font-size:
							1em;
						
margin:
							0 5%;
						
max-width:
							72em;
						
position:
							relative;
						
width:
							90%;
						
/* z-index used so that the navbar and
								header layer correctly */
z-index:
							1;
						
}

/* Resets formatting within the article container */

#workskin .article * {
border:
							none;
						
box-sizing:
							border-box;
						
margin:
							0;
						
padding:
							0;
						
}

#workskin .article p {
/* Main text colour */
color:
							#000;
						
margin-bottom: 1em;
						
}

#workskin .article .header {
background:
							transparent;
						
height:
							7em;
						
/* Necessary for z-index */
position:
							relative;
						
/* Header on highest layer so
								navbar goes behind it */
z-index:
							3;
						
}

#workskin .article .header h1 {
						
background:
							hsl(0, 50%, 35%);
						
border-bottom: 2.5px solid black;
color:
							white;
						
font-style:
							italic;
						
font-weight:
							bold;
						
height:
							2em;
						
/* So header text is vertically
								centred */
line-height:
							2em;
						
margin:
							0 auto;
						
position:
							relative;
						
text-align:
							center;
						
text-shadow:
							1px 1px #000;
						
z-index:
							3;
						
}

#workskin .article .navbar {
						
/* If the background isn’t transparent,
								the
								navbar becomes visible :( */
background:
							transparent;
						
height:
							2em;
						
width:
							100%;
						
}

#workskin .article .navbar ul,
						
#workskin .article .navbar li {
						
background:
							hsl(0, 50%, 35%);
						
color:
							white;
						
position:
							relative;
						
top:
							-1em;
						
text-align:
							center;
						
/* So the navbar slides in and out of
								view
								instead of just appearing. Syntax is <property> | <duration> |
								<behaviour>
								*/
transition:
							top 0.3s ease-in-out;
						
width:
							100%;
						
/* Place navbar on layer below
								header */
z-index:
							2;
						
}

#workskin .article .navbar li {
						
display:
							block;
						
/* float property required so that the
								list
								items are pressed together */
float:
							left;
						
height:
							2em;
						
line-height:
							2em;
						
width:
							20%;
						
}

/* Show navbar when hovering on header */

#workskin .header:hover .navbar ul,
#workskin .header:hover .navbar li {
top:
							0;
						
}

/* List item and author name are not clickable, only designed to look like they are! */

#workskin .article .navbar li:hover,
#workskin .article .byline span:hover {
cursor:
							pointer;
						
text-decoration: underline;
						
}

/* Headline, byline, and article text formatting */

#workskin .article .content {
background:
							transparent;
						
box-sizing:
							unset;
						
color:
							#000;
						
padding:
							1.5em 7.5%;
						
width:
							85%;
						
word-wrap:
							break-word;
						
}

#workskin .article .textbody,
#workskin .article .clickbait {
background:
							transparent;
						
width:
							100%;
						
}

#workskin .article .textbody h2 {
						
font-weight:
							bold;
						
height:
							fit-content;
						
line-height:
							2em;
						
}

#workskin .article .textbody .byline {
						
color:
							#444;
						
}

#workskin .article .textbody p {
						
line-height:
							1.5em;
						
text-align:
							justify;
						
}

#workskin .article .disclaimer {
						
background:
							hsl(0, 50%, 90%);
						
border-left:
							5px solid hsl(0, 50%, 50%);
						
color:
							#424242;
						
font-variant:
							small-caps;
						
font-weight:
							bold;
						
margin-bottom: 0;
padding:
							0.5em;
						
}

#workskin .article .clickbait
							{
						
min-height:
							15em;
						
padding:
							0 5px;
						
width:
							100%;
						
}

#workskin .article .clickbait
							h3 {
						
font-size:
							1.5em;
						
font-style:
							italic;
						
line-height:
							1;
						
margin:
							0.5em auto;
						
text-align:
							left;
						
}

#workskin .article .clickbait
							ul {
						
display:
							flex;
						
align-items:
							flex-start;
						
flex-wrap:
							wrap;
						
justify-content: space-around;
						
margin:
							0;
						
width:
							100%;
						
}

#workskin .article .thumbnail
							{
						
background:
							white;
						
box-shadow:
							0 0 15px 1px #0001;
						
box-sizing:
							border-box;
						
/* This property means that the thumbnails will adopt a default width of 32% but will also grow/shrink to fit the space down to a minimum width of 200px (as few screens are thinner than ~240px). */
flex:
							1 1 32%;
						
margin:
							5px;
						
min-width:
							200px;
						
padding:
							0.5em;
						
}
/* So thumbnails seem to lift up when hovered over */
#workskin .article
							.thumbnail:hover {
						
box-shadow:
							0 0 15px 1px #0004;
						
cursor:
							pointer;
						
}

#workskin .article .thumbnail
							.category {
						
font-size:
							1em;
						
line-height:
							1.5;
						
margin:
							0.25em 0;
						
}

#workskin .article .thumbnail
							.category span {
						
font-style:
							italic;
						
}

#workskin .article span.news
							{
						
border-bottom: 3px double #2D862D;
color:
							#2D862D;
						
}

#workskin .article
							span.health {
						
border-bottom: 3px double #2D2D86;
color:
							#2D2D86;
						
}

#workskin .article span.sport
							{
						
border-bottom: 3px double #40BFBF;
color:
							#40BFBF;
						
}

#workskin .article .thumbnail
							h4 {
						
font-size:
							1.5em;
						
height:
							fit-content;
						
margin:
							0;
						
max-height:
							5em;
						
overflow:
							hidden;
						
width:
							100%;
						
}

NB: If you’re having issues with applying the skin, the first thing you should do is check that you haven’t got any other skins applied (work or site skins alike) that could be interfering with the formatting, and also that there aren’t any other elements in your work that have the same class names as the article components. If you have two skins that deal with two identically named elements (so for example if you have another HTML element in the work with class header), then you may find that they overwrite each other or interact in weird ways. If the problem persists after removing any other skins or rogue elements, then it’s more likely to be an issue with the skin itself, in which case please let me know.

Series this work belongs to:

Part 1 of Frontend Shenanigans Next Work →

Works inspired by this one:

Through the Looking Glass with Oscar Clark by Anglerfishjellies

Actions

Kudos

skipperverse, UAreNotAlone, Applesandbannas747, Chocolate_wolfff, ZeroMonster, Portia_Reads, coyotelip, AkiraRaye, Charles_Rockafellor, Overlookedfile, mystyrust, queertannieluvr, aliensass, Katophoenix, TheGoldenHind, baskinginmoonglow, Rockslide, elkphant, Linwelin, i_dwell_in_darkness, and stendhal as well as 3 guests left kudos on this work!

Archive of Our Own^beta

Actions

Work Header