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

[alittlebirdy]

I haven't tested it yet, aside from looking at it on your journal. And I'm not sure if this is the kind of feedback you are after, but... the title and the subject of the journal seem to be overlapping a bit. Also, the titles in the sidebar seem bigger than in the LJ version of refried paper.

Just as a comparison (with content of posts removed):

your dw: http://img5.imageshack.us/img5/825/72391962.gif
refried paper on my LJ: http://img16.imageshack.us/img16/2045/79178289.gif

I'm using firefox 3.5, vista, 12280x760 resolution.

Aside from that it looks great! I love refried paper, so you get a big thumbs up from me!

[ninetydegrees]

Great idea. It's one of my favorite LJ layouts.

In addition to what alittlebirdy said:
- In entries, I think "Date", "Security" and "Tags" should be bold too.
- I think you could add a little bottom padding in module headings. The bottom of letters with descenders touches the bottom border.
- Entry management links are not separated by a | like in the original layout. Is it on purpose?
- The entry userpics are not positioned the same. Again, is it on purpose?
- The sidebar borders look strange. I guess you had double borders issues. I think it's fixable using something like:

div h2.module-header {
border-bottom: 1px black solid !important;
border-top: 1px black solid !important;
}

#secondary .module:first-child h2 {
border-top: 0px black solid !important;
}

.one-column #secondary .module:first-child h2 {
border-top: 1px black solid !important;
}

#secondary {
border-bottom: 1px black solid !important;
border-left: 1px black solid !important;
border-right: 1px black solid !important;
}

but I haven't tested it in various configurations/browsers.

ETA: in the footer, the yellow link color on the gray background is a bit hard to read for me.

[baggyeyes]

I tried this but my sidebars are all screwed up. (My fault - I changed the em in the wizard.)

[zvi]

Which sidebar configuration did you use?

What was screwed up about it? What did you expect to see and what did you actually see?

[baggyeyes]

my sidebars were underneath everything. I tried the Two column left, two column right; but my sidebars were likely screwed up by me, when I changed the width through the wizard - can't even remember why I did that - just poking around I guess.

I have it set at 15em and 20em - (the display options portion of the Customization tab.)

I expected it to be exactly where it should have been - at the side, the way it was on your page, and on the RP original.

[zvi]

I couldn't replicate that, using two column or three column layouts. What browser are you using?

[zvi]

I think I fixed it, for most browsers. I had -1'd the margin between the subtitle because I didn't like the space I got on my monitor, but two of you reported problems, so.

I have one problem I'm trying to get some help with on style_system, before I'm ready to ask for real testing. Thanks for the feedback.

[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.

[baggyeyes]

Flock 2.5, (Based on Firefox 30.11) on Mac Leopard 1.0.56

[baggyeyes]

Aha! Now it works - I saw your entry in style_system that explained it works with the existing style sheet. I'm so used to people turning it off. It's all good.

[afuna]

Quick admin note:

I'm trying to edit tags to add ":not done" (so it's easy to pick out which layouts still need to be committed), but I've run into a bug where entries with a </form in them error out in edittags. Could you edit your entry and add ":not done" to the list of tags? Thanks :)

Also, re: using the Tabula Rasa stylesheet

It's perfectly all right to be using the Tabula Rasa stylesheet! In fact, if it's an overlay over the existing stylesheet, that makes things much much easier for us in many respects.

[zvi]

edited to include that tag.

[afuna]

Thanks!

[zvi]

ETA: Whoops, I thought this was the entry for my b/w color themes.