Rp Tutorials

I know a while back there was a lot of fuss about Google web fonts (rightly deserved fuss) and I went crazy using them for all my s1 layout-ed journals. But does anyone know if/how you could use them for a pre-coded s2 layout? I've been poking around with where to put the font element and I can't find something that doesn't break the layout, so I'd appreciate any knowledge/thoughts anyone had on this?

does anyone happen to have the code for the new ontd layout? thank you in advance!

Hello! I was wondering how you could make your tags page like the rest of your journal?

At the moment, if you go to a tag it takes you to a completely different looking page {reminds me of LJ} and it's not pretty :<

How do I make it like when you click on tags in this community? Where it just shows you all the posts and it all looks the same?

Edit: I just looked this up, and it is probably because my layout is based on S1? Is there a way around that?

Could anyone please show me to the code to make this layout? I suppose it's Generator S1 and I've tried to look up the source code, and copied everything between 'style' brackets but that hadn't got me anywhere. I've seen it in many journals, so it should be something common, but I can't find it anywhere. Basically it's one side that scrolls, another that's 'fixed'. Please help!

I've got a question. I'm currently working on a new layout and I'm wondering if there's a way to make the entries in a scrolling text area? I know how to do the scrolling textarea normally but not sure where I would put it in the CSS to make it work.

IE I want the fo post to be the only visible entry without scrolling in my journal if that makes sense?

I'm using s1 generator.

Solved thanks! :D

Help! I'm trying to make a s1 generator layout. Previously this style hasn't made the fpage appear in browsers other than Firefox. This time it is appearing (yay!). No idea why but hey it works so that is important!

So obviously I've coded my own navigation and I've got it to work on my recent entries page but on the friends page... Is IJ's default navigation. So, wonderful people, what I'm wondering is what bit of code am I missing etc?

To see my attempts the layout code is

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:#117788; background-image:url(http://i303.photobucket.com/albums/nn127/immortalaussie/Patterns/background1.png); background-repeat:repeat; background-attachment:fixed; background-position:top left; text-align:center; margin:0; margin-top:10px; 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(); position:absolute; visibility:visible; top:0px; width:600px; left:50%; margin-left:-300px; height:10px; 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:#99ddee; } .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: #117788; 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:#99ddee; font-variant:small-caps; } /* THE OTHER LINKS */ a { color: #99ddee; text-decoration:none; } a:visited { color:#55aabb; } 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:600px; background:#117788; } 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"> <!-- /* 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:#117788; background-image:url(http://i303.photobucket.com/albums/nn127/immortalaussie/Patterns/background1.png); background-repeat:repeat; background-attachment:fixed; background-position:top left; text-align:center; margin:0; margin-top:10px; 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(); position:absolute; visibility:visible; top:0px; width:600px; left:50%; margin-left:-300px; height:10px; 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:#99ddee; } .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: #117788; 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:#99ddee; font-variant:small-caps; } /* THE OTHER LINKS */ a { color: #99ddee; text-decoration:none; } a:visited { color:#55aabb; } 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:600px; background:#117788; } 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> <=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" color="#44ddff">THIS IS YOUR JOURNAL NAME</font></br></br></br><span class="nav1"> <font color="#88bbcc">♥ <a href="http://journalname.insanejournal.com/info"><font color="#88bbcc">userinfo</font></a> ♥ <a href="http://www.insanejournal.com/users/journalname/friends"><font color="#88bbcc">friends</font></a> ♥ <a href="http://www.insanejournal.com/users/journalname/calander"><font color="#88bbcc">calander</font></a> ♥ <a href="http://www.insanejournal.com/users/journalname"><font color="#88bbcc">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 /> <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> </td></tr></table></td></tr> <=LASTN_WEBSITE

I've tried experimenting with it a bit but have had no luck. I feel like I'm missing something REALLY obvious though :P

You guys here are way more code savvy than I am; I'm just okay at tweaking it. Well, there's this inactive game (actually, it never got off the ground) that has a particular layout I like. I think it might work better with the banner image I want to use for my Glee game, but try as I might, I can't grab the right coding. I've been playing around with it for several hours now with no good end results.

Could someone attempt to grab this code, or is there a post somewhere in the community for a layout like this?

