Refried Tablet

[zvi]

Okay, so I made it my personal mission to make a theme for Tabula Rasa that looks like Refried Paper. Can you let me know if there's any essential Refried Paper element you think I'm missing, or anything I added that seems against the spirit of Refried Paper?

(I know that all of the metadata is above the entry in Refried Paper. I cannot wrap my head around CSS positioning to get that to work on a Tabula Rasa based theme. Any advice would be welcome.)

Theme name/layout: Refried Tablet / Tabula Rasa
Author: zvi
Layout info:

/* Refried Tablet, a css port of Refried Paper, implemented by zvi of zvilikestv.net */

/* WHOLE PAGE */

A { color: #CC6633; text-decoration: none; }
A:visited { color: #CCB333; }
A:active { color: #FF9966; text-decoration: underline; }
A:hover { color: #FF9966; text-decoration: underline;}


body {
margin: 0; padding: 0; background: #ffffff none;
color: #666666;
font-family: "NimbusRoman No9 L", Rekha, Georgia, serif; }

p,td,tr,table,hr,br,ul,ol,li {font-size:1em; line-height:1.5em; text-align:justify; }

h1, h2, h3, h4, h5, h6 {font-family: Loma, Verdana, Geneva, sans-serif; }

/* PAGE HEADER */

#canvas {border-top: #666666 20px solid; }
h1#title, h2#subtitle { font-weight:900;
letter-spacing:.1em; font-variant: small-caps;
background-color: #CCCC99;color: #666666;
margin: 0em auto; padding-bottom: 0em;
}
h1#title { font-size: 2em; }
h1#title:after {content: ": "; }
h2#subtitle { margin-top: -1em; font-size: 1.5em; }

#header {border-top: white 2px solid; background-color: #CCCC99; border-bottom: black 1px solid; }


h2#pagetitle {color: #999966; background-color: #CCCC99; clear: both; font-size: 1.25em; font-weight:bold;text-transform:uppercase; letter-spacing:.2em; line-height: padding-right: 5em; padding-top: 0em;}
h2#pagetitle:after { content: " PAGE"; }
.page-archive h2#pagetitle:after { content: " ARCHIVE PAGE"; }

/* ENTRIES */

/* Make the headers a different color than the rest of the text. */
.tag, .metadata, .entry .inner .header, .entry .inner .poster, .entry .inner .userpic { color: #336699; font-size: 1em; line-height:1.4em; }

/* Add identifiers to the header content, pt 1 */

h3.entry-title:before {content: "Subject: ";}
h3.entry-title {color: #336699; font-size: 1em; line-height:1.4em; margin-bottom: 0em; padding-bottom: 0em; font-family: "NimbusRoman No9 L", Rekha, Georgia, serif; }

.restrictions-18 .entry-title:after { display: block; content: "Rating: Restricted to adults 18 and older."; color: #c33; background-color: white; }
.restrictions-NSFW .entry-title:after { display: block; content: "Rating: Discretion advised. Not safe for work."; }
span.restrictions { display: none; }

.entry .inner .header .datetime:before {content: "Date: ";}

/* replace icons for restriction/security with text */
.security-public .entry .inner .header:after { content: "Security: Public"; display: block; clear: left; }
.security-private .entry .inner .header:after { content: "Security: Private"; display: block; clear: left; }
.security-protected .entry .inner .header:after { content: "Security: Access Only"; display: block; clear: left; }
.security-custom .entry .inner .header:after { content: "Security: Access Filter"; display: block; clear: left; }
.access-filter { display: none; }

/* Add identifiers to the header content, pt 2 */

.entry .inner .userpic:before { content: "Poster: "; vertical-align: text-top; }
.entry .inner .userpic img { vertical-align: text-bottom; }
.entry .inner .userpic {margin-bottom: 1em;}


/* make metadata and tags more header-ish */
.metadata {padding: 0em; margin: 0em; margin-top: 1em; margin-bottom: -1em;}
.metadata ul { margin: 0em; padding: 0em; }
.metadata li {line-height: 1.4em; margin: 0em auto;}
.tags {margin-bottom: 0em; }
div.inner > ul {margin-top: 0em; }

/* put the icons on the same line as the text entry management stuff */
.entry-management-links {float: right; display: inline; }

/* Put a line under all the entries, add space between entries */

.entry-wrapper { border-bottom: 1px black solid; padding-bottom: 1em; margin-bottom: 1.5em; }

/* attempts to make the poster's username/accountname visible. Not successful yet */

.entry .inner .poster {visibility: visible; }
.poster, .entryposter {visibility: visible; }

/* Make text entry management links left-align and pretty */

.entry .inner {margin-bottom: 1em; }
ul.entry-interaction-links { text-align: left;}
ul.entry-interaction-links li { font-family: Loma, Verdana, Geneva, sans-serif; font-size: 0.8em; color: #336699; line-height:1.4em; text-transform: uppercase;}

/* SIDEBARS AND MODULES */

/* make headers pretty */
div h2.module-header { border: 1px black solid; border-bottom-width: 2px; padding: 0em 1em; margin-bottom: 1em; margin: 0em;
color: #333333; background-color: #CCCCCC;
font-size: 1.25em; font-weight:bold; letter-spacing: .1em; text-transform: lowercase; }

/* get rid of padding so that the header borders go all the way to the sides, add border around the columns */
#secondary {padding: 0em; border: thin black solid; }
#secondary .inner:first-child {padding: 0em; }
/* add padding to module content because whitespace is good! */
.module-content { margin: auto 1em; }
/* make lists prettier */
.module-content li { text-align: left; list-style-type: none;}
/* special case for the syndicate tags, too close to top */
.module-syndicate .module-content {margin-top: .5em; }

/* FOOTER */
/* make footer a contrast color bar */
#footer { background-color: #999999 }
#footer a { font-weight: bold; display: block; color: #CCB333;}

/* don't make tertiary modules in two column into 15px boxes, the data doesn't fit! */
.two-columns-left #tertiary .module, .two-columns-right #tertiary .module { float:none; width:auto; }

/* ENTRIES */
/* add line between comments */
.comment-wrapper { border-bottom: thin black inset; }
/* make comment headers headerish */
.comment .inner .header, .comment .inner .contents .poster, .comment .inner .contents .poster-ip { color: #336699; line-height:1.4em; font-weight: bold; }

/* visually distinguish screened/frozen comments */
.screened { font-family: "Nimbus Mono L", "Courier New", monospace; font-size: .9em; font-weight: 300; background-color: #ecf7ff; }
.frozen { font-family: "Nimbus Mono L", "Courier New", monospace; font-size: .9em; font-weight: 300; background-color: #F5F5F5; }

Image info: No images

P.S. I have it live on my journal, if you're interested in checking it out.

P.P.S. I am using the Tabula Rasa stylesheet. Can someone let me know if that has to be changed pre-conversion?

Comments

[zvi]

Ooh, thanks for pointing out the sidebar thing. It's just ... not the sort of visual detail I see. Also, the bolding consistency.

I just plum forgot with the Entry Management links. :/

The userpics are a positioning nightmare, but I have given it my best shot. I have it fixed for entries, but trying the same thing on comments looked awful. Do you have any suggestions?

You can see how the CSS plays out on my journal, and you can read the updated CSS on pastebin.

Thanks for the feedback.

P.S. I went ahead and changed all of the link action colors, and that link color in the footer. The yellow was very hard to see on a white background.

[ninetydegrees]

Note that you still have a double border at the top of the sidebar if you set a border all around #secondary. Just saying.

The problem you have with comments is that you can't predict which data you gonna have: date, sure, poster, sure but subject, IP address, subject icon? Maybe. I can make it work using your code:

#comments .inner {
position: relative !important;
}

#comments .header {
position: relative !important;
left: 105px !important;
}

#comments .poster {
display: block !important;
position: relative !important;
left: 105px !important;
margin-bottom: 5em !important;
}

#comments .userpic {
float: left !important;
position: absolute !important;
top: -1.5em !important;
}

and I can also make it work using:

#comments .header {
padding-left: 105px !important;
}

#comments .userpic {
float: left !important;
margin: -2em 5px 5px 0 !important;
}

#comments .comment-content {
clear: both;
}

but this is not pretty in all circumstances and I have no idea what it looks like when all data is printed and I've only tested it in Firefox.