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]

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.

[afuna]

Hm, I wonder if it could be ordering?

[baggyeyes]

I fixed it. I hadn't saved the fixed CSS, (Bad me!)

So here is the fixed CSS.

Whew!!