Rp Tutorials

One [text header] Codes

Two [image header] Codes

I was contacted a little bit ago for the layout I had at one of my communities, so I decided to revamp and reopen my layout/icon/graphics community (enigmaleadsigns) which was abandoned... years ago. Anyway, here's the first post of layouts. All the "codes" links lead back to the original post at the community. Hope you all find some use for them.

One [sidebar left, image header] Codes	Two [sidebar left, text header] Codes
Three [sidebar left, no header] Codes	Four [sidebar right, image header] Codes
Five [sidebar right, text header] Codes	Six [sidebar right, no header] Codes

Very similar to the question posed here, but does anyone have a journal layout that looks similar to a page in a magazine? It's not super urgent, but I remembered wanting one once and not being able to find one. I'm totally flexible on how it would look, too, but easy customization for colors and the like would rock. I can work better with S1 layouts in regards to customization, but I love S2, as long as they work for a free account.

Okay, I come with another question. I've been trying to change my layout to this one but every time I put the CSS in insanejournal times out. Am I doing something wrong?

())))))( p r o f i l e ))))>



(behind bars)



())))))( l a y o u t s ))))>



(olive-you-too)




(darwinian)


what other stuff would y'all like to see? More goodies @ rpglayouts

Hi, all! I have some more stuff to offer you. This time, it's a layout and a directory code! The layout is for S1 Generator, and the directory code is aimed towards Scribbld use. :)



( fake cut! )

type: [journal layout] retro-dottie || S2 Bloggish, 1 column


This came together a lot faster (and easier) than I expected. I hafta say, I'm kinda pleased w/ its turn out :) Lots of other goodies @ rpglayouts

( fakey cut )

Type: S1 Generator
Live Examples: stolenmoonlight pansexual

