InsaneJournal

Tweak says, "i know about your faxes"

K (karanguni) wrote in shifgrethor,
@ 2008-06-28 02:56:00

Entry tags:

!layouts, refried paper

Layout: Adj (S2 Refried Paper)
Second layout is another cross-compatible layout - Adj for Refried Paper. It's a fluid layout tested on 800x600 and up on both IE and Firefox, and has all the advantages of the Refried Paper layout - you can rename your links almost anything you want, customise a thousand little details and there's an additional free text sidebar module to go crazy with!

Live preview.

Instructions for IJ:

1. Under the customise section, select the Refried Paper layout. Make sure your style system is set to S2.
2. On the custom options page, make sure to select no on the option of using the layout's base stylesheet. Important stuff!
4. In the custom CSS box, put in the CSS code below.

Code:

/* Coded by karanguni on LJ/IJ. Made for the Refried Paper layout with no base CSS/theme! Cross-platform compatible. Mmmm, tasty. Editing the code is fine and dandy - that's what the little helping comments are for - just make a note of it in your userinfo/whatever and give credit! 8D Have fun, guys. */

/* These are the tinyicon replacements for the usual LJ usericon and community icons. They're currently hosted on my server; hotlinking these is fine, but they may be taken down in the future - so save a copy if you like them!  */

