Welcome

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!

The Code

HTML

For anyone unfamiliar: anything enclosed <!--like this--> is a comment and will be ignored by AO3’s HTML editor.

<div class="article">

<!--Header section-->

<div class="header">

<h1>The Daily Star</h1>

<!--Navigation menu; this is invisible until the header section is hovered over-->

<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">

<!--Headline-->

<h2>Who’s afraid of some HTML?</h2>

<!--Author, date posted, any other meta-information you wish to include-->

<p class="byline">By <span class="author">[author]</span> | [date]</p>

<!--Article text begins-->

<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>Sed id lorem consequat, venenatis magna vel, ultricies est. Aenean vestibulum congue lacus ut commodo. Nulla ut molestie diam, vitae interdum mi. Ut et odio vestibulum, facilisis eros non, iaculis dolor. Donec vitae nulla sit amet turpis pulvinar pretium. Suspendisse vel scelerisque libero. Morbi purus diam, eleifend non felis eu, commodo dictum metus. Fusce non lacus lectus. Nam faucibus rutrum egestas. Ut euismod tincidunt dolor bibendum aliquam.</p>

<p>Vestibulum pharetra tempus nibh, eu suscipit sapien interdum in. Nulla eu risus vel justo dignissim molestie. Sed et dolor id ex luctus gravida eget eget felis. Phasellus non vulputate diam. Donec fermentum nibh lacus, ac dignissim massa congue sed. Quisque rutrum fermentum dui quis tristique. Morbi ligula turpis, bibendum ut vestibulum laoreet, aliquet sit amet ipsum. Maecenas imperdiet arcu id fermentum aliquam. Morbi pellentesque scelerisque tortor, vel finibus augue vulputate sit amet.</p>

<p>Vivamus sit amet venenatis elit. Duis sit amet laoreet sapien. Cras at nunc ac turpis sagittis congue. Mauris ac dapibus quam, quis tempor sem. Maecenas maximus aliquam elit iaculis semper. Curabitur nulla erat, iaculis vel odio non, rutrum tristique neque. Vivamus quis facilisis leo. Nunc et sapien elit. Morbi id augue vitae nisl posuere viverra eget vel felis. Nunc fringilla euismod semper. Fusce ultrices euismod auctor. Donec molestie viverra dignissim.</p>

<p>Vestibulum rutrum eros dui, vel aliquet ligula finibus et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus fringilla mi quis viverra vestibulum. Fusce convallis nunc eu erat aliquam faucibus. Fusce in libero ac dolor imperdiet condimentum ut in tortor. Aenean vitae lacus nec dui efficitur venenatis sed eu tortor. Nulla laoreet, metus sed porta tristique, urna nibh tincidunt lacus, quis hendrerit libero nibh a ex. Donec sapien neque, ultrices nec blandit eget, euismod sit amet ante. Fusce vitae augue euismod, ultrices ligula in, tempus nisi. Duis volutpat interdum mi, eget ornare augue feugiat vitae. Aliquam in ex vel dui fermentum cursus. Duis eu neque in nisi congue molestie. Nulla sodales leo eu nisl bibendum dapibus. Morbi et condimentum nulla, nec efficitur augue. Nunc vulputate mauris at hendrerit feugiat. Pellentesque id interdum augue.</p>

<p>Fusce ac viverra ante. Duis commodo, elit quis varius porta, nisi libero fringilla sem, in eleifend orci nulla vitae ligula. Fusce vestibulum viverra diam a malesuada. Duis commodo massa quis justo pulvinar, vitae porttitor lacus dapibus. Donec pellentesque fringilla diam vel convallis. Fusce placerat risus erat, ut dapibus libero blandit at. Etiam ultrices nibh eu augue semper, et cursus nunc iaculis. Mauris sit amet neque sed leo ultrices fringilla. Curabitur tempor tincidunt suscipit. Nam ornare mauris vel orci molestie.</p>

<!--Article text ends-->

<p class="disclaimer">As part of an opinion piece, the views contained herein are neither endorsed nor condemned by <em>The Daily Star</em>.</p>

</div>

<!--Those little clickbait headlines at the bottom of the page-->

<div class="clickbait">

<h3>You might also like .&thinsp;.&thinsp;.</h3>

<ul class="nobullets">

<li class="thumbnail">

<!--If you want to add a new category, make sure you create it as a class—AO3 doesn’t gel very well with user-created IDs. The span tag is there so the double underline only underlines the word and not its container-->

<p class="category"><span class="news">NEWS</span></p>

<h4>Five things you should know about the upcoming 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

Anything enclosed /* like this */ is a comment and will be deleted by AO3’s editor. Currently the CSS doesn’t really work very well in a dark site skin, since it was designed with the default in mind.

  

#workskin .nobullets {

/* 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 {

height: 15em;

padding: 0 5px;

width: 100%;

}

#workskin .article .clickbait h3 {

font-size: 1.5em;

font-style: italic;

height: 2em;

line-height: 2em;

margin: 0.5em 0;

text-align: left;

}

#workskin .article .clickbait ul {

height: 11em;

width: 100%;

}

#workskin .article .thumbnail {

background: white;

box-shadow: 0 0 15px 1px #0001;

display: inline-block;

height: 11em;

margin: 0 1%;

padding: 1%;

/* To calculate the width of a .thumbnail element, assuming you don’t want the list to overflow the container, do the following:

-> Let m be the vertical margin as a percentage and let n be the number of .thumbnail elements you want.

-> width = 2 * (51 - m) / n */

width: 32%;

}

/* 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:first-child {

margin-left: 0;

}

#workskin .article .thumbnail:last-child {

margin-right: 0;

}

#workskin .article .thumbnail .category {

height: 2em;

line-height: 2em;

margin: 0;

margin-bottom: 0.5em;

}

#workskin .article .thumbnail .category span {

display: block;

float: left;

font-style: italic;

height: 2em;

line-height: 2em;

padding: 0 0.1em;

width: fit-content;

}

#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;

max-height: 5em;

overflow: hidden;

width: 100%;

}

And that’s it! Hope this is helpful! :D

Footnotes

In no particular order:

1. A wonderful guide to HTML specifically in relation to AO3: https://archiveofourown.org/works/5191202/chapters/11961779
2. More specific information about what tags/attributes are permitted: https://archiveofourown.org/faq/formatting-content-on-ao3-with-html?language_id=en
3. A beginner’s guide to HTML: https://blog.hubspot.com/website/html
4. A more comprehensive tutorial on HTML: https://www.w3schools.com/html/
5. A more comprehensive tutorial on CSS (by the same site as above): https://www.w3schools.com/css/
6. Introduction to CSS—in general, this site should be one of your first points of contact when dealing with unfamiliar tags/attributes/declarations: https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps