dreamscapes

Theme name/layout: INDEXED / Tabula Rasa
Author:

syntheid
Layout info: "Spot Color" theme WIP preview.

CSS:

/*-------------------------------------------------
  Style: Tabula Rasa
  Title: INDEXED
  Theme: spot color
  Maker: Li ( binary @ janecraft.dreamwidth.org )
---------------------------------------------------*/

/* DEFAULT PAGE */
/* BODY HEADER FOOTER------------------------------------- */
body { 
	margin-top: 0;
	padding-top: 0;
	padding-left: 25em;
	font-family: arial, sans-serif;
	font-size: .7em;
	background: #000000;
}

#canvas {
	float: left;
	width: 80%;
	border: none;
	display: inline; /* So IE plays nice */
	padding-left: 10%;
}

#header, #footer {
	text-transform: lowercase;
	margin-left: -12em;
	margin-right: 7em;
	clear: both;
	padding: .5em;
}

#header {
	background-color: #666;
}

#header h1 {
	font-size: 8em;
	font-family: arial black;
	line-height: .2em;
}

#footer {
	text-align: right;
	background-color: #111 !important;
	margin-left: 0px !important;
}

#footer a, #footer a:visited, #footer a:active {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

#subtitle {
	font-family: arial;
	font-weight: normal;
	font-size: 1.2em;
	padding-left: 2em;
	margin-top: -2em;
	margin-bottom: 1em;
	margin-left: 24em;
}

#pagetitle {
	text-transform: uppercase;
	text-align: right;
	margin: 0 -.3em -.4em -.3em;
	padding: .2em .2em .4em .4em;
	background-color: #555;
	border-top: #444 1px solid;
	height: 1em;
	color: #598289;
}

.page-entry #pagetitle span {
	display: none;
}
/* end BODY HEADER FOOTER */

/* GENERIC------------------------------------------------  */
ul { 
	list-style: none;
	padding: 0 .5em;
}

ul li li {
	margin-left: .5em;
}

a {
	text-decoration: none;
	color: #fff;
}

a:hover {
	text-decoration: none;
	color: #95e2cf;
}

a:visited {
	text-decoration: none;
}

a:active {
	text-decoration: none;
	color: #ccc;
}
/* end GENERIC */

/* MAIN CONTENT COLUMN------------------------------------ */
#primary {
	float: left;
	width: 100%;
	margin-right: -100%;
}

#primary > .inner:first-child {
	margin-right: 7em;
	padding: 1em;
}

/* Entry Level */
#primary {
	background-color: none;
	color: #bbb;
}

#primary > .inner:first-child {
	background-color: #333;
}

#primary .entry-wrapper {
	margin-top: 1em;
	margin-left: -1em;
	margin-right: -8.1em;
	margin-bottom: 1.5em;
	padding-left: 1em;
	padding-right: .5em;
	border-right: #222 7.2em solid;
	background-color: #333;
}

#primary .entry {
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, arial, sans-serif;
	font-size: .9em;
	background-color: #444;
	margin: 0 1em 0 .5em;
	padding: .1em 1em;
	border: #303030 1px solid;
}

#primary .entry .contents img {
max-width: 100%;
}

#primary .entry-title {
	font-size: 2em;
	line-height: .6em;
	text-align: right;
	text-transform: uppercase;
	font-family: trebuchet ms;
	margin-bottom: 0;
}

#primary .entry-title a,
#primary .entry-title a:visited,
#primary .entry-title a:active,
#primary .entry-title a:hover {
	text-decoration: none;
}

#primary .datetime {
	font-size: 1em;
	color: #c8e686;
	text-transform: lowercase;
	font-style: italic;
	float: right;
}

#primary .entry-content {
	margin-top: 2em;
	margin-bottom: -2em;
}

#primary .entry-poster {
	font-style: italic;
	font-family: arial, sans-serif;
	font-size: .8em;
	text-transform: uppercase;
	float: left;
	padding: 0 1em;
	margin-top: -6em;
	margin-left: -1.5em;
	color: #666;
}

#primary .entry-poster a {
	text-decoration: none;
	color: #888;
}

#primary .entry-poster img {
	width: 1.5em;
	height: 1.5em;
	filter:alpha(opacity=50);
		-moz-opacity:0.5;
		-khtml-opacity: 0.5;
	opacity: 0.5;
}

#primary .access-filter {
	float: right;
	margin-top: -2.5em;
}

#primary .navigation {
	float: right;
	margin-right: -8em;
	margin-top: -2.5em;
	font-weight: bold;
	text-transform: uppercase;
}

#primary .navigation a,
#primary .navigation a:visited,
#primary .navigation a:hover,
#primary .navigation a:active {
	text-decoration: none;
}

#primary .page-separator {
	display: none;
}

#primary .page-back {
	margin-bottom: -3.2em;
}

#primary .entry .userpic img {
	width: 6em;
	height: 6em;
	margin-top: -4em;
	margin-right: -9.7em;
	float: right;
	border: none;
}

