and so we have come across the wide sargasso

8 Batfamily icons

2008-09-19T04:52:22Z

8 Batman and co.
-- 3 Nightwing
-- 1 Tim Drake
-- 2 Bruce Wayne
-- 2 combined

Preview:

1	2	3

4	5	6

7	8	9

Credit would be nice if used!

5 Nightwing icons

2008-09-18T13:53:38Z

Look, stuff! \o\

5 Nightwing
-- 1 Robin I

Preview:

1	2	3

4	5	6

Credit would be nice if used!

4 Artist Tribute icons (Metal and Magic; Animama for FFVII)

2008-07-03T14:50:08Z

As requested by white_jenna!

4 artist tributes
-- 3 Metal and Magic by ursulav
-- 1 Vincent (Final Fantasy VII) by ani_mama

Preview:

1	2	3

4	5	6

Credit would be nice if used!

Sidenote: As an aside, if you support equal marriage regardless of gender and want a happy-time auction to blow a little cash on for a good cause, I'm offering up my graphics services, fic-writing-ness and photography at livelongnmarry at LJ. If you don't, then just pretend this message doesn't exist. :D

Icons: Women

2008-06-29T16:27:17Z

4 Women's Fashion

Preview:

1	2	3

4	5	6

Credit would be nice if used!

Sidenote: As an aside: if you support equal marriage regardless of gender and want a happy-time auction to blow a little cash on for a good cause, I'm offering up my graphics services, fic-writing-ness and photography at livelongnmarry at LJ. If you don't, then just pretend this message doesn't exist. :D

Layout: Adj (S2 Refried Paper)

2008-06-27T19:02:03Z

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

Icons: Amatsuki

2008-06-25T13:26:33Z

14 Amatsuki
-- 9 Shinonome
-- 4 Bonten
-- 1 Sasaki

Preview:

1	2	3

4	5	6

7	8	9

10	11	12

13	14	15

Credit would be nice if used!

Icons: Final Fantasy VII

2008-06-25T03:37:36Z

3 Final Fantasy VII (Tseng)
1 men's fashion (suit)

Preview:

1	2	3

4	5	6

Credit would be nice if used!

Layout: Shif (Bloggish)

2008-06-24T14:31:41Z

First layout is the community's own! \o/ Designed for S2 Bloggish, so it's cross-compatible on both LJ and IJ. :3 Click on the preview for a larger size!

Instructions for IJ:

1. Under the customise section, select the Bloggish layout. Make sure your style system is set to S2.
2. On the same page, set the theme to none. This is important!
3. On the custom options page, select two column (sidebar on left) as your layout type.
4. In the custom CSS box, put in the CSS code below.

Code:

/* Coded by karanguni on LJ/IJ. To be used with the Bloggish layout with NO SET THEME. Cross-journal platform codes for good fun! */

/* tinyicons used to replace IJ/LJ's usual user/comm icons. Replace the urls if you want to use your own.
The first two ("http://andmore.../1931icon.gif") are for usericons, the last ("http://and.../1931comm.gif") 
for communities. */

.ljuser img {
                width: 0px;
		height: 0px;
		background-repeat: no-repeat !important;
	/*so that IE users will still see an image*/
		background-image: url(http://andmoreslow.net/kicons/1931icon.gif) !important; 
		padding: 9px 9px 0px 0px !important;
		}
     
  .ljuser img[src="http://www.insanejournal.com/img/userinfo.gif"] 
{
                background-image: url(http://andmoreslow.net/kicons/1931icon.gif) !important;
		padding: 9px 9px 0px 0px !important;
		}

.ljuser img[src="http://www.insanejournal.com/img/community.gif"] { 
                background-image: url(http://andmoreslow.net/kicons/1931comm.gif) !important;
		padding: 16px 10px 0px 0px !important;
		}
		
/* Basic font changes and stuff here! */

body {
font-family: tahoma, arial, verdana, sans-serif;
font-size: 8pt !important;
line-height: 12px;
color: #48483a;
margin: 0px;
background-color: #ffffff;
				  }
				  
.lj-view-reply #beta-inner hr {
height: 0px solid #ffffff;}
				  
code, kbd, pre, tt {
font-family: tahoma;
color: #a19f87;
}
				  
a {
color: #9d9269;
text-decoration: none;
				 }

a:link, a:visited {
color: #9d9269;
text-decoration: none;
				 }

a:hover {
color: #cfcb9b;
text-decoration: none;
background: url(http://andmoreslow.net/layouts/shif_dotted.gif) bottom left repeat-x;
			}

a:active {
color: #9d9269;
	   }

blockquote {
margin-left: 150px;
margin-right: 150px; 
margin-top: 10px; 
margin-bottom: 10px;
padding: 10px;
background: #ffffff;
font-family: tahoma, arial, sans-serif;
font-size: 11px;
color: #7f7759;
text-align: justify;
line-height: 10px;
border: 0px;
text-indent: 20px;
border: 1px solid #cecece;
}

/* #Container controls the size and background, use #Container-inner to control the margins and padding. */

#container
{
margin:0px !important;
padding:0px !important;
background:#FFFFFF;
border: 0px;
width: 100% !important;
}

#container-inner
{
padding: 0px !important;
margin: 0px !important;}

/* Your journal title will be displayed with the fonts and spacing determined in #banner. */

#banner{
background: #edeef2;
height: 70px;
margin-bottom: 10px;
font-family: "Palatino Linotype", linotype, tahoma, verdana, sans-serif;
font-size: 15px !important;
font-style: italic;
font-weight: bold;
letter-spacing: auto;
word-spacing: 5px;
color: #000000;
padding: 20px 20px 0px 50px;
}

/* Hides the banner subtitle. You can delete the display: none; to re-enable and include your own formatting. */

h2#banner-description {

display: none;
}

/* #pagebody controls the entries and sidebar. Use all -inners to control padding. Because. Yeah. Just because. */

#pagebody{
background: #FFFFFF;
width: 100% !important;
}

#pagebody-inner{
margin: 0px 10px 0px 0px;
padding: 0px;}

