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

[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

[foxfirefey]

Oooo.

[ninetydegrees]

I like these a lot: simple but classy.

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

[afuna]

Have the conversion halfway done, will update when it's finished :)

[afuna]

(Hmm I must remember to look at the code in this thread and integrate it once I'm done with the conversion)

[afuna]

Did a tweak, to make the tags page background white, and then also add in the cute little round things. Hope you don't mind!

[afuna]

Oh hey, if you remember, what was the base font size you converted from? I saw one stray font-size: 10pt in #archive-month .entry-title, and I'm trying to figure what value that should be in ems.

(I set it to 1em. Feel free to thwap me if I got it wrong *grin*)

[kaigou]

I usually use 1em, though the funkiness with IE means it gets that 100.1% font size in there, somewhere. I think all the fonts should be ems, or percentages, already, b/c I try very hard to make the font-sizes adjustable for all browsers -- b/c you can re-set the font size in the wizard, right? So I tried to allow for that adjustment on the user's part, which is probably why you don't see a definitive base-font anywhere. Whoops?

[afuna]

Yup! I just saw one instance of 10pt, so I was wondering if that should be 1em or 0.8em or 1.1em or the like. It looks okay on 1em, so hmmm. I'll probably leave it there.

[afuna]

FYI: Conversion done! Just waiting for testing + theme image preview + me figuring out the bottom comment thing, but those shouldn't take as long.

Thank you for being so patient, and much love for this delicious layout <3

[baggyeyes]

Ditto!!

Edited CSS

[baggyeyes]

/* Theme Name: Skittlish Dreams, a DW port of Skittlish Description: A candy coloured theme. Comes in 7 flavors (orange, blue, green, pink, cyan, red, violet). Version:1.0 Dreamwidth original designer: Damien Tanner mephisto (original): Cristi Balan wordpress port: A.M. Griffin pmwiki port: Dave G dw port: Kaigou H. all versions released under CCL changes for dreamwidth port: --- rewrote css to fit dw classes --- reduced image load to three images --- removed javascript functionality for color-switching --- converted font-sizes to ems from px --- changed layout to flexible-width only */ html {margin: 0px; padding: 0px; font-size: 100%; /* IE hack */} * {box-sizing:border-box; -moz-box-sizing:border-box} a, a:link, a:visited, a:active {color: #0870C9; text-decoration: none; } a:hover {color: #16E; text-decoration: underline; } body {background: #E3E3E3 url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/bg.gif) repeat-x; font-family: tahoma, verdana, arial, sans-serif; font-size: 1em; margin: 0; padding: 0; } #container {background: #0870C9 url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/left_bg.gif) right repeat-y; color: #666666; margin: 0 4%; } #header {background: #1C1C1C url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/header_bg.gif) repeat-x; height: 100px; color: #bababa; margin: 0 5px 0 0; padding: 0; } #footer {margin: 0 4%; padding: 0; background:transparent; background: #1C1C1C url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/left_bg.gif) right repeat-y; } #header a, #footer a {color: #bababa; text-decoration: none; } h1, h2, h3, h4 {font-weight: 700; font-variant: normal; letter-spacing: 0.08em; } #header h1 {margin: 0; padding: 20px 20px 0 2em; font-size: 2em; font-weight: lighter; font-variant: normal; text-transform: lowercase; letter-spacing: 0.2em; } #header h2 {padding: 0 2em; color:#DDD; } #wrap {color: #666666; padding-right: 300px; padding-top: 20px; padding-left: 20px; } #content {margin: 0 -5px 0 0; position: relative; width: 100%; float: left; padding-bottom: 20px; background-color: #0870C9} .tags-container {border: 1px solid #FFF; padding: 10px; margin-top: 10px; } .page-tags #wrap {margin-left: 20px; } .module-section-one .inner {border-bottom:2px solid #000; text-align:right; } .module-section-one {margin-right:5px; } .module-section-two {background-color:#0870C9; position: relative; width: 300px; float: left; margin-right: -300px; /* <--- IMPORTANT */} .module-section-two .module {color: #EEE; background-image: url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/blue_box.gif); background-repeat: no-repeat; margin: 20px; margin-left: 10px; padding: 10px; } .module-section-one li {display: inline; list-style: none; } .module-section-one ul {background-color: #1C1C1C; color: #DDD; margin: 0; padding: 0.5em 20px; } .module-section-one li a {text-decoration: none; padding-top: 0.5em; padding-right: 20px; padding-bottom: 0.5em; padding-left: 20px; background-color: #1C1C1C; color: #DDD; } .module-section-one ul li a:hover, .module-section-one ul li.active a {background-color: #1C1C1C; color: #FFF; } .module-section-two a {color: #FFF; } .module-section-two .module-header a {text-decoration: none; } .module-section-two h2 {margin: 0; margin-bottom: 7px; font-size: 1.1em; padding: 0.2em; color: #FFF; } .module-section-two ul {list-style-type: none; margin-left: 0.5em; padding: 0; color: #DDD; } .module-section-two ul ul {list-style-type: none; margin-left: 0.5em; padding: 0.5em; } .module-userprofile .userpic img {border: none; margin: 20px; } .module-userprofile .userpic {text-align: center; } .module-userprofile ul {margin: 0px; padding: 0px; text-align: center; margin-top: 5px; } .module-userprofile p {margin-top: 0px; margin-bottom: 0px; } .module-userprofile li {display: inline; padding: 5px; list-style: none; } .module-calendar .module-content {text-align: center; } .module-calendar table {margin-left: auto; margin-right: auto; } #entries, .page-entry .entry-wrapper, .page-entry #comments, .page-archive .year, #archive-month {padding-right:22px; margin:-20px 5px -20px -20px; padding-left:5px; border-left: solid 1px #0870C9; background: #FFF url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/blue_edge.gif) right top repeat-y; } .page-entry .entry-wrapper {margin-top:0;} .entry, .comment, .text_noentries_day {padding: 10px; margin-top: 76px; margin-left:2em; position: relative; margin-bottom: 10px; border-top: solid 2px #0870C9; background-color: #FFF; color: #444;} .page-entry .entry, .page-entry .comment, .page-entry .text_noentries_day {border:0px;} .page-entry #comments {padding-top:20px;} .entry-title, .comment-title {margin:0 120px .5em 0; padding: 0.2em;border: solid 1px #EEE; color: #0870C9; background-color: #FFF;} .entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title {border: solid 1px #DDD; color: #0870C9; background-color: #FFF; } .partial .comment-title {display: inline; } .userpic a {background-color: #0870C9; border: 0px; } .entry .userpic a, .comment .userpic a {background-color: #FFF; border: solid 2px #0870C9; right: 10px; left: auto; display: block; position: absolute; top: -66px; padding: 5px; } .entry .userpic img, .comment .userpic img {border: none; } .no-userpic .comment {margin-top: 20px; } .no-userpic .comment-title {margin: 0px; } .entry .time, .entry .date {padding: 0.2em; display: inline-block; } .entry-content, .comment-content {padding: 10px 0px; } p {margin-top: .5em; margin-bottom: 0.5em; } blockquote {margin: 1em; padding: 1em; background: #E4E4E4 ; } .tag {font-weight: bold; text-align: left; } .tag a {font-weight: normal; } .tag ul {display: inline; margin: 0; padding: 0; } .tag li {display: inline; list-style: none; padding: 0px; } *+html .tag li {padding: 0 5px; } .entry .metadata ul {margin: 0px; padding: 0px; } .entry .metadata li {list-style: none; } .entry .footer .inner, .comment .footer .inner {text-align: right; } .entry .footer a {white-space: nowrap; } .entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {text-align: right; margin: 0; padding: 0; display: inline; } .entry-management-links li, .entry-interaction-links li, .comment-management-links li, .comment-interaction-links li {display: inline; list-style: none; margin: 0; padding: 5px; } .entry-management-links li a, .comment-management-links li a, .comment-interaction-links .thread a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/permalink.gif); background-repeat: no-repeat; background-position: 0% 50%; padding-left: 14px; } .entry-management-links .edit_entry a, .comment-management-links .delete_comment a, .comment-management-links .edit_comment a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/edit.gif); } .entry-management-links .edit_tags a, .comment-interaction-links .parent a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/tag.gif); } .entry-management-links .mem_add a, .entry-management-links .watch_comments a, .comment-management-links .watch_thread a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/memories.gif); } .entry-management-links .link_prev a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/previous.gif); } .entry-management-links .link_next a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/next.gif); } .entry-interaction-links li a, .entry-management-links .tell_friend a, .comment-interaction-links li a { background-image: url(http://s.dreamwidth.org/stc/transmogrified/comment.gif); background-repeat: no-repeat; background-position: 0% 50%; padding-left: 14px; display: inline; } .comment-management-links .delete_comment a {background-image: url(http://s.dreamwidth.org/stc/transmogrified/delete.gif); } .entry .footer hr {display: none; } .entry .metadata-label {font-weight: bold; } .comment-poster {display: inline-block; min-width: 40%; } #content > hr {display: none; } .module-section-three {margin-right:5px; clear: both; background: #1C1C1C url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/footer_bg.gif) repeat-x; height: 100px; color: #bababa; padding: 0.5em 1em; } .module-section-three a:hover {color: #FFF; } .module-section-three .module {padding-left: 20px; } .hfeed .navigation, #archive-year .navigation, #archive-month .navigation {height:61px; margin-right:-22px; margin-bottom:-20px; background: #fff url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/blue_circle.gif) right top no-repeat; } .bottomcomment { margin-top:20px;padding-right:30px;height:70px;text-align:center;border-top:4px solid #0870C9;} .navigation {margin: 0; padding: 0; text-align: center; background-color: #FFF; color: #888888; } .navigation ul {margin: 0; padding: 5px 0 0 0; text-align: center; } .navigation li {display: inline; padding: 0 5px; } .navigation .page-back a:before {content: "<-- "; font-size: 0.5em; line-height:2em; letter-spacing: 0.08em; /*vertical-align: 50%; */ padding-right: 1px; } .navigation .page-forward a:after {content: " -->"; font-size: 0.5em; line-height:2em; letter-spacing: 0.08em; /*vertical-align: 50%; */ padding-left: 1px; } #archive-year .navigation {margin:-20px 5px -20px -20px; height:61px;text-align:center;border-left: solid 1px #0870C9;} #archive-month .navigation {margin:0 -22px 0 0; height:61px;text-align:center;} .page-tags #content h2 {padding: 0.2em; margin: 0; border: solid 1px #0870C9; color: #444444; background-color: #FFF; font-size: 1.2em; margin-bottom: 20px; } .page-tags #content h2 {margin-right: 10px; } #archive-month dt {font-weight: bold; } #archive-month .entry-title {font-size: 10pt; display: inline-block; padding-left: 5px; } .month-wrapper, #archive-month dl {padding: 10px; position: relative; margin: 20px 2em 20px 3em; background-color: #FFF; } .month-wrapper h3 {padding: 0.2em; margin: 0; border: solid 1px #FFF; color: #0870C9; border-top: solid 2px #0870C9; background-color: #FFF; font-size: 1.2em; margin-bottom: 20px; } .month caption {display: none; } .month .day span, .month .day p {padding: 0; margin: 0; } .month .day p {margin-top: 4px; margin-bottom: -4px; } .month .day, .month th {line-height: 2em; vertical-align: text-top; padding: 5px; text-align: center; } /* IE only to line up the empty days neatly */ *+html .month .day span, *+html .month th span{vertical-align: 100%; } .month .day-has-entries {line-height: 1em; } .month .footer {width: 250px; text-align: center; margin: 10px 0px; } .text_noentries_day {margin-top: 20px; margin-bottom: 20px; } #postform {margin-top: 20px; border: solid 1px #0870C9; } #commenttext {width: 95%; } .metadata-label, .metadata-item, .datetime, .tag, .entry-management-links, .entry-interaction-links {margin-top:.5em; font-weight: lighter; font-variant: normal; text-transform: uppercase; color: #888; letter-spacing: 0.08em; display: block; } .metadata-label-groups, .tag-text {display:none; } .metadata-item {color:#881111; } .journal-name {text-align:center; font-size: 1.8em; color:#fff; line-height: 1.43em; margin-bottom:.3em; font-weight: lighter; font-variant: normal; letter-spacing: 0.16em; } /* addition */ .bottomcomment{height:6em; margin-right:-22px; margin-bottom:-20px;background: #fff url(http://s269.photobucket.com/albums/jj41/storyteller_2002/dreamwidth/dreamscapes/skittlish/blue_circle.gif) right top repeat-y;}

Re: Edited CSS

[afuna]

*salutes* thank you so much! Will work on this later tonight :)

[afuna]

So quick update on the status: it was just waiting for the theme image preview.


However, I took another look at the surrounding licensing issues, and I've concluded there needs to be one more change.

Okay, background, and this is pretty skippable, but I think you deserve an explanation, before I go making changes or what :)

Layouts can go into either dw-free or dw-nonfree. A layout in dw-free means that we can distribute the layout and every part of it, so that DW clone sites can use it; dw-nonfree means that we don't have permission to distribute, so it ends up that only DW can use the layout.

Because of the history of the layout (possible licensing complications), and because it was based on Transmogrified which is dw-nonfree (the layout author hadn't given us explicit permission to distribute the layout), it seemed clear it should go into dw-nonfree.

But then we ironed out the licensing issues wrt the original code: with all your research (and much thanks and <3 for being so thorough), we have a pretty good documentation of the history and have them properly credited in the layout, and as well, you redid the images. So any licensing and permission issues which might have to do with its being a ported script were now clear.

WRT Transmogrified, even though it was based on Transmogrified, the resulting converted CSS was based primarily on the original Skittlish, and not Transmogrified (and we're clear there, see above). The HTML is based on the converted Transmogrified (which is a pretty different creature from the original Transmogrified, as we'd converted it heavily to be based on core2), so that seems clear.

And now the only thing that prevents us from distributing are the mini-pre-entry-link comment images, which came from Transmogrified, and I think those can be removed, or replaced with another set.

So, um. Long comment is long, but I wanted to let you know about the icon thing, and that I'm currently looking if there's anything we can use for them -- and also that these aren't going to be preventing the layout from going out in the next code push, in any case. :)

[kaigou]

The transmog icons aren't the usual silk icons? I actually had a collection of free icons I'd selected (which are all circular + colors similar to layouts) but couldn't figure out how to get the style to use the icons instead of transmog's icons, so I just skipped that part. Would it help if I passed along those icons & info on where I found them, to double-check on usage rights? ...or why not just go with usual silk icons, or are the icons different for each layout?

Because I actually have no idea which would be best. Hrm. How about which would be easiest? Let's go for easiest. I like easy. How's easy sound to you?

[afuna]

I like easy! Easy sounds good.

And nope, they're not the usual silk icons. For layouts which use only icons, the edit/track/tag/memory 16x16 (20x20?) ones are silk icons and they shouldn't be changed for official layouts, since these are functional/navigation and not primarily decoration.

However, Transmogrified (and now Skittlish Dreams) has its own icons, made by the original layout author. Since it uses text links, and the tiny icons that come before them are merely decorational, they're okay to be switched around.

These ones are just in the CSS --
entry-management-links .edit_entry a, .comment-management-links .delete_comment a, .comment-management-links .edit_comment a {
background-image:url(http://www.afuna.dreamhack.afunamatata.com/stc/transmogrified/edit.gif);
}

for example. (tinyurl in yours, iirc?), so they can be switched around pretty easily.

I'd love to see the icons you had in mind! Sounds like they're just the thing I'm looking for. (crossing my fingers on the usage rights -- I'll pass that information right up for checking)