This is not something EE’s category tags can do natively, so I set out to find a way. I’ll show you what I discovered in this short tutorial.

Last things first: the final result

In case the concept is still abstract, here is a screenshot of the final result:

A list of all categories, with active ones checked

What you see is a portion of a Safecracker form for editing a single entry. I wanted to let the end user see all of the category options, as well as which categories were already selected for the current entry. A checkbox field seemed like a logical choice.

You’ll notice that some of the checkboxes are checked, and that there are no duplicate categories. I know…like magic.

How it’s done

In this example, I’m using an embedded template, but that may not be necessary for everyone. In your parent template, place the following code:

<h2>Type of Venue</h2>
<div class="cats">{embed="includes/fetch_cats" cat_group="1" entry_id="{entry_id}"}</div>

Then, in your embedded template (includes/fetch_cats in this example), place the following code:

<?php
// get all categories in the specified group
$all_cats = $this->EE->db->query ( "SELECT cat_id, cat_name FROM exp_categories WHERE group_id = '{embed:cat_group}' ORDER BY cat_name" );

// loop through each cat returned, marking a box checked if the current entry is in that cat
foreach ( $all_cats->result() as $row ) {
   $venue_cats = $this->EE->db->query ( "SELECT cat_id AS venue_cat_id FROM exp_category_posts WHERE entry_id='{embed:entry_id}' AND cat_id = '" . $row->cat_id . "'" );
   if ( $venue_cats->num_rows() ) {
      echo '<label><input checked="checked" type="checkbox" name="category[]" value="' . $row->cat_id . '" /> ' . $row->cat_name . '</label>';
   } else {
      echo '<label><input type="checkbox" name="category[]" value="' . $row->cat_id . '" /> ' . $row->cat_name . '</label>';
   }
} ?> 

Be sure that your embedded template has PHP enabled on Output.

That’s all there is to it. The nice thing about using an embedded template is that it’s very modular; you can pass any category group ID  and entry ID to it and it will return the expected categories.

3 roads incorporated a better sense of organization to the website so that first-time visitors develop a strong first impression of the city as a tourist destination. By having “Gaming,” Lodging,” “Dining,” and “Travel” the main drop-down menus on the homepage, the city instantly asserts itself as a resort area centered around entertainment and service. The former Black Hawk website contained much of the same content, but it wasn’t organized in an accessible or enticing fashion for prospective vacationers browsing the website.

3 roads also designed a new Black Hawk logo: it features the city’s name with a pivoted die in the middle which brands Black Hawk in a definitive and meaningful way to the public by identifying the city’s primary selling point.

We also equipped the website with a content management system (CMS) that allows the client to manually update, edit, and add certain content to the website at their leisure and completely independently. The new website is easier to use for visitors, and allows them to find information more quickly.

Weather conditions, traffic reports, and a live webcam also serve as meaningful features and supply visitors with other pertinent and timely info that makes the new site as useful and interactive as possible.

Check out the new website for yourself and take a peek at the city’s new cyber real estate at visitblackhawk.org.

This designer wallpaper shows the best part of Halloween: Trick-or-Treating! A classic, muted color palette, some fun costumes and a spooky ghost following up the pack all bring back memories of this classic American holiday. Whatever your plans this year, I hope you enjoy this free Halloween desktop wallpaper. Happy Halloween!

Font: “Canaveral” by Riley Cran for Lost Type Co-op

Good ol' fashioned Trick-or-Treating

Download the Halloween Wallpaper:

• 1024×768
• 1280×800
• 1280×1024
• 1440×900
• 1650×1080
• 1920×1200

This year’s event was held at the much more spacious Redline Gallery (24th and Arapahoe), which gave us plenty of room to mill about, and also provided plenty of wall space for this year’s entries. We can’t be sure, but it felt like there were more boards on display this year (and the overall quality of submissions was definitely a step above 2010′s).

A view of the event in its early hours (photo courtesy of AIGA Colorado)

