Category Archives: Resources

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...

Fixie.js – Automatically add filler content to your templates and themes!

May
18

2 Comments - LEAVE A COMMENT

Meandering about the internets this morning I happened upon something so awesome it actually made me come out of hiatus to share with everyone.

As a developer, loads of my time when building out a website is spent throwing in filler content until I or the client actually adds the sites final copy. Copying and pasting from Lipsum.com or another generator over and over and over and over again. Time consuming, right?

CONTINUE READING...

100% Full Width Header and Footer With Centered Content: Revisited (again!)

Jan
15

59 Comments - LEAVE A COMMENT

2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions).

Edit 2/27/2012: I’ve updated the files to include a fix for links not being clickable in the header as well as an option to have the footer anchored to the bottom of the page! :D

This is a project I’ve been working on over a few years. I introduced my first solution back in 2008. It worked, but had some limitations. After recieving feedback and comments I once again offered another solution in May 2011 that worked great… at first. After testing myself, and reading more feedback and comments I’ve come across another limitation. When you downsize your browser window enough to require a horizontal scroll a curious thing happened. Scroll over to the right edge of the screen the header and footer no longer stretched 100% across the screen.

CONTINUE READING...