I’m aware that similar layout has already been posted on ao3, but for my purpose I needed a more specific variation. Now I decided to share it, in case someone has the same need for their fake TV show or something 😁 Feel free to copy the code in whole or in parts for your work.
I'm just an amateur, so maybe code not exactly advanced and has some silly flaws, sorry for that.

(See the end of the work for more notes.)

Chapter 1: How it looks

Chapter Text

Title (TV Series)

From Wikipedia, the free encyclopedia

Title

Annotation

Genre	Text
Directed by	Text
Starring	Text
Composer	Text
Country of origin	Country
Language of origin	Text
№ of seasons	Text
№ of episodes	Text
IMDb	ID Text

Title (Title) — Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem^[1]. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Contents

1 Plot
2 Characters
- 2.1 Main
- 2.2 Others
3 Episodes
- 3.1 Season 1
- 3.2 Season 2
4 Reception
5 Gallery
6 References

Plot

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Characters

Main

• Character — lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Others

• Character — lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Episodes

Season 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

№	Title	Original Air Date	Production Code
1	«Title»	X.XX.XXXX	XXX
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
2	«Title»	X.XX.XXXX	XXX
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Season 2

№	Title	Original Air Date	Production Code
1	«Title»	X.XX.XXXX	XXX
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
2	«Title»	X.XX.XXXX	XXX
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Reception

Gallery

Annotation

References

1. Author. Title. — Publishing House, XXXX. — X p. — ISBN .

Title (?—?) · Title · Title

Chapter 2: HTML and CSS to recreate it

Chapter Text

First of all, you need to create a new work skin (you can follow the instructions from How do I create a work skin? if you have never done this before).

Copy and paste the style sheet from below into it, save and apply the skin to the work which you want to look article-like.

Click to view the CSS code

#workskin .article {
padding: 1.25em 1.5em 1.5em 1.5em;
border-left: 1px solid #a7d7f9;
border-right: 1px solid #a7d7f9;

border-top: 1px solid #a7d7f9;
border-bottom: 1px solid #a7d7f9;
background: #FFF;
line-height: 1.6;
font-size: 1em;
width: 95%;
max-width: 95%;
}

#workskin .article p {
line-height: inherit;
margin: 0.5em 0;
}

#workskin span.user {
background-position: left top;
background-repeat: no-repeat;
padding-left: 15px !important;
}

#workskin div.articleRightside {
border: 1px solid #c8ccd1;
padding: 3px;
float: right;
background-color: #f8f9fa;
font-size: 94%;
text-align: left;
overflow: hidden;
line-height: 1.4em;
margin: 0 0 5px 15px;
width: 35%;
min-width: 200px;
}

#workskin div.articleRightside1 {
border: 1px solid #c8ccd1;
padding: 3px;
background-color: #f8f9fa;
font-size: 89%;
text-align: left;
overflow: hidden;
width: 97%;
}

#workskin div.articleRightside2 {
border: 1px solid #c8ccd1;
padding: 3px;
background-color: #dae0e6;
font-size: 100%;
text-align: center;
overflow: hidden;
width: 97%;
}

#workskin .contentsPanel {
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
padding: 5px;
font-size: 95%;
position: relative;
line-height: 1.1em;
width: 35%;
}

#workskin .contentsHeader {
font-family: sans-serif;
font-weight: bold;
text-align: center;
}

#workskin .contentsPanel ul li span {
display: inline-block;
margin-right: 8px;
}

#workskin .contentsPanel ul {
padding: 0 0 5px 5px;
}

#workskin .contentsPanel ul li ul li {
padding: 0 0 0 25px;
}

#workskin h1 {
line-height: 1.3;
margin-bottom: 0.25em;
padding: 0;
letter-spacing: 0;
font-size: 2.3em;
text-align: left;
}

#workskin a,
#workskin a:visited {
color: #0645ad;
text-decoration: none !important;
border: none;
}

#workskin a:hover {
text-decoration: underline;
}

#workskin .fake_a {
color: #0645ad;
text-decoration: none;
}

#workskin .fake_a:hover {
text-decoration: underline;
}

#workskin hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

#workskin small {
font-size: 80%;
}

#workskin sub,
#workskin sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

