Dozerfleet Labs: Loquat Music Tracklist Table

Description

Welcome to the Loquat Music Tracklist Table Widget, formerly known as the "oTunes Mockup Tracklist Table." Not to be confused with the indie-made, open-source music player aTunes.

This widget won't play any music, but it will add a navigation box to your page that will list tracks in a panel that resembles an open instance of the Apple Music app. Now themed around the version of Apple Music that shipped with macOS12 Monterey. Below are the codes to copy to get started on your own Loquat Music widget implementation!

CSS code

To implement this mock Apple Music navbox for your page, you'll need the following CSS installed either directly into your HTML page, or into the CSS container assigned to you by the site you're using:

Implementation

To implement, you'll need to install and modify the code below. Two different flavors are provided as examples:

HTML

<table class="macoverhold" cellpadding="0" cellspacing="0">
<tr>
<td class="fakemacwindowtoppanel1" style="vertical-align:top; border-right:1px solid #ccc;"><span style="float:left;">  <div class="fakemacredbutton">    </div> <div class="fakemacyellowbutton">    </div> <div class="fakemacgreenbutton">    </div> </span> </td>
<td style="padding:0;">
<table class="tracklist-table fakemacwindow" cellpadding="4" cellspacing="0" align="center" style="width:100%;">
<tr>
<td colspan="4" class="fakemacwindowtoppanel2" style="text-align:center;"><b>Elefante Elegante Interesante Importante</b>
<div style="display:table; vertical-align:middle; width:80%; margin-left:auto; margin-right:auto; padding:5px; background:white; font-size:140%; border:1px solid #dadada;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqswIYmcMLsOwGMJU9qtzw_jCty4g-bm0IHzFcSI7eikteWQ4NPTDuF-m4gPWYt3Jn7MnIMpRNNMFmN5aRAElFCHN52zVMvNaG-s6yrcGm1IZNnNsTWhVn59DOMb-NHcfn-9EkYdJFHHh3/s0/EveryApelogo.png" alt="" border="0" style="width:100px;" /></div>
</td>
</tr>
<tr>
<td class="fakeitunestab"><b>#</b></td>
<td class="fakeitunestab"><b>Title</b></td>
<td class="fakeitunestab">Original song</td>
<td class="fakeitunestab">Original artist</td>
</tr>
<tr class="fakeitunestr">
<td>1</td>
<td><a class="wikibluelink" href="https://dozerfleetproductions.blogspot.com/p/cadmium-song.html">Cadmium</a></td>
<td><a class="wikibluelink" href="http://en.wikipedia.org/wiki/Lithium_(Evanescence_song)">Lithium</a></td>
<td><a class="wikibluelink" href="http://en.wikipedia.org/wiki/Evanescence">Evanescence</a></td>
</tr>
<tr class="fakeitunestr">
<td>2</td>
<td><a class="wikibluelink" href="https://dozerfleetproductions.blogspot.com/p/the-bisons-apocalypse.html">The Bison's Apocalypse</a></td>
<td>Cupid's Chokehold</td>
<td><a class="wikibluelink" href="http://en.wikipedia.org/wiki/Gym_Class_Heroes">Gym Class Heroes</a></td>
</tr>
<tr class="fakeitunestr">
<td>3</td>
<td><a class="wikibluelink" href="https://dozerfleetproductions.blogspot.com/p/serial-bomber.html">Serial Bomber</a></td>
<td><a class="wikibluelink" href="http://en.wikipedia.org/wiki/Before_He_Cheats">Before He Cheats</a></td>
<td<<a class="wikibluelink" href="http://en.wikipedia.org/wiki/Carrie_Underwood">Carrie Underwood</a></td>
</tr>
<tr class="fakeitunestr">
<td>4</td>
<td><a class="wikibluelink" href="https://dozerfleetproductions.blogspot.com/p/serial-bomber-part-2.html">Serial Bomber, Part 2</a></td>
<td><a class="wikibluelink" href="https://en.wikipedia.org/wiki/Dragostea_Din_Tei">Dragostea Din Tei</a></td>
<td><a class="wikibluelink" href="http://en.wikipedia.org/wiki/O-Zone">O-Zone</a></td>
</tr>
<tr class="fakeitunestr">
<td>5</td>
<td><a class="wikibluelink" href="https://dozerfleetproductions.blogspot.com/p/salem-story-of-trial.html">Salem (Story of a Trial)</a></td>
<td><a class="wikibluelink" href="http://en.wikipedia.org/wiki/Absolutely_(Story_of_a_Girl)">Absolutely (Story of a Girl)</a></td>
<td><a class="wikibluelink" href="http://en.wikipedia.org/wiki/Nine_Days">Nine Days</a></td>
</tr>
<tr class="fakeitunestr">
<td>6</td>
<td><a class="wikibluelink" href="https://dozerfleetproductions.blogspot.com/p/slaughterized.html">Slaughterized</a></td>
<td><a class="wikibluelink" href="http://en.wikipedia.org/wiki/Paralyzer">Paralyzer</a></td>
<td><a class="wikibluelink" href="http://en.wikipedia.org/wiki/Finger_Eleven">Finger Eleven</a></td>
</tr>
<tr class="fakeitunestr">
<td>7</td>
<td><a class="wikibluelink" href="https://dozerfleetproductions.blogspot.com/p/once-im-gone.html">Once I'm Gone</a></td>
<td></td>
<td></td>
</tr>
<tr class="fakeitunestr">
<td>8</td>
<td><a class="wikibluelink" href="https://dozerfleetproductions.blogspot.com/p/livin-it-like-al-queada.html">Livin' It Like al-Queada</a></td>
<td><a class="wikibluelink" href="https://en.wikipedia.org/wiki/Livin%27_la_Vida_Loca">Livin' la Vida Loca</a></td>
<td><a class="wikibluelink" href="http://en.wikipedia.org/wiki/Ricky_Martin">Ricky Martin</a></td>
</tr>
<tr class="fakeitunestr">
<td>>9</td>
<td><a class="wikibluelink" href="https://dozerfleetproductions.blogspot.com/p/miss-defendant.html">Miss A. Defendant</a></td>
<td><a class="wikibluelink" href="https://en.wikipedia.org/wiki/Miss_Independent_(Kelly_Clarkson_song)">Miss Independent</a></td>
<td><a class="wikibluelink" href="http://en.wikipedia.org/wiki/Kelly_Clarkson">Kelly Clarkson</a></td>
</tr>
<tr class="fakeitunestr">
<td>10</td>
<td><a class="wikibluelink" href="https://dozerfleetproductions.blogspot.com/p/die-die-die.html">Die Die Die!!!</a></td>
<td><a class="wikibluelink" href="http://en.wikipedia.org/wiki/Bye_Bye_Bye">Bye Bye Bye</a></td>
<td>><a class="wikibluelink" href="https://en.wikipedia.org/wiki/NSYNC">N*Sync</a></td>
</tr>
</table>
</tr>
</table>