/* so that IE users will see a new image */
* html span.ljuser{
background-image: url(http://www.andmoreslow.net/layouts/adj_user.gif) !important;
background-repeat: no-repeat;
background-position: left middle;
padding: 0px 16px 16px 9px !important;
}

* html span.ljuser img{
visibility: hidden;
display: none;
}

.ljuser img {
                width: 0px;
		height: 0px;
		background-repeat: no-repeat !important;

}
		
/*Tinyicon code for non-IE browsers. */
     
.ljuser img[src="http://www.insanejournal.com/img/userinfo.gif"] 
{
        background-image: url(http://www.andmoreslow.net/layouts/adj_user.gif) !important;
		padding: 10px 0px 0px 9px !important;

}

.ljuser img[src="http://www.insanejournal.com/img/community.gif"] { 
                background-image: url(http://www.andmoreslow.net/layouts/adj_comm.gif) !important;
		padding: 9px 0px 0px 9px !important;

}
		
/* General happy-time code here: font and link colours. Note that you'll have to change the fonts again further down, and that you can specify link colours for certain parts of the layout. As a general rule, just fill these in and look for the overrides below. :D */

body {
  background: #37363c;
  color:      #eaeaea;
  margin:     0 auto;
  padding:    0;
  text-align: center; /* remove this line to remove the centering of the layout (for IE) */
  font-family: Verdana, Tahoma, Arial, sans-serif !important;
  font-size: 8pt;
  line-height: 11px;
}

a {
  text-decoration: none;
}

a:link {
  color:           #e80168;
}

a:visited {
  color:           #e80168;
}

a:active {
  color: #e80168;
}

a:hover {
  color: #ff9966;
}

blockquote {
margin-left: 40px;
margin-right: 40px; 
margin-top: 10px; 
margin-bottom: 10px;
padding: 10px;
background: #eaeaea;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
color: #e80168;
text-align: justify;
line-height: 11px;
border: 0px;
text-indent: 20px;
border: 0px solid #ffffff;
}

textarea, .textbox, select, input {
background-color: #fffffff;
color: #1e1e1e;
border: 1px solid #cecece;
font-family: tahoma;
font-size: 8pt;
}

/* Change the width to either a fixed pixel amount of another percentage if you don't like the current size of the layout! The margins can be changed to realign the page - remove the auto to remove the centering. */

table {
width: 70%;
margin: 0 auto;
}

/* Touching this table table thing may not be too bright an idea. */

table table { 
width: 100%;
margin: 0 auto; }

/* Background colours of the table.  */

td, td table {

padding: 0px;
margin: 0px; 
background: #1e1e1e;
 }

#content {
  background-color: 1e1e1e;
  color: #eaeaea;
 
}

/* Change the 30px-s if you want more/less padding around your entries. */

.entry {
		
  border:  hidden #000000;
  padding: 3px 30px 3px 30px;
}

/* Gives cool stuff for entry pictures in every non-IE browser. */

.entry img {
padding: 4px;
margin: 0px 10px 0px 4px;
background: transparent;
border: 1px solid #ffffff; }

/* Formats the big fancy title. */

td.title {
	
  background: 	  #1e1e1e;
  color:          #e80168;
  font-size:      29pt;
  font-weight:    700;
  letter-spacing: -5px;
  padding:        20px;
  font-family: 	  "Verdana", "sans-serif";
  border-bottom: 5px solid #e80168;
  border-top: 	 8px solid #ffffff;

}

/* Formats the stuff in the sidebar. */

td.links {
  border-left: 3px solid #e80168;
  font-size:   9px;
  line-height: 12px;
  padding:     8px;
  font-family: "Verdana", "sans-serif";
  color: 	   #efe8ea; 
}

/* Turns off the subtitle. You can add overrides here and turn the subtitle back on if you want. */

.descrip {
display: none;
}

/* Formats metadata (mood, subject, etc) */

.date, .dateheader, .datecontent {
		
  color:       #efe8ea;
  font-size:   7pt;
  line-height: 13px;
  font-family: Tahoma;
  display: inline !important;

}

/* Formats the content of the metadata (the actual mood/subject/etc)  */

.datecontent { 
margin: 0px 0px 0px 23px;
padding: 0px 0px 0px 3px; 
float: left;}

.datecontent img {
border: none; }

/* Formats the title of the metadata ("location", "mood", "subject") */

.dateheader {
 
  font-weight: bold;
  width: 20px !important;
  padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
 float: left;
}

/* Formats the headers of the sidebar */

.subhead {
		
  color:          #efe8ea;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .1em;
  margin-top: 4px;
  margin-bottom: 4px; 
  padding:  	 8px 8px 0px 8px;
  font-family: "Verdana", "sans-serif";
  
  text-transform: uppercase;
}

/* The stuff below ffects more or less all the fonts and bullets in the entries. */

br, li, ol, p, table, td, tr, ul {
	
  color:       #eaeaea;
  font-size:   8pt;
  line-height: 11px;
  text-align:  justify;
  font-family: verdana, tahoma, "sans-serif";
}

/* You can muck around with the horizontal line between entries below. */

hr {
color: #e80168 !important;
background-color:  #e80168 !important;
height: 5px !important; 
 }
 
 /* Links! */

p.links {
  color:       #e80168;
  font-size:   10px;
  line-height: 12px;
font-family: "Verdana", "sans-serif";
background: transparent;
}

/* Entry footer linkbar! */

.author, .time {

color:          #eaeaea;
  font-size:      8pt;
  line-height:    12px;
  text-transform: lowercase;
 font-family: "Verdana", "sans-serif";
 padding: 0px 0px 10px 0px;
display: block;

}

/* The padding specifies how far apart your links are from each other in the footer linkbar! */

.author a {
padding: 0px 3px 0px 3px; }

#commenttext {
  width: 90%;
}

.datecontent img {
border: none !important;

}

Notes:

Extra code:

- Turn off private/friends-only images:

- Removing borders around images in entries:

Add "style="border: none;" within the HTML of your images when posting, for example: <img src="YOUR URL HERE" style="border: none;">

Tiny icons are by me and hosted on my own server. Feel free to snag and hotlink with credit! Save it onto your own server if you can - if I take them off, you'll be left with no usericons. D:

Edits are fine, just stick a note about it in your credits. 8D

Questions more than welcome!

Credit to this community would be really nice in the userinfo. :D

	ex_potter281 2008-11-11 09:29 pm UTC (link)
	I'm in love with this. :) Going to go set it up now! Will credit~ -Sarah (Reply to this) (Thread)

	karanguni 2009-01-17 09:32 pm UTC (link)
	:D Thank you! is really late to replying (Reply to this) (Parent)