Actions

Work Header

How to make a Rounded Playlist

Work Text:

THIS BE A TITLE LINE

Code by Layouttesst


HOW TO CODE IT

First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "Create Work Skin". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box put the following code:

#workskin .titleline {
  width: 600px;
  text-align: center;
  font-size: 32px;
  color: #444;
  line-height: 75%;
  letter-spacing: 1px;
  font-family: georgia;
  text-transform: uppercase;
  margin-bottom: 2px;
}

#workskin .mainbox {
  margin-left: auto;
  margin-right: auto;
  border: 20px solid #444;
  border-radius: 15px;
  max-height: 250px;
  width: 600px;
  overflow-y: auto;
  font-family: georgia;
  font-size: 12px;
  color: #444;
  margin-top: -19px;
}

#workskin .mainbox a:link,
#workskin .mainbox a:visited,
#workskin .mainbox a:hover,
#workskin .mainbox a:active {
  text-decoration: none;
  border-bottom: 1px dotted #555;
  color: #555;
}

#workskin .darkgray {
  background: #ddd;
  padding: 7px;
  margin: 0px;
}

#workskin .lightgray {
  background: #eee;
  padding: 7px;
  margin: 0px;
}

#workskin .songtitle {
  text-decoration: none;
  color: #555;
}

#workskin .songartist {
  padding-left: 250px;
  display: flex;
  margin-top: -19px;
}

#workskin .timestamp {
  float: right;
  margin-top: -19px;
}

#workskin .credit,
#workskin .credit a:link,
#workskin .credit a:visited,
#workskin .credit a:hover,
#workskin .credit a:active {
  margin: 0 auto;
  width: 600px;
  text-align: right;
  font-size: 12px;
  color: #444;
  text-decoration: none;
}

Hit "Submit" (or "Update" if adding to a previous work skin), and you've created the work skin for the playlist. Now to implement it.

Go to your the work you want the playlist in, and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", find where you want the playlist to be located, and paste the following code:

<p class="titleline">
THIS BE A TITLE LINE</p>
<p></p><div class="mainbox">

<p class="darkgray">
<span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
<span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
<span class="timestamp">0:00</span>
</p>

<p class="lightgray">    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
<span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
<span class="timestamp">0:00</span></p>

<p class="darkgray">
<span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
<span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
<span class="timestamp">0:00</span>
</p>

<p class="lightgray">    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
<span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
<span class="timestamp">0:00</span></p>

<p class="darkgray">
<span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
<span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
<span class="timestamp">0:00</span>
</p>

<p class="lightgray">    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
<span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
<span class="timestamp">0:00</span></p>

<p class="darkgray">
<span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
<span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
<span class="timestamp">0:00</span>
</p>

<p class="lightgray">    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
<span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
<span class="timestamp">0:00</span></p>

<p class="darkgray">
<span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
<span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
<span class="timestamp">0:00</span>
</p>

<p class="lightgray">    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
<span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
<span class="timestamp">0:00</span></p>

<p class="darkgray">
<span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
<span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
<span class="timestamp">0:00</span>
</p>

<p class="lightgray">    <span class="songtitle"><a href="YOUTUBE URL" title="LINE FROM THE SONG HERE">Song Title</a></span>
<span class="songartist"><a href="LYRICS URL" title="ANOTHER LINE FROM THE SONG HERE">Song Artist</a></span>
<span class="timestamp">0:00</span></p></div>

<p class="credit">
<a href="http://layouttesst.livejournal.com/profile">Code by Layouttesst</a>
</p>

Edit the URLs, Lines from the song, Song Titles, Song Artists, and Time Stamps to your liking, and you're done! While there's no need to credit me for converting it to AO3, please respect the wishes of the original designer and leave the credit link at the bottom of the playlist. Also, go to the original post and leave some love! :D