InsaneJournal

Custom View on Scribbld :: EDIT
So a recent post asked how to replicate this, a customized style page on scribbld.net. They are useful for things you don't want to clog up your journal with and you can put just about anything there.

Note: This can be done in much the same way on LJ and IJ, but you must have a paid account to do it at either of those sites, thus all the links and notes herein will be for Scribbld.


EDIT: I later found a way better tutorial that has images, located here, however I've left the code that I used to make my page in this post (which is a simple table that looks like this) for reference.


To be honest what I've done is basically put a simple table on a blank page. But this is useful and it looks good, so why not? If you don't know how to make a table or if you want to adjust the fonts check out the links contained here, they are so useful.



In the last box, LASTN_PAGE, we are going to put in our style information, which controls the colour and design of the table, and then then table itself. All three parts of the code that follows here go in the same box, I've only broken them up for ease of editing.

The first part is the title of the page, which can be anything. In this case I've gone with the self-evident title of "custom view on scribbld."

<title>custom view on scribbld</title>

Next is my style information, which controls the font on the page, as well as the table borders and colours. Don't be scared of the CSS! Again, the guides around RP Tutorials should tell you everything you need to know to figure out just what you are editing as you change around colours and appearance. You can also get rid of a lot of this stuff if you'd rather use your table to define this information. The CSS is located in the style tags.

<style> <!-- body, table, tr, td, p, div { font-family: verdana; font-size: 12px; line-height:16px; color: #222224; letter-spacing:0.1em; } A {text-decoration: none; color: #59A80F;} A:VISITED {text-decoration: none; color: #59A80F;} A:ACTIVE {text-decoration: none; color: #59A80F;} A:HOVER {text-decoration: none; color: #59A80F;} b {color:#9ED54C;} body { background-color:#F0F2DD; background-image:url(); background-position:top left; background-repeat:yes-repeat; background-attachment:fixed; } table table {width:100%; margin:0; border:0;} table table table {width:auto;} p table table td.caption {font-weight:;} tr {text-align:justify;} table,tr,td {padding:20px;} TABLE {BORDER:#59A80F 5px solid; padding: 0px} TABLE TABLE {BORDER: none; padding: 0px} } --> </style>


And finally, this ought to be the most familiar part, we get to the table. I've made mine a generic 65% width, but you can alter it to whatever you wish and can have more than one table as well. This is the information in my own table.

<center><table width="65%"> <tr><td valign="top"> <div align="justify"><img style="float: left; padding: 0px 10px 10px 0px;" src="http://i40.tinypic.com/2mcgg1t.jpg"> <div align="right"><span style="font-weight: normal; font-size: 30px; font-family: georgia; color: #59A80F; line-height: 20px; letter-spacing:0.3em; text-transform: none;"><br><b>boy with cat</b></span></div> <br> the amazing thing about all of this is that, aside from the css up top, all you really need to know for setting up a basic page like this is how to make a table, and what you want it to look like. a bonus of the css is that once you hit the table, you don't need to define any attributes to the font colour or size (unless there is something you want to stand out in particular, as in the case of the title, 'tutorial' above) or to define the width or colour of your table borders. your css will take care of all of that, and can even include some neat features, such as the way bold tags (< b > < / b >) will <b>change the colour of the bolded font</b>. <br><br> in short, anything you put in a table you can put on this page. if you use tables for character rosters, personal profiles, game information, you can easily put it on this simple, out-of-the-way custom page. <br><br><br> <b>disclaimer:</b> there is absolutely no need to credit this to me--it's html, it's what the internet is made of!--but linking rp tutorials so that others can find it is never a bad idea. <br><br> i worked this out mostly through poking around a few different style set-ups on lj, ij, and scribbld. i own nothing.</div> <br><br><br> <div align="right"><font style="font-family: verdana; font-size: 14pt;"><a href="http://asylums.insanejournal.com/rp_tutorials/"><b>rp tutorials</a>.</b></div></td></tr></table>


The code above only gives you that basic, green table I made. Again, THIS POST is the recommended go-to for creating a CustomView page on Scribbld.