Style: Summertime/Tabula Rasa

[ninetydegrees]

Edit: these are now live and can be selected from Customize Style. Original layers and pics are no longer available.


Style: Summertime
Author: ninetydegrees
Images info:
-- background texture by Design Shard. Usage terms : "Free to use for commercial and non commercial work no credit or link back needed, but please don’t redistribute or sell them as your own."
-- icons by Romeo Barreto, John Caserta, Denis Chenu, Pedro Lalli, Marcus Michaels, P.J. Onori, Laurent Patain and Cor Tiemens from The Noun Project. All licensed under No Rights Reserved ( CC0 ) or Attribution ( CC BY 3.0 ).

Themes:
Karting / Preview (shown in one-column-split mode with fewer modules)
Regatta / Preview (shown in three-columns-sides mode)
Swimming Pool / Preview (shown in one-column mode with fewer modules)
Tennis Court / Preview (shown in two-columns-right mode)

This style ate my mind so there will be more themes once I grow a new brain. :)


Testing would be appreciated as well as feedback on one-column modes as I wasn't sure if putting modules in the below-header and above-footer areas was the right thing to do. I'm not sold on any of the names either so suggestions are welcome.

Comments

[ex_rising236]

I mean that, too-- but basically that... argh words. Um.

The line space between the individual lines of metadata, and the metadata and the tags, should only ever, in my not so humble opinion, amount to the amount of space generated by one
tag. It should look like they're lines that are part of the same paragraph, rather than having the blank lead space in between. If that makes sense. Of course, this is just me.

[ninetydegrees]

Oh I get it! That makes perfect sense. I switched spacing between text to 1em instead of fixed width. Does that make it better?

[ex_rising236]

Try... .75 em?

[ninetydegrees]

Oh wait there was some padding left. Now it should really be just 1em. Also I had a look at Database to see how I resolved the space between meta and tags issue and, of course, I had to edit the function...

[ex_rising236]

Okay. See, now, this is THE MOST AWESOME THING IN EXISTENCE. I love it, so much.

Could you maybe be persuaded to put up a ZIP file somewhere of the base icons and the original base texture for the background, for people who wanted to play around with theming this? The parts where the icons change colour on hover, and all of that, is a little intimidating for beginning to make themes for this, if you know what I mean.

But. <3 <3 <3.

Seriously, thank you so much for this theme, it is awesome, I love it, and you're awesome

[ninetydegrees]

XD *hugs* You're awesome too!

I don't have anywhere I could upload a .zip file though but I can link you to my Imgur album or email you the files, whatever works best for you. Here's how it works so you can tell me what you want:

Icons:
-- the original files are .svg files. From there I made two sets of .png files (black and white). This was a bit on the fly so if you want me to make the adjusted vector files I can (I'll do these anyway because this is better practice and will give better .png images).

-- the circles and shadows behind the icons are pure CSS and you can change their colors via props:
color_header_icons_background, color_header_icons_background_alt and color_header_icons_shadow for the top ones.
color_footer_icon_background and color_footer_icon_shadow for the bottom one.

Texture:
-- My original background texture is at http://i.imgur.com/jyGQY.png. From there I simply add a colored layer and play with opacity in PS (whatever at 75% for the page background and white at 40% for the entry background) and save it as a .jpg with some quality loss to make it lighter.

-- The only complicated part is the punch mark in the sidebar because it's something I do in PS. Do you want to work with the resulting .png files or the .psd one?

[ex_rising236]

Email would be easy -- rowanium at gmail dot com

I can deal with the .psd file for the punch mark, and it'd be nice to have the .png files and the .svg files for the icons.

And that thing on the circles, is AWESOME that you can do that with code. it looks, when you're looking at it, like it's just all one seamless element and such, but there's a whole bunch of simplicity behind it for being able to change that stuff with props. I love this style more and more, seriously.

[ninetydegrees]

Sent!

The vector files should give you the right size for the icons (before the resize to 45x45/25x25 I mean) even though some are slightly bigger in .svg. I had to edit the 'recent' icon in PS, though, because the lines on the left didn't export well. If something's unclear you know where to find me. :)

XD You can also make triangles with CSS. If you're interested these are simple articles on this topic: http://davidwalsh.name/css-triangles and http://davidwalsh.name/css-circles. You can do lots of nifty tricks with CSS3 as well. The Mozilla Dev site has several examples: https://developer.mozilla.org/en-US/docs/CSS.

[ninetydegrees]

Erratum: entry background is just a white square at 40% opacity so works with any theme unless you want to change the color and/or the opacity.

*facepalm* Here's the link: http://i.imgur.com/5MZAr.png