chriscodes | Recent Entries

This is the community where I play around with various codes. Some are made by other people, some are made by me. Check the tags to see if the code is one I made or one made by someone else.

Thanks,
Chris

millennialfalcon

INSTRUCTIONS:

Copy/Paste the hearts you want to send someone.
The comment text appears twice in the code: once in all-caps and once normal. The all-caps is the screen reader version, the normal one is the one you edit to add flavor text.

"I would kiss you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/YQYVYj1/01-yellow-kiss-you.png" alt="I WOULD KISS YOU." width=15px> "I would kiss you." </span></raw-code>	"I would date you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/6PLHq51/02-orange-date-you.png" alt="I WOULD DATE YOU." width=15px> "I would date you." </span></raw-code>	"I would have sex with you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/D4sh7cM/03-lt-pink-sex-with-you.png" alt="I WOULD HAVE SEX WITH YOU." width=15px>"I would have sex with you."</span></raw-code>
"I would love you romantically." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/B48fMh1/04-red-love-you-romantically.png" alt="I WOULD LOVE YOU ROMANTICALLY." width=15px> "I would love you romantically." </span></raw-code>	"I would love you like family." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/s3RSKhT/05-med-purple-love-like-family.png" alt="I WOULD LOVE YOU LIKE FAMILY." width=15px> "I would love you like family." </span></raw-code>	"I would kill you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/FVL6rKv/06-black-kill-you.png" alt="I WOULD KILL YOU." width=15px> "I would kill you." </span></raw-code>
"I would physically/emotionally hurt you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/Qr5ywSq/07-dk-grey-physicall-or-emotionally-hurt-you.png" alt="I WOULD PHYSICALLY/EMOTIONALLY HURT YOU." width=15px> "I would physically/emotionally hurt you." </span></raw-code>	"I would manipulate you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/87hDP39/08-lt-grey-manipulate-you.png" alt="I WOULD MANIPULATE YOU." width=15px> "I would manipulate you." </span></raw-code>	"I dislike you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/Xp0kNqY/09-teal-dislike-you.png" alt="I DISLIKE YOU." width=15px> "I dislike you." </span></raw-code>
"I pity you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/Xsj8qKk/10-dk-green-pity.png" alt="I PITY YOU." width=15px> "I pity you." </span></raw-code>	"I am indifferent towards you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/zXLLd0d/11-lt-green-indifferent.png" alt="I AM INDIFFERENT TOWARDS YOU." width=15px> "I am indifferent towards you." </span></raw-code>	"You scare/intimidate me." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/Dzq9Cy8/12-dk-brown-you-scare-or-intimidate-me.png" alt="YOU SCARE/INTIMIDATE ME." width=15px> "You scare/intimidate me."</span> </raw-code>
"I am unsure about you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/5LD7qTy/13-med-blue-unsure.png" alt="I AM UNSURE ABOUT YOU." width=15px> "I am unsure about you." </span></raw-code>	"I enjoy trolling/making fun of you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/rpF18rb/14-lt-brown-enjoy-trolling.png" alt="I ENJOY TROLLING/MAKING FUN OF YOU." width=15px> "I enjoy trolling/making fun of you." </span></raw-code>	"I would like to get to know you better." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/D1mkX4M/15-dk-purple-get-to-know-you-better.png" alt="I WOULD LIKE TO GET TO KNOW YOU BETTER." width=15px> "I would like to get to know you better." </span></raw-code>
"I would spend time/have fun/be friends with you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/5kWckjc/16-lt-purple-spend-time-have-fun-be-friends.png" alt="I WOULD SPEND TIME/HAVE FUN/BE FRIENDS WITH YOU." width=15px> "I would spend time/have fun/be friends with you." </span></raw-code>	"I respect you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/FHBK7j2/17-lt-blue-respect.png" alt="I RESPECT YOU." width=15px> "I respect you." </span></raw-code>	"I hero worship you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/GTRPy2N/18-fuschia-hero-worship.png" alt="I HERO WORSHIP YOU." width=15px> "I hero worship you." </span></raw-code>
"I would rescue you/fight by your side." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/pPtxDkp/19-dk-blue-rescue-fight-by-your-side.png" alt="I WOULD RESCUE YOU/FIGHT BY YOUR SIDE." width=15px> "I would rescue you/fight by your side." </span></raw-code>	"I would protect you." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/9TkcRT9/20-dk-pink-protect-you.png" alt="I WOULD PROTECT YOU." width=15px> "I would protect you." </span></raw-code>	"I would hug you/hold your hand." <raw-code><span style="width: 200px!important;white-space:pre-line;text-align: center;display: inline-block; font-size: 8pt;padding: 5px;"><img src="https://i.ibb.co/Y45YKz9/21-med-green-hug-hold-your-hand.png" alt="I WOULD HUG YOU/HOLD YOUR HAND." width=15px> "I would hug you/hold your hand." </span></raw-code>