This year’s theme was centered around old school arcade games. Regretfully, I was too busy perusing the boards and placing bids to enjoy the awesome arcade action (Donkey Kong? Are you kidding me?), but I noticed plenty of other participants enjoying the free fun.

Bathed in the warm glow of old school arcade goodness (photo courtesy of AIGA Colorado)

Other big pluses included with the ticket price:

• Plenty of free Sobe and Izze (thoughtful, non-alcoholic choices for those disinclined to cash in their drink tickets for Odell’s tasty beer)
• Three slices of pizza by the talented folks at Basic Kneads Pizza
• A cool letterpress poster commemorating the event (which we forgot to pick up…drat)
• Endless amounts of Popchips
• Breakdancing performances by Streetside Dance
• An unexpected marriage proposal (she said yes)

Cell phones (not really) optional

AIGA Colorado (the event’s coordinators) introduced QR codes and online bidding through eBay for many of this year’s entries. This was a neat concept that made the event more interactive; however, it had a few drawbacks that we feel are worth mentioning:

• Those without smart phones (admittedly a small and shrinking percentage of people) couldn’t bid on the internet-only boards
• An eBay account was required for online bidding.
• To see the current bid, you had to scan the board’s QR code. If you’re tracking multiple internet only boards, this means constantly scanning codes and waiting for eBay to load; much slower than reading a bid sheet.
• Using a phone to place a bid is more cumbersome than pencil and paper. I actually lost out on a board because of this.

All that being said, I liked the idea of QR codes and think Bordo Bello should consider bringing them back next year.

Our submissions

In our previous post, we previewed the two boards we were having printed for this year’s event. Here are shots of both hanging on the wall:

Me, posing near my board

Brennan's board, post bidding

The booty

I don’t know if our winning bids are technically “booty” (since we didn’t pirate them from Her Majesty’s Navy), but we think they’re fantastic.

Our winning boards, on display in our studio

Wrap up

If you missed this year’s event, you can live vicariously by visiting the Bordo Bello 2011 Flickr page. We’ll certainly be back for next year’s event, and really look forward to seeing how it evolves and improves in 2012.

Our lead graphic designer, Brennan, designed & illustrated this radical pink and green zombie deck aptly titled “Run, Kids, Run!”.

Lead web designer & developer, Ryan, designed this deck (“Le Tweet”) which pokes fun at Twitter and social media culture, his twittering bird fully equipped with beret, baguette, and self-importance.

If you have not yet done so, be sure to grab tickets for Bordo Bello 2011 over on their website: BordoBello.com (tickets are $15 online, and $20 at the door). Last year was a great event, and we can’t wait to see how the fine folks with AIGA have topped themselves this year!

A sample of the brushes in this pack.

Previews

Here’s a peek at what’s included (not all brushes are shown at actual size):

License

These brushes are licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

In plain English: these brushes are only suitable for use in personal, non-commercial projects. If you like them, or if you use any of them in your work, we’d love to hear about it.

Download

Click here to download the brush pack (289 kb).

Visitors can search different categories of lodging including On Mountain, Downtown, Homes or Condos.  Vacation-goers looking for great deals on a wide range of rental properties, from affordable to 5-star luxury lodging can search the website to find a variety of options.

Screenshots from the new website:

Check out the private ski home rentals

The website includes some exceptionally beautiful private ski home rentals.  Visit the Steamboat Lodging website for photos of these beautiful Steamboat properties, and for exceptional lodging deals.

Continue reading to check out some of our favorite photos from the shoot, and view more on Jackie’s blog: http://www.selahphotography.org/creative-headshot-photographer-denver/

In an effort to save my fellow developers some time, I present the following solution.

A working demonstration

Before you get into the solution, you might want to view a working demo. This demo meets all of the requirements laid out in the next section.

The problem

If you’re reading this, chances are good that you have the following three requirements:

• I want to do Cufón font replacement on my main navigation
• Some or all of my navigation items will be drop-downs
• I only want to do font replacement on the top level items; the nested list items should be unchanged

