dreamscapes

Theme name/layout: "spot color" / INDEXED
Author:

syntheid)
Layout info: Source / Preview
Image info: Three images, created by me for this layout.
Additional info (for layouts): It's a three-column layout with (currently) no options for two- or one-column versions, though all the modules should be able to be moved around from either sidebar. Looks better if you have the "tertiary" sidebar longer than the "secondary" sidebar, though.

Version two of my previous attempt that I'm (finally-- I'm so slow) ready to look into converting. Would anyone be able to help walk me through that? I keep getting kind of confused by the process, but I'd like to know how to do it myself, if possible, so I can do it in the future.

Hopefully I'm submitting this correctly.

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.

Official Style Submissions

Entries tagged with ~indexed

Indexed II

Tabula Rasa: Indexed

Profile

Links

Resources

March 2019

Tags

Page Summary

Active Entries

Style Credit

Expand Cut Tags

Syndicate