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

[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