Hi all! I've decided to code my first Bloggish layout for this game I'm making (this is the mod journal/layout). What I have is still a WIP but I have a couple of questions first.

-> How do I get the layout centered? I feel like I'm missing something obvious
-> I'd prefer the side bar on the left but I'm blanking on that too. I know it has something to do with the alpha, beta code but I'm looking at the tutorial and coming up blank.
-> The calendar, syndicated, powered by are set to display:none in the code... But they're still displaying.

The code is included in the text box below.

/* Pretty Little Liars S2 Bloggish Layout http://asylums.insanejournal.com/abeautifulmind + http://lace-and-cream.insanejournal.com */ body {background-color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:left; color:#FFFFFF; } a, a:visited, a:hover { color:#990000; } #container { width:650px; margin:10px; padding:2px; } #container-inner { width:640px; } #banner { width:640px; background-image:url("http://i303.photobucket.com/albums/nn127/immortalaussie/Journal%20Layouts/Bloggish/PLL/pretty-little-liars.jpg"); height:360px; } h1#banner-header { display:none; } h2#banner-description { display:none; } #pagebody { width:640px; } #alpha { background-color:#000000; color:#000000; width:500px } #beta { background-color:#000000; color:#FFFFFF; width:140px; } .content-nav, .content-nav a, .content-nav a:hover { color:#660000; } h2.date-header { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#00FFFF; background-color:#000000; } .skiplinks { font-size:9px; color:#00FFF; } .entry { border:2px; border-color:#990000; width:600px; color:#FFFFFF; background-color:#000000; } h3.entry-header {color:#FFF; font-size:16px; text-align:center; } .entry-userpic {display:none; } p.poster {display:none} .entry-content {line-height:normal; } .entry-body {line-height:normal;} .metadata {display:inherit; } .ljtags { float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#00FFFF; } .entry-footer {background:background-color:#FFFFFF; color:#000000; .module {width:40px; } .module-photo {display:none; } .module-viewlinks { background-color:#000000; color:#FFFFFF; } .module-calendar {display:none;!important} .module-typelist {font-size:10px; color:#FF0000; background-color:#000000; } .module-categories {display:none;} .module-pagesummary {display:none;} .module-syndicate {display:none;} .module-powered {display:none;} .module-header {font-size:14px; color:#FF0000; background-color:#000000; } .module-content {font:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; } ul.module-list {background-color:#000000; color:#FF0000; } li.module-list-item a {color:#FF0000} .comments {width:600px; background-color:#000000; color:#FF0000; text-align:center; text-transform:uppercase; } h3.comments-header { width:600px; font-size:14px; color:#FFFFFF; } h3.comment-header { font-size:12px;} .comment-userpic {float:right;} .comment-content {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; background-color:#000000;} .comment-footer {font-size:9px; color:#FF0000;} .comment-replies {background-color:#FFFFFF; color:#000000; }

I'd appreciate any help you are willing to offer :) (If all else fails I might go to a generator or clean/simple as I've coded those ones before with no problem. I just wanted to give Bloggish a try.....)

can anyone teach me how to get a layout like nyc? i love how the colors just seem to blend together and all. i use google chrome so i tried using the view page source to c+p, but it just didn't come out the same. am i missing anything? or maybe i'm just a css noob. can anyone help me out?

Okay, I could swear I've seen this asked here before, even with the same journal I'll be using as an example. I've gone back through 80 entries though, and I could swear it was more recently than that, so I'm sorry if this has already been answered! I don't know if I was imagining things or it was deleted or what but anyway.

Can someone tell me how to do something fancy in the namefield, such as this journal has? Where would I put it in the overrides, would it even be in the overrides at all, how would I code it, etc? Thank you!

Does anybody know how to make a header + topbar journal on LJ and would be willing to teach me/send me to the link that teaches you how to combined both? I'm a fan of the flexible squares and recognize most of the sections and such in it so if you could link me to something that teaches this, that would be wonderful! <3

Also, I'm wondering if someone could tell me what makes a file .psd? I mean, I know it's a Photoshop file but is it just a type that is associated with the program or is it something to do with coloring?

I know this doesn't have a whole lot to do with RPing but I didn't know where else to go!

Hello, lovies. I've recently found a bio I'm in love with. Only problem is.. it's this one, meant for scribbld. I don't like using those. I'm pretty HTML savvy, but I can't figure out how to make it work in a regular post.

