InsaneJournal

Tweak says, "We are gentlemen of Harvard."

wizardnamedoz (wizardnamedoz) wrote in rpglayouts,
@ 2010-08-17 09:16:00

Entry tags:

journal layouts

[journal layout] sing the blues

S2 Bloggish || 2 Column

F A Q S.
name:	Sing the Blues
tested viewing:	FireFox 3.6 & IE 8/screen resolution of 1024x768 or greater
style:	S2 Bloggish - no theme, two columns
options:	...
live preview:	noplacelikeoz @ insanejournal

I N S T R U C T I O N S.

insanejournal:

1. Go to Customize Journal
2. Select S2 under Style System, then click Save
3. Go to Look and Feel (the second tab)
4. Select Bloggish under Layout & Language
5. Select (none) under Themes, click Save again
6. Go to Custom Options (the third tab)
7. Select Two Columns (Sidebar on Left) under Layout Type
8. Copy/Paste the css code (below) into the Custom Stylesheet textbook at the bottom of the Custom Options tab
9. Click Save & voila!

C O D E.

css stylesheet by adel, sporkingly@gmail.com:

/*-------------------------------------------
    Sing the Blues Layout
    Style Bloggish w/ No Theme 
    made by adel aka sporkingly@gmail.com
    thanks to rpglayouts.insanejournal.com
--------------------------------------------*/

/*-------------------------------------------
             B O D Y & H E A D E R
--------------------------------------------*/

#lj_controlstrip {
	display: none !important;
	}

#ad-leaderboard, #ad-5linkunit {
	display: none !important;
	}

body {
	background: #003355;
	text-align: justify;
	color: #777777;
	font-family: arial, sans-serif;
	font-size: 11px;
	margin: 20px 0 20px 0;
	}

a, a:link, a:visited {
	color: #276994;
        text-transform: lowercase;
	text-decoration: none;
	}

a:hover {
	color: #003355 !important;
	text-decoration: none;
        text-transform: lowercase;
	font-style: normal;
	}

#container {
	margin: 20px auto !important;
	padding: 0px !important;
	width: 950px;
	}

#pagebody, #pagebody-inner {
	margin: 0px !important;
	padding: 0px !important;
	width: auto;
	}

#banner { 
	background: transparent !important;
	background-image: url('URL HERE');
	height: NUMBERpx;
	margin: 5px 0px;
	}

h1#banner-header, h2#banner-description {
	display: none; 
	}

#alpha {
        background: transparent !important;
        padding: 0px;
	margin: 0px;
        }

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

#beta {
        background: transparent !important;
        padding: 0px;
	margin: 0px;
	margin-top: 80px;
	margin-left: 362px;
        }

#beta-inner {
	margin: 0px;
	padding: 0px;
	}

/*-----------------------------------------
    Navagation Links (Previous/Next)
------------------------------------------*/

.content-nav {
	color: #073f64;
	padding: 0px;
	background: #073f64;
	}

.content-nav a {
	font-weight: normal;
	text-decoration: none;
	color: #276994;
	margin-top: 4px;
	margin-bottom: 4px;
	margin-left: 11px;
	font-family: arial,georgia !important;
	font-size: 11px !important;
	letter-spacing: 0px;
	line-height: 16px;
	text-transform:lowercase;
	text-align: right;
	border-bottom: 1px dashed #777777;
	display: block;
	width: 130px;
	}

.content-nav a:hover {
	color: #f7f7f7 !important;
	background: transparent !important;
	border-left: 3px solid #276994;
	font-style: normal;
	}

p.content-nav {
	width: 150px;
	position: fixed;
	margin: 0 auto 0 -352px;
	top: 260px;
	background: #073f64;
	padding: 2px 2px 25px 2px;
	z-index:200;
	line-height: 1px;
	}

/*-----------------------------------------
                 S I D E B A R
------------------------------------------*/

.module {
	width: auto;
	margin: 0px;
	padding: 2px;
	position: absolute;
	top: 0px;
	}

.module-powered, .module-photo, .module-syndicate, .module-pagesummary, .module-calendar {
	display: none !important;
        }

.module-powered .module-header {
	display: none;
	}

/*--------------------
 M A I N "L I N K S"
---------------------*/

.module-viewlinks {
	width: 150px;
	position: fixed;
	margin: 0 auto 0 10px;
	top: 115px;
	background: #073f64;
	padding: 5px 2px 40px 2px !important;
	}

.module-viewlinks a {
	font-weight: normal;
	text-decoration: none;
	color: #276994;
	margin-top: 4px;
	margin-bottom: 4px;
	font-family: arial,georgia !important;
	font-size: 11px !important;
	letter-spacing: 0px;
	line-height: 16px;
	text-transform:lowercase;
	text-align: right;
	border-bottom: 1px dashed #777777;
	display: block;
	width: 130px;
	}

.module-viewlinks a:hover {
	color: #f7f7f7 !important;
	background: transparent !important;
	border-left: 3px solid #276994;
	font-style: normal;
	}

/*------------
 L I N K S
------------*/

.module-typelist {
	margin: 0 auto 0 173px;
	position: fixed;
	background: #0d4a72;
	top: 115px;
	width: 175px;
	min-height: 125px;
	z-index: 3;
	padding: 30px 2px 30px 2px !important;
	}

.module-typelist .module-header {
	padding: 2px 10px;
	text-align: right;
	text-transform: lowercase;
	font-weight: normal;
	font-family: arial,"Trebuchet MS", sans-serif;
	color: #f7f7f7;
	font-size: 17px;
	margin-bottom: -2px;
	}

.module-typelist a {
	font-weight: normal;
	text-decoration: none;
	color: #276994;
	margin-top: 4px;
	margin-bottom: 4px;
	font-family: arial,georgia !important;
	font-size: 11px !important;
	letter-spacing: 0px;
	line-height: 16px;
	text-transform:lowercase;
	text-align: right;
	border-bottom: 1px dashed #777777;
	display: block;
	width: 155px;
	}

.module-typelist a:hover {
	color: #f7f7f7 !important;
	background: transparent !important;
	border-left: 3px solid #276994;
	font-style: normal;
	}

/*------------
 T A G S
------------*/

.module-categories {
	margin: 0 auto 0 173px;
	position: fixed;
	background: #0d4a72;
	top: 295px;
	width: 175px;
	min-height: 125px;
	z-index: 4;
	padding: 2px 2px 30px 2px !important;
	}

.module-categories .module-header {
	padding: 2px 10px;
	text-align: right;
	text-transform: lowercase;
	font-weight: normal;
	font-family: arial,"Trebuchet MS", sans-serif;
	color: #f7f7f7;
	font-size: 17px;
	margin-bottom: -2px;
	}

.module-categories a {
	font-weight: normal;
	text-decoration: none;
	color: #276994;
	margin-top: 4px;
	margin-bottom: 4px;
	font-family: arial,georgia !important;
	font-size: 11px !important;
	letter-spacing: 0px;
	line-height: 16px;
	text-transform:lowercase;
	text-align: right;
	border-bottom: 1px dashed #777777;
	display: block;
	width: 155px;
	}

.module-categories a:hover {
	color: #f7f7f7 !important;
	background: transparent !important;
	border-left: 3px solid #276994;
	font-style: normal;
	}

/*------------------------------------------
               E N T R I E S
--------------------------------------------*/

.entry {
	background: #f5f5f5;
        width: 500px !important;
        padding: 20px 15px;
        margin: 0px 0px 25px 0px; 
	}

.entry-content, .entry, .entry-body {
	line-height: 15px; 
	}

h2.date-header {
	color: #f7f7f7;
	margin-left: 10px;
	font-weight: bold;
        text-transform: lowercase;
	font-family: "Tahoma", "Verdana", sans-serif;
	font-size: 36px;
	line-height: 7pt;
	letter-spacing: -3px;
	}

h3.entry-header {
	text-align: left;
        text-transform: lowercase;
	font-family: Trebuchet MS, sans-serif;
	font-size: 26px;
        margin: 2px 2px 0px 2px;
	letter-spacing: -2px;
	color: #0d4a72;
	padding-bottom: 15px;
	}

