InsaneJournal

Tweak says, "Jingle Bells, Batman smells..."

Ally -- are you already gone? (wastintime) wrote in rp_tutorials,
@ 2011-09-26 01:16:00

Entry tags:

coding: cast list

Super-Badass Character List That Will Make You Want To Slap Yo Mama

Live Example

I know right?

It took me a few days and several hours to figure this out so I'd appreciate it if you credited

rp_tutorials. Or you can pay me in cookies. Whichever is easier for you. Mkay?

THE SCRIBBLD CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>

a, a:link, a:visited {
	color:#CCC;
	text-decoration: none;
}

a:hover {
	color:#888;
}

b {
	font-weight: bold;
}

.character {
	padding: 15px;
	background: transparent;
	display: inline-block;
        text-align: justify;
}

.tooltip {
	position: relative;
}

.tooltip .bio {
  display: block;
  opacity: 0;
  position: absolute;
  padding: 15px;
  left: 0;
  top: -10px;
  z-index: 99;
  width: 420px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  line-height: 12px;
  border-radius: 5px 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  transition: opacity 2s;
  -moz-transition: opacity 2s;
  -webkit-transition: opacity 2s;
  -o-transition: opacity 2s;
}

.tooltip:hover .bio {
  opacity: 1;
}
.tooltip img {
  margin: -10px 10px 0 -55px;
  float: left;
  width: 100px;
  height: 100px;
  border-radius: 5px 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.tooltip em {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: bold;
  font-style: italic;
  display: inline-block;
  padding: 5px 0 10px;
}

.house {
  color: #333;
  text-shadow: 0 -1px 2px #888;
  background: rgb(242,242,242); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(170,170,170,1) 100%); /* FF3.6+ */ 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(100%,rgba(170,170,170,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(170,170,170,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(170,170,170,1) 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(170,170,170,1) 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#aaaaaa',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(242,242,242,1) 0%,rgba(170,170,170,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #333;
}

.house img {
  border: 2px solid #333;
}

.huff {
background: rgb(255,246,81); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,246,81,1) 0%, rgba(239,199,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,246,81,1)), color-stop(100%,rgba(239,199,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,246,81,1) 0%,rgba(239,199,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,246,81,1) 0%,rgba(239,199,0,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,246,81,1) 0%,rgba(239,199,0,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff651', endColorstr='#efc700',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(255,246,81,1) 0%,rgba(239,199,0,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #333;
  color: #333;
}

.huff img {
  border: 2px solid #333;
}

.gryff {
background: rgb(255,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(43,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,0,1)), color-stop(100%,rgba(43,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(43,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(43,0,0,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(43,0,0,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#2b0000',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(255,0,0,1) 0%,rgba(43,0,0,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #F9D402;
  color: #F9D402;
}

.gryff img {
  border: 2px solid #F9D402;
}

.raven {
background: rgb(7,0,226); /* Old browsers */
background: -moz-linear-gradient(top, rgba(7,0,226,1) 0%, rgba(2,0,35,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(7,0,226,1)), color-stop(100%,rgba(2,0,35,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(7,0,226,1) 0%,rgba(2,0,35,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(7,0,226,1) 0%,rgba(2,0,35,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(7,0,226,1) 0%,rgba(2,0,35,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0700e2', endColorstr='#020023',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(7,0,226,1) 0%,rgba(2,0,35,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #9B6700;
  color: #9B6700;
}

.raven img {
  border: 2px solid #9B6700;
}

.slyth {
background: rgb(9,135,13); /* Old browsers */
background: -moz-linear-gradient(top, rgba(9,135,13,1) 0%, rgba(0,25,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(9,135,13,1)), color-stop(100%,rgba(0,25,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(9,135,13,1) 0%,rgba(0,25,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(9,135,13,1) 0%,rgba(0,25,0,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(9,135,13,1) 0%,rgba(0,25,0,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#09870d', endColorstr='#001900',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(9,135,13,1) 0%,rgba(0,25,0,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #CCC;
  color: #CCC;
}

.slyth img {
  border: 2px solid #CCC;
}

.beaux {
background: rgb(15,216,213); /* Old browsers */
background: -moz-linear-gradient(top, rgba(15,216,213,1) 0%, rgba(0,74,178,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(15,216,213,1)), color-stop(100%,rgba(0,74,178,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(15,216,213,1) 0%,rgba(0,74,178,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(15,216,213,1) 0%,rgba(0,74,178,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(15,216,213,1) 0%,rgba(0,74,178,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0fd8d5', endColorstr='#004ab2',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(15,216,213,1) 0%,rgba(0,74,178,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #0B00A5;
  color: #0B00A5;
}

.beaux img {
  border: 2px solid #0B00A5;
}

.durm {
background: rgb(137,71,9); /* Old browsers */
background: -moz-linear-gradient(top, rgba(137,71,9,1) 0%, rgba(56,21,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(137,71,9,1)), color-stop(100%,rgba(56,21,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(137,71,9,1) 0%,rgba(56,21,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(137,71,9,1) 0%,rgba(56,21,0,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(137,71,9,1) 0%,rgba(56,21,0,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#894709', endColorstr='#381500',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(137,71,9,1) 0%,rgba(56,21,0,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #EA9000;
  color: #EA9000;
}

.durm img {
  border: 2px solid #EA9000;
}

.other {
background: rgb(192,63,252); /* Old browsers */
background: -moz-linear-gradient(top, rgba(192,63,252,1) 0%, rgba(64,0,117,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(192,63,252,1)), color-stop(100%,rgba(64,0,117,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(192,63,252,1) 0%,rgba(64,0,117,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(192,63,252,1) 0%,rgba(64,0,117,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(192,63,252,1) 0%,rgba(64,0,117,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c03ffc', endColorstr='#400075',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(192,63,252,1) 0%,rgba(64,0,117,1) 100%); /* W3C */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  border: 2px solid #00FFAE;
  color: #00FFAE;
}

.other img {
  border: 2px solid #00FFAE;
}

</style>
</head>

<body>
<div class="character">
 <a href="#" class="tooltip">
 Name Name
 
 <img src="http://krisallen.net/grabbr/sc?USERNAME" />
 Name Name
 	Birth: DD Month YYYY | Location
 Race: Type | Blood
 Occupation: Job | Location
 Education: House (YYYY) | School
 Marital Status: Status (YYYY) | Significant Other
 Children: Name Name (YYYY), Name Name (YYYY), Name Name (YYYY)
 (Status)
 
 </a>
</div>
</body>
</html>

Leave any questions or feedback in the comments, thanks!

(Post a new comment)

	cristina_lacosa 2011-09-26 10:42 am UTC (link)
	AGRDSOUJGNVKDSCLVKNSDVDJSNGVDS ♥ (Reply to this)

	gidiot 2011-09-26 03:20 pm UTC (link)
	THAT IS SO AWESOME. (Reply to this)

	ex_thehunger562 2011-09-26 07:27 pm UTC (link)
	HJKFSHFLKSJF DUDE. (Reply to this)

	bigmclargehuge 2011-09-26 09:28 pm UTC (link)
	WHOA is what I said as soon as I clicked on it. THAT is amazing. (Reply to this)

	burningstars 2011-09-26 09:37 pm UTC (link)
	If I could give you a lifetime supply of your favorite cookies, I would. That's how epic this is! (Reply to this)

	perkyshadowgirl 2011-09-27 01:49 am UTC (link)
	OH MY GOD. ... OH MY GOD. Internet marry me? (Reply to this)

	embodimentof 2011-09-27 04:21 pm UTC (link)
	ALFKJASKDJASDASDJSADJSALDJASDJASDSAD THERE ARE NO WORDS FOR THIS GORGEOUSNESS!! (Reply to this)

	ex_awe517 2011-09-28 12:47 am UTC (link)
	I have zero use for this but HOLY CRAP, IT IS LOVELY. (Reply to this)

	cantbeseen 2011-10-02 05:31 pm UTC (link)
	This is fabulous. I wish I had a use for it. (Reply to this)

	smutler 2011-10-08 05:11 pm UTC (link)
	That is amazing, I'm using it and if you'd like to see how I've changed it.. CHECK ME OUT Thanks a ton, will credit in the user info. (Reply to this)

	scarletgold 2011-10-26 05:20 pm UTC (link)
	So...it can only be used on Scribbld? (Reply to this) (Thread)

	wastintime 2011-10-26 05:28 pm UTC (link)
	As far as journaling sites go? Yeah. It only works on Scribbld. The reason being that Scribbld gives you the option of coding an enter page, which is what this does. So, you could technically use it elsewhere and just save it in Notepad as a .html or .htm file and upload it to a web server. (Reply to this) (Parent) (Thread)

	wastintime 2011-10-26 05:28 pm UTC (link)
	*entire page, not enter page (Reply to this) (Parent)

	scarletgold 2011-10-26 08:38 pm UTC (link)
	Ahh, okay. Thanks for the info! (Reply to this) (Parent)

	evanished 2011-10-29 12:39 pm UTC (link)
	Definitely grabbed this and edited the heck out of it to use as the profile for this guy. (Reply to this) (Thread)

	wastintime 2011-10-29 05:55 pm UTC (link)
	THIS IS AWESOME :) (Reply to this) (Parent) (Thread)

	evanished 2011-10-31 12:30 am UTC (link)
	No, you are awesome for sharing. (Reply to this) (Parent)

ex_whiskysou469
2011-11-22 08:19 pm UTC (link)

This is AMAZING, needless to say. After some extensive effort I've managed to finally figure out how to make a page like that on scribbld. But my next problem is that I'm not very html savvy and therefore am kind of looking at the code and going, "huh?" with my head tipped to the side as I try to figure out how to edit. I'm going to try and figure it out, but if I need help would it be okay if I stopped back by and asked for some?

(Reply to this)

	disparagingrant 2011-12-01 07:40 pm UTC (link)
	This might be a stupid question but I've looked around and am not really finding any answers. Is it possible to put an actual link within the character box? To link back to the ij journal or profile? (Reply to this)

	missmami 2012-08-29 09:01 pm UTC (link)
	I don't know why I am just now seeing this, but it is AMAZING! I do have a question as to what the coding for the "hovering" effect is? Cause that. LEGIT! (Reply to this)

	ex_dickens625 2012-09-01 06:55 am UTC (link)
	I've decided this is too awesome not to use so thank you :D (Reply to this)

redheadspy
2013-06-02 01:15 am UTC (link)

I've tried changing the colors, but when I do I only get one solid color.

http://www.zereldax.com/test-list.html

This is the code I'm using

background: rgb(223,43,7); /* Old browsers */
background: -moz-linear-gradient(top, rgba(223,43,7,1) 0%, rgba(166,31,4,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(223,43,7,1)), color-stop(100%,rgba(166,31,4,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(223,43,7,1) 0%,rgba(166,31,4,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(223,43,7,1) 0%,rgba(166,31,4,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(223,43,7,1) 0%,rgba(166,31,4,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DF2B07', endColorstr='#A61F04',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(223,43,7,1) 0%,rgba(166,31,4,1) 100%); /* W3C */
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
border: 2px solid #FFFFFF;
color: #FFFFFF;

Any help would be appreciated.

(Reply to this)