dreamscapes | Tranquility III / Gradiance

Entry tags:

Tranquility III / Gradiance

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.

Flat | Top-Level Comments Only

* 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?

I don't have any answers for the rest yet, but this is a new layout! Themes pretty much only change the colours/background images, or slightly tweak CSS. Entirely custom CSS is a new layout. :)

Looks cool, by the way!

thanks! ...and oh, look, Safari is not behaving again. (And here I'd always though it was IE that was the problem child, but apparently now the problem child has a sibling.)

I don't think I'm capable of only mildly tweaking things. As evidenced by my kitchen. heh.

oh, gosh, those are pretty!

Thanks! I prefer colors to be much subtler in gradient, though I'm thinking I should probably do four versions of each color: low-contrast, high-contrast, and reversed for each. And this time, not making Afuna wait on a left-sidebar version, either. And I personally prefer icons on the left, not the right... hrm.

On the other hand, so many variations might increase significantly the chances are that Afuna will throttle me if we ever meet in person. Hrm. Maybe I should rethink this while there's still time...

I solemnly swear that I will never throttle anyone for submitting too many themes -- or too many layouts, for that matter :-)

right, you'll just strangle our voodoo dolls instead. >.>

I prefer to feed 'em chocolate :-)

Fu likes variations :)

Oh, way cool!

The quick reply thing does not bring instant solutions to my mind, though playing with float and position on #qrdiv might get you somewhere.

I think what you want, to make the profile module links into text is to add this in your settables:

set userlite_interaction_links = "text";

ahaha! thanks, I'll give it a shot.

WAH. it worked! excellence. once again you rock, woman!

Edited 2009-10-20 22:57 (UTC)

...except that it refuses to keep. It's separate from the CSS, so shouldn't be impacted by it, right? I set the userlite part, compile, it works, and if I don't then stay in the S2 section, but go back to the usual add-extra-CSS-here box, whatever it is, then suddenly any S2 changes are lost and I'm back to icons.

(Yes, I'm sure I could do all CSS changes in the S2 screen, but then I have no colors for the syntax, and I do rely on those colors to keep it all from blending together and making stupid changes in the wrong places.)

It does have to be in the theme or user layer you're using right then to stick. It sounds like it might be getting overwritten as you work--you see, all the wizard changes you make get written into an S2 user layer. Once it's set in the actual layout layer, it will stick.

Grrrr. Fine, fine, well, I got it to look like I wanted when it was in text, so I guess it'll just look wierd with the icons for now, while I beat down the last bits of misbehaving CSS. Always something!

I tried that, and the problem is that #qrdiv is the same if you get to it by opening the page-reply (where you'll see #qrdiv below the entry) versus opening it via AJAX on the page-read (where it does that strange behind-the-entry bit). Both take you to the same link, as a matter of fact, so I think it's a jscript that's controlling this. Turning that off might (?) mean that clicking on "reply" when on .page-read undoes the AJAX and instead opens new page, where #qrdiv is properly below the entry content.

However, I suspect that's above my grade when it comes to what I can control via CSS, and it looks like this style won't work unless that specific issue can be addressed. Sigh.

It's not #qrdiv in page-reply, I think *checks ids* It's #fostform or something like that. But I think that moving the printing else-html might work. Hmm... need to look into it later.

I think I'll wait until the dubbed version comes out, because your subtitles mean nothing to me. *stares*

Erm. It's the page-entry page, where 'reply' triggers a bout of javascript, not the page-reply, which has no link to 'reply' and thus no javascript, and the reply box is separate. What gets me is that the URL visible on the page-entry page (?mode=reply) and the actual URL for the page-reply page are the same. If it's possible to turn off the js and just make the 'reply' link a straight-up html link, that would probably solve the entire issue, b/c it would send the user to the version that's working properly. ... and here ends the extent of what I can figure out. Heh.

For the QR thing, would moving it elsewhere in the HTML help?

You mean to make it completely separate? I guess it would, if by moving elsewhere you mean that the jscript would reveal a div that's completely separate from the entry div.

Yes, I think it would. If it's moved outside of the entry footer, and possibly outside of .entry. I haven't been able to get at the layer to look at the css, but if that dark background is on .entry, then putting the QR just inside the close of .entry-wrapper would work. If the background is on .entry-wrapper, I think it would have to go just outside that, right before #comments.

ETA: There we go. Yeah, looks like it just needs to go outside of .entry.

Edited 2009-10-21 15:25 (UTC)

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.

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

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.

(deleted comment)

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*

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.

Heeeheeehee yay!

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.

Which page is that one?

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

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

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!

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

I'm getting a error when I click on the layer source link.

No idea why, so I just uploaded a straight-up version of it onto a regular server. It's just the CSS, nothing fancy. Let me know if it doesn't work for you.

I've got it now. :)

Thanks.

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.

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.

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.

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.

Edited 2009-10-27 15:09 (UTC)

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

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

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?

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.

Edited 2009-10-27 22:55 (UTC)

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 :-)

~~So...to be clear, when I apply this I use Tabula Rasa as a base, and turn off the base style sheet?~~

Edited I took a closer look at the screenshots. Curses to my dialup!! I used TIII

Edited 2009-11-06 01:32 (UTC)

First off - I love the layout. It's got a good design to it, easy to move around, nothing that's confusing...

My problem comes in that the graphics are really heavy on dialup, and on those Mobile high-speed USB thingies telephone companies have been selling. I borrowed my sister's to try out, and this layout slowed down the browser.

I can surf images off, no problem.

Right now it has graphics in it, but that's me fiddling around with having that as an option, not as a default. However, I've sorta been sideswiped by plumbing issues this week. Need to survive that, and then I'll get this layout snapped into shape.

(forgot to also note: the current graphics are like ridiculous compared to size needed -- like 100x150, frex, when 4x150 would do, or 2x100, whatever. that's just because I wasn't doing 'final' graphics but testing, so not stressing about the finish details -- and the # of graphics + sizes probably isn't helping.)

Edited 2009-11-06 04:39 (UTC)

Oh no, I was going back and checking and seeing what still needs conversion and your links are dead now! That makes me sad because I really love this.

Flat | Top-Level Comments Only

Tranquility III / Gradiance

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

o/

Re: o/

Re: o/

Re: o/

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject