Style: Trifecta/Tabula Rasa

[ninetydegrees]

Edit: these are now live and can be selected from Customize Style. Original layers and pics are no longer available.


Style: Trifecta
Author: ninetydegrees
Images info: all images used come from Subtle Patterns (Creative Commons Attribution-ShareAlike 3.0 Unported License)

Themes:
Carried Away / Preview (three columns right)
Coffee and Cream / Preview (two columns right)
Deep Seas / Preview (one column)
Handle with Care / Preview (three columns left)
Morning Walk / Preview (two columns left)
Mythical Beast / Preview (three columns sides)
Peaceful Life / Preview (one column split)

This is a simpler version of another style I'm working on. I wanted to make something which was just based on layout and colors and remained flexible so you could do whatever you want with it.
Testing would be appreciated as always. Dear fellow designers in particular: if you feel like making a theme for this I would love it if you could tell me what was unexpected or didn't work.

Comments

[foxfirefey]

Hrm, this layout doesn't really work unless I have my browser at full screen width--and even then only barely, there's no padding between the search box and the edge of the column at all. I don't even have that small of a screen compared to a lot of folks with smaller laptops--1680 pixels wide.

With my default browser width (maybe 83% of the screen?), http://foxfirefey.dreamwidth.org/?s2id=91044 for instance gives more space to the side bars than to the actual content, the text ending up squished to a space less than two inches.

[ninetydegrees]

Will fix the header module! Thanks for telling me.

Hmm. I made the sidebar smaller -didn't mean to leave them that wide- but it displays fine for me at 1280px with a 17px font size (the content column is as large as the two sidebars) so do you have a screencap for me please?

Edit: also how does it compare for you with say paletteable in the same configuration?

Edit2: search should display better. One more question: do you have the same issues with the other setups (default is two columns right actually)? I've edited the entry to mention which theme shows what.

[foxfirefey]

Huh! Whatever was wrong was fixed now? I'm not sure what was wrong before! It was only three column versions that were very sad, the others were fine.

[ninetydegrees]

I think it was the sidebars being so wide. They're standard sized now. Also padding was a little bigger. Anyway, thanks a lot for telling me! I'm glad it works now.

[marahmarie]

It's strange but when I first clicked through I got some brightly colored style on your DW, not the linked-to style at all. A second clickthrough fixed it but when I ignored the tab and came back it reverted on its own to the brightly colored style I first saw! A refresh gave me the linked-to style again (Handle With Care? That's the one I got).

The brightly colored style is quite fab but not one of the styles 90 was previewing at all - it's too bad I didn't view CSS to see which style it is/was, because I kind of want it.

[worlds_of_smoke]

Oooooh. I like!

[ninetydegrees]

Glad you do! Thanks!

[momijizukamori]

I looooove the use of patterning on these - it's a nice, nuanced effect. I feel almost like you've captured what I was trying to go for with Marginless here. 'Carried Away' in particular - the use of the drop-shadow edging and colors makes it look like layered paper and it's GORGEOUS. I can forsee myself doing a bunch of similar ones (possibly in the tonal spread I have for some of the other layouts.

Only nitpick - Cambria seems to display poorly in Linux, particularly in Firefox (from left to right there - Firefox, Chromium, and Opera).

[ninetydegrees]

Fair warning: I'm gonna ramble. I'm sorry about that.

So glad you like them! I was very much inspired by Corinthian, Paletteable and Marginless. I was actually a bit worried it would look too much like Corinthian at some point but I think it's different enough. Or at least you can make it look different enough. I can't wait to see what you come up with (and also get some feedback about how theming goes because there are so many custom props and CSS I got a little lost there).
Carried Away: yeah I really didn't want to add drop shadows and have that layered paper effect because that's what I always do but I found that wavy pattern and shadows kinda made it look like waves on the shore and I just couldn't resist XD. I almost went with a depressed effect in Handle with Care but it didn't look as nice.

I'll change that. Thanks. I kinda picked the first font I found in Photoshop and forgot about it.

[momijizukamori]

Yeah, I think it and Corinthian are sort of in the same category, style-wise, but the typography changes give it enough of a different feel - this is almost somewhere in between Marginless and Corinthian, I think. It could run the risk of looking too 'plain' but I think the color choices you made for the themes mesh well with the simplicity of the design, so it ends up minimalist instead of plain.

