InsaneJournal

Tweak says, "It bees that way sometimes"

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

(Post a new comment)

	ellnyx 2008-06-24 10:15 am UTC (link)
	YAY YAY YAY YAY LAYOUTS YAY!!! Looking good! And also very understandable. ;) (Reply to this) (Thread)

	karanguni 2008-06-24 10:22 am UTC (link)
	AHAHA I DON'T EVEN UNDERSTAND MYSELF ANYMORE. I stare at the comments and wonder if they make any sense and ajsflkajlf IT IS DONE. This is cruel - I bunny you, you write a fic, it's done; you bunny me, I SPEND HALF A DAY BLEEDING MY EYES OUT. (Reply to this) (Parent) (Thread)

ellnyx
2008-06-24 07:26 pm UTC (link)

It is very much appreciated? :D

ALSO, well, that fic TOTALLY kept me awake for two hours pst my bedtime if it helps. And now astrangerenters decided that Fran meeting Joshua would be fun, and Balthier and Alec brawling over Logan, and Wakka and Normal having a philosophic discussion--

I'll probably spend half a day bleeding my eyes out too. AND MY BRAIN. THROUGH MY NOSTRILS.

(Reply to this) (Parent) (Thread)

karanguni
2008-06-24 10:47 pm UTC (link)

That's making me itch to go back to writing. Code is all fun and good, but my ficbrain needs to fic. Maybe I'll fic tonight. If I dare to go near 0TP again after what I just did. alsfjak

Bleeding your eyes out? I had a god damned dream about IJ and layout codings last night, and it involved, very bizarrely, me being so happy about finishing some code or another that you flew down from Australia. My brain is bleeding, here. 8D

(Reply to this) (Parent) (Thread)

	ellnyx 2008-06-25 12:04 am UTC (link)
	:g: As long as the plane was one of Balthier's airline spawn, I'm happy. (Reply to this) (Parent) (Thread)

	PSA karanguni 2008-06-25 12:09 am UTC (link)
	Due to turbulent ~~sex~~ weather, all passengers are advised to return to their seats and to fasten their seat belts until the ~~do not disturb~~ seatbelt sign is turned off. (Reply to this) (Parent) (Thread)

	Re: PSA ellnyx 2008-06-25 03:07 am UTC (link)
	The chief stewardess gets particularly peeved when he does that for the fifth time in a single flight. It's only a three hour one as well. Freaking pilots. (Reply to this) (Parent)

	calligraph 2008-06-24 08:43 pm UTC (link)
	I like the layout. Clear clean and easy to read. Also, it can enlarge to 120% without losing anything on my monitor. That Tseng icon is much ♥ . (Reply to this) (Thread)

	karanguni 2008-06-24 10:35 pm UTC (link)
	Ehehehe, Tseng. I should bring over the icons I did from him to this LJ. \o/ Resizable layouts are tasty and good for fic reading. Mmmm. (Reply to this) (Parent)

	baggyeyes 2008-06-24 08:58 pm UTC (link)
	I like this - it's very clear and elegant. I will credit when I use it. Thanks! (Reply to this) (Thread)

	karanguni 2008-06-24 10:35 pm UTC (link)
	Thanks! ♥ (Reply to this) (Parent)

	stillrecovering 2008-06-26 09:07 am UTC (link)
	Hi! I just wanted to start by saying I love this layout. It's exaaaactly what I was looking for, so thanks for sharing it on freelayouts. I keep running into a slight problem, though, and if you could help me it would be fantastic. As you can see here, the two columns are showing up, but the second is somehow underneath the first instead of side-by-side. (Reply to this) (Thread)

karanguni
2008-06-26 09:11 am UTC (link)

Thanks for the comment, first up!

I think you're on a 800x600 resolution, right? I'm on a larger one, but if I resize my window I think I see your problem. I think the issue's being caused by the calendar - now you've got two options! :D

1. I could try and recode the calendar for you so that it resizes properly or
2. You could just get rid of the calendar altogether, if you don't need it.

Which would you like?