/* Bloggish counts its columns by alpha, beta and gamma - the leftmost is always alpha, counting outwards to the right depending on how many columns you told IJ/LJ you wanted. */

#alpha {
width: 20% !important;
display: inline;
}

#alpha-inner {
margin: 10px 10px 0px 10px;
padding: 0px 0px 0px 0px;
background: #FFFFFF;}

/* Bloggish has no set class for the calendar table, so you have to define the size of the little calendar boxes and the links in them by targeting all table-data cells in the alpha column for a two-column sidebar-left layout. Change alpha-inner to beta-inner if your sidebar is on the right, etc. */

#alpha-inner td, th {
cellspacing: 2px;
width: 18px;
height: 18px;}

#alpha-inner .module-calendar a {
padding: 3px;
border: 0px solid #000000;
background: #f8f8fa;}

#alpha-inner .module-calendar a:hover {
text-decoration: none !important;
padding: 3px;
border: 1px solid #cecece;
background: #f8f8fa;}

/* Beta, in this case, is the size of the entries column. */

#beta {
width: 80% !important;
display: inline;}

#beta-inner{
margin: 0px 10px 0px 10px;
padding: 0px 0px 0px 15px;
background: #ffffff;
border: 0px;}

/* Your "previous 20" link bar. */

.content-nav{
line-height:10px;
background:#ffffff;}

/* Dates on entries. */

h2.date-header{
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
font-weight: bold;
align: left;
color: #2f2c07;}

/* Subject headers on entries. */

h3.entry-header {
font-family: "Palatino Linotype", linotype, tahoma, verdana, sans-serif;
font-size: 13pt;
font-weight: bold;
color: #2f2c07;}

.entry-header {
background-color: #edeef2;
color: #2f2c07;
font-family: tahoma, arial, sans-serif;
font-size: 7pt;
margin: 10px 0px 5px 0px;
padding: 5px 5px 5px 25px;
}

/* Userpics on an entry. It includes the poster's name and stuff. No way of targeting the icon alone that I can find. */

.entry-userpic {
float:right !important;
text-align: center !important;
margin: 3px;
padding-top: 40px !important; 
}

/* The poster's name and community info underneath entry userpics. */

p.poster {

width: 100px;}

/* The content of an entry. */

.entry-content {
padding: 3px; }

/* Metadata = mood, music, etc */

.metadata{
font-family: tahoma, arial, verdana;
font-size: 7pt;
font-color: #edeef2;}

/* Little tag bar at the bottom of each entry. */

.ljtags {
padding: 40px 2px 0px 2px;
font-family: tahoma, arial, verdana;
font-size: 7pt;
font-color: #edeef2;}

/* Footer bar with the "posted at" and links for comments and etc. */
 
.entry-footer {
float: right;
padding: 2px 0px 2px 5px;
margin: 8px 0px 0px 5px;
}

/* Separator between links in the footer bar. Turn on or off at will. Use it to pad how far apart you want the links to be.*/

.separator {
visibility: hidden;
padding: 0px 3px 0px 3px;}

/* All the stuff on the sidebar. */

.module {
margin: 10px 0px 0px 0px;
padding-bottom: 15px;
font-family: tahoma, verdana, arial, sans-serif;
font-size: 8pt;
color: #48483a;
line-height: 10px;
margin-right: 20px;
margin-top: 10px;
width: 200px;
background-color: #ffffff;}

/* Sidebar titles. */

.module-header {
background-color: #edeef2;
text-decoration: none;
margin: 5px 0px 0px 0px;
padding: 5px 5px 5px 20px;
font-family: "Palatino Linotype", linotype, tahoma, arial, sans-serif;
font-size: 12pt;
font-weight: bold;
color: #2f2c07;
height: 13px;
border-top: 0px solid #cecece;
}

/* Inside of sidebar modules. */

.module-content {

text-align: left;
margin-top: 10px;
margin-bottom: 10px; }

/* Icon sidebar module. */

.module-photo {
text-align: center;}

/* The RSS feeds and "powered by IJ/LJ" modules, turned off for sake of neatness. */

.module-syndicate, .module-powered {
display: none; }

/* Defines how to display the links in sidebar modules. */

li.module-list-item a  {
text-decoration: none;
border-left: #706f52 3px solid;
border-right: #706f52 3px solid;
border-bottom: 0px;
padding: 3px 5px 3px 5px;
margin: 8px 4px 3px 3px;
display: block;}

li.module-list-item a:hover {
text-decoration: none;
border-right: #cfcb9b 3px solid;
border-left: #cfcb9b 3px solid;
color: #cfcb9b;
background: url(http://andmoreslow.net/layouts/shif_dotted.gif) bottom left repeat-x;
border-bottom: 0px;
padding: 3px 5px 3px 5px;
margin: 8px 4px 3px 3px;
display: block;}

/* Content of the WHOLE of the comments page. */

.comments-content {
padding: 3px; 
background: transparent;}

/* MAIN comment header that appears just under your entry. */

h3.comments-header {

font-family: "Palatino Linotype", linotype, tahoma, verdana, sans-serif;
font-size: 13pt;
font-weight: bold;
color: #2f2c07;
background: #edeef2;
}

/*INDIVIDUAL comment header that appears with each comment */

h3.comment-header {
padding: 3px 3px 3px 3px;
font-family: tahoma, arial, sans-serif;
font-size: 8pt;
font-weight: bold;
background: #edeef2; }

.comment-header {
padding: 3px 3px 3px 3px;
font-family: tahoma, arial, sans-serif;
font-size: 8pt;
font-weight: bold;
background: #edeef2;}

/* Insides of individual comments. */

.comment-content {

color: #48483a;
background-color: #ffffff;
border-left: 0px solid #cecece;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 8pt;
padding: 0px 0px 15px 15px;
margin-top: 2px;

}

/* Footerbar with links at the end of each comment. */

.comment-footer {
background: url(http://andmoreslow.net/layouts/shif_note.gif) no-repeat center left;
padding: 2px 0px 2px 15px;
margin: 8px 0px 0px 10px;
}

/* You can define the colour of comment replies, but it can be a design hell. */

.comment-replies{
background: transparent;
}

/* How icons are treated in comments. */

.comment-userpic {
float:left !important;
text-align: center !important;
margin-top: 10px !important;
padding: 3px; 
background: #ffffff;
border: 1px solid #cecece;
}

/* How tags are displayed on the tag page. */

.ljtaglist li a

{
text-decoration: none;
border-left: #706f52 3px solid;
border-right: #706f52 3px solid;
border-bottom: 0px;
padding: 3px 5px 3px 5px;
margin: 8px 4px 3px 3px;
}

.ljtaglist li a:hover {
text-decoration: none;
border-right: #cfcb9b 3px solid;
border-left: #cfcb9b 3px solid;
color: #cfcb9b;
background: url(http://andmoreslow.net/layouts/shif_dotted.gif) bottom left repeat-x;
border-bottom: 0px;
padding: 3px 5px 3px 5px;
margin: 8px 4px 3px 3px;
}

/* Archive page calendar display. */

.lj-view-archive #beta-inner table td, .lj-view-archive #beta-inner table th{
border-collapse: separate;
border-style: hidden !important;
}

.lj-view-archive #beta-inner table td, .lj-view-archive #beta-inner table th {
width: 35px;
height: 35px;
border: 0px;}

.lj-view-archive #beta-inner a{
padding: 5px;
border-left: 1px solid #cecece;
border-bottom: 1px solid #cecece;}

.lj-view-archive #beta-inner a:hover {
text-decoration: none !important;
padding: 5px;
border-left: 1px solid #cecece;
border-bottom: 1px solid #cecece;

}

/* Text field and stuff. Yay decoration! */

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

Notes:

Tiny icons by Excentric@LJ and Loveicon@LJ.

The tinyicons are hosted on my own server, so you might want to save them just in case they come offline.

Questions more than welcome! :D A header-image version will come soon!

For IE 5/6 users: the layout may truncate because IE has a silly way of dealing with things - to fix, change the #beta { width: 80%; } to #beta { width: 70%;} - it'll make the entries column smaller, but it'll help to avoid the truncation without messing Firefox users up. :D Alternatively, upgrade to IE7. Or Firefox. Mmm, Firefox.

Credit would be really nice in the userinfo. :D

RESOURCE POST

2008-06-24T12:52:05Z

Thanks:

logistika_nyx funded this endeavour, and I will always owe her most of my designing soul because of that. \o/

Tinyicons:

Excentric@LJ and Loveicon@LJ.