SevenSpark.com Site Redesign & Updated Branding

Well, it’s been in desperate need of it for a while, but sevenspark.com has finally been updated with a brand new custom theme and some branding updates. The new theme focuses on the latest postings, which reflects my intention to generate content for the site much more often. I intend these posts to share jQuery, CSS, and PHP snippets and experiments that I hope others will benefit from – the first one will be published soon.

The new design is intended to be much more usable in addition to being a lot nicer to look at. Much greater attention was paid to typography and white space, and I hope that shows through in the readability of the site.

The site also features custom post types for Products and Portfolio items, which will make it much easier to keep these galleries updated.

The new theme makes wide use of HTML5 and CSS3, and is based on the Toolbox framework. It also makes use of the prettyPhoto jQuery plugin, WordPress SEO by Yoast, Contact Form 7, Twitter Widget Pro. and the WPZoom Social Media Icon Set. Many thanks to each of these fine resources.

Along with the site update comes a redesigned logo, which I’m really pleased with. I think it’s a lot cleaner and sharper. A new SevenSpark Facebook page also accompanies the site now, and you can grab the RSS feed via feedburner.

Hope you enjoy the site! Feel free to let me know what you think in the comments – be nice, now πŸ˜‰

2 thoughts on “SevenSpark.com Site Redesign & Updated Branding

  1. Just surfing through your site and must say.. it’s pretty cool.. love the design and usability. Would like to know how to do the cover/hove action on the premium products images in the sidebar?

    • Thanks, Jeroen! Glad you like it.

      The premium products images are done with some CSS3. Basically, there is a container element that has an image and a set of buttons. The buttons are hidden by default.

      When the container is hovered, the image opacity is reduced, and the buttons’ opacity is increased. When the buttons are hovered, their opacity is increased further.

      The transitions also use CSS3.

      Hope that helps explain how it works πŸ™‚

      Chris

Comments are closed.