cr chart/muselist + playlist 2.0

[millennialfalcon]

Sort of an update/combination of these two codes, inspired by Beth (plentyofwords)!

WITH IMAGES

CR Chart + Playlist

Suvi Sky

Some legends are told Some turn to dust or to gold But you will remember me Remember me for centuries

Fall Out Boy - Centuries

Ame

We'll be here when the world slows down And the sunbeams fade away Keeping time by a pendulum As the fabric starts to fray

Cosmo Sheldrake - Come Along

Eursulon

Did I hear a thunder? Did I hear you break? I can't quite remember Just what guided me this way, oh

D'Angelo - Unshaken

The Fox

The Fox, There's only one of me Till suddenly there's two of me When two is what you see of me Gadzooks! Three of me

Danny Kaye - Outfox the Fox

CODE

THE CODE:
<!--CR CHART + PLAYLIST, IMAGES VERSION--> <raw-code><div style="margin:0 auto;width:650px;display:flex;flex-wrap:wrap;font-family:tahoma;font-size:13px;"> <!--HEADER--> <div style="width:650px;min-height:100px; background:url(HEADER_IMGURL)center; background-size:cover;padding:20px;font-size:60px;font-weight:bold;color:white;text-shadow:1px 1px 6px #000;display:flex;align-items:center;justify-content:center;">TITLE_TEXT</div> <!--BLOCK BEGIN--> <div style="background:url(BLOCK_IMGURL) center; background-size:cover;width:325px;min-height:200px;"> <div style="min-height:180px;width:285px;margin:20px;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;"> <div style="padding: 20px;align-self:center;white-space:pre-line;"><div style="text-align:center;font-weight:bold;font-size:16px;">CHARACTER_NAME</div> <img src="ICON_URL" style="display:block; margin: 0 auto; width: 90px; border-radius: 50%;"> <center><i>LYRICS_ONE LYRICS_TWO LYRICS_THREE LYRICS_FOUR</i></center> <div style="font-size:12px;width:285px;padding: 0 0 0 20px;">ARTIST - <a href="SONG_URL">SONG_TITLE</a></div></div> </div> </div> <!--BLOCK END--> <!--BLOCK BEGIN--> <div style="background:url(BLOCK_IMAGE_URL) center; background-size:cover;width:325px;min-height:200px;"> <div style="min-height:180px;width:285px;margin:20px;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;"> <div style="padding: 20px;align-self:center;white-space:pre-line;"><div style="text-align:center;font-weight:bold;font-size:16px;">CHARACTER_NAME</div> <img src="ICON_URL" style="display:block; margin: 0 auto; width: 90px; border-radius: 50%;"> <center><i>LYRICS_ONE LYRICS_TWO LYRICS_THREE LYRICS_FOUR</i></center> <div style="font-size:12px;width:285px;padding: 0 0 0 20px;">ARTIST - <a href="SONG_URL">SONG_TITLE</a></div></div> </div> </div> <!--BLOCK END--> <!--BLOCK BEGIN--> <div style="background:url(BLOCK_IMAGE_URL) center; background-size:cover;width:325px;min-height:200px;"> <div style="min-height:180px;width:285px;margin:20px;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;"> <div style="padding: 20px;align-self:center;white-space:pre-line;"><div style="text-align:center;font-weight:bold;font-size:16px;">CHARACTER_NAME</div> <img src="ICON_URL" style="display:block; margin: 0 auto; width: 90px; border-radius: 50%;"> <center><i>LYRICS_ONE LYRICS_TWO LYRICS_THREE LYRICS_FOUR</i></center> <div style="font-size:12px;width:285px;padding: 0 0 0 20px;">ARTIST - <a href="SONG_URL">SONG_TITLE</a></div></div> </div> </div> <!--BLOCK END--> <!--BLOCK BEGIN--> <div style="background:url(BLOCK_IMAGE_URL) center; background-size:cover;width:325px;min-height:200px;"> <div style="min-height:180px;width:285px;margin:20px;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;"> <div style="padding: 20px;align-self:center;white-space:pre-line;"><div style="text-align:center;font-weight:bold;font-size:16px;">CHARACTER_NAME</div> <img src="ICON_URL" style="display:block; margin: 0 auto; width: 90px; border-radius: 50%;"> <center><i>LYRICS_ONE LYRICS_TWO LYRICS_THREE LYRICS_FOUR</i></center> <div style="font-size:12px;width:285px;padding: 0 0 0 20px;">ARTIST - <a href="SONG_URL">SONG_TITLE</a></div></div> </div> </div> <!--BLOCK END--> <!--PASTE MORE BLOCKS ABOVE THIS LINE--> <!--CREDIT (DO NOT REMOVE)--> <div style="width:100%;text-align:right; margin: 8px 0"><a href="https://chriscodes.dreamwidth.org/" style="color:#ccc;text-decoration:none;font-family:helvetica;font-size:9px">CODE</a></div> </div></raw-code>

---

WITH GRADIENTS

CR Chart + Playlist

Suvi Sky

Some legends are told Some turn to dust or to gold But you will remember me Remember me for centuries

Fall Out Boy - Centuries

Ame

We'll be here when the world slows down And the sunbeams fade away Keeping time by a pendulum As the fabric starts to fray

Cosmo Sheldrake - Come Along

Eursulon

Did I hear a thunder? Did I hear you break? I can't quite remember Just what guided me this way, oh

D'Angelo - Unshaken

The Fox