#workskin sup {
top: -0.5em;
}

#workskin sub {
bottom: -0.25em;
}

#workskin img {
border: 0;
max-width: 100%;
}

#workskin ul {
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0.3em 0 0 0;
}

#workskin li {
list-style-type: none;
list-style-image: none;
padding: 0.3em 0 0 0;
margin-left: 1em;
}

#workskin .h3 {
padding: 0;
margin-bottom: 0;
font-weight: bold;
color: #000000;
font-size: 22px;
font-family: "Linux Libertine", Georgia, Times, serif;
border-bottom: 1px solid #d4d4d4;
}

#workskin table.styledTable {
text-align: left;
}

#workskin table.styledTable td,
#workskin table.styledTable th {
width: 50%;
}

#workskin table.styledTable1 {
background-color: #F8F9FA;
text-align: left;
float: left;
width: 50%;
}

#workskin table.styledTable1 td,
#workskin table.styledTable1 th {
border: 1px solid #a2a9b1;
}

#workskin table.styledTable2 {
background-color: #F8F9FA;
text-align: left;
border: 1px solid #a2a9b1;
width: 100%;
padding: 7px;
table-layout: fixed;
border-collapse: collapse;
}

#workskin table.styledTable2 td,
#workskin table.styledTable2 th {
border: 1px solid #a2a9b1;
padding: 7px;
}

#workskin table tr td.td2:last-child {
word-break: break-word;
}

#workskin .headedTable1 {
background: #EAECF0;
}

#workskin .headedTable2 {
background: #c5e4e1;
}

#workskin .headedTable3 {
background: #a0d6b4;
}

#workskin .section1 {
padding: 0;
margin-top: 2em;
margin-bottom: 0;
color: #000000;
font-weight: semibold;
font-size: 22px;
font-family: Georgia, serif;
border-bottom: 1px solid #d4d4d4;
}

#workskin .section2 {
line-height: 1.3;
margin-bottom: 0.25em;
padding: 0;
letter-spacing: 0;
font-size: 1.1em;
text-align: left;
font-weight: bold;
}

#workskin .section3 {
line-height: 1.3;
margin-bottom: 0.25em;
padding: 5px;
letter-spacing: 0;
font-size: 1em;
text-align: left;
font-weight: bold;
text-indent: 5px;
}

#workskin .gallery2 {
border: 1px solid #c8ccd1;
padding: 3px;
background-color: #f8f9fa;
font-size: 94%;
text-align: center;
overflow: hidden;
display: inline-block;
line-height: 1.4em;
margin: 5px 5px 5px 5px;
width: 95%;
height: 95%;
border-left: 1px solid #c8ccd1;
border-right: 1px solid #c8ccd1;
border-top: 1px solid #c8ccd1;
border-bottom: 1px solid #c8ccd1;
}

#workskin .gallery1 {
top: 0;
right: 0;
left: 0;
bottom: 0;
padding: 10px;
font-size: 80%;
text-align: center;
position: relative;
overflow: hidden;
line-height: 1.4em;
margin: 10px 10px 10px 10px;
width: 30%;
display: inline-block;
box-sizing: border-box;
transition: 0.5s;
}

#workskin .gallery1:hover {
transform: scale(1.3);
}

#workskin .char {
padding-left: 10px;
}

#workskin .reference-text {
font-size: 0.8em;
}

#workskin .bottomBox {
background: #fdfdfd;
border: 1px solid #a2a9b1;
clear: both;
font-size: 88%;
text-align: center;
padding: 3px;
line-height: 1.7em;
margin: 1em auto 0;
}

#workskin .bottomBox .header {
background: #cfe3ff;
padding: 0.25em 1em;
line-height: 1.5em;
text-align: center;
font-weight: bold;
color: #0645ad;
font-size: 115%;
margin-bottom: 3px;
}

#workskin .categories {
border: 1px solid #a2a9b1;
background-color: #f8f9fa;
padding: 5px;
margin-top: 1em;
font-size: 0.9em;
clear: both;
}

#workskin .pagefooter {
padding: 1.5em 1.3em 2em;
font-size: 75%;
line-height: 2em;
}