#primary .metadata {
	margin-top: 3em;
	margin-bottom: -3em;
}

#primary .metadata-label {
	font-weight: bold;
	font-family: tahoma;
	text-transform: lowercase;
	font-size: .9em;
	padding-left: 1.5em;
	margin: 0;
	background-image: url( http://i161.photobucket.com/albums/t208/sodalicium/0150_bullet.png );
	background-repeat: no-repeat;
}

#primary .metadata-item {
	text-transform: uppercase;
	font-size: .9em;
}

#primary .metadata-item a,
#primary .metadata-item a:visited,
#primary .metadata-item a:active,
#primary .metadata-item a:hover {
	text-decoration: none;
}

#primary .metadata img {
	float: left;
	display: none;
}

#primary .footer {
	text-align: right;
	padding-top: 3em;
}

#primary .comment-management-links ul,
#primary .entry-management-links ul,
#primary .tag ul,
#primary .entry-interaction-links ul,
#primary .comment-interaction-links ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

#primary .comment-management-links li,
#primary .entry-management-links li,
#primary .tag li,
#primary .entry-interaction-links li,
#primary .comment-interaction-links li {
	display: inline;
}

#primary .tag-text {
	display: none;
}

#primary .tag a {
	text-decoration: none;
}

#primary .entry-interaction-links a {
	background: #333;
	border: #333 5px solid;
	line-height: 2em;
	text-transform: uppercase;
	font-weight: bold;
	font-family: arial;
	font-size: 1.1em;
	text-decoration: none;
}

#primary .entry-interaction-links a:hover {
	text-decoration: none;
	color: #fff;
	background-color: #000;
	border: #000 5px solid;
}

#primary .comment-interaction-links a {
	background: #333;
	border: #333 5px solid;
	line-height: 2em;
	text-transform: uppercase;
	font-weight: bold;
	font-family: arial;
	font-size: 1em;
	text-decoration: none;
}

#primary .comment-interaction-links a:hover {
	text-decoration: none;
	color: #fff;
	background-color: #000;
	border: #000 5px solid;
}

#primary .above-entry-interaction-links,
#primary .below-reply-container {
	display: none;
}

#primary .comment-wrapper {
	background-color: #444;
	margin-left: .5em;
	padding: 1em;
	border: 1px #303030 solid;
}

#primary .comment-wrapper .userpic img {
	margin: 0 1em 1em 0;
	float: left;
	background: #333;
	padding: 1em;
	border: 0;
}

#primary .comment-poster {
	font-style: italic;
	font-family: arial, sans-serif;
	font-size: .8em;
	text-transform: uppercase;
	color: #666;
}

#primary .comment-poster a {
	text-decoration: none;
	color: #888;
}

#primary .comment-poster img {
	width: 1.5em;
	height: 1.5em;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

#primary .poster-ip {
	font-style: italic;
	text-transform: lowercase;
	font-family: 'Lucida Sans Unicode', Helvetica, arial, sans-serif;
	font-size: .7em;
}

#primary .comment-content {
	margin-top: 1em;
	font-family: 'Lucida Sans Unicode', Helvetica, arial, sans-serif;
}
/*end MAIN CONTENT COLUMN*/

/* FIRST SIDEBAR------------------------------------------ */
#secondary {
	float: left;
	width: 13em;
	margin-left: -25em;
	margin-top: -10em;
}

#secondary {
	background-color: none;
	color: #bbb;
}

#secondary > .inner:first-child {
	font-family: verdana, arial, sans-serif;
	font-size: .8em;
}

#secondary .module-section-one .userpic img {
	margin: 1em 0 0 1em;
	border: solid #000000 10px;
}

#secondary h2 {
	text-transform: uppercase;
	font-family: arial, sans-serif;
	font-size: 1.2em;
	background: #222;
	padding: .2em 0 .2em 1em;
	color: #808959;
}

#secondary .module-wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
}

#secondary .module-content {
	background-color: #222;
	padding: 0.4em;
}

/* Profile Module */

#secondary .module-section-one .journal-name, #secondary .module-section-one .journal-website-name {
	display: none;
}

#secondary .module-userprofile .userlite-interaction-links {
	margin: 1em 11.5%;
}

#secondary .module-userprofile li { 
	display: inline;
	padding: 0; 
}

/* Calendar Module */

#secondary .module-calendar .module-content {
	font-family: arial, sans-serif;
	padding: 1em;
}

#secondary .module-calendar .module-content table {
	text-align: center;
	margin: auto;
}

#secondary .module-calendar .module-content .entry-day {
	background: #777;
	border: #666 1px solid;
	color: #000;
}

#secondary .module-calendar .module-content .entry-day a {
	color: #000;
}

#secondary .module-calendar .module-content .empty-day {
	background: #555;
	border: #444 1px solid;
	color: #000;
}
/* end FIRST SIDEBAR*/