Meme by

chriscodes. Get the code here.

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

Fantasy Game

REQUIREMENTS: 5 comments in 1 thread
CODE: EXEMPT • NEEDS MORE • GOOD TO GO • USING FOR AC

USAGI

Post: Description
Thread: Description (# comments)
Thread: Description (# comments)
Thread: Description (# comments)

TINTIN

Post: Description
Thread: Description (# comments)
Thread: Description (# comments)

Sci-Fi Game

REQUIREMENTS: 10 comments in 2-4 threads
CODE: EXEMPT • NEEDS MORE • GOOD TO GO • USING FOR AC

RHODEY

On hiatus MM/DD-MM/DD

BILLY

First month in game

code by

chriscodes

This is a re-do of an old code of mine, updating the code to not use tables anymore. For when you need to track AC for multiple characters in multiple games.

INSTRUCTIONS:
Copy/Paste code below
Make sure Disable Auto-Formatting is NOT checked
Replace the following:
GAME_IMG
GAME_URL
Game Name
insert requirements here
COLOR_NAME
USERNAME
NAME
THREAD_URL
Description
(# comments)
Copy/Paste games/characters and color code as necessary
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:600px;display:flex;flex-wrap:wrap;"> <div style="width:100%; font-size: 12pt; font-family: helvetica, futura, sans-serif; color: #000;"> <center><div style="height: 200px; width: 400px; background: url(GAME_IMG)center; background-size: cover;margin:10px;display:flex;justify-content:center;align-items:center;"><a href="GAME_URL" style="color: #fff; font-size:30pt; font-weight:bold;text-decoration:none">Game Name</a></div> <b>REQUIREMENTS:</b> insert requirements here<br/> <b>CODE:</b> <span style="color:blue;">EXEMPT</span> • <span style="color:magenta;">NEEDS MORE</span> • <span style="color:green;">GOOD TO GO</span> • <span style="color:green;font-weight:bold">USING FOR AC</span> </center></div>  </raw-code><div style="width:50%;"><div style="margin:5px;padding:20px 5px;"> <span style="color:COLOR_NAME;"> <div style="height: 100px; width: 100px; align: float; background: url(ICON_URL); background-position: center;"><div style="height: 20px; width: 100px; background: #eee; position: relative; top: 40px; opacity: 0.9;"><b><a href=http://USERNAME.dreamwidth.org/ style="text-decoration: none"><span style="color:#000;"><center>NAME</center></span></a></b></div></div> Post: <a href="THREAD_URL">Description</a> Thread: <a href="THREAD_URL">Description</a> (# comments) Thread: <a href="THREAD_URL">Description</a> (# comments) Thread: <a href="THREAD_URL">Description</a> (# comments) </span> </div></div><raw-code>   </raw-code><div style="width:50%;"><div style="margin:5px;padding:20px 5px;"> <span style="color:COLOR_NAME;"> <div style="height: 100px; width: 100px; align: float; background: url(ICON_URL); background-position: center;"><div style="height: 20px; width: 100px; background: #eee; position: relative; top: 40px; opacity: 0.9;"><b><a href=http://USERNAME.dreamwidth.org/ style="text-decoration: none"><span style="color:#000;"><center>NAME</center></span></a></b></div></div> Post: <a href="THREAD_URL">Description</a> Thread: <a href="THREAD_URL">Description</a> (# comments) Thread: <a href="THREAD_URL">Description</a> (# comments) Thread: <a href="THREAD_URL">Description</a> (# comments) </span> </div></div><raw-code>  </div> </div>   <div style="margin:0 auto;max-width:100%;width:600px;text-align:right;"><small>code by <user name=chriscodes></small></div> </raw-code>

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

“Hey, I’m not here right now... Leave one at the beep!”

voice video text action

username: SPIDER-MILES

code credit

“Hey, I’m not here right now... Leave one at the beep!”

voice video text action

username: THE.BALL

art credit code credit

THE CODE:

<div style="width:100%; padding: 10px;color: #MESSAGE_COLOR; font-size:18px;"><b>“MESSAGE_TEXT”</b></div>
<div style="width:50%;display:flex;justify-content:space-between;font-size:12px;">
<span style="padding:5px 10px;background:#TOP_BACKGROUND_COLOR;color:#TOP_COLOR;font-weight:bold;">voice</span>
<span style="padding:5px 10px;background:#TOP_BACKGROUND_COLOR;color:#TOP_COLOR;font-weight:bold;">video</span>
<span style="padding:5px 10px;background:#TOP_BACKGROUND_COLOR;color:#TOP_COLOR;font-weight:bold;">text</span>
<span style="padding:5px 10px;background:#TOP_BACKGROUND_COLOR;color:#TOP_COLOR;font-weight:bold;">action</span>
</div>
<div style="float:left;margin:10px 5px;padding:5px 0 0 5px;font-size:12px;"><span style="padding:5px 10px;background:#BOTTOM_BACKGROUND_COLOR;color:#BOTTOM_COLOR;font-weight:bold;">username: <span style="font-family: courier; monospace">USERNAME</span></span></div>

<div style="float:right;margin:10px 5px;padding:5px 5px 0 0;font-size:12px;"><span style="padding:5px 10px;background:#BOTTOM_BACKGROUND_COLOR;color:#BOTTOM_COLOR;font-weight:bold;"><a href="ART_URL" style="color:#BOTTOM_COLOR;">art credit</a></span>

<span style="margin: 0 0 0 10px;padding:5px 10px;background:#BOTTOM_BACKGROUND_COLOR;color:#BOTTOM_COLOR;font-weight:bold;"><a href="https://chriscodes.dreamwidth.org/10529.html" style="color:#BOTTOM_COLOR;">code credit</a></span></div></div></center>

THINGS TO REPLACE:

BACKGROUND_COLOR = the background color of the bottom block
IMG_URL = your image
MESSAGE_COLOR = color of the voicemail message
MESSAGE_TEXT = text of the voicemail message
TOP_BACKGROUND_COLOR = the background color of the top row (voice/video/text/action)
TOP_COLOR = the font color of the top row (voice/video/text/action)
BOTTOM_BACKGROUND_COLOR = the background color of the bottom row (username/credits)
BOTTOM_COLOR = the font color of the bottom row (username/credits)
ART_URL = where you got your art from

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

this is a th			this is a td	this is a td	this is a td

this is a th	this is a th
this is a td	this is a td

this is a th	this is a th
this is a td	this is a td

millennialfalcon

void
(bad)

stuff that exists

void
(good)

most powerful
(bad)

least powerful

most powerful
(good)

millennialfalcon

WITH GRADIENT
How's My Driving with Natasha? IP off, anon on, comments screened. CODE		How's My Driving with Peggy? IP off, anon on, comments screened. CODE
GRADIENT CODE <!---GRADIENT CODE BEGIN---> <center><div style="width: 500px;"> <!---IMAGE + GRADIENT---> <div style="width:100%; height: 400px; background:linear-gradient(0deg, rgba(R,G,B, 1) 0%, rgba(0, 0, 0, 0) 15%), url(IMGURL) center; background-size: cover;"></div> <!---TEXT BLOCK---> <div style="width: 100%; text-align: left; font-size: 12px; padding: 8px; background-color: #BKGRD_COLOR; color: #COLOR_2;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;"> <span style="font-weight: bold; color: #COLOR_1;">How's My Driving</span> with NAME? <span style="float: right; font-style: italic; color: #COLOR_3;">IP off, anon on, comments screened.</span></div> <!---CREDIT, DO NOT REMOVE---> <div style="width: 100%;text-align:right; margin-top: 5px"><a href="https://chriscodes.dreamwidth.org/" style="color:#ccc;text-decoration:none;font-family:helvetica;font-size:9px">CODE</a></div> </div></center> <!---GRADIENT CODE END--->
WITHOUT GRADIENT
How's My Driving with Natasha? IP off, anon on, comments screened. CODE		How's My Driving with Peggy? IP off, anon on, comments screened. CODE
PLAIN CODE <!---PLAIN CODE BEGIN---> <center><div style="width: 500px;"> <!---IMAGE + GRADIENT---> <div style="width:100%; height: 400px; background: url(IMGURL) center; background-size: cover;"></div> <!---TEXT BLOCK---> <div style="width: 100%; text-align: left; font-size: 12px; padding: 8px; background-color: #BKGRD_COLOR; color: #COLOR_2;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;"> <span style="font-weight: bold; color: #COLOR_1;">How's My Driving</span> with NAME? <span style="float: right; font-style: italic; color: #COLOR_3;">IP off, anon on, comments screened.</span></div> <!---CREDIT, DO NOT REMOVE---> <div style="width: 100%;text-align:right; margin-top: 5px"><a href="https://chriscodes.dreamwidth.org/" style="color:#ccc;text-decoration:none;font-family:helvetica;font-size:9px">CODE</a></div> </div></center> <!---PLAIN CODE END--->
NO FRILLS
How's My Driving with Wanda? IP off, anon on, comments screened. CODE
NO FRILLS CODE <!---NO FRILLS CODE BEGIN---> <center><div style="width: 500px;"> <!---IMAGE---> <div style="width:100%; height: 400px; background: url(IMGURL) center; background-size: cover;"></div> <!---TEXT BLOCK---> <div style="width: 100%; text-align: left; font-size: 12px; padding-top: 8px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;"> <span style="font-weight: bold;">How's My Driving</span> with NAME? <span style="float: right; font-style: italic;">IP off, anon on, comments screened.</span></div> <!---CREDIT, DO NOT REMOVE---> <div style="width: 100%;text-align:right; margin-top: 5px"><a href="https://chriscodes.dreamwidth.org/" style="color:#ccc;text-decoration:none;font-family:helvetica;font-size:9px">CODE</a></div> </div></center> <!---NO FRILLS CODE END--->

FIND AND REPLACE

width: 500px - Width of the code (you can make it wider or narrower)
height: 400px - Height of the code (you can make it shorter or taller)
IMGURL - Your image
R,G,B - The RGB code of your background color. To convert hex code into RGB, use a site like this one
BKGRD_COLOR - Hex code of your background color
COLOR_1 - Hex code of your "How's My Driving" color*
COLOR_2 - Hex code of your "with Character?" color*
COLOR_3 - Hex code of your "IP off, anon on, comments screened." color
NAME - Character name
*PLEASE NOTE: COLOR_1 and COLOR_2 appear in opposite order inside the code, but I've numbered them in the order the text will appear.

Feel free to edit the code however you want! Use it for inboxes, whatever. Just please don't remove the credit.

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

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

open post

voice ✦ video ✦ text ✦ action

CODE

how's my driving?

IP off ✦ anon on ✦ comments screened

CODE

navigation

app ✦ inbox ✦ hmd ✦ permissions

CODE

JUST TEXT:

WITH LINKS:

<raw-code><center><div style="max-width:100%;width: 500px; height: 350px; background: url(IMGURL) center bottom; background-size: cover;display:flex;justify-content:center;align-items:center;">
<span style="color: #fff; text-transform: lowercase; font-size:60pt; font-weight:bold; text-shadow: 1px 1px 20px #ACCENTCOLOR;font-family:'FONT'">BIG TEXT</span>
</div>
<div style="letter-spacing:4px;font-family:'FONT';font-size:12pt;"><a href="LINKURL" style="text-decoration: none; color:#LINKCOLOR;">THING 1</a> <span style="color:#ACCENTCOLOR;font-weight:bold;">✦</span> <a href="LINKURL" style="text-decoration: none; color:#LINKCOLOR;">THING 2</a> <span style="color:#ACCENTCOLOR;font-weight:bold;">✦</span> <a href="LINKURL" style="text-decoration: none; color:#LINKCOLOR;">THING 3</a> <span style="color:#ACCENTCOLOR;font-weight:bold;">✦</span> <a href="LINKURL" style="text-decoration: none; color:#LINKCOLOR;">THING 4</a></div><br/>
<div style="max-width:100%;width:500px; text-align: right;"><a href="http://chriscodes.dreamwidth.org/" style="font-size:8px;letter-spacing:4px;text-decoration:none;color:#bbb;">CODE</a></div></center></raw-code>

THINGS TO REPLACE:

IMGURL = your gif
FONT = your font
ACCENTCOLOR = the hex code of the color for the big text shadow and accent color between each item of text at the bottom
BIG TEXT = the big text over the gif
THING 1, 2, 3, 4 = the bits at the bottom, customize as necessary
LINKURL = URL for your links
LINKCOLOR = the hex code of the color for your links
text-transform: lowercase; = (optional) remove if you want to be able to capitalize the big text

millennialfalcon

( Read more... )

millennialfalcon

name (canon) • username
name (canon) • username
name (canon) • username
name (canon) • username
name (canon) • username
name (canon) • username
name (canon) • username
name (canon) • username

millennialfalcon

Sometimes, you want to make your text pretty colors, but you're just too lazy for hex codes. But Dreamwidth doesn't always make colors the way it should, and sometimes it seems to just be making shit up. Hopefully this guide will help.

All these colors are made using the html tag <font color="COLOR">TEXT</font>.
(the quotation marks are only necessary if the color name is more than one word)
The more accepted code these days is <span style="color:'COLOR';">TEXT</span> but if you're lazy enough to not want to look up a hex code, then the 'font' tag will work just as well.

Alternately, there are browser add-ons that will help you get hex-codes by "eye-dropper-ing" colors from a web page. This is the one I use on Chrome. But if you don't want to bother with that, feel free to use the below guide.

███RED ███ALMOND ███AMETHYST ███APRICOT ███ARTICHOKE ███BLOOD RED ███BRONZE ███CRIMSON ███DENIM ███EBONY ███EGGPLANT ███EGGSHELL ███FAWN ███LEMON YELLOW ███MAROON ███SCARLET ███VERMILION	███ORANGE ███CORAL ███SALMON ███YELLOW ███BANANA YELLOW ███BRASS ███CELADON ███GOLD ███GOLDENROD ███PERIDOT	███GREEN ███AMBER ███AUBURN ███AVOCADO ███BRICK RED ███BUFF ███CADET ███CHARTREUSE ███CHERRY ███CREAM ███DAFFODIL ███DANDELION ███HUNTER GREEN ███JADE ███LIME ███OLIVE ███PEACH ███PEACOCK ███PEAR ███PEARL ███PUCE ███RASPBERRY ███ROSE PINK ███RUBY ███SEAFOAM ███SLATE GRAY ███TANGERINE ███ULTRAMARINE ███WISTERIA	███CYAN ███AQUA ███AQUAMARINE ███ARSENIC ███AZURE ███COFFEE ███CORNFLOWER ███TEAL ███TURQUOISE

███BLUE ███APPLE GREEN ███GRAPE ███JUNGLE GREEN ███KELLY GREEN ███LILAC ███MAUVE ███MINT GREEN ███MUSTARD ███NAVY ███NEON GREEN ███OCHRE ███ROYAL BLUE ███RUSSET ███SEA GREEN ███SEPIA ███SKY BLUE ███SLATE ███SUNSET ███TAUPE ███TYRIAN ███VIRIDIAN	███PURPLE ███ACID GREEN ███ARMY GREEN ███BARN RED ███BURGUNDY ███CARIBBEAN ███CARMINE ███CITRINE ███CLARET ███COPPER ███INDIGO ███LAVENDER ███PLUM ███SAPPHIRE ███THISTLE	███PINK ███CERULEAN ███CHARCOAL ███EMERALD ███MAGENTA ███ORCHID ███PERIWINKLE ███VIOLET	NATURALS ███BEIGE ███BROWN ███CARDINAL ███CARIBBEAN BLUE ███CHOCOLATE ███FUSCHIA ███GRAY ███IVORY ███ONYX ███SIENNA ███SILVER ███TAN ███WHEAT ███WHITE

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)