yuff | Lyric Playlist Code!

This is a code for a playlist that include lyrics! Comes in two color varieties.


Blue Live Preview	Yellow Live Preview
Code (Blue): <raw-code> <div style= "width: 425px; height: 550px; border: 1.5px solid #204b6e; margin: auto; background-color: #84b0cb; overflow: hidden;"> <!--START HEADER--> <div style="height: 130px; display: block; background: #84b0cb; background: -webkit-linear-gradient(#c2f7ff, #84b0cb); background: linear-gradient(#c2f7ff, #84b0cb); border-bottom: 2px solid #204b6e;"> <!--ICON--> <div style="display: inline-block; height: 105px; width: 105px; margin: 10px;"><img src="URL" alt="CHARACTERNAME" style="border: 3px solid #204b6e;"></div> <!--END ICON--> <!--TITLE--> <div style="display: inline-block; height: 130px; width: 300px; float: right;"> <div style="display: block; height: 50px; text-align: right; font-family: Helvetica, sans-serif; font-size: 325%; line-height: 50px; font-weight: bold; text-transform: uppercase; padding-right: 5px; color: #133a55;">Character</div> <div style="display: block; height: 40px; text-align: right; font-family: Verdana, Geneva, sans-serif; font-size: 175%; font-style: oblique; padding-right: 10px; line-height: 40px; color: #133a55;">Title of the Playlist</div> <div style="display: block; height: 40px; text-align: right; font-family: Verdana, Geneva, sans-serif; text-transform: uppercase; padding-right: 5px; padding-top: 15px; font-size: 90%; color: #133a55;"><a href="URL" style="color: #133a55; text-decoration: none;" target="_blank">YOUTUBE</a> \| <a href="URL" target="_blank" style="color: #133a55; text-decoration: none;">SPOTIFY</a> ► </div> </div> <!--END TITLE--> </div> <!--END HEADER--> <!--START PLAYLIST--> <div style="width: 425px; height: 419px; overflow: auto; background-color: #84b0cb"> <!--START SONG--> <div style="display: block; border-bottom: 1px solid #204b6e;"> <!--START INFO--> <div style="display: block; border-top: 1px solid #204b6e; border-bottom: 1px solid #204b6e; background-color: #84b0cb; background: linear-gradient(#c2f7ff, #84b0cb); color: #133a55; font-family: Verdana, Geneva, sans-serif;"> <div style="display: inline-block; width: 40%; padding: 5px; font-weight: bold; vertical-align: top; padding-top: 1.5%;">Song Title</div> <div style="display: inline-block; width: 40%; font-style: italic; vertical-align: top; padding-top: 1.5%;">Artist</div> <div style="display: inline-block; width: 10%; vertical-align: top; padding-top: 1.5%;">#:##</div> <div style="display: inline-block; float: right; padding: 5px;"><a href="URL" style="text-decoration: none; color: #133a55;" target="_blank">►</a></div> </div> <!--END INFO--> <!--START LYRICS--> <div style="display: block; padding: 5px; background-color: #e2f1fb; color: #133a55; font-family: Verdana, Geneva, sans-serif;"> Song Lyrics go Here<br/> Be Sure to Add <br/> At the end of every line<br/> </div> <!--END LYRICS--> </div> <!--END SONG--> </div> <!--END PLAYLIST--> </div> <div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div></raw-code>	Code (Yellow): <raw-code><div style= "width: 425px; height: 550px; border: 1.5px solid #634408; margin: auto; background-color: #aa7b2d; overflow: hidden;"> <!--START HEADER--> <div style="height: 130px; display: block; background: #aa7b2d; background: -webkit-linear-gradient(#fde875, #aa7b2d); background: linear-gradient(#fde875, #aa7b2d); border-bottom: 2px solid #634408;"> <!--ICON--> <div style="display: inline-block; height: 105px; width: 105px; margin: 10px;"><img src="URL" alt="CHARACTERNAME" style="border: 3px solid #634408;"></div> <!--END ICON--> <!--TITLE--> <div style="display: inline-block; height: 130px; width: 300px; float: right;"> <div style="display: block; height: 50px; text-align: right; font-family: Helvetica, sans-serif; font-size: 325%; line-height: 50px; font-weight: bold; text-transform: uppercase; padding-right: 5px; color: #402f03;">Character</div> <div style="display: block; height: 40px; text-align: right; font-family: Verdana, Geneva, sans-serif; font-size: 175%; font-style: oblique; padding-right: 10px; line-height: 40px; color: #402f03;">Title of the Playlist</div> <div style="display: block; height: 40px; text-align: right; font-family: Verdana, Geneva, sans-serif; text-transform: uppercase; padding-right: 5px; padding-top: 15px; font-size: 90%; color: #402f03;"><a href="URL" style="color: #402f03; text-decoration: none;" target="_blank">YOUTUBE</a> \| <a href="URL" target="_blank" style="color: #402f03; text-decoration: none;">SPOTIFY</a> ► </div></div> <!--END TITLE--> </div> <!--END HEADER--> <!--START PLAYLIST--> <div style="width: 425px; height: 419px; overflow: auto; background-color: #aa7b2d;"> <!--START SONG--> <div style="display: block; border-bottom: 1px solid #634408;"> <!--START SONG INFO--> <div style="display: block; border-top: 1px solid #634408; border-bottom: 1px solid #634408; background-color: #aa7b2d; background: linear-gradient(#fde875, #aa7b2d); color: #402f03; font-family: Verdana, Geneva, sans-serif;"> <div style="display: inline-block; width: 40%; padding: 5px; font-weight: bold; vertical-align: top; padding-top: 1.5%;">Song Title</div> <div style="display: inline-block; width: 40%; font-style: italic; vertical-align: top; padding-top: 1.5%;">Artist</div> <div style="display: inline-block; width: 10%; vertical-align: top; padding-top: 1.5%;">#:##</div> <div style="display: inline-block; float: right; padding: 5px;"><a href="URL" style="text-decoration: none; color: #402f03;" target="_blank">►</a></div></div> <!--END SONG INFO--> <!--START LYRICS--> <div style="display: block; padding: 5px; background-color: #fff391; color: #402f03; font-family: Verdana, Geneva, sans-serif;"> Song Lyrics go Here<br/> Be Sure to Add <br/> At the end of every line<br/> </div> <!--END LYRIC--> </div> <!--END SONG--> </div> <!--END PLAYLIST--> </div><div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div></raw-code>

If you want to edit the colors, replace the following with your own colors:
Blue: #133a55 #204b6e #84b0cb #c2f7ff #e2f1fb

Yellow: #402f03 #634408 #aa7b2d #fde875 #fff391

Notes:

This is not a playlist that plays directly from the page, rather it links to a streaming site of your choice. The links are modified to open these sites in a new tab. If you don't want that, get rid of target="_blank" from the link codes.

Modifications are totally fine. I'd love to see what you did with it though!

Comments are nice but not necessary. However, please leave the credit line on!

Lyric Playlist Code!

no subject

no subject

no subject