InsaneJournal

Tweak says, "Make it so."

aurius (aurius) wrote in rp_tutorials,
@ 2015-07-12 10:30:00

Taken lists layouts?
Apologies if this was already asked before, I looked and just couldn't find anywhere.

Could anyone kindly point me to a journal/asylum where I can find some layouts for taken lists? Such as this.

(Post a new comment)

	affictitious 2015-07-12 04:40 pm UTC (link)
	You might want to check out pbcoding. There are a few there, I think. Just a heads up, however, that you might need to join the comm in order to see the directory (I think). (Reply to this)

	Also... affictitious 2015-07-12 08:50 pm UTC (link)
	If you don't find something there that suits your style tastes, I could try and whip something up for you. (Reply to this) (Thread)

	aurius 2015-07-13 03:53 am UTC (link)
	Hi, thank you so much for your help! That first code is more like what I had in mind but if you could make one with white background and softer font, maybe in pastel colors like green or blue, that would be awesome! I'm just a complete n00b when it comes to css. (Reply to this) (Parent) (Thread)

	affictitious 2015-07-13 06:47 am UTC (link)
	How does this look? http://i.imgbox.com/IRjMKWGJ.png (Reply to this) (Parent) (Thread)

	aurius 2015-07-13 07:15 am UTC (link)
	It's perfect! (Reply to this) (Parent) (Thread)

affictitious
2015-07-13 07:34 am UTC (link)

Awesome! Here's the code then:

<!DOCTYPE html>
<html>
<head> 
<title>TAKEN MUSES</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Oswald:300' rel='stylesheet' type='text/css'>

<style>

body {
  margin:150px auto;
  background:#354F00 url(http://i.imgbox.com/iEpex79B.png) repeat fixed;
  font:7pt/9pt Source San Pro, sans-serif;
}

a, a:visited {
  color:#A5C663;
  text-decoration:none;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

a:hover {
  color:#567714;
}

#container {
  margin:0px auto;
  width:725px;
}

.box {
  float:left;
  margin:5px;
  width:325px;
  padding:10px 12px;
  border-top:1px solid #567714;
  border-bottom:1px solid #567714;
  background:#FFF;
  -webkit-box-shadow:0px 0px 5px 0px #999;
}

.musepb {
  display:block;
  padding-left:1px;
  font:13pt/15pt Oswald, sans-serif;
  color:#7A9F35;
}

.journal {
  display:block;
  margin-top:3px;
  padding:3px 0px;
  border-top:1px solid #999;
  font-style:italic;
  text-align:right;
}

#clear { clear:left; }

#credit {
  display:block;
  margin:10px auto !important;
  text-align:center;
}

#credit a {
  color:#999;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

#credit a:hover {
  color:#666;
}

</style>
</head>

<body>

<div class="box">
<span class="musepb">MUSE/PB NAME</span>
<a class="journal" href="http://JOURNALNAME.insanejournal.com">CHARACTER NAME</a>
AIM SN
<br/>
MISC. INFORMATION
</div>

<div id="credit">
<a class="credit" href="http://iheartunicorns.insanejournal.com">CODE BY IHEARTUNICORNS</a>
</div>

</div>

</body>
</html>

Too add PBs/muses, just copy/paste the chunk of code after . If you have questions or run into a problem, feel free to drop me a note. c: Enjoy!

(Reply to this) (Parent)

	affictitious 2015-07-13 07:35 am UTC (link)
	Ugh, please forgive the typo at the beginning, I really do know the different between "to" and "too." lol (Reply to this) (Parent) (Thread)

	aurius 2015-07-13 07:49 am UTC (link)
	lol no worries. Thank you so very much for the code! You're really awesome :) (Reply to this) (Parent) (Thread)

	affictitious 2015-07-13 07:50 am UTC (link)
	It was my pleasure. c: (Reply to this) (Parent) (Thread)

	aurius 2015-07-14 10:16 am UTC (link)
	I don't mean to bug you again but I've uploaded the code and all info to the neocities site now, and it looks like this. for our game's needs though, I've been wondering if it would be possible to add another line for the "occupation" field or maybe add it somewhere else instead in cursive? whichever looks good, really. If it's not too much hassle? (Reply to this) (Parent) (Thread)

affictitious
2015-07-14 02:51 pm UTC (link)

pffft! you're not bugging me at all. if you want to add another line of info where you have profile, contact / ooc, i would slip this...

<br/>
OCCUPATION

... right under the PROFILE line and you should be good to go.

Utilizing the list myself, I realized I made a boo-boo in the initial set-up of the code -- Will be sorting your list with one gender in one column and another gender in a second column?

(Reply to this) (Parent) (Thread)

	aurius 2015-07-14 03:03 pm UTC (link)
	I just tried that and this is what I got :( maybe I'm doing something wrong? (Reply to this) (Parent) (Thread)

	affictitious 2015-07-14 03:05 pm UTC (link)
	OH, DUH. I'm sorry, I neglected to say you'll need to do that for every box. SORRY, sorry. :x (Reply to this) (Parent) (Thread)

	aurius 2015-07-14 03:15 pm UTC (link)
	It worked! :D does a happy dance Many thanks! (Reply to this) (Parent) (Thread)

	affictitious 2015-07-14 03:23 pm UTC (link)
	You're welcome! Will you be sorting out your genders or...? (Reply to this) (Parent) (Thread)

	aurius 2015-07-14 03:27 pm UTC (link)
	Not really, we'll just throw everyone in the mix, it'll be easier that way. (Reply to this) (Parent) (Thread)

	affictitious 2015-07-14 03:29 pm UTC (link)
	Alrighty then! Enjoy. c: (Reply to this) (Parent) (Thread)

	aurius 2015-07-14 03:30 pm UTC (link)
	Thank you <3 (Reply to this) (Parent)