InsaneJournal

Tweak says, "But why is the rum gone?"

Dawn (quillismightier) wrote in rp_tutorials,
@ 2013-01-19 12:01:00

Some CSS Help Needed
I just found and implemented this layout I found on

rpglayouts in my cdj to test before I try it on other journals. It's beautiful and works well except for one thing: the CSS does not include code to view the calendar correctly. If you look here you will see that it just sort of floats in the background and is nigh impossible to see against the background image.

Is there anything I can insert into the CSS to make this appear in a container box like the entries and so forth do?

I am alright with very basic coding in CSS, but the knowledge to make this work just isn't there. Since the maker's journal has been deleted I cannot ask them any longer.

Any and all suggestions are welcomed.

Thanks in advance!

EDIT: to include the code:

/*-------------------------------------------
    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;
	}

(Post a new comment)

let me know if this doesn't work. i tested it and i got it for me but if you have questions, ask!

corrupt
2013-01-19 11:53 pm UTC (link)

Okay so, in that code under..

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

It has this..

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

REMOVE

.module-calendar and the comma before it or it will break that code.

Then below it add this:

.module-calendar {
width: 200px;
margin: 0px;
padding-left: 2px;
}

(Reply to this) (Thread)

	Re: let me know if this doesn't work. i tested it and i got it for me but if you have questions, ask quillismightier 2013-01-20 04:01 am UTC (link)
	It works for putting the calendar in the sidebar, but I'm talking about the archive view in the main content area. Like, if I click Archive in the sidebar and it loads the archive/calendar in the main content area. That's what I'm trying to fix and failing. Thanks, though. (Reply to this) (Parent) (Thread)

	corrupt 2013-01-20 04:51 am UTC (link)
	Oh! I completely misunderstood. So sorry! (Reply to this) (Parent) (Thread)

	quillismightier 2013-01-20 02:30 pm UTC (link)
	That's ok. I wasn't very clear in explaining it either. I blame the meds I'm on right now. :) (Reply to this) (Parent)

	damosel 2013-01-22 04:20 am UTC (link)
	hm. try this? .lj-view-archive #beta-inner { -moz-border-radius: 25px; -webkit-border-radius: 25px; -moz-box-shadow:0 0 1em #555555; border: 4px solid #C7A37F; background: #f9f9f9; width: 600px !important; padding: 20px 15px; margin: 0px 0px 25px 0px; } (Reply to this)