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

[ninetydegrees]

Loved what you did here!
The images are set in the themes so you need to link to them in the image settings if you want them to be displayed. You may want to have a look at http://www.dreamwidth.org/customize/advanced/layerbrowse?expand=457415#summertime/layout if you need some URLs.

What do you mean by problems? Would you like the titles to have the same color, link or not?

[zaluzianskya]

Thanks for the link!

The problems are readability; the link color that gets used in the first layout is hard to read on the module title background color, and the visited link color on the third one is hard to read on the last layout. @momijizukamori said they'd help with that though!

[momijizukamori]

Ooh, I love these color combos! 90d got the question about the images already - if you'd like to change the module title link color and the entry title visited link color, you can use a small bit of custom CSS (which is totally allowed!) - I can give you the basic outline to put your colors in if you'd like.

[zaluzianskya]

Oh my gosh I would appreciate that so much, thank you!

[momijizukamori]

.module-header a {color:#YOURCOLOR !important;}

.entry-title a:visited {color:#YOURCOLOR !important;}

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

Those go in the Custom CSS box here and are, in order, the module link title color, entry title visited link, and background for date/time on comments. Let me know if they don't work as expected, my brain has been hibernating this winter, I think.

[zaluzianskya]

The first two worked perfectly, thanks!

I think I wasn't clear enough on the third one because I didn't mean the comment subject line, I meant the part underneath it where the date and time are shown. Inspect Element told me that that part is .comment .datetime, but changing that to the value I wanted resulted, in, well...

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

[zaluzianskya]

Thanks again for all the assistance! Just one thing: I sent in a CLA for something else ages ago. Do I need to send another one in, or am I still good?

[momijizukamori]

Hmmm, we don't have you on the dreamscapes CLA list BUT Denise may still have it on file. Would it have been under this username?

[zaluzianskya]

It should be under either this name or "transfinite".

Edit: Ah, wait, "dreamscapes CLA list" -- so is a new one necessary for each area of the site? The one I submitted was for a design for the Zazzle shop.

[momijizukamori]

Nah, its more that there's a masterlist only Fu and Denise have access to (because it has legal names etc on it) and when a new person submits something here, they tell me or 90d that the user has a CLA on file and we make a note on our list so if they submit stuff again we aren't asking them over and over. So if you've submitted one you're good, I'll just verify with D :)

[denise]

Hey -- sorry, I'm finally getting around to checking this. Can you drop me an email (denise@dreamwidth.org) to let me know what email address and wallet name you sent it in under? I'm not turning up anything with your email address or username.

[zaluzianskya]

Email sent!

[denise]

Hm, I did not get it! Can you check the address and resend?

[zaluzianskya]

Sent again, I hope =\

[denise]

....and that made both of them come through. Oh, computers. Thanks!