7 color variations [Transmogrified]

[kaigou]

Theme name/layout: Skittlish Dreams (a port of the Wordpress theme, Skittlish)
Author: Kaigou
Layout info: Bundled css + images are at http://www.karinoyo.com/media/skittlish.zip
Image info: Images are edited/slightly adapted from original version to work with DW's layout reqs.
Screenshot: http://i385.photobucket.com/albums/oo292/solnull/other/skittlishdreams.png

The default color scheme is orange; additional options are for blue, cyan, green, violet, red, and pink. All schemes use the following images: left_bg.gif, header_bg.gif, footer_bg.gif, and bg.gif. Each scheme also gets a color-dependent version of three more images, which are named as [color]_edge.gif, [color]_circle.gif, [color]_box.gif. To make it easier on color-switching, the CSS-as-bundled doesn't contain a default color, but uses XXXXXX. That gets search/replaced to whichever of the following is being used:

blue => #0870C9
cyan => #1088F7
green => #61AC00
orange => #F79910
pink => #F122BE
red => #C90808
violet => #AE3BD4

Comments

[afuna]

Great -- thank you :)

[foxfirefey]

Oooo.

[ninetydegrees]

I like these a lot: simple but classy.

[kaigou]

Sorry it took me a bit, there.

I think I'm going to have "Ded by Code" etched on my tombstone.

[afuna]

I can think of no better way to ded

[baggyeyes]

Hi! This is what happened when I used Skittlish, without any modifications from me:



Are there any Prerequisites that are needed to set along with the CSS?

Thanks!

[kaigou]

*stares*

Uhm. Well, first, what browser are you using? That might help narrow down if there's something in the CSS itself. As for the basic settings, give me a bit to see if I can muck up Firefox2 to get what you've got, and work backwards.

[baggyeyes]

Don't worry about it -- afuna will attest - I am not feeling well. It was completely my mistake.

Looks gorgeous! I will test thoroughly!

[kaigou]

Heh, s'ok. I didn't manage to get it to look like that, although I did get it looking pretty wonky by using a different base-style with the CSS laid over it. Just not wonky in quite the same way.

[baggyeyes]

Hi,

The form for managing comments doesn't clear the footer and the entry bottom -



I am using Flock 2.5.2 (Based on Firefox 3.5) on Mac. It produces similar results in Safari 4.0.3 (Webkit based browser, Chrome is based on this.)

[kaigou]

Sorry for belated reply! Hectic these past few days.

Strange. This is what I get in Safari 4.0.3:



...and in Firefox 2:



I wonder what other settings you've got? Because I can sort of duplicate the result you're getting if I squish the screenwidth down. If I take it down to ~860px wide, that makes the left-column around 500px wide, and in Safari that gives me:



And in Firefox, that gives me:



If I squish the screen even farther, only then will the line break and push the button down to be fully in the green (or black, if the post is longer than the sidebar). I suppose this could be halted one of two ways: either set a min-width of maybe, hrm, 850px on the body (can we do that on DW's code?) or add to the padding so the floating bit there for the mass action will get enough background to appear anchored on the white. Seems to me that min-width would be easier.

Originally I'd wanted that line to have more separation from both the line above, as well as the dreamwidth-line below -- because if you take the screen all the way down to 675px, roughly, you get this!! -- which is just atrocious:



I'd vote for min-width, but I would have to defer to the CSS experts in the crowd, since this is starting to hit the limit of my skills. That is, we're getting into the area where I'd start hacking and that way leads to exceptions and soon you're in browser-madness land.

[baggyeyes]

I have Web Developer, and "disable Minimum font size" enabled. My screen resolution is 1600 x 1200, and I can't change it - it's an old video card with a new monitor - and this is the only usable resolution.

[kaigou]

Sorry, maybe I wasn't clear -- I didn't mean reduce the screen resolution when I referred to widths; I was speaking of reducing the browser window's width. As in squishing it sideways like if you're making room for something else on the screen next to it. (My screen's at 1900x1280, so I'm often squishing things, b/c most webpages go all sorts of broken if I take them to fullscreen.) I have min-font set on Safari, but not on Firefox, but I'm not certain that's entirely it, either.

Basically, if you're looking at the browser window at any width over 850px or so, then we've gone past what my CSS-skills can trouble-shoot, because I can't entirely duplicate it based on what you've told me. Neither Firefox nor Safari will give me similar results unless I narrow the browser window down to way way narrow, and it sounds like you're saying you haven't done that.

So in this case I'd have to defer to and/or ask for anyone with the CSS knowledge, if there's anyone able to parse what in the style might be prompting such a difference, because I have no idea what the cause might be, let alone any possible solutions. Sorry, but I'm baffled.

[baggyeyes]

No - I understand - the screen resolution also affect font size. The bottom comment management links are larger text, and end up pushing the comment action drop down further. Perhaps if the management links were slightly smaller, and left aligned? I don't know. I'll poke around in the CSS this weekend and see what I can do. I'll let you know what happens in this entry.

The width of the browser window

[baggyeyes]

The width of the browser window had no effect for me, by the way. The text, and the drop down menu remains exactly where it is in my screen shot.

[afuna]

We could use short forms for the management links. I have an entry I need to put up for that, and that might help minimize what's happening. Oh hmm, but basically, the short forms I have in mind are about the same length as the ones in your screenshot, so maybe not.

[kaigou]

If those links get too much smaller, then it becomes an issue of readability -- it's already somewhat low-contrast, so it needs to stay kinda big to make up for that. What I couldn't seem to get to work when doing the layout was just more space between the links-line and the mass-action line. I seem to recall I tried doing a clear in there as one way to push the mass-action down a bit more, but it kept breaking the box instead.

From a purely design perspective, if the management links are left-aligned, then they're going to (or should) display that way on all pages, which reduces the scannability on the main page. That is, the links are right-aligned to sort of keep them out of the way of the body of each post, so the eye can run down the left and not be distracted by details unless needed. (I had actually tried to get the tags & filters to move right, but that also sent everything into a wonky madness, so I compromised with tag/filter on left and links on right.)

If there's a way to just get more space/padding between the management links and the mass action, and then add more padding to the mass-action so it sits within the green, that would at least keep it from splitting the line like what you're seeing. I know I fiddled with the padding around the mass-action, but IIRC I cut back on that because Firefox would show one way and Safari a completely different way, and it was too radically opposite for comfort. I mean, there's variation and then there's "are you sure this is the same layout!?" variation. *heddesk*

Them's my thoughts & what I'd been aiming for, if that helps, and if you've got any ideas, color me really really appreciative. Someday I'll be a CSS guru -- probably about the time it get completely superseded by some new tech and joins my Pascal skills in the pit of uselessness. Sigh.

Skittlish - Bottom Comment

[baggyeyes]

Ok,

can you take a look at this page in your different browsers and tell me what it looks like to you? I'm on a really dog-slow connection, so right now, I can't test in all of mine just yet.

http://baggyeyes.dreamwidth.org/102312.html#comments

[kaigou]

I'm not seeing the options line (because I'm not you, heh), but it sure looks like there's plenty of space (two bumps' worth, even) that it should have plenty of room. But it looks like plenty of room in both Firefox 2.0 and in Safari 4 -- the only difference is that in Safari, there are two bump-outs, while in Firefox, there's just one.

[baggyeyes]

I'll try on IRC tonight about getting help. I think a layer may help with the logged in-logged out problem of extra space... but it depends on how well my Internet behaves tonight.

[kaigou]

I don't think the additional circle there is really a major issue, if the behavior when you're logged is acceptable. I don't know what mods you made, so I can't duplicate to see how it acts given that whatever setup I've got doesn't prompt that borderline-behavior. Perhaps if you could post that, I could duplicate, and we could see if between the two, it's adequate -- way I see it, most readers who've scrolled down to that point probably won't pay much mind to whether there's one circle or two.

Achieving perfect equivalency across all browsers is a pipe-dream, and as long as it's not terribly broken when logged in versus logged out, I'm not really seeing it as major -- not nearly as major as the (obviously wrong) bit of having a line break where colors meets text area. That is to say, now it looks like it's *meant* to look that way, which is far sight better than being obviously broken. At least IMO!

[baggyeyes]

I got on IRC on Tuesday. It may be possible to fix the problem with the layers.

[kaigou]

Heh. I leave it in your capable hands, as I'm afraid we're waaaaay past my grade when it comes to CSS.

[baggyeyes]

Ok...so the verdict is: You are correct!!

So here is the css that I used to make the .bottomcomment a wee bit bigger (at least for the drop down.)

.bottomcomment{background: #fff url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/blue_circle.gif) right top repeat-y;}

.bottomcomment {padding-bottom:5.5em; background-color:#ffffff; }

Obviously, you'll change the url to something else, but that's it. Oh, and pull .bottomcomment out of the list of items with blue_circle.gif, or its equivalent. It should have its own entry.

[kaigou]

Uhm, I'm correct that we're past my level of CSS? Heh. No need to go onto IRC to find that out, I could've told you that myself! ;D

I'll insert that into the original CSS files. Thanks again for all your help!