.entry-userpic {
	background: #003355;
	padding: 12px;
	}

blockquote {
	border-left: 3px #0d4a72 solid;
	padding: 5px;
	}

.ljtags {
	font-size: 11px;
	font-weight: bold;
	padding-left: 7px;
	margin-top: 20px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	line-height: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-left: 5px #276994 solid;
	}

.ljtags a {
	font-size: 11px;
	font-weight: bold;
	line-height: 12px;
	text-transform: uppercase;
	text-decoration: none;
	color: #676767;
	}

.entry-footer {
	font-size: 11px;
	font-weight: bold;
	margin: 0px 0px 0px -148px;
	padding: 0px;
	line-height: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: transparent !important;
	}

.entry-footer a[href*=reply] {
	font-size: 11px;
	font-weight: bold;
	line-height: 12px;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
	color: #676767;
	border-left: 5px #003355 solid;
	border-right: 1px #777777 solid;
	padding: 0px 7px;
	}

.entry-footer a {
	font-size: 11px;
	font-weight: bold;
	line-height: 12px;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
	color: #676767;
	}

.entry-footer a:hover, .ljtags a:hover {
	color: #0d4a72 !important;
	line-height: 12px;
	font-style: normal;
	}

.entry-footer .permalink, .entry-footer a[href*=tellafriend], .entry-footer a[href*=flag], .entry-footer a[href*=memadd], .entry-footer a[href*=subscriptions], .entry-footer a[href*=edittags] {  
	display: none !important;  
	}

E X A M P L E S.
journals @ work:

(Post a new comment)

	Perfect! triplemoonsrpg 2010-08-17 04:23 pm UTC (link)
	Wow, it's almost like you read my mind. I've been looking for an layout and this matches perfectly with the colors of our rpg. Love it! Thank you so much for sharing it. The only thing I had trouble with was adding a header. I put the image in the URL HERE spot and the height where it said NUMBER, but couldn't get it to show up. Did I miss something? (Reply to this)

	ginge 2010-08-17 04:24 pm UTC (link)
	This is GORGEOUS (Reply to this)

	_sia 2010-08-18 09:39 pm UTC (link)
	AWESOME (Reply to this)

	verypottermods 2010-08-20 03:24 am UTC (link)
	Adore this! Definitely using it for this game's OOC and RPG! (Reply to this) (Thread)

	verypottermods 2010-08-20 04:40 am UTC (link)
	I've encountered a small problem with this and was wondering if you had any solutions. With the second sidebar, you can only add so many links/tags before it messes up. Even changing the height appears to mess up the module it's in. So, the fix scrolling and heights aren't ideal. Any ideas for how to fix this or will you may offer an alternative layout? (Reply to this) (Parent) (Thread)

wizardnamedoz
2010-08-20 05:05 am UTC (link)

In order for the two sidebars to stay close when having your window bigger than the small screen size (which I find important, working on a 24 inch beast of a monitor) and them to stay put when scrolling through the entries... they had to be fixed. unfortantely the flaw with that is trying to guess how many links/tags people would have. I figured a tag list would be longer than a linked one. Anywho, if you make the number after "top:" under the part below, it'll move the tag list down so it'll show all your link list. I hope that helps and don't be afraid to yell again if it doesn't. :D

/*------------
T A G S
------------*/

.module-categories {
margin: 0 auto 0 173px;
position: fixed;
background: #0d4a72;
top: 295px;

(Reply to this) (Parent) (Thread)

	verypottermods 2010-08-23 01:13 am UTC (link)
	I tried that earlier and unfortunately it doesn't help with a large number of tags as can be seen in the comment below and the bar stretches out and looks rather ugly. Even the sidebar covers things up and rather stands out. (Also, I love the layout you have on the community now and hope you'll be posting it or one similar very soon as well!) (Reply to this) (Parent)

maxi_play
2010-08-22 04:19 am UTC (link)

This is great!!!! I've used it over at

quidditch_rpg With some minor modifications... if you have a problem with that please let me know.

I haven't made everything to exactly how I like it yet. However one of the ways I found to make tons of tags work a bit better was with a scroll bar... Credit can be found in the profile and as soon as I get to links... which should be tomorrow I'll add one there as well.

