chriscodes | Entries tagged with code: cr chart

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

BARBARA GORDON
oracle
● ○ ○ ○ ○

TIM DRAKE
red robin
● ○ ○ ○ ○

JASON TODD
red hood
● ○ ○ ○ ○

STEPHANIE BROWN
spoiler
● ○ ○ ○ ○

DUKE THOMAS
signal
● ○ ○ ○ ○

DAMIAN WAYNE
robin
● ○ ○ ○ ○

CASSANDRA CAIN
batgirl
● ○ ○ ○ ○

DICK GRAYSON
nightwing
● ○ ○ ○ ○

CHARACTER NAME
subtitle
● ○ ○ ○ ○

CHARACTER MCLONGNAME JR
subtitle
● ○ ○ ○ ○

CODE

THE CODE:

<center>
<raw-code>
<div style="font-family: 'times new roman', sans-serif;">

    
    
    <div style="padding: 0; width: 180px; height: 260px; border-radius: 50px 5px; -moz-border-radius: 50px 5px; background: url(BACKGROUND_URL) #ddd; background-size:cover; display: inline-block; margin: 10px;">
    
    <img src="ICON_URL" style="width: 100px; height: 100px; border-radius: 50px 5px; margin-top:50px; background: #bbb;">
    
    <div style="width: 180px; height: 70px; margin-top: 35px; background: rgba(0,0,0,0.69); border-radius: 0 0 50px 5px; padding: 10px 10px; font-size: 0.9rem; color: #fff; font-weight: bold; letter-spacing: 1px;display: flex; align-items: center; justify-content: center; line-height: 1.25em;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;">
    CHARACTER NAME<br>
    subtitle<br>
    ● ○ ○ ○ ○
    </div>
    </div>
    
    

</div>
    
    <div style="width: 100%; margin-top: 5px"><a href="https://chriscodes.dreamwidth.org/" style="color:#ccc;text-decoration:none;font-family:helvetica;font-size:9px">CODE</a></div>
</raw-code>
</center>

FIND AND REPLACE:

BAGKROUND_URL - Each background image
ICON_URL - Each icon
CHARACTER NAME - Self explanatory
subtitle - Put whatever you want here: canon, relationship, username, etc.
You can copy and paste all the code from  to  to add new characters.
Do not mess with the code outside of  and .
For characters with longer names (as in the example above) who need more than the 3 lines of text, change height: 70px; margin-top: 35px; to height: 80px; margin-top: 25px; or whatever combination looks right. Remember that however much you increase the height, you must decrease the margin-top to match.

millennialfalcon

CR/Muses

IZUKU MIDORIYA
DEKU
★★★★☆

BAKUGOU KATSUKI
DYNAMIGHT
★★★★☆

TODOROKI SHOUTO
SHOUTO
★★★★☆

URARAKA OCHAKO
URAVITY
★★★★☆

ASUI TSUYU
FROPPY
★★★★☆

JIROU KYOUKA
EARPHONE JACK
★★★★☆

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:33.3%; 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: 10px;align-self:center;">
    <center><img src="ICONURL" style="width:70px;border-radius:50%;"><br/>
    <b>NAME</b><br/>
    SUBTITLE<br/>
    ★★★★☆</center>
</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
ICONURL - Each icon
NAME - Self explanatory
SUBTITLE - Put whatever you want here: canon, relationship, username, etc.
You can copy and paste the code between  and  to add new blocks.

PLEASE CREDIT:

chriscodes

A place for Chris to play with codes

Entries tagged with code: cr chart

cr chart/muselist + playlist 2.0

WITH IMAGES

WITH GRADIENTS

FIND AND REPLACE:

CR chart / muselist

moodboard CR chart/muselist

Style Credit