/* SECOND SIDEBAR */
#tertiary {
	float: left;
	width: 12.5em;
	margin-left: -12em;
}

#tertiary {
	background-color: #333;
	color: #bbb;
}

#tertiary > .inner:first-child {
	font-family: verdana, arial, sans-serif;
	font-size: .8em;
}

/* Top Navigation Links */

#tertiary .module-navlinks {
	font-family: arial, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	text-transform: uppercase;
	margin-top: -3.8em;
	margin-bottom: 2.8em;
	margin-left: -1em;
	width: 40em;
}

#tertiary .module-navlinks li {
	display: inline;
}

#tertiary .bottomnav {
	padding-top: 1em;
	margin-bottom: -1em;
}

#tertiary > .inner:first-child {
	padding: 1em 0 2em 1.5em;
}

#tertiary .module-tags_multilevel h2 {
	display: none;
}

#tertiary .module-tags_multilevel .module-list-item {
	background-color: #444;
	margin: .3em 0;
	padding: .5em;
	border: #303030 1px solid;
}

#tertiary .module-tags_multilevel a {
	text-decoration: none;
}
/* end SECOND SIDEBAR */
/* end DEFAULT PAGE */

/* ARCHIVE PAGE */
.page-archive #primary .navigation {
	float: left;
}

.page-archive #primary .navigation li {
	display: inline;
}

.page-archive #primary .month .inner .header {
	font-family: helvetica, sans-serif;
	font-size: 2em;
	letter-spacing: -.1em;
	height: 1.7em;
	text-transform: lowercase;
	text-align: right;
}

.page-archive #primary .contents .inner caption {
	display: none;
}

.page-archive #primary .month table {
	width: 100%;
}

.page-archive #primary .month th {
	font-family: tahoma, sans-serif;
	font-size: 1em;
	padding: 1em;
}

.page-archive #primary .month tr{
	border: 1px solid #000;
}

.page-archive #primary .month td.day {
	text-align: center;
	padding: .3em;
	line-height: 3.5em;
	background-color: #222;
	margin-bottom: 10px;
}

.page-archive #primary .month td.day-has-entries {
	padding: .3em;
	line-height: .55em;
	background: #444;
}

/* end ARCHIVE PAGE */

/* DAY PAGE */
.page-day #primary .navigation {
	float: right;
	margin-right: -9em;
	margin-top: -2.5em;
	font-weight:bold;
	text-transform: uppercase;
}

.page-day .day-date {
	display: none;
}
/* end DAY PAGE */

/*-----------------CONTEXTUAL POP-UP-----------------*/
div.ContextualPopup {
	position: relative;
	margin: 10px 0 0 30px;
	text-align: left;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, arial, sans-serif !important;
	font-size: .8em !important;
}

div.ContextualPopup div.Inner {
	color: #888888 !important;
	border: 0px solid #111;
	background-color: transparent !important;
	padding: 0px;
	width: 30em;
}

div.ContextualPopup .Userpic {
	padding: 1em;
	margin-left: 0px;
	background-color: #000;
}

div.ContextualPopup .Content {
	padding: 1em;
	background-color: #111;
	margin: 1em 7.6em 1em 1em;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
	text-decoration: none !important;
	font-weight: bold;
	color: #555555 !important;
}

div.ContextualPopup .Relation {
	text-transform: lowercase;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, arial, sans-serif;
	font-size: 1.2em;
	letter-spacing: 0px;
}

Image info: Layout currently only uses small bullets that I made, everything else is just CSS.

I'd like suggestions on things to do with the navlinks? I'm not real happy with how they are now, since I have them at fixed width and at small resolutions (namely, 800x600), they'll overlap with the pagetitle text (Recent Entries/Reading/etc. on the right), and for navigation reasons I like keeping the pagetitle visible. Or does this seem like not a problem? Someone also suggested putting separators in between the menu items, but that would make the text even longer.

Also anything else you can think of in particular that might be a problem? Like if there are obvious ways to eliminate the bits of non-fluid code I still have. Still working on eliminating duplicate/messy code in the CSS, but hopefully this is a bit more readable than my first draft.

Theme name/layout: Refried Classic / Refried Tablet
Author:

zvi
Layout info: Layout, Theme, and Live.
Image info: No images

The info links go to my dreamhack. If you want to test it on your own journal, the layout # on Dreamwidth is 78331. The theme # is 78333.

This got tested when it was CSS, but this is my first conversion, and I'm just not sure it works as expected. If you could take a look at it and tell me if it worked okay, I'd really appreciate it. (If something doesn't work, it's very helpful to get your browser and version number.)

This should work for all column configurations except "none", which returns a giant mess. If you have any ideas about how to get something legible from none, I'd love to hear it.

Official Style Submissions

Sep. 22nd, 2009

Sep. 22nd, 2009

Tabula Rasa: Indexed

Refried Tablet -- Converted!

Submission

Profile

Links

Resources

March 2019

Tags

Page Summary

Active Entries

Style Credit

Expand Cut Tags