The Fox, There's only one of me Till suddenly there's two of me When two is what you see of me Gadzooks! Three of me

Danny Kaye - Outfox the Fox

CODE

THE CODE:
<!--CR CHART + PLAYLIST, GRADIENT VERSION--> <raw-code><div style="margin:0 auto;width:650px;display:flex;flex-wrap:wrap;font-family:tahoma;font-size:13px;"> <!--HEADER--> <div style="width:650px;min-height:100px; background: linear-gradient(45deg, rgba(50,50,50,1) 0%, rgba(200,200,200,1) 100%); padding:20px;font-size:60px;font-weight:bold;color:white;text-shadow:1px 1px 6px #000;display:flex;align-items:center;justify-content:center;">TITLE_TEXT</div> <!--BLOCK BEGIN--> <div style="background: linear-gradient(45deg, rgba(50,50,50,1) 0%, rgba(200,200,200,1) 100%);width:325px;min-height:200px;"> <div style="min-height:180px;width:285px;margin:20px;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;"> <div style="padding: 20px;align-self:center;white-space:pre-line;"><div style="text-align:center;font-weight:bold;font-size:16px;">CHARACTER_NAME</div> <img src="ICON_URL" style="display:block; margin: 0 auto; width: 90px; border-radius: 50%;"> <center><i>LYRICS_ONE LYRICS_TWO LYRICS_THREE LYRICS_FOUR</i></center> <div style="font-size:12px;width:285px;padding: 0 0 0 20px;">ARTIST - <a href="SONG_URL">SONG_TITLE</a></div></div> </div> </div> <!--BLOCK END--> <!--BLOCK BEGIN--> <div style="background: linear-gradient(45deg, rgba(50,50,50,1) 0%, rgba(200,200,200,1) 100%);width:325px;min-height:200px;"> <div style="min-height:180px;width:285px;margin:20px;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;"> <div style="padding: 20px;align-self:center;white-space:pre-line;"><div style="text-align:center;font-weight:bold;font-size:16px;">CHARACTER_NAME</div> <img src="ICON_URL" style="display:block; margin: 0 auto; width: 90px; border-radius: 50%;"> <center><i>LYRICS_ONE LYRICS_TWO LYRICS_THREE LYRICS_FOUR</i></center> <div style="font-size:12px;width:285px;padding: 0 0 0 20px;">ARTIST - <a href="SONG_URL">SONG_TITLE</a></div></div> </div> </div> <!--BLOCK END--> <!--BLOCK BEGIN--> <div style="background: linear-gradient(45deg, rgba(50,50,50,1) 0%, rgba(200,200,200,1) 100%);width:325px;min-height:200px;"> <div style="min-height:180px;width:285px;margin:20px;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;"> <div style="padding: 20px;align-self:center;white-space:pre-line;"><div style="text-align:center;font-weight:bold;font-size:16px;">CHARACTER_NAME</div> <img src="ICON_URL" style="display:block; margin: 0 auto; width: 90px; border-radius: 50%;"> <center><i>LYRICS_ONE LYRICS_TWO LYRICS_THREE LYRICS_FOUR</i></center> <div style="font-size:12px;width:285px;padding: 0 0 0 20px;">ARTIST - <a href="SONG_URL">SONG_TITLE</a></div></div> </div> </div> <!--BLOCK END--> <!--BLOCK BEGIN--> <div style="background: linear-gradient(45deg, rgba(50,50,50,1) 0%, rgba(200,200,200,1) 100%);width:325px;min-height:200px;"> <div style="min-height:180px;width:285px;margin:20px;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;"> <div style="padding: 20px;align-self:center;white-space:pre-line;"><div style="text-align:center;font-weight:bold;font-size:16px;">CHARACTER_NAME</div> <img src="ICON_URL" style="display:block; margin: 0 auto; width: 90px; border-radius: 50%;"> <center><i>LYRICS_ONE LYRICS_TWO LYRICS_THREE LYRICS_FOUR</i></center> <div style="font-size:12px;width:285px;padding: 0 0 0 20px;">ARTIST - <a href="SONG_URL">SONG_TITLE</a></div></div> </div> </div> <!--BLOCK END--> <!--PASTE MORE BLOCKS ABOVE THIS LINE--> <!--CREDIT (DO NOT REMOVE)--> <div style="width:100%;text-align:right; margin: 8px 0"><a href="https://chriscodes.dreamwidth.org/" style="color:#ccc;text-decoration:none;font-family:helvetica;font-size:9px">CODE</a></div> </div></raw-code>

---

FIND AND REPLACE:

• font-family:tahoma; - Replace with the font of your choosing.
  
• HEADER_IMGURL - Your header image
  
• TITLE_TEXT - Your title
  
• BLOCK_IMGURL - Each bakground image
  
• background: linear-gradient(45deg, rgba(50,50,50,1) 0%, rgba(200,200,200,1) 100%) - Replace the numbers with the RGB color values of your choosing. If you want help creating gradients, I recommend this website.
  
• LYRICS_ONE, etc. - Lyrics. The code works best if there is the same number of lines of lyrics on each row of blocks (i.e. four lines on one row, five on another, etc.).
  
• ARTIST - Self explanatory
  
• SONG_URL - YouTube link
  
• SONG_TITLE - Self explanatory
  
• You can copy and paste the code between <!--BLOCK BEGIN--> and <!--BLOCK END--> to add new blocks. Just make sure to put them before the line that says <!--PASTE MORE BLOCKS ABOVE THIS LINE-->. The code works best if there are an even number of blocks.