code_orange | Music Player CR Chart/Link List

The top on is a blank version.

*****

Play all

LINK LINK LINK LINK LINK LINK

Name
Canon

Code by

code_orange

Originally, I was planning to create a CR Chart based on a music player where interesting links between characters could be put in where song titles would have gone instead of the usual blurb. Then I actually wrote the code and it turned into a monster.

Technically can still be used as a CR Chart, but maybe not for characters who have monster amount of CR.

NOTES:
- When using this code, make sure to keep all your C&Ping between the < RAW-CODE > tags.
- The background colour and the borders around the buttons can be customized however you like. The actual symbols in the buttons are not customizable unless you recolour them on a program like Photoshop or Gimp.
- The link list area has a scroll bar. So don't worry about how many links are in there.'
- This image (URL: http://i.imgur.com/v1VW2Z4.png in the code) is there in case the icon you choose is deleted there won't be a weird blank space.
- Make sure to upload the image to an image hosting site of your choice!

COLOURS:


#00000	#FFFFFF	#494844	#B9F73E

<raw-code>

<div style="background: transparent; width: 300px; height: 300px; position: relative; margin-right: auto; margin-left: auto;">
	<div style="position: relative; left: 10px; background:#000000; width:280px; height: 250px; border: solid 1px #FFFFFF;">
		
		<div style="position: relative; top:0px; left: 0px; background: transparent; height: 100px; width: 200px; border-bottom: solid 1px #FFFFFF; background-image: url(http://i.imgur.com/v1VW2Z4.png); background-repeat: no-repeat; background-position: center;">
			<img src="ICON URL" style="display: block; position: relative; top: 0px; left: 50px; height: 100px; width: 100px;">
			<span style="display: block; position: relative; top: -28px; width: 200px; height: 24px; padding-top: 4px; color: #FFFFFF; font: small-caps 20pt Arial; background: #494844; opacity: 0.8; letter-spacing: 2pt; text-align: center;">*****</span>
		</div>
		<div style="position: relative; top: -101px; left: 200px; display: block; width: 78px; height: 30px; color: #FFFFFF; font: small-caps bold 11pt Arial; border-left: solid 1px #FFFFFF; border-bottom: solid 1px #FFFFFF; padding-left: 2px;padding-top: 10px;"><img src="http://i.imgur.com/4z6MkGb.png" style="width:12px;"> Play all
		</div>
		<div style="position: relative; top: -101px; left: 200px; background: transparent; height: 220px; width: 80px; border-left: solid 1px #FFFFFF;">
			<img src="ICON2" style="position: relative; top: 10px; left: 10px; width: 60px; height: 60px;">
			<img src="ICON3" style="position: relative; top: 20px; left: 10px; width: 60px; height: 60px;">
		</div>
		
		<div style="v-align: center; position: relative; top: -261px; left: 0px; width: 200px; max-height: 149px; overflow-y: auto; overflow-x: hidden; font: 10pt Arial; color: #FFFFFF; ">
			<span style="display: block; height: 20px; padding-left: 5px;"><a href="URL" style="color: #FFFFFF; text-decoration: none;">LINK</A></span>
			<span style="display: block; height: 20px; padding-left: 5px; background: #494844;"><a href="" style="color: #FFFFFF; text-decoration: none;">LINK</A></span>
			<span style="display: block; height: 20px; padding-left: 5px;"><a href="URL" style="color: #FFFFFF; text-decoration: none;">LINK</A></span>
			<span style="display: block; height: 20px; padding-left: 5px; background: #494844;"><a href="" style="color: #FFFFFF; text-decoration: none;">LINK</A></span>
			<span style="display: block; height: 20px; padding-left: 5px;"><a href="URL" style="color: #FFFFFF; text-decoration: none;">LINK</A></span>
			<span style="display: block; height: 20px; padding-left: 5px; background: #494844;"><a href="" style="color: #FFFFFF; text-decoration: none;">LINK</A></span>
			<span style="display: block; height: 10px;"></span>
		</div>
	</div>
	
	<div style="position: relative; top: 5px; width: 300px; height: 50px; background: #000000; border: solid 1px #FFFFFF; padding-bottom: 3px;">
		<center><IMG SRC="http://i.imgur.com/IftumZn.png" style="position: relative; top: -20px; border: solid 1px #B9F73E; padding: 2px; background: #000000;"> <IMG SRC="http://i.imgur.com/voFR46U.png" style="position: relative; top: -18px; border: solid 1px #B9F73E; padding: 3px; background: #000000;"> <IMG SRC="http://i.imgur.com/4z6MkGb.png" style="position: relative; top: -16px; border: solid 1px #B9F73E; padding: 4px; background: #000000;"> <IMG SRC="http://i.imgur.com/LvyqpzH.png" style="position: relative; top: -18px; border: solid 1px #B9F73E; padding: 3px; background: #000000;"> <IMG SRC="http://i.imgur.com/DBs26R2.png" style="position: relative; top: -20px; border: solid 1px #B9F73E; padding: 2px; background: #000000;"><BR>
		<span style="font: 10pt Arial; color: #FFFFFF; position: relative; top: -18px;">Name<BR><small>Canon</SMALL></span></center>
	</div>
</div>
<BR>
<BR>

<small><center><font color="#686868">Code by <user name="code_orange"></center></font></small></raw-code>

If you find any problems with this code please tell me! Also, if you customize the code, I would love it if you could link it so I could see. This isn't strictly necessary, but it would be nice. :3