InsaneJournal

Tweak says, "Shiver me timbers!"

K (karanguni) wrote in shifgrethor,
@ 2008-06-24 22:22:00

Entry tags:

!layouts, bloggish

Layout: Shif (Bloggish)
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

	stillrecovering 2008-06-26 10:46 am UTC (link)
	Oh, wow. THANKS. :D I was just getting the screenshot together. This is actually my work computer, so it took a bit. Also, I'm at work. >_> But now it's perfect. You're a wizard. Thanks again! (Reply to this) (Parent) (Thread)

	karanguni 2008-06-26 10:47 am UTC (link)
	Glad to have helped! And it's always good to try and make these things cross-compatible. :D Enjoy! (Reply to this) (Parent)