Then copy the HTML code from below to work (remember that you need to place it in the HTML editor window, NOT the Rich Text editor!). And it’s done! Now you can replace text and pictures, add or remove paragraphs and subsections.

Click to view the HTML code

<div class="article">
<h1 align="left">Title (TV Series)</h1>

<p class="siteSub">From Wikipedia, the free encyclopedia</p><div class="articleRightside">
<div class="articleRightside2">

<p align="center">
<strong>Title</strong>
</p></div>
<div class="articleRighside1">

<p align="center"><img src="https://rataku.com/images/2023/02/06/your_image.jpg" alt="" /><br />
Annotation</p><table class="styledTable" width="100%">
<tbody>
<tr>
<td width="35%"><strong>Genre</strong></td>
<td width="65%"><span class="fake_a">Text</span></td>
</tr>
<tr>
<td width="35%"><strong>Directed by</strong></td>
<td width="65%"><span class="fake_a">Text</span></td>
</tr>
<tr>
<td width="35%"><strong>Starring</strong></td>
<td width="65%"><span class="fake_a">Text</span></td>
</tr>
<tr>
<td width="35%"><strong>Composer</strong></td>
<td width="65%"><span class="fake_a">Text</span></td>
</tr>
<tr>
<td width="35%"><strong>Country of origin</strong></td>
<td width="65%"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Flag_of_the_United_States.svg/33px-Flag_of_the_United_States.svg.png" alt="" width="33" height="19" /> <span class="fake_a">Country</span></td>
</tr>
<tr>
<td width="35%"><strong>Language of origin</strong></td>
<td width="65%"><span class="fake_a">Text</span></td>
</tr>
<tr>
<td width="35%"><strong>№ of seasons</strong></td>
<td width="65%"><span class="fake_a">Text</span></td>
</tr>
<tr>
<td width="35%"><strong>№ of episodes</strong></td>
<td width="65%"><span class="fake_a">Text</span></td>
</tr>
<tr>
<td width="35%"><strong><span class="fake_a">IMDb</span></strong></td>
<td width="65%"><span class="fake_a">ID Text</span></td>
</tr>
</tbody>
</table>
</div>
</div>

<p><strong>Title</strong> (<em>Title</em>) — Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="fake_a">Aenean</span> commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem<sup><span class="fake_a">[1]</span></sup>. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. </p>

<p class="section3">Contents</p></div>
<ul>
<li>1 <a href="#paragraph1" rel="nofollow">Plot</a></li>
<li>2 <a href="#paragraph2" rel="nofollow">Characters</a>
<ul>
<li>2.1 <a href="#paragraph21" rel="nofollow">Main</a></li>
<li>2.2 <a href="#paragraph22" rel="nofollow">Others</a></li>
</ul>
</li>
<li>3 <a href="#paragraph3" rel="nofollow">Episodes</a>
<ul>
<li>3.1 <a href="#paragraph31" rel="nofollow">Season 1</a></li>
<li>3.2 <a href="#paragraph32" rel="nofollow">Season 2</a></li>
</ul>
</li>
<li>4 <a href="#paragraph4" rel="nofollow">Reception</a></li>
<li>5 <a href="#paragraph5" rel="nofollow">Gallery</a></li>
<li>6 <a href="#paragraph6" rel="nofollow">References</a></li>
</ul>
</div>
<div class="section1">

<p> Characters</p></div>

<p class="char"><strong>•</strong><strong> Character </strong>— lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>

<p class="section2">Others</p>

<p class="char"><strong>• Character </strong>— lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>

<p> Episodes</p></div>

<p class="section2">Season 1</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p><table class="styledTable2">
<tbody>
<tr>
<td class="headedTable2" align="center"><strong>№ </strong></td>
<td class="headedTable2" align="center"><strong>Title</strong></td>
<td class="headedTable2" align="center"><strong>Original Air Date </strong></td>
<td class="headedTable2" align="center"><strong>Production Code</strong></td>
</tr>
<tr>
<td class="headedTable1" align="center">1</td>
<td align="left"><strong>«Title»</strong></td>
<td align="center">X.XX.XXXX</td>
<td align="center">XXX</td>
</tr>
<tr>
<td colspan="4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</td>
</tr>
<tr>
<td class="headedTable1" align="center">2</td>
<td><strong>«Title»</strong></td>
<td align="center">X.XX.XXXX</td>
<td align="center">XXX</td>
</tr>
<tr>
<td colspan="4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</td>
</tr>
</tbody>
</table>

