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

[kaigou]

The dark background is actually #body (no colors applied to #entry or #primary). Where the box ends is where .entry, overall, ends -- the float just makes .entry-content look a little bizarre for overlapping/overflowing. Basically, if it's page-read, then the reply box is inside .entry, and if it's page-reply, the reply box is outside .entry as its own set of divs. Uhm. Now I'm not sure if that answered your question.

It's one of those days, looks like.

[branchandroot]

*pets you* I hear you. I actually meant the medium-colored box (darker than the entry content bg, but lighter than the page bg). So, yeah. If the QR anchor/trigger can just be moved, in the code, outside of .entry then it can be cleared to appear nicely below the entry text without pulling the medium-colored box down with it. It can't really be done with css alone, I don't think, but hopefully Afuna knows of someone who can fish in the code and swap that around for your layout.

[afuna]

Putting here so you both can see:


function Page::print_entry(Entry e)
"The meat of each new layout. Describes how each page will look. In nearly all cases, the logic and decision-making processes should come from pre-existing functions in core2, and should not get written here. If you limit the structure of the page to HTML, function calls, and attached CSS, then you will be able to pick up all of the enhancements and accessibility requirements managed by core2."

{

    $e->print_wrapper_start();
    """<div class="header">\n""";
    $e->print_subject();
    $e->print_metatypes();
    $e->print_time();
    """</div>\n""";
    """<div>\n""";
    """<div class="contents">\n""";
    """<div class="inner">\n""";
    $e->print_userpic();
    $e->print_poster();
    $e->print_text();
    $e->print_metadata();
    """</div>\n""";
    """</div>\n""";
    """</div>\n""";
    """<div class="footer">\n""";
    """<div class="inner">\n""";
    $e->print_tags();
    $e->print_management_links();
    if ($this isa EntryPage) {
        """<hr class="above-entry-interaction-links" />""";
        $e->print_interaction_links("topcomment");
    }
    else {
        $e->print_interaction_links();
    }
    "</div>\n</div>\n";


    $e->print_wrapper_end();
    $this->print_reply_container({ "target" => "topcomment" });
}

That function prints out the entry div and everything in it. If you want the QR within the entry div still, just not hiding in the sidebar, then reverse the order of

$e->print_wrapper_end();
$this->print_reply_container({ "target" => "topcomment" });


You just need to copy and paste that into one of your layers. Hmm, if you copy and paste a function into a user layer, it gets wiped out next time you save in the wizard, so let me just walk you through setting up another layer, where you can put code that will be in no danger of being wiped out.

1.) Go to http://www.dreamwidth.org/customize/advanced/layers. Create a new layout-specific layer. Type: Theme, Layout: Tranquility III.
2.) Look at the list of layers; note the number for the theme layer that's under Tranquility III
3.) Go to http://www.dreamwidth.org/customize/advanced/styles. Look for a style that's named something like wizard-tranquilityiii/(something). It's the one you're currently using so it will be in bold.
4.) Edit the style. Change theme to the number you noted above and save your changes.

That above creates a new theme layer where you can put code (which won't be modified or wiped out by the wizard), and sets up your style to use this layer.

Now just head back to http://www.dreamwidth.org/customize/advanced/layers, edit that theme, and paste in the code snippet I gave you. You can copy the set icons to text thing into the theme layer, too, and that won't be wiped out, too :-)

Once you hit compile, the changes will be reflected on your journal.

[afuna]

Hmm I'm not seeing... oh! In my browser, the sidebar links are being forced below the entry. Meant to mention that, but forgot.

The original code I gave, where print_wrapper_end comes before print_reply_container should mean that print_reply_container is outside the entry entirely. Is this somewhere else? *peeks*

[kaigou]

wait a minute, had you already flipped the order? I think I might've flipped it back, thinking you hadn't flipped them and were telling me to. hmmm. ahHAH, okay, disregard! that did it.

[afuna]

Heeeheeehee yay!

[kaigou]

alrighty, now I'm stumped with a hardcoded table format: table style="border: 1px solid black;" and it's overriding everything I put in. Is there a way to turn that off, somewhere, in the S2?, because CSS isn't doing the trick.

[afuna]

Which page is that one?

[kaigou]

shows up on page-entry; the page-reply page uses a class of 'talkform' for the table.

[afuna]

Hmm. Try this: #qrform table { border: none !important;}

[kaigou]

ehehe, I think that one we can say "screw it," and I'll just re-arrange the color orders so the external border on the table is always a dark shade -- at least then the black won't be quite so noticeable in contrast -- because the !important is causing other stuff to get overridden, and it's easier to change the colors on one thing than to add even more code so six other things don't get whacked just from trying to redo the color on one thing.

which still leaves open the question of style is hard-coded in there at all, but I guess that's also above my grade.

regardless, if I could just get Safari to behave, life would be grand!

[afuna]

Kk. It works for me in Firefox, but I guess Safari just doesn't like it :-(

It's probably hardcoded, so that people don't have to code it into each layout. It would be nice if it were a class though, and we did the CSS not-inline. Hmmm....