playlist: clean and simple

[mistojen]

Clean and Simple Playlist

This cr chart was made to match this navigation page and this cr chart.

01. Meet Me in the Basement ✗ Broken Social Scene

02. Lyrical Lies ✗ Cute Is What We Aim For

03. Carry the Zero ✗ Built to Spill

04. Modern Mystery ✗ Someone Still Loves You Boris Yeltsin

05. The Old and the Young ✗ Midlake

06. Falling For You ✗ Ronnie Day

07. Priscilla ✗ Sea Wolf

08. The World at Large ✗ Modest Mouse

09. Sad and Beautiful World ✗ Sparklehorse

10. Things I Don't Remember ✗ Ugly Cassanova

11. I'll Believe Anything ✗ Wolf Parade

12. Don't Look Back ✗ Kissing Cousins

'clean and simple' design by mistojen

without title overlay (see above example):

with title overlay (see here):

<center><div class="main" style="width: 750px; height: 350px;margin-top: 20px;"> <div style="display: inline-block; float: left; width: 250px; height: 250px; overflow: hidden; background-image: url('MAINIMAGE'); border: 12px solid #0B115E;"> </div> <div class="tracks" style="display: inline-block; float: left; width: 450px; height: 270px; margin-left: 10px; border: 2px solid #0B115E;overflow-y: auto; overflow-x: hidden;"> <!---SINGLE TRACK---> <div style="display: block; float: left; padding: 5px 5px 5px 15px; text-align: left; width: 440px;font-family: 'arial narrow', sans-serif; font-size: 16px;"><span style="font-weight:bold;">##.</span> <a href="URLGOESHERE" target="_blank" style="color: #0B115E; text-decoration: none; font-style: italic; font-weight: bold;line-height: 1.1em;font-family: Palatino,'Palatino Linotype','Palatino LT STD','Book Antiqua',Georgia,serif; letter-spacing: 1px;">SONGTITLE</a> ✗ ARTIST</div> <!---END SINGLE TRACK---> <!---ADD ADDITIONAL TRACKS---> <!---END ADDITIONAL TRACKS---> </div> </div> <center><div class="credit" style="display: block;margin-bottom: 25px; width: 750px; text-align: center; font-family: 'century gothic'; font-size: 11px;margin-top: -70px;">'clean and simple' design by <a style="color: #000; text-decoration: none;" href="http://mistojen.dreamwidth.org/">mistojen</a></div>

<center><div class="main" style="width: 750px; height: 350px;margin-top: 20px;"> <div style="display: inline-block; float: left; width: 250px; height: 250px; overflow: hidden; background-image: url('MAINIMAGE'); border: 12px solid #0B115E;"> <a href="http://JOURNALNAME.dreamwidth.org/" style="text-decoration: none; color: #fff;"><div style="background-color: rgba(0,0,0,.4);color: #fff; line-height: 1.1em;padding: 10px; margin-top: 171px;"><br> <span style="font-family: georgia, 'times new roman', serif; font-size: 28px;font-weight: bold; font-style: italic;padding-top: 5px;">CHARACTERNAME</span><br> <span style="font-family: 'century gothic'; font-size: 18px; letter-spacing: 2px; text-transform: lowercase;">CANON</span> </div></a> </div> <div class="tracks" style="display: inline-block; float: left; width: 450px; height: 270px; margin-left: 10px; border: 2px solid #0B115E;overflow-y: auto; overflow-x: hidden;"> <!---SINGLE TRACK---> <div style="display: block; float: left; padding: 5px 5px 5px 15px; text-align: left; width: 440px;font-family: 'arial narrow', sans-serif; font-size: 16px;"><span style="font-weight:bold;">##.</span> <a href="URLGOESHERE" target="_blank" style="color: #0B115E; text-decoration: none; font-style: italic; font-weight: bold;line-height: 1.1em;font-family: Palatino,'Palatino Linotype','Palatino LT STD','Book Antiqua',Georgia,serif; letter-spacing: 1px;">SONGTITLE</a> ✗ ARTIST</div> <!---END SINGLE TRACK---> <!---ADD ADDITIONAL TRACKS---> <!---END ADDITIONAL TRACKS---> </div> </div> <center><div class="credit" style="display: block;margin-bottom: 25px; width: 750px; text-align: center; font-family: 'century gothic'; font-size: 11px;margin-top: -70px;">'clean and simple' design by <a style="color: #000; text-decoration: none;" href="http://mistojen.dreamwidth.org/">mistojen</a></div>

color change:

#0B115E

instructions:

1. Make sure you check the box that says Disable Auto-Formatting located below the subject line and above the content box for your entry itself.
2. Replace the following:
   • MAINIMAGE with the url for the image as your base on the left. This needs to be exactly 250x250 in size. You can change this, but if you do, then you also need to change all of the dimensions in the rest of the code to match whatever you change it to, which can get a bit tricky. To resize and crop gifs, I recommend EZGif.
   • ## with the track number.
   • URLGOESHERE with the url to the song; this will open in a separate tab when clicked.
   • SONGTITLE
   • ARTIST
3. If you're using the code with the overlay for a title on the image on the left, also replace:
   • JOURNALNAME with your character's journal name.
   • TITLE with the name of the playlist. You may have to fiddle with the font-size attribute to make sure it fits.
   • CHARACTER/SHIPNAME
4. This code comes with one song in it. There's an overflow setting that will allow it to scroll when you add additional songs, so add as many as you like!
5. Please do not remove credit.
6. If you have any questions or run into hiccups, please feel free to comment below and I'll try to get back to you ASAP to help.
7. Enjoy!