<p class="section2">Season 2</p><table class="styledTable2">
<tbody>
<tr>
<td class="headedTable3" align="center"><strong>№ </strong></td>
<td class="headedTable3" align="center"><strong>Title</strong></td>
<td class="headedTable3" align="center"><strong>Original Air Date</strong></td>
<td class="headedTable3" align="center"><strong>Production Code</strong></td>
</tr>
<tr>
<td class="headedTable1" align="center">1</td>
<td align="left"><strong>«Title»</strong></td>
<td align="center">X.XX.XXXX</td>
<td align="center">XXX</td>
</tr>
<tr>
<td colspan="4">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p></td>
</tr>
<tr>
<td class="headedTable1" align="center">2</td>
<td><strong>«Title»</strong></td>
<td align="center">X.XX.XXXX</td>
<td align="center">XXX</td>
</tr>
<tr>
<td colspan="4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</td>
</tr>
</tbody>
</table>

<p> Reception</p></div>

<p> Gallery</p></div>
<div align="center">
<div class="gallery1" align="center">
<div class="gallery2" align="center">

<p align="center">Annotation</p></div>
<div class="gallery1" align="center">
<div class="gallery2" align="center">

<p align="center">Annotation</p></div>
<div class="gallery1" align="center">
<div class="gallery2" align="center">

<p align="center">Annotation</p></div>
</div>

<p><a name="paragraph6" rel="nofollow" id="paragraph6"></a> References</p></div>
<div class="reference-text">

<p>1. <em>Author.</em> Title. — Publishing House, XXXX. — X p. — <span class="fake_a">ISBN </span>.</p></div>
<div class="bottomBox">
<div class="header">

<p>Title</p></div>
<div class="linklist">

<p><span class="fake_a">Title (?—?)</span> <span class="fake_a">· Title </span><span class="fake_a">· Title </span></p></div>
</div>
<div class="categories">

If you need to add additional rows to the table, just copy and paste the code <tr><td>your text</td></tr>.

If you want to replace fake links with real ones, use <a>link</a> instead of <span class="fake_a">link</span>.

If you want link that references specific area within the page (like those in content section), use the html code <a href="#NameOfLinkedSection">link</a>, and insert the code <a name="NameOfLinkedSection"></a> before the paragraph you’re referring to.

If you need to change the zoom parameters for gallery, in CSS sheet #workskin .gallery1:hover {transform: scale(1.3);} set a different value for "scale”; to make images in the gallery bigger or smaller, in CSS sheet within #workskin .gallery1 set different percentage for "width”.

Notes:

The base for this layout was taken from html5-templates.com. I simplified it, slightly modified for ao3 requirements, then added tables, a gallery of pictures and some fake links.

Actions

Kudos

homeisbehindtheworldahead, Fanbase_Universes, Pompoko_Tanutanu, BattlecarrierSol, tofania, thethickofit, darvin, PresidentHades, Portia_Reads, entropy_muffin, Mariyekos, forgedinwinter, heark, Vyslante, revletter, GumbaBunny, Foreverlong, Chanton, cinnamoonyy, MX_GL1TCH, meikuree, ilovefagsngagsnwillgraham, TheGenZWriter, ShigureTozanage, SomeLove_fanfics2day, BubbleTreePencil, headdrunk, MaliceStryker, JimBoReee, TaroRush, beautifulduckweed, InfinitysWraith, dvorak, mystyrust, and legonerd as well as 5 guests left kudos on this work!

Comments

mystyrust on Chapter 2 Thu 23 Feb 2023 12:36AM UTC

okay so this v cute wikipedia skin was one of the few that i found that was mobile friendly! not sure when ill use it but!!! someday.
unrelated to this skin , how did you make those collapsible boxes function like that? ??? i noticed that the class name changes to toggle visibility and i didnt think ao3 allowed that !!! how are you doing this pls i must know

