moodboard playlist

[millennialfalcon]

Playlist

The morning is made
For the birds and the trees
The morning is made
For the falling of leaves

Artist - Song Title

Danger danger
I can read your mind
Wouldn't change it
'Cus I fall this way
And feels so right

Artist - Song Title

LYRICTEXT

Artist - Song Title

LYRICTEXT

Artist - Song Title

LYRICTEXT

Artist - Song Title

LYRICTEXT

Artist - Song Title

CODE

---

THE CODE:
<raw-code><div style="margin:0 auto;width:600px;display:flex;flex-wrap:wrap;font-family:georgia;"> <!---HEADER---> <div style="width:100%;min-height:100px; background:url(HEADER_IMG)center; background-size:cover;padding:20px;font-size:48pt;color:white;text-shadow:1px 1px 6px #000;display:flex;align-items:center;justify-content:center;">TITLE</div> <!---BLOCK BEGIN---> <div style="background:url(IMGURL) center; background-size:cover;width:50%; min-height:200px;"><div style="min-height:180px;margin:20px;background:rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center;"> <div style="padding: 20px;align-self:center;"> <center><i>LYRICTEXT<br/><br/></i></center> <div style="float: right;">Artist - <a href="SONGURL">Song Title</a></div> </div> </div> </div> <!---BLOCK END---> <!---BLOCK BEGIN---> <div style="background:url(IMGURL) center; background-size:cover;width:50%; min-height:200px;"><div style="min-height:180px;margin:20px;background:rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center;"> <div style="padding: 20px;"> <center><i>LYRICTEXT<br/><br/></i></center> <div style="float: right;">Artist - <a href="SONGURL">Song Title</a></div> </div> </div> </div> <!---BLOCK END---> <div style="width:100%;text-align:right;"><a href="https://chriscodes.dreamwidth.org/" style="color:#ccc;text-decoration:none;font-family:helvetica;font-size:9pt">CODE</a></div> </div></raw-code>

FIND AND REPLACE:

• width:600px - Width of the code (you can make it wider or narrower)
  
• HEADER_IMGURL - Your header image
  
• IMGURL - Each bakground image
  
• LYRICTEXT - Lyrics. Make sure you put a <br/> after each line and a <br/><br/> after each paragraph
  
• Artist - Self explanatory
  
• SONGURL - YouTube link
  
• Song Title - Self explanatory
  
• You can copy and paste the code between <!---BLOCK BEGIN---> and <!---BLOCK END---> to add new blocks.
  

PLEASE CREDIT: chriscodes

Comments

[plentyofwords]

Hi Chris!

If I wanted to make this an open post code, is there a way to add an icon above the lyric text?

[millennialfalcon]

Is this along the lines of what you're thinking?

[ofdeliciousness]

wrong account but yes!

[millennialfalcon]

Great!

Take where the code says: <center><i>LYRICTEXT<br/><br/></i></center>
and copy/paste the following between <center> and <i>:
<img src="ICON_URL" style="display:block; padding: 0 0 15px 0;">

[ofdeliciousness]

Thank you so much!