And I think even Carried Away looks different enough from a lot of your usual designs - you do great, very stylized and design-heavy work (like Fantasie or Database) - and yeah, some of your stuff uses shadows a lot, but I think here they add just that little touch of modern style to bring things together nicely without looking really stylized.

[ninetydegrees]

Looking at our styles I think we basically have three families: boxes, field block with some kinds of delimitations like Five AM, Wide Open or Bannering and then screen-wide or screen-long blocks of colors like Corinthian, Crossroads, Paper Me,... And then you're just adding more of less of these, mixing it a little, playing with opacity, borders, round corners, etc. Take that all away and it's really down to three different types. Well that's how I see it because that's how I create a template. I wonder if there's one type we're missing though. :)

Thank you so much for all your kind words. Your comments really made me want to explore this more and see what other themes I can come up with. This is ironic because the only stylized design I've ever used is the one I currently have on my journal. Otherwise I always tend to go for minimalistic designs. Just clean, pure lines if that makes sense.

[marahmarie]

Handle With Care is all kinds of awesome. Just curious as to why you have meta labels hidden on tags/mood/music/location along with labels hidden on top-of-page and previous & next links...was it for effect or just by accident?

(I'm seriously looking to break out of my little narrow-width box on my own DW someday but I'm picky as heck - and I don't like writing my own style sheets because I can't/don't know how to use PS. HWC makes me think it's a design that could work with how I like to arrange things...I'm even thinking of using a little CSS3 and some HMTL5 in the s2 to make the sidebars fold and unfold on hover? It looks like a style I could play with almost endlessly.)

[ninetydegrees]

Glad you think so! Yeah it was effect. Well to be more accurate I hoped to minimize the clunky aspect that 3 columns can give to a style so I opted for styling some of the data differently and removing the labels. I know it can be more confusing, though, so I simply blanked the text. You can have it back pretty easily.
Oh happy coincidence: the folding sidebar is something I wanna do for the style which inspired this one. I'm looking forward to seeing how you do it. :)

[marahmarie]

Oh happy coincidence: the folding sidebar is something I wanna do for the style which inspired this one. I'm looking forward to seeing how you do it. :)

I know, I am, too! I've never done anything like it before but that design is just begging me to try. I'll need to locate the right HTML5 for it, then probably hit style_system to have someone help me insert it the s2 way, unless there's another way to just copy over all the DW HTML required (which might already be in my s2, come to think of it - haven't looked at my custom layer in months so I really can't recall) and just stick it in the right spot from there.

On the blanking text part, it is a nice effect, but on mood/location meta in particular produces a weird effect of showing the text so that it looks like a single word or at best fragmentary sentence at the end of (or below) a post. That's what caught my eye when I viewed it in my own style - I had a multi-word location description that wound up looking like a sentence fragment in italics at the end of a post. To people not familar with our mood/location/music meta setup I think, if it could confuse me like it did, it could confuse anyone not familiar with it.

There's also the problem of the dash between the mood/location/music label and the descriptor still showing even with (haven't viewed your CSS yet so this is only what I assume you're doing, so far) display set to "none". How I usually get around this (which I think we discussed just last month in style_system while trying to help another user) is to color the text the same as the background color of the page - if possible - then recolor any text that still shows as needed, using the !important declaration if/when necessary.

Other than that, though, honestly loving that style sheet (and all its possibilities!) to death. Good job. :)

[ninetydegrees]

There's also the problem of the dash between the mood/location/music label and the descriptor still showing even with (haven't viewed your CSS yet so this is only what I assume you're doing, so far) display set to "none"

Sorry I'm not sure what dash you're referring to. I simply blanked the text via S2 properties, not via CSS. Anybody who wants the labels back can go to customize and type whatever they want.

[marahmarie]

Sorry I'm not sure what dash you're referring to.

This one.

Sorry if I offended you somehow.

[ninetydegrees]

Oh no! Not at all! Sorry if I seemed offended. This is the dash for tags so I was confused because I was looking for it in the section above it. Do you mean it's still displayed where there's no tags? I don't think so but I can't remember.

[marahmarie]

OK, yep, I screwed up. Sorry. Don't know why I mentioned the meta, I meant it's displayed where the tags are, right before where the tags themselves print out. That was just...my brain must've shut off at just that second as far as that dash location goes.