(Reply to this) (Thread)

	via spork scaredofrabbits 2010-08-22 05:44 am UTC (link)
	I was too lazy to switch usernames... editing/modding is absolutely okay, lol. Scroll bar is awesome. At some point I'll revamp it so it'll be longer link/tag friendly... but of course thats always under the eventually column :D (Reply to this) (Parent) (Thread)

	Re: via spork maxi_play 2010-08-22 04:51 pm UTC (link)
	No worries!! I do that some times. And awesome! Thank you :) (I know sometimes makers aren't as happy with people editing things).... Ooo! Well I look forward to seeing it when you make it to that in the eventual column :) (Reply to this) (Parent) (Thread)

	Re: via spork verypottermods 2010-08-23 01:23 am UTC (link)
	It's a little better if you change the text-align to left under "module-categories a" otherwise your text gets covered up. (Reply to this) (Parent) (Thread)

	Re: via spork maxi_play 2010-08-23 01:54 am UTC (link)
	Thanks for the suggestion! I'm going to do that. (Reply to this) (Parent)

	awakeningmod 2010-08-27 05:37 pm UTC (link)
	Awesome! Using this as well for this mod journal :) (Reply to this)

introverted
2010-09-27 08:24 pm UTC (link)

Hey, sorry if this is the wrong place for this...

But! I love the layout. I've used it on this journal, and all I've changed is the colors.

But for some reason I can't get the tags/comment section to look right...

There's a big gap between the 'tags' line and the 'add comment' line, and I'm horrible with CSS so I don't know what's wrong? Or is it just my screen resolution or some such? Because it does the same even if I c&p the default code without all my color changes.

Sorry for the wall o' text, thanks for your time / any help you might give!

Again, love the layout <3

(Reply to this)

	bibbidi_bobbidi 2011-01-23 03:28 am UTC (link)
	Gorgeous layout! Using for this journal! (Reply to this)

	thewickedwitch 2011-03-26 02:56 am UTC (link)
	Brilliant job! (Reply to this)

	micahbryant 2011-04-04 11:43 pm UTC (link)
	awesome. using it for this journal. (Reply to this)

woman_of_marvel
2011-04-16 03:48 pm UTC (link)

I've been tinkering with this, but I was wondering if there was a more direct means to my desired end. Lol. I want the LINK option to show up in the footer of the entries, beside (preferably before) LEAVE A COMMENT. I really hate the 'reply' page that comes up when you have to click LEAVE A COMMENT when you're the first to reply. Also, I link to entries a lot, and right clicking that (LINK) for the URL is just helpful. I managed to get it to appear, but it wasn't in line and I've been staring at coding too much over the last few days. So, any help would be appreciated! :D

(Reply to this)

	shakenidentity 2011-04-17 04:01 am UTC (link)
	Love it! Using for this journal! (Reply to this)

	slippery_friend 2011-04-18 03:03 am UTC (link)
	Great layout. Thanks so much for sharing - using it for this journal. Might tweak it a bit. Maybe. If I can figure out how. :D (Reply to this)

	thekoshow 2011-09-13 08:57 pm UTC (link)
	I'd like to use this layout! (Reply to this)

	thekoshow 2011-09-13 09:37 pm UTC (link)
	Can anyone help me with this layout? I don't know where to input links to make the "links" column show up. (Reply to this) (Thread)

	novoadonai 2011-09-26 04:48 pm UTC (link)
	Log on to your journal and go here http://www.insanejournal.com/manage/links.bml (Reply to this) (Parent)

	wildcardmod 2011-09-23 03:53 am UTC (link)
	Thanks heaps for this :D (Reply to this)

	serpentscurse 2011-10-08 09:44 pm UTC (link)
	Thanks a lot of this layout o/ (Reply to this) (Thread)

	serpentscurse 2011-10-08 09:46 pm UTC (link)
	^for (Reply to this) (Parent)

	spymods 2011-10-17 10:03 pm UTC (link)
	I'm using this here but for some reason I can't get the banner to show up. Any ideas? (Reply to this)