Additionally, I also wanted to do the following:

• Apply a nice text-shadow to replaced text
• Keep top level anchors highlighted while hovering on their drop-downs

The solution

You can view the source code of the demo page, or read on.

The HTML

Your first task is to create a nice, standard, nested list:

<nav> <ul> <li>
         <a href="#">Movies</a>
 <ul> <li>
               <a href="#">2010 Oscar Nominees</a>
 <ul> <li><a href="#">True Grit</a></li> <li><a href="#">Jeff Bridges</a></li>  <li><a href="#">Hailee Steinfeld</a></li> </ul> </li> <li>  <a href="#">2010 Oscar Winners</a>  <ul> <li><a href="#">The King's Speech</a></li> <li><a href="#">Colin Firth</a></li>  </ul> </li> </ul> </li>  <!-- (see demo source code for the rest) -->  </ul> </nav>

The CSS

Next up: some basic styling. This code is also available on the demo page; just view the source code to grab it.

a.fly { background:#b2ab9b url(fly-arrow.gif) 175px center no-repeat; }

li:hover > a { background:#dfd7ca; color:#c00; }

li:hover > a.fly { background:#dfd7ca url(fly-arrow-hover.gif) 175px center no-repeat; }

nav > ul {
   float:left;
   list-style:none;
   margin:0 0 50px;
   padding:0;
   position:relative;
   width:100%;
   z-index:500; }

nav > ul ul { list-style:none; margin-left:0; padding:0; }

nav > ul li { float:left; position:relative; }

nav > ul a, nav > ul a:visited {
   background:#b2ab9b;
   border:1px solid #fff;
   border-width:0 1px 1px 0;
   color:#000;
   display:block;
   font:14px Georgia, Times, serif;
   height:23px;
   line-height:23px;
   padding:5px 20px;
   text-decoration:none;
   width:160px; }

nav > ul ul { display:none; }

nav > ul li:hover > ul { display:block; left:201px; position:absolute; top:0; }

nav > ul > li:hover > ul { left:0; top:34px; }

The JavaScript

Place this code block after your main Cufón scripts (see the documentation):

Cufon.replace('nav > ul > li', {
   fontFamily: 'Adelle Basic Rg',
   hover: true,
   hoverables: { li: true },
   ignore: { ul: true },
   textShadow: '1px 1px #fff' });

Everything explained

• The Cufon.replace() function above uses the CSS child selector to target the top level list items in your main <ul>. 
• The fontFamily option tells Cufón which font to use. This is only required if you are using Cufón to replace more than one font.
• By default, Cufón does not respect CSS hover properties, so we enable it by setting hover to true.
• Without the hoverables option, the top level links will retain their hover styling after hovering over a submenu and then leaving.
• The child selector alone is not enough; Cufón will replace all of your list items, so we tell it to ignore nested lists.
• Finally, we add a little textShadow. We do this here because Cufón will not read it from our CSS.

Remember that Cufón does not support the “blur” option of text-shadow, which means you’ll have to settle for relatively hard-looking shadows. In the code block above, I’ve only specified the X- and Y-offset and the shadow color.

This code has been tested in Firefox 4, IE 8, Chrome 10, and Safari 4.

We were excited for the opportunity to delve a bit deeper into our successful, client-pleasing redesign.

Getty Images’ Photos.com features high-quality redesigns, particularly, successful website facelifts. When they first approached us saying that they wanted to feature one of our redesigns on their website and Facebook fan page, we were certainly excited; it was then a matter of choosing which redesign to feature.

Professional Ponds Website: BEFORE

As a studio, we take pride in each and every project we take on. Often times, website redesigns can be some of the most challenging and yet satisfying types of projects in that the client knows what’s not working and needs you to fix it. After some thought, we all agreed that the redesign of Professional Ponds (www.professionalponds.com) was a notably rewarding redesign.

Professional Ponds Website: AFTER

Check out our case study of the Professional Ponds website redesign at photosdotcom.posterous.com/professional-ponds.