Does anyone have the regular post codes for this? Or can anyone make them?? Thank you sooo much in advance.

Can someone point me to layout codes with the shadowed namefield and background on the subject field like ewr? I've been wanting codes like this to tweak for a while. Thanks in advance!

Also, can someone teach me how to take codes from the Page Source window? I never know what to delete and what I need to copy and paste to get that style.

Just yesterday, I discovered the Chicago-based comm textsfln which makes use of the website textsfromlastnight.com. Basically, you choose three text messages, and each of these are woven into a line from the past, present, and the future.

While creating my character (I'm still in the process of writing her) I thought to myself, "Hmm, maybe I should make use of the media templates at rp_tutorials?" A few moments later, I came across this. Although it's a wonderfully crafted template, it wasn't exactly what I'm looking for. I'm looking for something that looks like this.

I think a template in which a user can edit the sender's name and message would be very useful for games that rely on characters using social networks.

Hey guys,

I'm new to posting here as normally I can follow tutorials really easily. I've just recently changed the layout for my character journal total_milf. I used the coding from this and tweaked only colors and made the background a fixed image rather than a repeating tile.

When I tried to get my journal to show a navigation bar by going into my settings and selecting both of the options listed for #3 in the Navigation Bar section and then saved, my banner dropped down a chunk of pixels worth to allow the space for a navigation bar, but the bar itself doesn't show up. (ETA: this is what it looked like before I turned on the nav bar options)

Does anyone know why that is or how I can correct the issue?

Another problem I seem to be having is that I can't have any more than five entries per page showing otherwise I lose my "previous 5 entries" link at the bottom. Is there a reason for that that I'm missing in the CSS coding?

Hi I have a layout set out but the only thing I can't seem to have is the icons I use don't show up with the entry post I make,can anyone help? Using S1 by the way :) I tried to put the layout coding up but it one let me sadly.

I really like the layout of geek's journal, and I'd like to contact the person to ask their permission to use the base layout and tweak the colors. However, the problem I run into is the most recent journal entry is dated in May, 2009 and there doesn't seem to be any other way to get in contact with the person in question. Should I just go ahead and comment on the recent entry, making sure that said comment has some OOC indication, and ask them about the layout on the chance it gets to the person's current email? Or should I go ahead and use the layout, but credit the person in my userinfo for the base layout?

If I go forward in using the layout, the other problem I run into is, I haven't the fainest idea how to manipulate the links (i.e. the profile, friends, etc.) to display the way they do. Would anyone be able to point me in the right direction toward a tutorial that could produce similar results?

UPDATE: Since the raw code didn't quite pan out like I thought it would, I went searching through ~rp_tutorial's resource directory for CSS/HTML help and came across the original source for the layout. If you're interested, you can find the code for it here.

I keep seeing character profiles on Scribbld, they're all similar and set up pretty much the same way but it doesn't appear to have made it into the tags in this comm.

It looks like this. Anyone know where I can find the raw code or do people just tap into the page source to use it?

I originally posted this to the suggestion thread, and it was recommended I ask the comm at large, so here I am!

When using a custom layout, some layout makers do their coding via an external style sheet, and others via pasting in override codes.

However, for paid accounts on IJ, there is an option to do a mock Flexible Squares to import layouts designed for that over to IJ (which I originally found out about here, for those interested.) But MOST layouts you use, if you past in all the code needed, it makes IJ sad because it doesn't like having that much text in the override box. and then it times out, which makes me sad. It can also happen with other layout styles, such as bloggish, if there's a lot of override code in the text box.

So if anyone could do a walk-through process on how to use provided codes (with credit of course) to MAKE an external stylesheet to link to, as well as good hosts to do it with, I would be grateful.

And also, I'm working on an updated version of this post, to include some more recent terminology and such, so if anyone has any ideas that should be included there, I'd be grateful!

So I'm using a lovely layout in this journal by lobelia and I'm almost happy with it except that the navigation bar floats down the page when you scroll. I've looked at the code myself as I'm pretty good at fixing minor things if I can recognize where I need to edit, but I really just have no idea what I need to change in order to fix the navigation at the top of the page. Does anyone here know what I need to do to fix that? The original code for this layout is here.