MediaWiki

Whether using Miraheze or some other MediaWiki-operating wiki farm to make your wiki, this is the basic code you'll need to create a navbox template for song tracklists using that engine. Bear in mind that the CSS listed above will need to be inserted into your MediaWiki:Common.css page to operate.

Also noteworthy is that in MediaWiki, table rows cannot be locally style-assigned. Instead, the code for the pseudo-class and element combo "fakeitunestr:hover td" needs to to be listed in Common.css as ".tracklist-table tr:hover td," or else the hover effect should be omitted entirely. MediaWiki was not originally designed with Dynamic HTML in mind. Below is an example of the Elefante tracklist table in MediaWiki format.

{| class="macoverhold" cellpadding="0" cellspacing="0"
|-
| class="fakemacwindowtoppanel1" style="vertical-align:top; border-right:1px solid #ccc;" | <span style="float:left;">  <div class="fakemacredbutton">    </div> <div class="fakemacyellowbutton">    </div> <div class="fakemacgreenbutton">    </div> </span>
| style="padding:0;" |

{| class="tracklist-table fakemacwindow" cellpadding="4" cellspacing="0" align="center" style="width:100%;"
|-
| colspan="4" class="fakemacwindowtoppanel2" style="text-align:center;" | '''Elefante Elegante Interesante Importante'''
<div style="display:table; vertical-align:middle; width:80%; margin-left:auto; margin-right:auto; padding:5px; background:white; font-size:140%; border:1px solid #dadada;">[[File:EveryApelogo.png|100px]]</div>
|-
| class="fakeitunestab" | '''#'''
| class="fakeitunestab" | '''Title'''
| class="fakeitunestab" | '''Original song'''
| class="fakeitunestab" | '''Original artist'''
|-
| 1
| [https://dozerfleetproductions.blogspot.com/p/cadmium-song.html Cadmium]
| [[Wikipedia:Lithium (Evanescence song)|Lithium]]
| [[Wikipedia:Evanescence|Evanescence]]
|-
| 2
| [https://dozerfleetproductions.blogspot.com/p/the-bisons-apocalypse.html The Bison's Apocalypse]
| Cupid's Chokehold
| [[Wikipedia:Gym Class Heroes|Gym Class Heroes]]
|-
| 3
| [https://dozerfleetproductions.blogspot.com/p/serial-bomber.html Serial Bomber]
| [[Wikipedia:Before He Cheats|Before He Cheats]]
| [[Wikipedia:Carrie Underwood|Carrie Underwood]]
|-
| 4
| [https://dozerfleetproductions.blogspot.com/p/serial-bomber-part-2.html Serial Bomber, Part 2]
| [[Wikipedia:Dragostea Din Tei|Dragostea Din Tei]]
| [[Wikipedia:O-Zone|O-Zone]]
|-
| 5
| [https://dozerfleetproductions.blogspot.com/p/salem-story-of-trial.html">Salem (Story of a Trial)]
| [[Wikipedia:Absolutely_(Story_of_a_Girl)|Absolutely (Story of a Girl)]]
| [[Wikipedia:Nine Days|Nine Days]]
|-
| 6
| [https://dozerfleetproductions.blogspot.com/p/slaughterized.html Slaughterized]
| [[Wikipedia:Paralyzer|Paralyzer]
| [[Wikipedia:Finger Eleven|Finger Eleven]
|-
| 7
| [https://dozerfleetproductions.blogspot.com/p/once-im-gone.html Once I'm Gone]
|
|
|-
| 8
| [https://dozerfleetproductions.blogspot.com/p/livin-it-like-al-queada.html Livin' It Like al-Queada]
| [[Wikipedia:Livin'_la Vida Loca|Livin' la Vida Loca]]
| [[Wikipedia:Ricky Martin|Ricky Martin]]
|-
| 9
| [https://dozerfleetproductions.blogspot.com/p/miss-defendant.html Miss A. Defendant]
| [[[Wikipedia:Miss Independent (Kelly Clarkson song)|Miss Independent]]
| [[Wikipedia:Kelly Clarkson|Kelly Clarkson]]
|-
| 10
| [https://dozerfleetproductions.blogspot.com/p/die-die-die.html" Die Die Die!!!]
| [http://en.wikipedia.org/wiki/Bye_Bye_Bye" Bye Bye Bye]
| [[Wikipedia:NSYNC|N*Sync]]
|}
|}

When designing this sort of a table to operate in MediaWiki wikis, some other key points are good to remember:

Instead of using <img> tags, it's wiser to use [[File:Filename.fileextension]] as your format for adding images.
The <div> tags that are used for defining the fake Mac UI buttons can be easily turned into a separate template in your wiki's template namespace. If done so, then that template can be called, rather than having to insert every single <div> tag separately. So instead of calling each of these divs separately, you can simply insert "{{Fake Mac Buttons}}" in that spot.
Designing MediaWiki templates to generate endless optional rows to make a single template that is dynamic to all needs can get very complicated. For less sophisticated designers, it's better to use this basic template to make multiple different templates. So if you have a band with six different albums in its history, you'll want to make six different navbox templates using this same process. The skinning will be almost the same; but each field will differ according to the album's needs.
- For example: Every Ape and His Brother, on the Miraheze version of the Dozerfleet Database, has a "{{Navbox Morbid! The Horrendous Hobo!!!}}" template, a "{{Navbox Elefante Elegante Interesante Importante}}" template, etc., for all its albums, rather than trying to build optional rows to cater to every single album with only one template.

Example

Elefante Elegante Interesante Importante
#	Title	Original song	Original artist
1	Cadmium	Lithium	Evanescence
2	The Bison's Apocalypse	Cupid's Chokehold	Gym Class Heroes
3	Serial Bomber	Before He Cheats	Carrie Underwood
4	Serial Bomber, Part 2	Dragostea Din Tei	O-Zone
5	Salem (Story of a Trial)	Absolutely (Story of a Girl)	Nine Days
6	Slaughterized	Paralyzer	Finger Eleven
7	Once I'm Gone
8	Livin' It Like al-Queada	Livin' la Vida Loca	Ricky Martin
9	Miss A. Defendant	Miss Independent	Kelly Clarkson
10	Die Die Die!!!	Bye Bye Bye	N*Sync

DzMD

Loquat Music Tracklist Table