( graphics & fiction ) - | eight. two cr chart codes.

Previous | Memories | Tell Someone | Next

28 February 2017 @ 01:48 pm

| eight. two cr chart codes.

short & sweet

A simple, customisable CR chart geared towards using quotes and colour coding CR, rather than explanations.

Notes:
⇨ This isn't designed to add large amounts of text. You're more than welcome to play with the code and come up with something that allows it to work like that, but otherwise I wouldn't recommend it.

⇨ The code provided does not contain the colours used in the preview images. If you want those colours specifically, the codes are:
#B0171F #AB82FF #3D9140

⇨ You can definitely mess about with this as much as you like.

CODE | BORDER

<div style="width:100px; height:100px; background:url(ICON-URL); background-position: center; border-radius: 5px 5px 5px 5px; border: solid 5px #CR-COLOR;"><div style="width:400px; position: relative; top: 60px; left: 35px; padding: 5px; background: #fff; opacity: 0.9; border-radius: 0 4px 4px 0;"><span style="font-family: helvetica, arial, sans serif;  color: #FONT-COLOR;">CHARACTER | "quote"</span></div></div>

Add another character:

CODE | BACKGROUND

<center><table width="500px"><tr><td><span style="font-family: trebuchet ms, sans serif; font-size: 24px; letter-spacing: 0.5em; color: #708090;">(<i>character relations</i>)</span></td></tr>
<tr><td><center><span style="font-family: helvetica, arial, sans serif; font-weight:bold; color:#FONT-COLOR-1;">negative</span> <span style="font-family: helvetica, arial, sans serif; font-weight:bold; color:#FONT-COLOR-2;">positive</span> <span style="font-family: helvetica, arial, sans serif; font-weight:bold; color:#FONT-COLOR-3;">romantic</span></center></td></tr>
<tr><td>
<div style="width:100px; height:100px; background:url(ICON-URL); background-position: center; border-radius: 5px 5px 5px 5px;"><div style="width:400px; position: relative; top: 20px; left: 55px; padding: 5px; background: #BACKGROUND-COLOR; opacity: 0.9; border-radius: 0 4px 4px 0;"><span style="font-family: helvetica, arial, sans serif; color: #CR-COLOR;">CHARACTER | "quote"
★★★★★</span></div></div>
<div style="width:100px; height:100px; background:url(ICON-URL); background-position: center; border-radius: 5px 5px 5px 5px;"><div style="width:400px; position: relative; top: 20px; left: 55px; padding: 5px; background: #BACKGROUND-COLOR; opacity: 0.9; border-radius: 0 4px 4px 0;"><span style="font-family: helvetica, arial, sans serif; color: #CR-COLOR;">CHARACTER | "quote"
★★★★★</span></div></div>
<div style="width:100px; height:100px; background:url(ICON-URL); background-position: center; border-radius: 5px 5px 5px 5px;"><div style="width:400px; position: relative; top: 20px; left: 55px; padding: 5px; background: #BACKGROUND-COLOR; opacity: 0.9; border-radius: 0 4px 4px 0;"><span style="font-family: helvetica, arial, sans serif; color: #CR-COLOR;">CHARACTER | "quote"
★★★★★</span></div></div></td></tr></table></center>

Add another character:

Tags: !code post, | code: cr chart

Comment

( Post a new comment )

						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30