InsaneJournal

Tweak says, "i like the way you work it."

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!

	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)