InsaneJournal

Tweak says, "That's how it goes. Maybe."

wizardnamedoz (wizardnamedoz) wrote in rpglayouts,
@ 2010-04-07 02:47:00

Entry tags:

journal layouts

[journal layout] minimalistically

S2 Bloggish || 3 Column

F A Q S.
name:	Minimalistically [Temperance Blue]
tested viewing:	FireFox 3.6 & IE 8/screen resolution of 1024x768 or greater
style:	S2 Bloggish - no theme, 3 column
header:	830px
live preview:	pennyjade @ 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 Three Column under Layout Type
8. Scroll down to Display link list if Yes, go to Link List to edit your links
9. Copy/Paste the css code (below) into the Custom Stylesheet textbook at the bottom of the Custom Options tab
10. Click Save & voila!

C O D E.

css stylesheet by adel, sporkingly@gmail.com:

/*-------------------------------------------
    Minimalistically 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
--------------------------------------------*/

body {
	background: url(http://i40.tinypic.com/vfic09.jpg) !important;
	text-align: justify;
	color: #999999;
	font-family: "Tahoma", "Verdana", sans-serif;
	font-size: 10pt;
	margin: 20px 0 20px 0;
	}

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

a:hover {
	color: #99ccdd !important;
	text-decoration: none;
        text-transform: lowercase;
	font-style: italic;
	}

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

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

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

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

#alpha, #gamma {
        background: #99ccdd;
        padding: 5px;
        margin: 0px;
        height: 1000px;
        }

#beta {
        padding: 0px !important;
        margin: 0px !important;
        background: #f6f6f6 !important;
        height: 1010px;
        }

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

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

.content-nav {
        width: 510px !important;
        height: 22px;
        background: #B7E0EE;
	text-align: center;
	font-family: "Tahoma", "Verdana", sans-serif;
	font-size: 10pt;
	margin: 0px;
	padding-top: 8px;
	}

.content-nav a {
	background: transparent !important;
	vertical-align: middle;
	height: 30px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-top: 8px;
	color: #999999;
	text-transform: uppercase;
	border-right: 1px dotted #ffffff;
	border-left: 1px dotted #ffffff;
	}

.content-nav a:hover {
	color: #f6f6f6 !important;
	background: #99ccdd !important;
	font-style: normal;
	}

p.content-nav { 
	position: absolute;
	bottom: 0px;
	}

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

.module {
	background: #99ccdd;
        width: 150px; 
	}

.module-content {
	margin: 2px 2px 2px 2px; 
	}

.module-header {
	text-align: center;
        font-family: Georgia;
	font-size: 13pt;
        color: #f6f6f6;
        text-transform:lowercase;
        margin: 15px 2px 2px 2px;
        }

.module-photo, .module-calendar, .module-syndicate {
	display: none;
        }

.module-powered {
	background: url(http://i40.tinypic.com/1pjqch.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	font-size: 10px;
	height: 38px;
	margin-top: 25px;  
	}

li.module-list-item {
	line-height: 11px;
        }

li.module-list-item a {
        margin: 3px 2px 3px 2px;
	padding: 5px;
	list-style: none;
        text-transform: lowercase;
	font-family: "Tahoma", "Verdana", sans-serif;
	font-size: 7pt;
	background: transparent !important;
	color: #f6f6f6;
        display: block !important;
	border-right: 3px #327890 solid;
	border-left: 3px #327890 solid;
	}

li.module-list-item a:hover {
	text-transform: uppercase;
	text-decoration: none;
	font-style: normal;
	color: #327890 !important;
	border-right: 3px #B7E0EE solid;
	border-left: 3px #B7E0EE solid;
	}

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

.entry {
	background: #f6f6f6;
        width: 500px !important;
        padding: 5px;
        margin: 0px; 
	}

.entry-content, .entry, .entry-body {
	line-height: 100% !important; 
	}

.entry-content {
	margin-bottom: 0px;
	border-bottom-style: dotted;
	border-bottom-color: #999999;
	border-bottom-width: 1px; 
	}

h2.date-header {
	color: #99ccdd!important;
	margin-bottom: 2px;
	margin-left: 10px;
        text-transform: lowercase;
	font-family: "Tahoma", "Verdana", sans-serif;
	font-size: 9pt;
	line-height: 7pt;
	border: none;
	}

h3.entry-header {
	text-align: left;
        font-family: Georgia;
	font-size: 15pt;
	line-height: 100%;
        color: #327890;
        text-transform:lowercase;
        margin: 2px 2px 0px 2px;
	letter-spacing: 3px;
	}

blockquote {
	border-right: 3px #B7E0EE solid;
	border-left: 3px #B7E0EE solid;
	padding: 5px;
	}

.ljtags {
	font-size: 10px;
	border-top: 1px dotted #999999;
	margin-top: 10px;
	margin-bottom: 0px;
	}

.entry-footer {
	color: #f6f6f6 !important;
	font-size: 10px;
	margin-left: -90px;
	margin-top: 8px;
	margin-bottom: 10px;
	}

.entry-footer a {
	background: #B7E0EE;
	border: 1px dotted #99ccdd;
	color: #999999;
	padding: 5px;
	}

.entry-footer a:hover {
	background: #f6f6f6;
	border: 1px dotted #99ccdd;
	color: #327890 !important;
	padding: 5px;
	font-style: normal;
	}

.separator {
	padding: 0px 0px;
	display: none;
	}

M O D I F I C A T I O N S.

color schemes:

temperance blue
	#999999	#f6f6f6	#327890	#99ccdd	#b7e0ee
pink lemonaide:
	#999999	#f6f6f6	#A62C3D	#FF8898	#FFA6B2

backgrounds:

HERE made w/ BgPatterns

header:

1. Find #banner within the code
2. Replace URL HERE in background-image: url('URL HERE'); with the full address of your header image
3. Replace NUMBER in height: NUMBERpx; with the numerical number of the height of your header image

E X A M P L E S.
journals @ work:	maxblinks [character journal, alien rp game] la_by_night [comm, abu rp game] snikt_ [character journal, school/spy training game] anotherguthrie [character journal, the avengers game] graciehelen [character journal] moodiboo [cdj] too_much [cdj] canarycream [cdj]

Page 1 of 2
<<	[1] [2]	>>

(Post a new comment)

	mugetsu 2010-04-10 05:02 am UTC (link)
	This is an awesome layout. There can never be too many Bloggish layouts =D Yoinked, will credit and notify once I finish the layout. (Reply to this)

	moodiboo 2010-04-10 10:52 am UTC (link)
	Aww this is adorableee! And your modifications table is so detailed! I may use it soon, I'll drop you a comment if I do. <3 (Reply to this)

	pavitra 2010-04-10 10:55 am UTC (link)
	May I ask if the layout on your CDJ is up for grabs? because it really is quite pretty. (Reply to this) (Thread)

	ilikethequiet 2010-04-10 11:14 am UTC (link)
	Adorable layout, taking for a few of my journals :D (Reply to this)

	tryslora 2010-04-11 05:24 pm UTC (link)
	Thank you! I'd like to use this for a char journal but I'm going to try changing the color scheme (all my char's clothes happen to be orange... silly PB... so I need a scheme that won't clash) and background, if that's fine? Will credit. (Reply to this) (Thread)

	ellietheslayer 2010-04-13 03:37 pm UTC (link)
	Hi! Loving this layout to bits and will use it one a rpg comm for me and a friend of mine! Thanks for sharing! :) A question, though: my banner won't show. Any ideas? I mean, the instructions are simple enough and I've doublechecked the code. The banner is 830px wide and 240px high, for what it's worth. Is there anything obvious I have missed? :) Thank you! (Reply to this) (Thread)

	ellietheslayer 2010-04-13 04:07 pm UTC (link)
	Got it! Problem solved! <3 <3 <3 (Reply to this)