/*GENERATOR CODE BY ARURBEX, MODIFIED FROM VARIOUS SOURCES*/ /* layout made by pansexual on insanejournal. Please credit her or layouts_for_you (insanejournal)*/ GLOBAL_HEAD<= <style type="text/css"> <!-- /* HIDES YOUR ICON */ .shadowed img{ display:none; } /* BACKGROUND IMAGE AND COLOR FOR THE PAGE */ /* MARGIN-TOP SHOULD BE AT LEAST THE HEIGHT OF YOUR HEADER */ body { background-color:#000000; background-image:url(URL); background-repeat:repeat; background-attachment:fixed; background-position:top left; text-align:center; margin:0; margin-top:390px; padding:0; } /*HEADER IMAGE WIDTH IS THE WIDTH OF THE HEADER HEIGHT IS THE HEIGHT OF YOUR HEADER MARGIN LEFT IS THE NEGATIVE HALF WIDTH OF YOUR HEADER */ #header{ background-image:url(http://i303.photobucket.com/albums/nn127/immortalaussie/Journal%20Layouts/20080219-woman-holding-the-moon.jpg); position:absolute; visibility:visible; top:0px; width:490px; left:50%; margin-left:-245px; height:390px; text-align:center; font-size:20pt; } /* SUBJECT */ p table table td.caption { font-weight:bold; } /* SHIFTS THE ENTRYBOXES CLOSER TOGETHER */ p { margin:0; padding:0; } .entrybox p{ margin: 1.2em 0; } /* HIDES THE OLD DATE LINE AND THE DATE BRACKETS */ .entrybox td.index, .index3{ display:none; } /* DEFINES THE LOOK OF THE DATE LINE.*/ .index2{ width:100%; text-align:right; border-bottom:1px dotted grey; display:block; text-transform:uppercase; letter-spacing:1.5; font-size:8pt; } /* COMMENTS LINKS */ .comments{ text-align:center; padding-bottom:50px; } /* LINK APEAREANCE FOR COMMENTS */ .comments a, .comments a:visited,.comments a:hover{ color:#000000; } .comments img{ border:0; } /* TOP NAVIGATION YOU MIGHT HAVE TO CHANGE THE LEFT VALUE TO CENTER THE NAVIGATION LINKS UNDER THE HEADER*/ .nav1, .nav2{ padding-top:2; padding-bottom:2; position:relative; left:-2pt; display:block; } /* FIRST LINE OF TOP NAVIGATON */ .nav1{ background-color: #000000; text-transform:uppercase; word-spacing:14px; } /* DO NOT CHANGE ANYTHING HERE */ table table td.shadowed table{ width:100%; } table td, .entrybox .meta{ padding:0; } .entrybox td{ padding:5px 10px; } /* LINK APEAREANCE OF THE SECOND NAVIGATION LINK ROW */ .nav2 a, .nav2 a:active, .nav2 a:visited, .nav2 a:hover{ color:#000000; font-variant:small-caps; } /* THE OTHER LINKS */ a { color: #000000; text-decoration:none; } a:visited { color:#000000; } a:hover { text-decoration: underline; } /* SETS THE WIDTH OF THE TABLE (CHOOSE THE SAME WITH AS YOUR HEADER) AND BACKGROUND_COLOR */ div { margin:0 auto; width:490px; background:#CCCCCC; } div div { background: none; width: auto; height: auto; padding: 0; } div table { width: 98%; } div table table { width: 100%; } div table table table { width: auto; } div table table table table { width: 100%; } --> </style> <=GLOBAL_HEAD FRIENDS_WEBSITE<= <style type="text/css"> <!-- table table table table .meta {visibility:hidden;position:absolute;top:1px} table table table table table .meta {visibility:visible;position:relative;top:1px} tr.caption{ display:none } /* BACKGROUND IMAGE AND COLOR FOR THE PAGE */ /* MARGIN-TOP SHOULD BE AT LEAST THE HEIGHT OF YOUR HEADER */ body { background-color:#000000; background-image:url(URL); background-repeat:repeat; background-attachment:fixed; background-position:top left; text-align:center; margin:0; margin-top:400px; padding:0; } /*HEADER IMAGE WIDTH IS THE WIDTH OF THE HEADER HEIGHT IS THE HEIGHT OF YOUR HEADER MARGIN LEFT IS THE NEGATIVE HALF WIDTH OF YOUR HEADER */ #header{ background-image:url(http://i303.photobucket.com/albums/nn127/immortalaussie/Journal%20Layouts/20080219-woman-holding-the-moon.jpg); position:absolute; visibility:visible; top:0px; width:490px; left:50%; margin-left:-245px; height:400px; text-align:center; font-size:20pt; } /* SUBJECT */ p table table td.caption { font-weight:bold; } /* SHIFTS THE ENTRYBOXES CLOSER TOGETHER */ p { margin:0; padding:0; } .entrybox p{ margin: 1.2em 0; } /* HIDES THE OLD DATE LINE AND THE DATE BRACKETS */ .entrybox td.index, .index3{ display:none; } /* DEFINES THE LOOK OF THE DATE LINE.*/ .index2{ width:100%; text-align:right; border-bottom:1px dotted grey; display:block; text-transform:uppercase; letter-spacing:1.5; font-size:8pt; } /* COMMENTS LINKS */ .comments{ text-align:center; padding-bottom:50px; } /* LINK APEAREANCE FOR COMMENTS */ .comments a, .comments a:visited,.comments a:hover{ color:#000000; } .comments img{ border:0; } /* TOP NAVIGATION YOU MIGHT HAVE TO CHANGE THE LEFT VALUE TO CENTER THE NAVIGATION LINKS UNDER THE HEADER*/ .nav1, .nav2{ padding-top:2; padding-bottom:2; position:relative; left:-2pt; display:block; } /* FIRST LINE OF TOP NAVIGATON */ .nav1{ background-color:#000000; text-transform:uppercase; word-spacing:14px; } /* DO NOT CHANGE ANYTHING HERE */ table table td.shadowed table{ width:100%; } table td, .entrybox .meta{ padding:0; } .entrybox td{ padding:5px 10px; } /* LINK APEAREANCE OF THE SECOND NAVIGATION LINK ROW */ .nav2 a, .nav2 a:active, .nav2 a:visited, .nav2 a:hover{ color:#000000; font-variant:small-caps; } /* THE OTHER LINKS */ a { color: #000000; text-decoration:none; } a:visited { color:#000000; } a:hover { text-decoration: underline; } /* SETS THE WIDTH OF THE TABLE (CHOOSE THE SAME WITH AS YOUR HEADER) AND BACKGROUND_COLOR */ div { margin:0 auto; width:490px; background:#cccccc; } div div { background: none; width: auto; height: auto; padding: 0; } div table { width: 98%; } div table table { width: 100%; } div table table table { width: auto; } div table table table table { width: 100%; } tr.caption{ display:none; } .shadowed td div{ visibility: hidden; position: absolute; top: 1px; } /*ALLOWS YOU TO PUT IMAGES IN THE NAVIGATION LINES*/ .shadowed span.nav1 img, .shadowed span.nav2 img{ display: inline; visibility: visible; position: relative; } </style> <!--THIS DIV IS IMPORTANT IF YOU WANT A HEADERIMAGE . DO NOT REMOVE IT--> <div id="header"> <!--HEADER IMAGE, if you want to write something on top of it, do it here --> </div> <!--This fixes a bug in Internet Explorer--> <div> </div> <!--END OF HEADER DIV--> <!--START OF NEW NAVIGATION--> <tr><td colspan="5" width="100%"> <table cellspacing="0" border="0" cellpadding="0"> <tr><td class="meta"> <!--FIRST ROW OF NEW NAVIGATION LINKS--> <center> <font size=3>I Dream of the Moon</font></br></br></br><span class="nav1"> ♣ <a href="http://journalname.insanejournal.com/info"><font color="#FFFFFF">userinfo</font></a> ♣ <a href="http://journalname.insanejournal.com/friends"><font color="#FFFFFF">friends</font></a> ♣ <a href="http://www.insanejournal.com/users/journalname/calander"><font color="#FFFFFF">calander</font></a> ♣ <a href="http://www.insanejournal.com/users/journalname"><font color="#FFFFFF">recent</font></a> ♣ <a href="http://www.insanejournal.com/update.bml"><font color="#FFFFFF">update</font></a> ♣ <br /></span><br /> <!--END OF FIRST ROW OF NEW NAVIGATION LINKS--> <!--SECOND ROW OF NEW NAVIGATION LINKS--> <span class="nav2"> <font color="#FFFFFF"> ♣ <a href="URL">Link</a> ♣ <a href="URL">Link</a> ♣ </span></center> <!--END OF SECOND ROW OF NEW NAVIGATION LINKS--> <br /><br /> </td></tr></table></td></tr> <=FRIENDS_WEBSITE LASTN_WEBSITE<= <style type="text/css"> <!-- /*HIDES THE ORIGINAL NAVIGATION*/ table table table table .meta {visibility:hidden;position:absolute;top:1px;} table table table table table .meta {visibility:visible;position:relative;top:1px;} tr.caption{ display:none; } .shadowed td div{ visibility: hidden; position: absolute; top: 1px; } /*ALLOWS YOU TO PUT IMAGES IN THE NAVIGATION LINES*/ .shadowed span.nav1 img, .shadowed span.nav2 img{ display: inline; visibility: visible; position: relative; } --> </style> <!--THIS DIV IS IMPORTANT IF YOU WANT A HEADERIMAGE . DO NOT REMOVE IT--> <div id="header"> <!--HEADER IMAGE, if you want to write something on top of it, do it here --> </div> <!--This fixes a bug in Internet Explorer--> <div> </div> <!--END OF HEADER DIV--> <!--START OF NEW NAVIGATION--> <tr><td colspan="5" width="100%"> <table cellspacing="0" border="0" cellpadding="0"> <tr><td class="meta"> <!--FIRST ROW OF NEW NAVIGATION LINKS--> <center> <font size=3>I Dream of the Moon</font></br></br></br><span class="nav1"> <font color="#FFFFFF">♣ <a href="http://journalname.insanejournal.com/info"><font color="#FFFFFF">userinfo</font></a> ♣ <a href="http://www.insanejournal.com/users/journalname/friends"><font color="#FFFFFF">friends</font></a> ♣ <a href="http://www.insanejournal.com/users/journalname/calander"><font color="#FFFFFF">calander</font></a> ♣ <a href="http://www.insanejournal.com/users/journalname"><font color="#FFFFFF">recent</font></a> ♣</font> <br /></span><br /> <!--END OF FIRST ROW OF NEW NAVIGATION LINKS--> <!--SECOND ROW OF NEW NAVIGATION LINKS--> <span class="nav2"> ♣ <a href="URL">LINK</a> ♣ <a href="URL">Link</a> ♣ </span></center> <!--END OF SECOND ROW OF NEW NAVIGATION LINKS--> <br /><br /> </td></tr></table></td></tr> <=LASTN_WEBSITE

( Instructions )

Type: Journal Layout [Minimalistically] || S2 Bloggish



HIYA: I've been meaning to cross post here for a good while. I have a few more things (& adding more) over at rpglayouts. This place has been extreme nice enough to add me to their nifty list of links on the profile since basically they're hardcore. Also, excited to hear about the new website.

(follow the leader...)

Image is of the Flexible Squares version of the layout

Type: Clean and Simple and Flexible Squares (LJ only

Clean and Simple
FRIENDS_OPT_ITEMS=>25 GLOBAL_HEAD<= <style type="text/css"> <!-- body { background-color:#FF00FF; font-family:sans-serif; margin-top:300px; margin-bottom:10px; text-align:center; background-image:url(http://i303.photobucket.com/albums/nn127/immortalaussie/Journal%20Layouts/Taylor%20Momsen/taylorheader1.png); background-repeat:no-repeat; background-position:top; } table { width: 500px; border:none; margin-left:auto; margin-right:auto; margin-top:5px; } #topbar { background: #FFCCFF; padding-right:10px; color: #000000; height: ; width: ; margin-top:10px; } #topbar h1 { margin-top: 15px; margin-bottom: 0; text-align: right; font-size: 1.5em; font-family: georgia; line-height: .8em; } #topbar h2 { margin-top: 0; margin-bottom: 5px; text-align: center; font-size: 1.25em; display:none; } #navbar { background: #FFCCFF; width: 20%; border-right:2px solid #FF00FF; } #navbar ul { list-style: none; padding:0; margin: 5px; } #navbar ul li { margin: 2px; font-size:11px; background-color:#FFCCFF; text-align:justify; } #navbar a{ background: #FFCCFF; color: #000000; text-decoration: bold; font-size:12px; } #navbar a:hover { text-decoration: underline; color:#FFFFFF; } #mainstuff { width: 80%; background-color: #FFFFFF; font-size:12px; line-height:14px; } #mainstuff a{ background: none; color: #FF00FF; text-decoration: none; font-size:12px; } #userpic { text-align: center; margin: 10px; } #userpic img { border: 2px solid white ; background: none; position: relative; top: 6px; } #entries { margin: 5px; } #range { padding:6px; text-align:center; color:#000000; display:none; } .day { border-top:1px solid #FF00FF; clear: both; background-color:#FFCCFF; } .day h3 { border-bottom: 1px solid #FFCCFF; padding: 1px; margin: 0; font-size: 1.1em; text-align: right; color:#FF00FF; } address { text-align: center; font-style: normal; font-size: 0.95em; display:none; } .entrytext { padding: 0px; text-align: justify; } .entry { background-color:#FFFFFF; } .entrytext p, .entrytext ul, .entrytext ol, .entrytext table { margin-top: 0.5em; margin-bottom: 0.5em; } .entryheading { display:block; margin:0; text-align:left; color:#FFCCFF; background:#FFFFFF; } .timestamp, .altposter, .subject{ font-size:1.1em; } .altposter a { text-decoration: underline; background-color:#FF00FF; } .altposter img { border: 2px solid; background-color:#FFFFFF; } .talklinks { font-size: .8em; text-transform: lowercase; text-align: center; margin-bottom: 15px; clear: right; padding:0px; background:#FFCCFF; margin-top:5px; border-top:1px solid white; border-bottom:1px solid #FF00FF; } .talklinks a{ text-decoration:bold; color: #000000; } .currents{ font-size:.8em; color:#FFCCFF; } .header{ position:absolute; top:16px; left:50%; margin-left:-300px; width:500px; height:10px ; } table table{ border:0; width:75%; background:#FFCCFF; } table table td{ border-right:1px solid #FFCCFF; border-bottom:1px solid #FFCCFF; border-top:1px solid #fff; border-left:1px solid #fff; } --> </style> <=GLOBAL_HEAD FRIENDS_OPT_ITEMS=>25 FRIENDS_WEBSITE<= <li><a href="URL">Link</a></li> <li><a href="URL">Link</a></li> <li><a href="URL">Link</a> </li> <li><a href=URL>Link</a></i> <li><a href=http://www.insanejournal.com/update.bml>Update</a></li> <=FRIENDS_WEBSITE LASTN_OPT_ITEMS=>25 CALENDAR_WEBSITE<= <li><a href="URL">Link</a></li> <li><a href="URL">Link</a></li> <li><a href="URL">Link</a> </li> <li><a href=URL>Link</a></i> <li><a href=http://www.insanejournal.com/update.bml>Update</a></li> <=CALENDAR_WEBSITE LASTN_OPT_ITEMS=>25 LASTN_WEBSITE<= <li><a href="URL">Link</a></li> <li><a href="URL">Link</a></li> <li><a href="URL">Link</a> </li> <li><a href=URL>Link</a></li> <li><a href=http://www.insanejournal.com/update.bml>Update</a></li> <=LASTN_WEBSITE

Flexible Squares
/* Cleaned CSS: */ /*--------------------------------------------------- This is the original stylesheet for the S2 style Flexible Squares with the elements arranged in a hopefully clearer order. You can find a full guide on the single css definitions, including exlanations and illustrations at http://cartonage.livejournal.com. Hope this helps! =) -----------------------------------------------------*/ /*This layout was made by Alex aka pansexual on Insanejournal and moonsdreaming on LJ. It is posted at http://layouts-for-you.insanejournal.com and this credit must be kept*/ body { background-color: #FFCCFF; text-align: center; color: #000000; font-family: "Verdana", sans-serif; font-size: 10px; margin: 20px 0 20px 0; } a, a:link, a:visited { color: #CC3366; text-decoration: none; } a:hover { color: #CC3366 text-decoration: underline; } p, td, blockquote { font-size: 11px; } code, kbd, pre, tt { font-family: monospace; } /*--------------------------------------------------------------------- General page alignment and width ------------------------------------------------------------------------*/ #content { width: 470px; margin-left: auto; margin-right: auto; background-color: #FFCCFF; border-width: 1px; border-style: solid; border-color: #999999; padding: 15px; } #maincontent { margin-top: 15px; font-family: "Verdana", sans-serif; font-size: 11px; background-color: #FFCCFF; color: #000000; border-style: solid; border-color: #999999; border-width: 1px; margin-right: 180px; text-align: left; } #sidebar { padding-top: 15px; margin-top: 15px; background-color:#FFCCFF; border-color: #999999; border-width: 1px; border-style: solid; font-size: 11px; font-family: "Verdana", sans-serif; color: #000000; width: 160px; float: right; text-align: left; } /*----------------------------------------------------------------------------- Header - you can add a header image with either #header or .headerimage --------------------------------------------------------------------------------*/ #header { width: 100%; padding: 10px 0px 20px 0px; margin: 0px; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 2px; border-style: solid; border-color: #999999; border-width: 1px; background-color: #FFCCFF; color: #000000; } .headerimage { position: relative; width: 500px; height: 300px; margin-left: auto; margin-right: auto; margin-bottom: 0px; background-image: url("http://i303.photobucket.com/albums/nn127/immortalaussie/Journal%20Layouts/Taylor%20Momsen/taylorheader1.png"); /* Header image URL */ background-repeat: no-repeat; } /*look and color of links (also partly for footer)*/ div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { color: #FF00FF; } div#header a:hover, div#footer a:hover { color: #CC3366; text-decoration: none; } /*title and subtitle*/ .title { font-family: "Verdana", sans-serif; font-size: 14px; font-weight: normal; line-height: 200%; top: 10px; } .subtitle{ font-family: "Verdana", sans-serif; font-size: 11px; font-weight: normal; top: 10px; } /*----------------------------------------------------------------------------- Header - top navigation --------------------------------------------------------------------------------*/ /* header -- links to views; title of journal; subtitle of journal */ ul.navheader { padding: 0px; margin: 0px; } ul.navheader li { display: inline; padding: 0 3px 0 3px; } /*----------------------------------------------------------------------------- Entry stuff ------------------------------------------------------------------------*/ .subcontent { } .entry { margin: 0px 10px 10px 30px; padding: 10px; background-color: #FFCCFF; color: #000000; font-family: "Verdana", sans-serif; font-size: 11px; text-align: left; border-width: 1px; border-color: #919bad; border-style: solid; } .userpic { position: relative; float: left; background-color: #FFCCFF; padding: 5px; margin: 10px; z-index: 15; border-width: 1px; border-color: #919bad; border-style: solid; } .date { line-height: 200%; top: 5px; color: #000000; font-family: "Verdana", sans-serif; font-size: 10px; }

Live Example: sweethonesty princessclara princessroyal (Clean and Simple)
Headers: version one version two

( Instructions for Insanejournal )

( Instructions for Livejournal )

This post is to convey two things guys!

1, Please be patient on the journals I've promised you all. I had a huge exam last week and one this Monday that have kept me unable to get things cleaned out as quickly as I'd like. My Spring Break is the 29th-4th so you'll ALL have them by that date! And check things in about an hour or so as I'll be adding more.

2, I HAVE A QUESTION! I'm looking for a s1 generator layout that I can EASILY tweak that has it so I can have a fixed banner/graphic at the top. I've been looking for weeks and can't find one. One that accepts multiple fonts for the title, links, text etc is love. Can anyone help me?

Thanks!

TYPE: journal layout (S1 - Generator)
PREVIEW:
(click for bigger preview)


note I have six layouts currently posted at seventies and am working on more, all are simple generator layouts like this one. If you're interested in seeing them, or want to post a request comment at the journal and I'll add you up right away

( INSTALLATION )

Type: Layout (S2 Bloggish)
Compatability: Tested on Firefox and IE.
Features: Functioning link, tag and userpic modules.
Disabled: Entry title, metadata, user icon, privacy indicator, calendar, page summary and syndicate modules.
Preview:

Instructions & Code: ( fake cuts make the world go around )

Type: Layout (S2 Bloggish)
Compatability: Tested on Firefox and IE.
Features: Functioning link, tag, page summary and calendar modules.
Disabled: Journal title/subtitle, header and syndicate module.
Preview:

Instructions & Code: ( fake cuts make the world go around )

Type: Layout (S2 Bloggish)
Compatability: Tested on Firefox, IE, Opera and others via browsershots.
Features: Functioning link and tag modules. Customisable header (quotes through journal title and character through transparent image).
Disabled: Calendar, page summary and syndicate modules.
Preview:

Instructions & Code: ( fake-cut ftw )

Surreptitiously edited so the link is now public.

Warning! Picture Heavy.
( TUTORIAL; installing s1 layouts )

S1 Layouts good for RPGs and Characters. I post my stuff at kerning but here is a summary of that I've done. I try and keep in mind what I like to use for RPGs and keep them easily customizable.

( Table and Rules )

I found a template that basically tells you how to make an S1 Generator layout here! It tells you exactly what to do, and in my opinion it comes out good. But you need to save this this this and this to your own server seeing as they don't give you links. They're the buttons for commenting, saving to your memories, editing, etc. I think it's really helpful, and is great for beginners (like myself). And example of what editing can get you is over here, just in case you were wondering.

( Layout Resources )