Themes for Summertime

[zaluzianskya]

Theme name/layout: A Thing With Feathers / Summertime
Author: zaluzianskya
Layout info: Info | Source | Preview

Theme name/layout: Reason Does Not Understand / Summertime
Author: zaluzianskya
Layout info: Info | Source | Preview

Theme name/layout: Once Is Enough / Summertime
Author: zaluzianskya
Layout info: Info | Source | Preview

Image info: I've modified the colors of some of the icons in the navbar for visibility purposes. The modified icons can be found here (as well as being linked to in the theme source code).
Additional info (for layouts): N/A! Color and image problems were solved in the comments here thanks to momijizukamori and ninetydegrees.

Also, I put together a few more themes in the meantime since I posted this entry (I was really bored/motivated); they're under a cut tag:


Theme name/layout: The Very Opposite of Meaning
Author: zaluzianskya
Layout info: Info | Source | Preview

Theme name/layout: Take It Away
Author: zaluzianskya
Layout info: Info | Source | Preview

Theme name/layout: Enough At Last
Author: zaluzianskya
Layout info: Info | Source | Preview

Theme name/layout: I'm Gonna Let It Shine
Author: zaluzianskya
Layout info: Info | Source | Preview

Theme name/layout: Dimensions
Author: zaluzianskya
Layout info: Info | Source | Preview
Image info: Background image comes from Subtle Patterns, licensed CC-BY-SA.

Theme name/layout: Capricious Insect
Author: zaluzianskya
Layout info: Info | Source | Preview

Theme name/layout: The Poet's Abstract Head
Author: zaluzianskya
Layout info: Info | Source | Preview

Theme name/layout: Thicker Than Water
Author: zaluzianskya
Layout info: Info | Source | Preview

Theme name/layout: Uncertain Inevitability
Author: zaluzianskya
Layout info: Info | Source | Preview

Comments

[momijizukamori]

The third line should work for what you want because of strange layout anatomy quirks, basically - .datetime is actually a span (which is a type of inline element) and not a div (which is a type of block element). Span elements won't stretch out to nice background blocks because they're meant to be used within stuff like a paragraph without disrupting flow. Block elements like divs will stretch out and disrupt flow if you use them in the middle of something.

So .comment .header is a div, and putting a background color on it colors both behind the subject and the date/time. HOWEVER these layouts have a color behind the subject (which is an h3, which is also a block level element), and that colors behind the whole subject block and sits on top of the color for the header block, so the header block color only shows behind date/time.

[zaluzianskya]

Using .header doesn't work :\ When I put in ".comment .header { background-color: #FFFFFF !important;}" the date/time background color stays the same grey color it is by default. Sorry, I should have specified that in previous comment.

(On an unrelated note: Do you know the css necessary to change the border color in entries and comments? While I'm fiddling around with the CSS I may as well mess with that too!)

[momijizukamori]

HMMMM that might be an inheritance issue somewhere - those trip me up sometimes. I will delve deeper!

[zaluzianskya]

Thanks!

Curse you for replying right as I was about to edit and add in a very important missing word: Icon border color. It's been a long day @_@

[momijizukamori]

Well I didn't see the first edit before I replied anyway so I guess it works out *g*

for the icon border (both entry and comment):

.has-userpic .entry .userpic, .has-userpic .comment .userpic {border-color: #YOURCOLOR !important;}

should get it for both regular and hover but if it disappears on hover you need:

.has-userpic .entry .userpic:hover, .has-userpic .comment .userpic:hover {border-color: #YOURCOLOR !important;}

as well.

[zaluzianskya]

Perfect! Thanks so much.

[momijizukamori]

excellent! I'm still trying to figure out why the .comment .header bit isn't working, because it seems to work in Firebug :|a

[zaluzianskya]

CSS is the devil :( No rush! And I'll let you know if I figure it out on my own.

[carene_waterman]

I got the:

.comment .header {background: color}

to work by appending it to your custom CSS stylesheet with the Firefox dev tools. So that's exactly where it would be if you put it in there yourself. There is nothing causing any inheritance issues here.

Did you perhaps type it in as:

.comment.header {background: color}

That's a really easy mistake to make, and it means something very different from the first rule since it refers to an element with both comment and header as class names--which doesn't exist.

[zaluzianskya]

No, I copied the code exactly as momijizukamori provided it. It currently reads:

.comment .header {background-color: #ffffff !important;}

and this is the result.

[carene_waterman]

Okay, I'm confused then.

The background of the comment itself is already white. #ffffff

Your code is working as per dev tools on the test journal you linked, you just can't see any change because you're putting white on white.

[zaluzianskya]

...okay, I just tried viewing the comment in a different browser and it looks like it's working there? I guess I must be having some kind of userstyle conflict that I'm only just now noticing because I usually have custom comment pages turned off.

Sorry for the trouble!