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

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

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

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.

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!

[baggyeyes]

No, no, no...that what you said previously thus:

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

Was agreed upon.

[afuna]

Oh hey, did you eventually insert it into the original CSS file? double-checking, because I've been trying to apply the code in this thread, but I can't get things with the bottom comment to line up right, so I was wondering if something else is conflicting \.

[kaigou]

I did but I never reuploaded it -- haven't really been on the computer all that much in the past week or two. To be perfectly honest, I'm not even certain whether I inserted the corrected CSS in a place that'll work for it, b/c I didn't actually test it after entering it. Which boils down to: go ahead and make whatever changes you think are needed and/or will work best. I've no problem leaving it in your capable hands. ;-)

[afuna]

Hmm, for bottom_comment, I see these two entries:

.hfeed .navigation, .bottomcomment, #archive-year .navigation, #archive-month .navigation {height:61px; margin-right:-22px; margin-bottom:-20px; background: #ffffff url(http://www.afuna.dreamhack.afunamatata.com/stc/skittlishdreams/orange_circle.gif) no-repeat top right;}

.bottomcomment {margin-top:20px;padding-right:30px;height:70px;text-align:center;border-top:4px solid #f79910;}


So, just wanting to make sure, remove it from the first entry, and then replace the second entry with your code, or add your code into the second etry?

[baggyeyes]

Yeah, remove from the first entry, because it's taken care of later, with a repeating background.


.hfeed .navigation, remove -> .bottomcomment, #archive-year .navigation, #archive-month .navigation {height:61px; margin-right:-22px; margin-bottom:-20px; background: #ffffff url(http://www.afuna.dreamhack.afunamatata.com/stc/skittlishdreams/orange_circle.gif) no-repeat top right;}

[afuna]

Okay. Thanks. How about with the second?

[baggyeyes]

No, that's ok.

[afuna]

No, no, hehe. I mean, do I add it, or do I replace?

[baggyeyes]

You just remove .bottomcomment from the list as noted above; and add

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

For some reason it didn't work when I added these things in the other .bottomcomment. That one, leave be; There can be different entries for the same class in css.

[baggyeyes]

Do you want the whole code I worked with? Instead of snippets?

[afuna]

Oooh, yes please. I think I can work it out, but that would take out most of the guess work :)

[baggyeyes]

Ok, now it's all screwy again.

I blame Mercury being retrograde.