InsaneJournal

Tweak says, "Chivas Regal"

wizardnamedoz (wizardnamedoz) wrote in rpglayouts,
@ 2010-08-23 17:25:00

Entry tags:

journal layouts

[journal layout] roses not red

S2 Bloggish || 2 Column

F A Q S.
name:	Roses Not Red
tested viewing:	FireFox 3.6 & IE 8/screen resolution of 1024x768 or greater [note: boxes will not be rounded & shadowed in IE]
style:	S2 Bloggish - no theme, 2 column
header:	710px width [optional]
live preview:	scaredofrabbits @ 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 Column (Sidebar 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:

/*-------------------------------------------
    Roses Not Red 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-image: url("http://i38.tinypic.com/sxkke8.jpg");
	text-align: justify;
	color: #777777;
	font-family: arial, sans-serif;
	font-size: 11px;
	margin: 20px 0 20px 0;
	}

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

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

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

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

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

#banner {
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-box-shadow:0 0 1em #555555;
	border: 4px solid #9f3131; 
	background-image: url('URL HERE');
	height: NUMBERpx;
	width: 710px;
	margin: 5px auto 15px 120px;
	}

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

#alpha, #alpha-inner, #beta, #beta-inner  {
        background: transparent !important;
        padding: 0px;
	margin: 0px;
        }

#alpha {
	-moz-box-shadow:0 0 1em #555555;
	}

#beta {
	margin-left: 20px;
	}

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

.content-nav {
	color: transparent !important;
	}

.content-nav a {
	line-height: 11px;
	font-family: "Verdana",georgia !important;
	font-size: 9px !important;
	letter-spacing: 1px;
	text-transform:uppercase;
	text-decoration: none;
	display: block;
	}

.content-nav a:hover {
	font-family: "Verdana",georgia !important;
	font-size: 9px !important;
	letter-spacing: 1px;
	text-transform:uppercase;
	color: #cccde3 !important;
	}

p.content-nav {
	background: #9f3131;
	padding: 10px;
	line-height: 1px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow:0 0 1em #555555;
	width: 200px;
	position: absolute;
	bottom: -80px;
	margin-left: 200px !important;
	}

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

.module {
	width: 200px;
	margin: 0px;
	padding: 2px;
	background: #9f3131;
	}

.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 {
	-moz-border-radius: 10px 10px 0px 0px;
	-webkit-border-radius: 10px 10px 0px 0px;
	padding-top: 20px;
	}

.module-viewlinks a {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	font-weight: 900;
	text-decoration: none;
	background: #791a19;
	color: #ccced3;
	margin-top: 4px;
	margin-bottom: 4px;
	font-family: "Verdana",georgia !important;
	font-size: 9px !important;
	letter-spacing: 1px;
	text-transform:uppercase;
	text-align: right;
	display: block;
	width: 130px;
	padding: 5px;
	margin-left: 35px;
	}

.module-viewlinks a:hover {
	color: #791a19 !important;
	background: #ccced3 !important;
	font-style: normal;
	padding: 5px;
	}

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

.module-typelist {
	}

.module-typelist .module-header {
	padding: 2px 0px;;
	text-transform: uppercase;
	font-family: arial,"Trebuchet MS", sans-serif;
	color: #791a19;
	font-size: 14px;
	font-weight: 900;
	border-bottom: 1px dashed #ccced3;
	margin-bottom: -2px;
	width: 170px;
	margin-left: 15px;
	}

.module-typelist a {
	font-weight: 900;
	text-decoration: none;
	color: #791a19;
	margin-top: 4px;
	margin-bottom: 4px;
	font-family: "Verdana",georgia !important;
	font-size: 9px !important;
	letter-spacing: 0px;
	line-height: 11px;
	text-transform:uppercase;
	text-align: right;
	display: block;
	padding-right: 5px;
	width: 170px;
	margin-right: 15px;
	}

.module-typelist a:hover {
	color: #ccced3 !important;
	background: transparent !important;
	border-right: 3px solid #791a19;
	font-style: normal;
	padding-right: 5px;
	}

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

.module-categories {
	-moz-border-radius: 0px 0px 10px 10px;
	-webkit-border-radius: 0px 0px 10px 10px;
	}

.module-categories .module-header {
	padding: 2px 0px;;
	text-transform: uppercase;
	font-family: arial,"Trebuchet MS", sans-serif;
	color: #791a19;
	font-size: 14px;
	font-weight: 900;
	border-bottom: 1px dashed #ccced3;
	margin-bottom: -2px;
	width: 170px;
	margin-left: 15px;
	}

.module-categories a {
	font-weight: 900;
	text-decoration: none;
	color: #791a19;
	margin-top: 4px;
	margin-bottom: 4px;
	font-family: "Verdana",georgia !important;
	font-size: 9px !important;
	letter-spacing: 0px;
	line-height: 11px;
	text-transform:uppercase;
	text-align: right;
	display: block;
	padding-right: 5px;
	width: 170px;
	margin-right: 15px;
	}

.module-categories a:hover {
	color: #ccced3 !important;
	background: transparent !important;
	border-right: 3px solid #791a19;
	font-style: normal;
	padding-right: 5px;
	}

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

.entry {
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-box-shadow:0 0 1em #555555;
	border: 4px solid #9f3131;	
	background: #f9f9f9;
        width: 600px !important;
        padding: 20px 15px;
        margin: 0px 0px 25px 0px; 
	}

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

h2.date-header {
	position: absolute;
	color: #bbbbbb;
	margin: 15px 0px 0px 25px;
	padding-bottom: 8px;
	font-weight: normal;
        text-transform: uppercase;
	font-family: arial, sans-serif;
	font-size: 10px;
	line-height: 7pt;
	letter-spacing: 1px;
	}

h3.entry-header {
	text-align: left;
        text-transform: uppercase;
	font-family: monospace, sans-serif;
	font-size: 24px;
	font-weight: 900;
        margin: 2px 2px 0px 2px;
	letter-spacing: -2px;
	color: #9f3131;
	padding-bottom: 5px;
	border-bottom: 1px dashed #791a19;
	}

.entry-userpic {
	background: #9f3131;
	padding: 6px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow:0 0 1em #555555;
	}

blockquote {
	border: 1px #791a19 dashed;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 5px;
	}

.ljtags {
	background: #9f3131;
	padding: 8px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	text-transform: uppercase;
	font-family: arial,"Trebuchet MS", sans-serif;
	color: #cccde3;
	font-size: 10px;
	font-weight: 900;
	}

.ljtags a {
	font-family: "Verdana",georgia !important;
	font-size: 9px !important;
	letter-spacing: 0px;
	line-height: 11px;
	text-transform:uppercase;
	color: #791a19;
	}

.ljtags a:hover {
	font-family: "Verdana",georgia !important;
	font-size: 9px !important;
	letter-spacing: 0px;
	line-height: 11px;
	text-transform:uppercase;
	color: #cccde3 !important;
	}

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

color schemes:

red
	#791a19	#9f3131	#cccde3	#555555

backgrounds:

HERE

header:

1. To add a head, edit the following in the code:
   #banner {
      background-image: url('URL HERE');
      height: NUMBERpx;
      margin: 5px auto 15px 120px;
      width: 710px;
      }
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. If you really want to modify it... you can change the width, but you have to counter act it by changing the 120px in the margin accordingly.

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

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

(Post a new comment)

	_sia 2010-08-24 01:29 am UTC (link)
	oh my god, this layout is amazing. Keep up the fantastic work. D: (Reply to this)

	advertisemyrp 2010-08-24 02:07 am UTC (link)
	I'm in love with this. I definitely need to use it sometime! (Reply to this)

zzzombies
2010-08-24 09:29 am UTC (link)

Beautiful layout! I'm just playing with it over here and have a couple questions if you don't mind!
1) There's a line above the entries/sidebar when I use the layout, which I'm guessing is a residual border from the banner space you have in the live example, or am I the only one getting this problem?
2) Do I have to make use of tags to have the bottom of the sidebar display rounded corners? When I just have the navigation links there (or even the extra links), the bottom of the sidebar is squared off.

(Reply to this) (Thread)

(no subject) -

wizardnamedoz, 2010-08-24 02:11 pm UTC

(no subject) -

zzzombies, 2010-08-24 08:29 pm UTC

	megsrevolution 2010-08-24 05:33 pm UTC (link)
	I love this layout! I'm going to use it here! (Reply to this)

rpg_review_mod
2010-08-24 05:35 pm UTC (link)

This is a lovely layout, and is currently being used in a modified blue for this journal. It flawlessly meets all of my needs, and is just stunning. The code was a pleasure to modify (as always), and I'd like to thank you for the work you put into not only keeping your CSS clear, but also for the tables you post. They are invaluable to a novice, and they speak volumes to how approachable you are as a coder.

Hands down, you are one of my favorite layout designers on IJ, and this is one of your best codes to date.

Feel free to ad me to your list of examples if you like. The only modification I made beyond simple color changes was:

So I could use a standard photo rather than a tiled background.

(Reply to this)

	stacey_mc 2010-08-25 10:52 pm UTC (link)
	I almost screamed. This layout is BEAUTIFUL! i'm using it for this character. Thank you so much. (Reply to this)

	tracey_york 2010-08-27 01:41 am UTC (link)
	Stolen and edited!!! Using it at oldhart. Will credit once I get a bio up for him!!! <3 (Reply to this)

	chaperoned 2010-08-27 09:02 pm UTC (link)
	Must agree with everyone else, this is perfect! (Reply to this)

	monthofmay 2010-08-27 09:37 pm UTC (link)
	I'm using it on this journal, with slight modifications! :) (Reply to this)

	ilikethequiet 2010-08-29 02:59 am UTC (link)
	I love this sooo much!! Taking it to put on all my journals :D (Reply to this)

	spindleloosener 2010-08-29 05:59 am UTC (link)
	Looks awesome. I'll add a different background graphic eventually and tweak the colours, but you can find it here. Only question I have is about your curved boxes. Mine came out straight, and I'm not sure how to change that... (Reply to this)

	et_synecdoche 2010-08-29 07:02 am UTC (link)
	I've been using this and have the grey colour fail to modify, but the colour in the code is "#ccced3", while the colour in the modification table is "#cccde3". I figured I should let you know! I'm using it at both ohdem and cannotsee. (Reply to this) (Thread)

(no subject) -

ohdem, 2010-08-29 07:12 am UTC

	divinefestival 2010-08-30 08:30 am UTC (link)
	This is a seriously gorgeous layout _ Using it at: greenlife_mods greenlife_ooc and greenlife_rpg with credits here. (Reply to this)

	britbrat 2010-09-01 11:48 pm UTC (link)
	This is amazing, and really easy to install. I was wondering, where exactly do you place the code for the banner? (Reply to this)

	noeelle 2010-09-08 07:12 pm UTC (link)
	Taking it and customizing for this journal. This is so amazing! Thank you! (Reply to this)

	houseofmmodly 2010-09-19 02:38 am UTC (link)
	Took for mod journal, ooc comm, rp comm & lyrics comm! (Reply to this)

	savannahmcbride 2010-10-22 08:58 pm UTC (link)
	Using it with edits for this journal. Background was taken from The Inspiration Gallery. (Reply to this)

	randomdancing 2010-10-26 02:54 pm UTC (link)
	Modified it to brown and using it in this journal :) Thanks! (Reply to this)

	keeplivingmods 2010-10-29 12:35 am UTC (link)
	This is Great! We've used it at keeplivingmods, keeplivingrpg & keeplivingooc We've put credit in the links and our credit page! (Reply to this)

	evilpork 2010-10-31 10:21 pm UTC (link)
	Using a modified version of this on this journal! LOVE THIS LAYOUT! (Reply to this)

	bellestone 2010-11-01 09:08 pm UTC (link)
	I'm not sure what I did wrong, but my banner isn't showing up. :/ Could you help me out? (Reply to this) (Thread)

(no subject) -

bellestone, 2010-11-01 09:17 pm UTC

	fromamerica 2010-11-02 06:08 am UTC (link)
	I am so in love with this! I am sure I will find a character for it sooner or later! (Reply to this)

	demoore 2010-11-14 02:30 am UTC (link)
	Using it on this journal with modifications, thank you! (Reply to this)

	sienna_ 2010-11-19 05:47 am UTC (link)
	using it in this journal, it's amazing! :) (Reply to this)

	starsand 2010-11-23 02:19 am UTC (link)
	Awesome layout! I'm using it in this journal with some modifications. Thanks! (Reply to this)

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