New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions)

Feb
1

8 Comments - LEAVE A COMMENT

[Feb 1st, 2015] I’ve finally updated my code examples for the very popular series I’ve shared with how to center content within a section that has a “full width” (or “full bleed”) background (100% Full Width Header & Footer with Centered Content series: v1 v2 v3 – disregard all of those now!).

full-width-ex

This also includes an update for the full width examples of the header & footer that stay anchored to the top/bottom of the window (First edition here: How to: Anchor the Footer to Bottom of Page (or Header to Top)!).

full-width-fixed-exBoth of these versions are now responsive, the HTML and CSS both updated.

You can view the new examples on github and download it to use in any way you’d like!

CONTINUE READING...

WordPress: Querying multiple post types, limiting by individual taxonomies

Apr
8

No Comments - LEAVE A COMMENT

Today I had a case where I needed to create a list of posts from two different post types, which in itself isn’t all that hard using WP_Query(). The catch here was I needed all posts from one post type and just the posts that were in a certain taxonomy from the other. The solution was a simple tax_query() using a relation of “or” and using the “IN” operator to isolate the posts we wanted. This may or may not be the best solution, but it’s the one that worked for us, so I thought I’d share!

CONTINUE READING...

CSS Triangles with a Faux Border/Shadow for Navigation Indicators

Apr
6

No Comments - LEAVE A COMMENT

So today I ran into a conundrum as I was working on the “active” state for a menu for my one of my client’s redesign of their corporate site.

In the design there is an active state of a little triangle indicating what section is active as a full width submenu slides down from beneath the main menu (that tutorial is the works).

So the triangle itself isn’t a problem. I easily created that using the :after psuedo-element.

The problem I ran into was the triangle itself has a border on the left and right sides and then extends across the page beneath the menu.

nav-triangle

CONTINUE READING...

A Notsy So Happy Tale of Shopping Online With Totsy

Dec
18

One Comment - LEAVE A COMMENT

Oh boy. Where do I start.

I feel compelled to write this post regarding the “deal of the day” site targetted towards mothers/parents called Totsy. If you are not a member, don’t waste your time joining – I’ll explain why.

Let’s start from the beginning. I joined Totsy way back in the beginning of this year, to buy some pajamas and other clothing they had on sale for some of my kids. I spent a total of $169.68. My order was dated Feburary 9th, 2012. On Feburary 22nd I recieved an email from my bank saying my card was charged by Totsy. Yay! My items were coming!

totsy1doublechargeA few days later on March 2nd, 2012, I received another email saying my card was charged… again by Totsy for the total amount of my order. I immediately called them, and one of the charges was removed. Great, no problems. My package arrived sometime after – I really don’t recall the date since it was so long ago. All my items were there (I think… I didn’t really check back then, just having blind faith the when I order something I’ll recieve everything I order- stupid, stupid me).

CONTINUE READING...

30 Creative Badge Designs for Achievements, Logos and More

Aug
22

6 Comments - LEAVE A COMMENT

What is a badge? Simply define a badge is “a distinctive emblem worn as a mark of office, membership, achievement, licensed employment, etc.” In today’s world of games, apps and social networking badges are everywhere. We see them used in logos, we earn them as rewards for completing tasks or challenges in our favorite apps, games and on social networking sites or just as emblems within a site to distinguish certain content. Badges are pretty darn cool when designed with a careful “complex simplicity”.

Complex simplicity? That’s ridiculous! How can something be both complex AND simple?  Take a look at the badges I’ve collected below, and you will see exactly what I mean – the amount of fine detail put into some of these collections is absolutely outstanding and quite complex. But within all the beautiful color choices, texturing and minute details you will see the simplicity of each badge. Each created to be easily understood as to what the badge is meant to represent and convey.

I’ve rounded up thirty of my favorites ranging from achievements, personal branding emblems, logos and even a few stock collections for inspiration!

CONTINUE READING...