Comment Actions
- Reply
- Thread
1. Anonymous Creator on Chapter 2 Thu 23 Feb 2023 10:26AM UTC
  
  okay so this v cute wikipedia skin was one of the few that i found that was mobile friendly! not sure when ill use it but!!! someday.
  Thank you, I tried to make the design adaptive, not very hard though) So the layout looks better in the desktop version after all)
  
  unrelated to this skin , how did you make those collapsible boxes function like that? ??? i noticed that the class name changes to toggle visibility and i didnt think ao3 allowed that !!! how are you doing this pls i must know
  Oh, you mean those spoilers? There are several ways. The simplest one doesn't require the CSS style, only the “expandable” class in one of the adjacent paragraphs in html.
  
  <p>Text or picture to be clicked on</p>
  <p class="expandable">Content you want to hide</p>
  
  Specifically here I used a slightly more complicated version, with a dl-list, here is the code for the CSS:
  
  #workskin dl {margin: 0;}
  #workskin dd {display: block; margin: 0;}
  #workskin dd.hidden {overflow: hidden; opacity: 0; height: 0; line-height: 0; margin: 0; width: 0;}
  #workskin dt {cursor: pointer; display: block; text-decoration: underline;}
  #workskin .expanded::after, #workskin .collapsed::after {display: none;}
  
  And the code for html looks like this:
  
  <dl>
  <dt>Text or picture to be clicked on</dt>
  <dd class="expandable hidden">
  <p> Content you want to hide</p> </dd>
  </dl>
  
  I also had a class for a paragraph (just to make it look more pretty), but usually it's not necessary) So you can choose the way that suits your purpose better!
  
  Comment Actions
2. 1. mystyrust on Chapter 2 Wed 24 May 2023 02:39PM UTC
    
    hi im back and the "expandable" thing that shows the css doesnt work anymore 😭
    
    Comment Actions
  2. 1. Anonymous Creator on Chapter 2 Wed 24 May 2023 04:45PM UTC
      
      Thank you for letting me know! I fixed chapter with different code. If you're interested, now for ao3 works this variation (no skin and css needed):
      < details>
      < summary> Text or picture to be clicked on < /summary>
      Content you want to hide
      < /details >
      By the way, this works even for summary and author's notes sections)
      P.S. It seems this works fine even here, so sorry for edited comment, I had to correct the code to stop it from functioning 😅
      
      Last Edited Wed 24 May 2023 04:59PM UTC
      
      Comment Actions
headdrunk on Chapter 2 Mon 15 May 2023 09:47AM UTC

I think you could have font-weight: bold; for the headedTables codes. And I also modified list-style-type to be either "disc" or "circle" in my skin. Thanks for the full codes. It is v pretty.

Comment Actions
- Reply
- Thread
1. Anonymous Creator on Chapter 2 Tue 16 May 2023 05:10PM UTC
  
  Sure, this skin can be improved or customized to match personal preferences, you have good ideas! I’m glad my little experiments with css were useful to you)
  
  Comment Actions
2. 1. headdrunk on Chapter 2 Tue 16 May 2023 07:07PM UTC
    
    Love it. Glad I stumble across yours!
    
    Comment Actions

Archive of Our Own^beta

Actions

Work Header

Fake Wikipedia Article about TV Show: Work Skin

Anonymous

Summary:

Notes:

Chapter 1: How it looks

Chapter Text

Title (TV Series)

Chapter 2: HTML and CSS to recreate it

Chapter Text

Notes:

Actions

Kudos

Comments

mystyrust on Chapter 2 Thu 23 Feb 2023 12:36AM UTC

Comment Actions

Anonymous Creator on Chapter 2 Thu 23 Feb 2023 10:26AM UTC

Comment Actions

mystyrust on Chapter 2 Wed 24 May 2023 02:39PM UTC

Comment Actions

Anonymous Creator on Chapter 2 Wed 24 May 2023 04:45PM UTC

Comment Actions

headdrunk on Chapter 2 Mon 15 May 2023 09:47AM UTC

Comment Actions

Anonymous Creator on Chapter 2 Tue 16 May 2023 05:10PM UTC

Comment Actions

headdrunk on Chapter 2 Tue 16 May 2023 07:07PM UTC

Comment Actions

Footer

About the Archive

Contact Us

Development