chriscodes | Entries tagged with code: playlist

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:

<raw-code><div style="margin:0 auto;width:650px;display:flex;flex-wrap:wrap;font-family:tahoma;font-size:13px;">

<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>
    
    
    <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>
    
    
    
    <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>
    
    
    
    <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>
    
    
    
    <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>
    
    
    
    
    
    <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:

<raw-code><div style="margin:0 auto;width:650px;display:flex;flex-wrap:wrap;font-family:tahoma;font-size:13px;">

<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>
    
    
    <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>
    
    
    
    <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>
    
    
    
    <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>
    
    
    
    <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>
    
    
    
    
    
    <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  and  to add new blocks. Just make sure to put them before the line that says . The code works best if there are an even number of blocks.

millennialfalcon

SONG TITLE - ARTIST
LYRICS ONE
LYRICS TWO
LYRICS THREE
LYRICS FOUR

youtube playlist.

spotify playlist. code by

chriscodes

This is a re-do of an old code of mine, updating the code to not use tables anymore. I tried to keep it simple and no-nonsense. For when you want a playlist but you don't want anything over-the-top fancy.

INSTRUCTIONS:
Copy/Paste code below
Replace the following:
IMG_URL (optional)
YOUTUBE_URL
SONG TITLE
ARTIST
LYRICS ONE / LYRICS TWO / LYRICS THREE / LYRICS FOUR
YOUTUBE_PLAYLIST (optional)
SPOTIFY_PLAYLIST (optional)

Copy/Paste as many songs as you want
Delete whatever parts you don't need
Leave the credit as is
Comments are appreciated! I'd love to see what you do with it!

<raw-code><div style="margin:0 auto;max-width:100%;width:700px;display:flex;flex-wrap:wrap;">  <div style="width:100%;"><div style="margin:5px;padding:20px 5px;text-align:center;"> <img src="IMG_URL"> </div></div>   <div style="width:33.3%;"><div style="margin:5px;padding:20px 5px;"> <b><a href="YOUTUBE_URL">SONG TITLE</a> - ARTIST</b><br/> <small><i>LYRICS ONE<br/> LYRICS TWO<br/> LYRICS THREE<br/> LYRICS FOUR</i></small> </div></div>   <div style="width:33.3%;"><div style="margin:5px;padding:20px 5px;"> <b><a href="YOUTUBE_URL">SONG TITLE</a> - ARTIST</b><br/> <small><i>LYRICS ONE<br/> LYRICS TWO<br/> LYRICS THREE<br/> LYRICS FOUR</i></small> </div></div>   <div style="width:33.3%;"><div style="margin:5px;padding:20px 5px;"> <b><a href="YOUTUBE_URL">SONG TITLE</a> - ARTIST</b><br/> <small><i>LYRICS ONE<br/> LYRICS TWO<br/> LYRICS THREE<br/> LYRICS FOUR</i></small> </div></div>   <div style="width:100%;"><div style="margin:5px;padding:5px;text-align:right;"><small> <img src="https://i.imgur.com/gu6pJtj.png" width="15px"> <a href="YOUTUBE_PLAYLIST">youtube playlist</a>. <img src="https://i.imgur.com/vV2MEfS.png" width="15px"> <a href="SPOTIFY_PLAYLIST">spotify playlist</a>.  code by <user name=chriscodes> </small> </div></div> </div></raw-code>

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;">

<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>

<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>

<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>

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  and  to add new blocks.

PLEASE CREDIT:

chriscodes

millennialfalcon

( Read more... )

millennialfalcon

Inspired by this code by

tessisamess.

PLAYLIST TITLE
1SHORT SONG TITLE ARTIST	LYRICS ONE LYRICS TWO LYRICS THREE LYRICS FOUR
2REALLY, REALLY LONG SONG TITLE ARTIST	LYRICS ONE LYRICS TWO LYRICS THREE LYRICS FOUR
3SONG TITLE ARTIST	LYRICS ONE LYRICS TWO LYRICS THREE LYRICS FOUR
4SONG TITLE ARTIST	LYRICS ONE LYRICS TWO LYRICS THREE LYRICS FOUR
5SONG TITLE ARTIST	LYRICS ONE LYRICS TWO LYRICS THREE LYRICS FOUR

<center><table style="width:500px; border-radius: 90px;"><tr><td colspan="2">
<div style="font-family:georgia,times,serif;width:500px;height:30px;background: url(IMG URL)center no-repeat;margin-bottom:0px;border-radius:90px 90px 0px 0px;padding-top:120px"><div style="font-size:16px;background:#f7f7f7;text-align:center;width:100%;text-transform:uppercase;letter-spacing:4px;">PLAYLIST TITLE</div></div></td></tr>

<a href="YOUTUBE URL" style="text-decoration:none;color:#HEXCODE;">1</a></span><span style="font-size:15px;">SHORT SONG TITLE</span>
 ARTIST</div></div></td>

<td><div style="width:250px;margin:0 auto;font-family:georgia,times,serif;line-height:155%;text-align:center;font-size:11px;">LYRICS ONE
LYRICS TWO
LYRICS THREE
LYRICS FOUR</div></td></tr>

<a href="YOUTUBE URL" style="text-decoration:none;color:#HEXCODE;">2</a></span><span style="font-size:15px;">REALLY, REALLY LONG SONG TITLE</span>
            ARTIST</div></div></td>

