Tranquility III / Gradiance

[kaigou]

Theme name/layout: Gradiance
Author: Kaigou
Layout info: Tranquility III*
Image info: 1 image (faux icon)** http://i385.photobucket.com/albums/oo292/solnull/other/openid-navy.jpg
Source: http://www.karinoyo.com/media/gradiance.css

[NOTE: if considering claiming, hold off for a bit: I'm prepping S2 code, so it's less of a major project for anyone to convert. At least, that's the plan.]

Style goals: low-contrast but colorful, with interaction/management links offset to the side (instead of at bottom), and icons replaced with text.

* I used TIII as base, but have the the layout's style sheet turned off, and using only the custom CSS. I can't recall; does that make this a theme or a layout? is new layout!

** currently only an icon for the navy version (what I'm using on my journal right now), but easy enough to do one for each gradiant-version.

The code is set up to have the colors set aside for easier cut/paste replace etc, but generally every version has eight colors. As long as the contrast between the 4th color and the 8th color is enough to make text legible, the gradiant range can go from darkest-dark to lightest-light, or from medium-dark to medium-light, depending on the amount of contrast required. I went ahead and set up 12 versions, and did two of them as reverse (light-on-dark), since all that's needed to reverse is to flip the order of the eight colors.

If you're on a page-read page (not page-reply!), and you click on "reply", the comment form is part of the entry content footer, which means you end up with this RESOLVED

"top of page" footer bar wants to leap up. It's inconsistent, though, so naturally it behaved when I tried to grab a screenshot. This could just be Firefox 2, though. I can't get it to do it in Firefox 3. now I can't get it to do it at all. hrmm.

last thing on the wishlist for the layout is to turn the four sidebar icons into text RESOLVED

min-width of 62em, which is temporary -- in Safari the sidebar isn't behaving fixed: set at 860px min-width, and now Safari behaves

In the meantime, if anyone's got super-CSS insights, much appreciated in advance.

Comments

Re: o/

[baggyeyes]

Thanks.

[kaigou]

As other folks on this thread point out fixes, I've been updating the CSS as needed -- so if what you get doesn't look like what my journal currently looks like, just go back to that link and you can get newest version.

[ninetydegrees]

Would you clarify, please? Is your journal displaying the newest version or, on the contrary, it may not be? I'm seeing issues on your journal but that may be old code.

[kaigou]

Sorry, did a bunch of work on it yesterday evening and didn't upload changes in CSS at EOD. Most recent version is in there now.

One bit of warning: my journal may have quote-unquote the most recent code but that doesn't mean it's necessarily the final code (or even the correct code). I tend to mess around with it a great deal, fiddling here and there and sometimes setting things at unusual values to see what kind of downstream effect it has on a style. That means I tend to run two sets of CSS at a time, one locally that has the correct values, and one on my actual journal that may be correct, or it may have some funky values. (Unexpected and jarring color contrasts such as fuschia and lime borders or backgrounds are sometimes a tip-off.)

However, not had a chance to sit down at the computer this morning so not sure where I left off, or if I left anything undone before calling it a night -- so not sure exactly the state it's in right this minute, but it seems to be (mostly) working on Ffx and Safari. Hrm.

[ninetydegrees]

Ok, thanks. The big issue for me on your journal is that entries are displayed in two different ways and, in both cases, unlike on your previews. The entry text box is supposed to overlap the one below it and the entry management links are supposed to be at the top right? I'm seeing the links below the entry text box so there's no overlapping at all. This is not true of entries with photos but their width is reduced as compared to other entries.

I'm using Firefox 3.5.3 and a 1440px wide resolution.

[kaigou]

I'm not sure whether to say yes or no! ... 'cause I'm not sure which parts, exactly, you mean by what. I know, I know, I just never really can remember which are entry management links, interaction links, all that jazz. (I just think "sidebar!" and leave it at that.)

So I put back up a test post. Just tell me the text that's in whatever area you're talking about, that'd be a lot easier for me, much appreciated. Feel free to add replies and whatnot if you want to see the moving parts. It's currently at the top: http://kaigou.dreamwidth.org/320334.html -- although the color scheme right now is severely monochrome, which means some of the differentiation is harder to tell (like on the shading for entry-author comments versus visitor comments).

I gots stuffs to do in the next few hours, but I'll be back fiddling with it again this afternoon. Btw, I use Ffx 2, mostly (and only really pull out Ffx 3 when testing is paramount and I don't have help), with Safari 4 as backup. Screen is 1920x1280, hrm, the usual widescreen iMac. (Great for everything except remembering what the world looks like to laptops, sigh.)

[ninetydegrees]

I think previews will show you better. The first and second ones are your recent page. The third one is your test entry.

http://img34.imageshack.us/img34/1/kaigou1.png

http://img9.imageshack.us/img9/9389/kaigou2.png

http://img10.imageshack.us/img10/2331/kaigou3.png

[kaigou]

Alright. It's because floats are treated differently in Ffx2 and Safari than in Ffx3 (and I bet IE) -- for whatever reason, Safari doesn't care either way; it'll show the side-box where it belongs. (As an aside, both Ffx3 and Safari will reduce the entry-content area to whatever content is in there, so if it's only a picture, then the box is suddenly only as wide as the picture requires. An equal but opposite headache to the way Safari won't let pictures overflow outside of a content area, and will instead push the sidebar down instead -- so the pictures are small because I gave them a maximum width as a work-around for Safari, to keep them from breaking the layout.)

Anyway, it's because the footer and its content follows the content area, and I'm trying to get them to reverse order, with footer ostensibly coming first (in a manner of speaking) rather than after. I mean, if I had the positions reversed, with content on left and footer-box on right, then no problem... which, unfortunately, I don't. Being one who reads left-to-right, summaries work better on outside than inside. Hrm.

Then again, it occurs to me that if I'm doing layout from scratch, instead of having to work within constraints of someone else's layout, couldn't I just set up the page's basic layout so what's in the footer comes before the content?

[ninetydegrees]

If you're coding from scratch then, yes, you can do whatever you want. :) I think the idea is to try to work with Core code as much as you can. If that's not possible well...

Sorry for the edit. Firefox was being stupid.

[afuna]

Yes, this.

In addition, some things like page elements order, or entry elements order are meant to be overriden. Just make sure that the entry wrapper is being printed, etc, and you're good to go :-)