Earlier this month I completed a redesign of a long-time client’s site that I first worked on in 2008. Because the client always has loads of great imagery (she’s an interior designer), we decided to incorporate full-screen backgrounds. I’m using the lightweight jQuery plugin Backstretch to handle the resizing.

I had some problems getting this working in WordPress, so I thought I’d post my process here. The main issue turned out to be that the version of backstretch.js I got from the demo site was not working; I have a correctly-functioning version here to download.

This little script makes images stretch to the full size of the browser window and resize as needed; it works fine down to IE7. I’d recommend an image width of no less than 1440px, this seems to work well.

Adding the Script

Add this to your theme’s functions.php, this registers and loads the backstretch.js script.

Then add this function, this one adds a backstretched image to individual pages which you can control. This one is placed in the footer to make sure it loads after jQuery.

I hope this helps someone else!

Side Menu screenshotEarlier this week I built a little menu for a client using some CSS3 animation techniques – no Javascript. The client decided on Thursday she’d rather have the menu at the top, so… I liked mine quite a lot and turned it into a tutorial here so I reproduce it quickly when the need arises.

The menu was designed to work nicely with a full-screen background image. You can easily customize it to work with a variety of sites though.

The demo linked below shows the menu based on the one I made for my client.

View Demo

Basic Menu Setup

The parts that are highlighted are key, the rest is just a very simple menu structure.

In line 13 I’m using a semi-transparent white .png for the background of the menu items. In line 21, I move the a to the left 20px, the same distance I’ll be sliding the a’s to the right; this is so the left side of the menu item stays at the edge of the browser window when the menu item moves right, otherwise there’ll be a gap there.

Lines 27-31 control what gets animated when the user moves the mouse away from the menu item – what happens when the menu item slides back to the starting point (both the color and the translation movement) and how long it takes (0.4 seconds).

Hovers and Current Menu Item

Lines 4-6 control the distance moved (20px in the X direction, 0 in the Y) for hovered and active menu items. Likewise, lines 17-19 do the same for the current menu item.

The rest of the highlighted lines control what transitions when the user hovers or clicks a menu item. The current menu item is moved to the right (X) by 20px, but it doesn’t need a transition statement because no animation is needed.

A pretty simple example, but it works effectively and looks pretty nice. Enjoy!

I’m currently working on building a good responsive base version of the Theme Hybrid child theme I use as the starting point for most WordPress sites. To that end, today I destroyed a project-in-progress to rebuild it responsively. It’s going well so far, but I’m not close to being done. 

One thing that is complete: I now have a responsive menu thanks to a little jQuery script called TinyNav.js. This automatically converts any ul or ol-based navigation menu to a select menu. It was very easy to do except for one thing that wasn’t clear from the documentation, which I’ll explain below.

First download TinyNav.js from the link above and upload it to your theme directory. Then in the head section of your theme, connect to the script:

Then add this, changing #menu-primary to the ul id in your WordPress menu. The second part of this makes the current_page_item appear in the select menu by default.

Finally, open up tinynav.js. This was the tricky part because it wasn’t explained clearly. You’re going to need to make one change: the first occurrence of ‘selected’ needs to be changed to ‘current_page_item’ and then the first part of the script should look like this:

Note that that’s just part of the first line in the minified script…

Now you’ll use media queries to control the appearance of the select menu and the hiding of the main menu, perhaps like this:

And you can style select.tinynav in CSS. Enjoy!

Coda Slider has been around for awhile, originally released back in 2007. But on a recent project, a client specifically requested we use it in a redesign. It’s actually really simple to customize and works well down to IE7 (although IE7 would require some CSS adjustments that I didn’t do for this tutorial. IE8 looked fine).

Coda Slider screenshot

The nicest thing about this slider is that it is basically a sliding wrapper for your HTML. You can add forms, text, images, anything you need into each panel. Other features:

  • Links and buttons are clickable.
  • You can use previous/next graphical arrows or text links.
  • You can use dynamic tabs, which is what I’ve modified in the demo.

The demo linked below shows the version of the slider I made for my client, and you can also get my customized CSS file. Download Coda Slider 3 from Github.

View Demo Get CSS Download Source

Installation

Installation is really simple, just add this to the ‘head’ section (it does need to be in the head, the slider didn’t work when I put it in the footer).

I’ve turned off arrows and turned on Dynamic Tabs; view the other advanced settings here: http://kevinbatdorf.github.com/codaslider/.

Customizing the Dynamic Tabs

The HTML element with class=”title” is used for the dynamic tabs. I used h2 and then hid this element in CSS so it won’t appear within the panel content. Then in coda-slider.css I modified .coda-nav like this to put the nav links down in the bottom right corner:

This is a very simple slider but the fact that you can use HTML in it is a big plus. It’s easy to customize too. Enjoy!