(Reply to this) (Parent) (Thread)

	stillrecovering 2008-06-26 09:20 am UTC (link)
	Oh, I don't need the calendar! I'll try offing it and see what happens. Thanks for the quick response. :D (Reply to this) (Parent) (Thread)

	karanguni 2008-06-26 09:22 am UTC (link)
	:D No problem! Just a small niggle - if you could sneak a credit to the community in somewhere, that'd be really cool? :D Thanks! (Reply to this) (Parent) (Thread)

	stillrecovering 2008-06-26 09:27 am UTC (link)
	...Okay. And exactly how do I get rid of the calendar? Here I thought there'd be an obvious option for that in the custom section. fails No, of course! I just wanted to make sure it fit before I decided to keep it. (Reply to this) (Parent) (Thread)

	karanguni 2008-06-26 09:28 am UTC (link)
	Cool! 8D The calendar goes away if you stick this in with the rest of the code: .module-calendar { display:none; } :D (Reply to this) (Parent) (Thread)

	stillrecovering 2008-06-26 10:09 am UTC (link)
	Haha oh, Gosh. The calendar's gone, but it's still not lining up properly. Also I checked my screen resolution and it's at the maximum. So I don't think this is fixable. Thanks for trying to help, though. I appreciate it. (Reply to this) (Parent) (Thread)

	karanguni 2008-06-26 10:11 am UTC (link)
	D: If you could give me a screenshot, I could probably help! I'm not too good at imagining what's on other screens. But if it's too much trouble, nevermind then! :D (Reply to this) (Parent)

	karanguni 2008-06-26 10:22 am UTC (link)
	Hi! Hope I'm not bothering you, but I found out the problem - it's an IE bug, and I've altered the code so that now everything should work a-okay on your browser! It's been updated in the text box up there, so if you feel like trying again, it should go just fine! (Reply to this) (Parent) (Thread)

	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)

husky_voice
2008-06-26 07:22 pm UTC (link)

Hi! I just want to say I really love this layout. ^^ It's so hard to find ij layouts that fit what I need XD;; I'm using your layout on two RP journals, just a heads up ^^

Also would it be okay if I modified it a bit? This particular journal needs to be well a little dark-themed. XD;; (but I have a feeling I might go insane from tweaking since I know crap about CSS, so I might not change it. XD;;)

Thank you for sharing this! ^^

(Reply to this) (Thread)

	karanguni 2008-06-26 07:26 pm UTC (link)
	Modification is perfectly cool just so long as there's a link back here! \o :D I'm glad you're finding some use for these - was really sad at not seeing too many IJ layouts myself! (Reply to this) (Parent)

	ithinkiwinzall 2008-06-29 10:59 pm UTC (link)
	I snagged. Thank you so much, this was incredibly simple to read! Credit will be up on my profile when I get it put together, I promise! (Reply to this) (Thread)

	karanguni 2008-06-29 11:01 pm UTC (link)
	:D Thanks! No worries - I'm just glad people are getting some use out of it. :D (Reply to this) (Parent)

	bringmyownforks 2008-07-07 12:47 pm UTC (link)
	This is great! I've credited you and can't wait until the header version is available! (Reply to this)

	_oceanic 2008-07-15 02:49 pm UTC (link)
	beautiful! using, will credit when I get my profile info figured out. x) thank you so muchh! (Reply to this) (Thread)

	cyprian 2008-08-01 01:57 am UTC (link)
	Snagged! Credited! Grateful! (Reply to this) (Parent)

	hybridi 2008-08-22 06:15 am UTC (link)
	Nice layout, I'm going to use it (and modify a bit). Will credit, thank you! ^^ (Reply to this) (Thread)

	karanguni 2008-09-19 10:20 pm UTC (link)
	Thanks! (Reply to this) (Parent)

	starinthesky 2008-12-08 11:11 pm UTC (link)
	I really like this layout and I'm using it now. It's elegant and simple to use. I changed some the colours at my journal here- starinthesky, let me know if that isn't cool and I will change it back :) I also can't wait for a header version :D (Reply to this)

	_siriusly_black 2008-12-27 02:59 am UTC (link)
	Snagged this! Thank you! (Reply to this)

	needledrop 2009-09-16 10:58 pm UTC (link)
	thank you so much! i'm using it, will credit =) (Reply to this)

	warehouseland 2009-12-14 08:58 am UTC (link)
	Hey there. I'll be using this, just with different colours if that's alright. I've just a quick question: the entries are either above or below the sidebar, depending on which side the sidebar is on (below on the left, above on the right). How do I get it to cling to the sidebar as it should? I'm using Firefox. Please help! (Reply to this)