<td><div style="width:250px;margin:0 auto;font-family:georgia,times,serif;line-height:155%;text-align:center;font-size:11px;">LYRICS ONE
LYRICS TWO
LYRICS THREE
LYRICS FOUR</div></td></tr>

<a href="YOUTUBE URL" style="text-decoration:none;color:#HEXCODE;">3</a></span><span style="font-size:15px;">SONG TITLE</span>
 ARTIST</div></div></td>

<td><div style="width:250px;margin:0 auto;font-family:georgia,times,serif;line-height:155%;text-align:center;font-size:11px;">LYRICS ONE
LYRICS TWO
LYRICS THREE
LYRICS FOUR</div></td></tr>

<a href="YOUTUBE URL" style="text-decoration:none;color:#HEXCODE;">4</a></span><span style="font-size:15px;">SONG TITLE</span>
 ARTIST</div></div></td>

<td><div style="width:250px;margin:0 auto;font-family:georgia,times,serif;line-height:155%;text-align:center;font-size:11px;">LYRICS ONE
LYRICS TWO
LYRICS THREE
LYRICS FOUR</div></td></tr>
    
<tr><td><div style="width:250px;margin:0 auto;font-family:georgia,times,serif;line-height:155%;text-align:justify;font-size:11px;"><div style="height:100px;"><span style="float:left;padding-right:5px;line-height:8px;font-size:54px;height:50px;">

<a href="YOUTUBE URL" style="text-decoration:none;color:#HEXCODE;">5</a></span><span style="font-size:15px;">SONG TITLE</span>
 ARTIST</div></div></td>

<td><div style="width:250px;margin:0 auto;font-family:georgia,times,serif;line-height:155%;text-align:center;font-size:11px;">LYRICS ONE
LYRICS TWO
LYRICS THREE
LYRICS FOUR</div></td></tr>

millennialfalcon

SONG TITLE - ARTIST LYRICS ONE LYRICS TWO LYRICS THREE LYRICS FOUR	SONG TITLE - ARTIST LYRICS ONE LYRICS TWO LYRICS THREE LYRICS FOUR	SONG TITLE - ARTIST LYRICS ONE LYRICS TWO LYRICS THREE LYRICS FOUR
SONG TITLE - ARTIST LYRICS ONE LYRICS TWO LYRICS THREE LYRICS FOUR LYRICS FIVE	SONG TITLE - ARTIST LYRICS ONE LYRICS TWO LYRICS THREE LYRICS FOUR LYRICS FIVE	SONG TITLE - ARTIST LYRICS ONE LYRICS TWO LYRICS THREE LYRICS FOUR LYRICS FIVE
code by chriscodes

INSTRUCTIONS:
1. Copy/Paste code below
2. Make sure Disable Auto-Formatting is NOT checked
3. Replace the following:

IMG URL (optional)

YOUTUBE URL

SONG TITLE

ARTIST

LYRICS (looks best if all songs in row have the same number of lines)

4. Copy/Paste as many rows as you need
5. Leave the credit as is
6. Comments are appreciated! I'd love to see what you do with it!

THREE-COLUMN

<table width="870">

<tr>
<td width="290">
<b><a href="YOUTUBE URL">SONG TITLE</a> - ARTIST</b>
<small><i>LYRICS ONE
LYRICS TWO
LYRICS THREE
LYRICS FOUR</i></small>
</td>

<td width="290">
<b><a href="YOUTUBE URL">SONG TITLE</a> - ARTIST</b>
<small><i>LYRICS ONE
LYRICS TWO
LYRICS THREE
LYRICS FOUR</i></small>
</td>

<td width="290">
<b><a href="YOUTUBE URL">SONG TITLE</a> - ARTIST</b>
<small><i>LYRICS ONE
LYRICS TWO
LYRICS THREE
LYRICS FOUR</i></small>
</td>
</tr>

<tr>
<td width="290">
<b><a href="YOUTUBE URL">SONG TITLE</a> - ARTIST</b>
<small><i>LYRICS ONE
LYRICS TWO
LYRICS THREE
LYRICS FOUR
LYRICS FIVE</i></small>
</td>

<td width="290">
<b><a href="YOUTUBE URL">SONG TITLE</a> - ARTIST</b>
<small><i>LYRICS ONE
LYRICS TWO
LYRICS THREE
LYRICS FOUR
LYRICS FIVE</i></small>
</td>

<td width="290">
<b><a href="YOUTUBE URL">SONG TITLE</a> - ARTIST</b>
<small><i>LYRICS ONE
LYRICS TWO
LYRICS THREE
LYRICS FOUR
LYRICS FIVE</i></small>
</td>
</tr>

<tr><td colspan=3 style="text-align:right;"><small>code by <user name=chriscodes></small></td></tr>
</table>
</center>

TWO-COLUMN (example here)

Style Credit

Base style: Blanket by sforzinda
Theme: Outer Rings by krja

A place for Chris to play with codes

Entries tagged with code: playlist

cr chart/muselist + playlist 2.0

WITH IMAGES

WITH GRADIENTS

FIND AND REPLACE:

Simple Playlist code - 2.0

moodboard playlist

Scrolling Playlist

curved playlist code

simple playlist code

Style Credit