Way Cool Web Design Blog

Vertical Centering of Tableless HTML Using CSS and jQuery

John — Wed, 17 Feb 2010 10:31:35 -0500

I've seen other vertical text centering techniques and used them successfully in certain situations. There seemed to be other situations where I couldn't get the techniques to work. I figured I'd give jQuery a try and see if I could work it out more easily for a group of objects. For my purposes, creating a list of links, I needed to use a fixed height for the <li>.

Final should look something like this:

So you'll need a list. I was making clickable buttons with backgrounds so my HTML/CSS may have more tags than you'll need. I ended up needing some <span> tags inside the <a> tags, such as:

<div class="vertical1">
<ul>
<li><a href="#"><span>Item 1</span></a></li>
<li><a href="#"><span>Item 2 is a little bit longer</span></a></li>
<li><a href="#"><span>Item 3 is ridiculously long. Hopefully it feels more important now that it has used so much space.</span></a></li>
</ul>
</div>

For CSS, use something like the below. I had needed:
.vertical1 ul,
.vertical1 li   {
   margin: 0;
   padding: 0;
   }
.vertical1 li   {
   background: none;
   height: 135px;
   width: 224px;
   position: relative;
   margin-top: 9px;
   }
.vertical1 a   {
   color: #000;
   height: 135px;
   width: 224px;
   display: block;
   background: none orange;
   border: none;
   }
.vertical1 a:hover   {
   background-position: 0 -135px;
   }
.vertical1 span   {
   position: absolute;
   display: block;
   width: 140px;
   margin-left: 15px;
   line-height: 1.1111em;
   font-size: 12px;
   }

You'll need jQuery. Use something like this:
$(".vertical1 li").each(function () {
       li_height = $(this).height();
       span_height = $(this).find("span").height();
       halfway = (li_height/2) - (span_height/2);
       $(this).find("span").css("top", halfway);
    });

Drupal Jquery JCarousel Implementation

John — Sun, 31 Jan 2010 17:59:39 -0500

A recent project put us in need of a carousel. Jcarousel provided the basics for what we needed however we had to add some additional love to get the carousel working the way the client envisioned.

We had to theme the block.tpl file for the carousel, using PHP to achieve our goal. The biggest issue we needed to address was that the carousel would need to start on the same thumbnail (depending on a page's parent) whether it was on a parent or child page. So even though jcarousel provides a way to start the carousel on a particular thumbnail, we needed a dynamic way to do that since the "home" thumbnail changes throughout the site depending on which project you are on. If you land on Parent A or on anyof Parent A's child pages, the carousel needed to start withProject A's thumbnail.

First we needed to control project parents vs. project children. We used 2 content types for this, with a selector on the child type so we could choose which project parent it belonged to. We added a CCK field to project parents allowing them to choose a carousel ordering.

Next we created a view that pulled the parents as a simple HTML list. Each parent also has a huge background photo, so we used imagecache to create a thumbnail from this for the carousel. The view was shown in a block, whose view-view-list--carousel--block.tpl.php file we themed. We loaded the node form the block:

$nodeid = (arg(0) == 'node' && is_numeric(arg(1)))?arg(1):FALSE;
 $node = node_load($nodeid); $nid = $node->nid;

...and depending on the node type there was further code. If it was a child we looked for its parent.

Once we determined the parent (or found out we were already on a parent), we could grab the carousel order from the CCK field of the project we were on so we could tell jcarousel to $start on that item. We also used jquery to provide an active class to the current list item since Drupal wouldn't necessarily do that if were on a child page.

Using the technique above we were able to create a carousel that starts at an appropriate place even if we aren't specifically on that page. As long as we're on any of a project's pages, the carousel starts correctly and we can even style it as such with the addition of an appropriate active class.

You may still be able to see the carousel at QuinnEvans.com in the project section.

Customize the Ubercart Email Based on Product

John — Wed, 23 Sep 2009 10:19:51 -0400

Let's learn to customize the Ubercart 2 purchase confirmation email based on product. Modifying the message is fairly straightforward, though not the most user-friendly in a Drupally sense.

What I needed was a way to customize text on the email based on what products had been purchased. I imagine this could be something added later to the node itself so that each product could have it's own text blurb added to the email when purchased, or if related to a purchased product, however I needed a quicker solution.

Find the Ubercart Email Template

In your file structure find modules/ubercart/uc_order/templates/customer.itpl.php for editing. At the top of the template add something like:
<?php foreach ($order->products as $product2) {
if ($product2->nid == 52) { $flag1 = 1; }
if ($product2->nid == 53) { $flag2 = 1; }
}
?>

You will of course need the "nid" of whatever your product nodes are. An example of this usage would be if you had a sporting goods store that sold products as well as training events like baseball camps. You could use something like this to check to see if the user had purchased a baseball glove and then insert a blurb into the email about upcoming baseball training camps.

In my case I was selling events and wanted a way to remind the user of the directions to the event. Since the events could be held in different buildings and/or rooms we needed to provide text based on the event.

Multiple Event Registration Using Drupal & Ubercart Attributes

John — Wed, 23 Sep 2009 09:37:37 -0400

Although not as flexible as Webform, we decided to use Ubercart Attributes to enable multiple event registration using Drupal. Here's a quick look into how to use it yourself. We use Drupal 6 the Ubercart 2 module.

This solution may not be suitable if you have advanced needs for information gathering or special user tracking, however if your need is simply to gather some info and allow a user to pay in advance for an event registration, this does the trick.

If you haven't yet, create an Event product class in Ubercart via the "Manage Classes" page (/admin/store/products/classes). Create a test event node we can play with.

In /admin/store/attributes click "add an attribute", for example, "Attendee Name". Choose "text field". Now let's edit your test event node. Near the top of the edit screen is the extra navigation Ubercart adds to product content types ("classes"). Choose "Attributes". Click the "add attributes form" link. You will see a box containing all the Attributes you created earlier. If you only created the one "Attendee Name" attribute then there will only be one attribute in this box. Select it and click the "add attributes" button. This attribute will now show up in your "add to cart" area of the node.

All that remains is some styling and you're all set!

Theming Drupal 5.x, or, How To Thumb-Wrestle Drupal 5 Into Submission and Lay It Low At Your Mighty Feet, Part 3

John — Wed, 23 Sep 2009 09:55:27 -0400

Parts 1 and 2 revealed some wonderful theming advice however it is now time for the best piece of Drupal 5 theming advice I can give, summed up in a few small words:

Use Drupal 6

Yep, there it is. The best advice I can give is to use Drupal 6. Unfortunately Drupal 6 is no cake walk either, but it is a vast improvement over 5. I am envious of all my client's Drupal 6 sites, as this one os Drupal 5. As amazing as this site was to me when I created it, with all the glory Drupal provides, it's a dinosaur compared to 6.

Style Unordered List of Links or Menu with CSS Divider

John — Sat, 09 May 2009 11:34:15 -0400

In this article we'll discuss creating an unordered list of menu links with a pipe in between, which is an oft-used styling for navigation, particularly in the footer of a site. Of course, feel free to use whatever divider you'd like instead of a pipe, however just know that if you want pure CSS with no image used for the divider, you can only use straight lines and dotted/dashed lines. So for example if you wanted to use the colon symbol (:) for your divider you'd need an image unless you wanted to try the not-so-well-supported :after trick.

I still often see folks coding lists of links with no ul/li structure. Usually they just do something like:
<a href="#">link 1</a> | <a href="#">link 2</a> |<a href="#">link 3</a>

Proper Unordered List Styling

Lists of menu links should always be in list format, because its a list. So it should remain UL/LI format like so:

In your CSS, apply a background "pipe" image to every LI at the far left and add left padding. Then try a declaration such as: li:first-child {background:none; padding-left:0;} (your real code may vary of course since if you want to target this specific list you will need other classes involved.) This should work in FireFox and IE7/8. Other browsers such as IE6 may require jQuery or other workarounds to listen to the ":first-child" part of the declaration. Your CSS would look something like this:

ul, li { margin: 0; padding: 0; }
li { padding: 0 5px 0 9px; background: url(pipe.gif) 0 .3em no-repeat; list-style-type: none; display: inline; }

UL/LI List CSS Styling Help

You can also do the border-left way suggested above. I offered the pipe option because from years of creating sites I know that often designers do not want the pipe to be the exact height of the list item. This would often lead to extraneous spans just to get the pipe to be the "right" height that the designer wanted (and the client approved). Although a background pipe doesn't scale if the font is resized, it will keep the designers and the clients happy that you "coded it right". If you or your clients aren't picky, the border option is easier and scalable.

On a final note: doing lists this way, as inline, can lead to spacing issues because not all of the space between to items is abolished in this situation. Notice the padding declaration above is uneven (padding: 0 5px 0 9px). To get rid of all the space you'll need to float the <li> instead of changing them to inline. Then you'll need to clear the containing <ul>.

Theming the Date Module for Drupal 5

John — Fri, 08 May 2009 18:58:14 -0400

WayCoolWebDesign recently had two Drupal web sites in production at the same time that had design goals of using combined event dates. While the default display for dates running more than one day is something like "07 Apr 2009 - 12 Apr 2009" we instead needed the dates to appear shortened as "7-12 APR 2009". While the date module allows for many different lengths of dates I didn't see that this option was offered. It was time for more drastic measures.

Theming the Date Module

While I'm not certain this exactly qualifies as theming since I am not changing display code but rather some functionality. Semantics aside, thank goodness the function used to display the dates is offered as a themable function.

The function you'd look for is the "date_display_combination" function inside "date.theme" file within the Date module. Before adding this function to my template.php file I had used the normal course of choosing pretty short dates within the Drupal functionality, so I knew that dates were set to show something like "07 Apr 2009" before fiddling with the function.

Next I copied the entire function to the template.php file. I then added this block of code right after the point in the function where $date1 and $date2 have been assigned the Drupal-formatted dates (@line 15 or so):

// START:
$jbyear1 = substr($dates['value']['db']['datetime'],0,4);
$jbmonth1 = substr($dates['value']['db']['datetime'],5,2);
$jbyear2 = substr($dates['value2']['db']['datetime'],0,4);
$jbmonth2 = substr($dates['value2']['db']['datetime'],5,2);
$jbday1 = substr($dates['value']['db']['datetime'],8,2);
if (($jbyear1 == $jbyear2) && ($jbmonth1 == $jbmonth2) && ($date1 != $date2)) {
$date1 = $jbday1;
switch($date1) {
case '01': $date1='1'; break;
case '02': $date1='2'; break;
case '03': $date1='3'; break;
case '04': $date1='4'; break;
case '05': $date1='5'; break;
case '06': $date1='6'; break;
case '07': $date1='7'; break;
case '08': $date1='8'; break;
case '09': $date1='9'; break;
default: $date1=$date1; break;
}
}
// END:

More Customization of the Drupal Date Module

I'm not a heavy PHP guy so my code is never elegant. I was not hoping to solve every date issue that may come up, only this particular one. All I was hoping to achieve was that if an event date had more than one day, and the years of both dates were the same, plus the months of both dates were the same, I wanted to combine them. I could see that if Drupal wanted to output "07 Apr 2009" all I need to do was grab the first 2 digits and make that into $date1. Then I ran a switch to get rid of the annoying zero that appears when the date is a single digit 1-9.

After adding this block of code Drupal would now have the first date as a one or two digit number and the second date would be kept as the unaltered second date. Then when combined as normal they'd show the way we intended. The final piece to the puzzle was changing "5-7 Apr 2009" into "5-7 APR 2009" by using CSS text-transform: uppercase.

Nailing Down Drupal Requirements

John — Sat, 21 Mar 2009 06:30:46 -0400

Nailing down requirements is important for any web site project but it's something folks seem to forget about when building Drupal sites. Maybe it's because Drupal is so maleable, or maybe it's that people assume Drupal can do it so why bother really fleshing out the specs before building?

Not knowing the specs before building is a bad idea even if you are using the world's greatest CMS.

A simple example is quotes. Clients love quotes from people they've worked with, don't they? Heck, I love quotes too, or at least I fell in love with them while building this site.

Quotes are a great example for why you should fully flesh out requirements because they can be handled in a couple different ways. I've worked on projects where quotes were directly tied to a page, meaning when a certain page was called, the quote viewed on the page is always the same, whether it appears in the center or a column, or whatever. I've also worked on sites where the quotes were totally random. Usually this means the quotes are in a particular column but any quote could show on any page for that theme/content type. There is also this site, where some quotes are totally random and some are drawn randomaly from a smaller group. For example, the quotes in the left column of this site can be any quote pulled from all my quotes, but the center quote on project pages are randomly drawn from ones that are related to the project.

That's three distinct ways to render quotes, and while similar, they all need to be handled in a different way by Drupal. I find quotes related to a page are best handled by creating a CCK field for a content type. Random quotes can be drawn from a pool of quotes via a view. The related views can also be a view but they require a CCK type for a content type so each can be chosen as being related to a certain node.

Designing & Coding CSS Special Effects

John — Wed, 18 Mar 2009 17:29:26 -0400

Using CSS for special effects has gotten easier with better browser support for CSS and PNG graphics. Although still painful in IE6, these changes have made special effects more fun to use. Using them requires a little planning though.

If you're a true designer for the web you know that web design is not all about a pretty face for a web site. It's about planning. Planning for a user's reactions, planning for content to grow, and on it goes. So in this article we'll talk a bit about planning for and executing special effects. I'll use some real-life examples from sites I've worked on.

Special CSS Effects Using PNGs For Transparency

First up is the Reston Virginia Pet Fiesta. That's right, a party for your pets! In this design I was given a logo, so I based the design on some colours used in the logo, plus the whole fiesta vibe. The background is a sort of stucco feel but that's a fairly mundane repeating background. The special part is the jagged red line between the header and body content, echoing the jagged red line from the hat which the logo animals are wearing.

The first step here was knowing I needed something to dress up the design and to help marry the header with the body content area. Like The Dude's rug in The Big Lebowski, I needed something to tie the room together. I figured a big jagged line echoing the hat would be nice. The problems that went through my head were:

do i want to have to cut all those images for where the jagged line overlaps the header and body and left/right columns
how will i be able to get this to work with the flash piece that is supposed to show at the top of the body area?

What I decided was that I needed one graphic that had transparency. This way I would not have to cut a bunch of graphics but could instead cut one image that I could layer on top of the design. A GIF was ruled out because I didn't want to have to fuss with getting the jagged line placed EXACTLY right so the edges all matched the various colours it was overlapping, and additionally it probably wouldn't have looked good overlapping the Flash piece. The answer was to use a PNG.

Using PNG and CSS to Achieve Special Effects

Using a PNG meant now I was opening another can of worms because IE6 doesn't support PNG. In order to use them you have to use something like JQuery with PNGFix. This was OK with me because from the beginning I was planning to use JQuery, knowing the shadowed edges of the design would need PNG-power as well.

I went into Illustrator and used a brush to create a fat, irregular-edged but straight line. I then used a filter to make the line jag up and down. I then pasted this as a smart object into Photoshop. Since it remained a vector shape I could resize it without loss of clarity until it looked right in the design. Then I saved out just this jagged line as a PNG.

I created a <div> at the bottom of the HTML template for this design, using CSS to size the div. I placed the jagged line PNG inside the div, then used CSS to position the jag up in the header, overlapping the other design elements including the flash piece. Once the flash was saved out with a transparent background and the wmode was set for its embedding, the jag appears to overlap the flash piece.

Say "No" To Multiple Style Sheets

John — Wed, 18 Mar 2009 07:55:39 -0400

UPDATE: January 31, 2010... This article makes reference to the fact I previously needed to use additional style sheets to target certain browsers such as Safari or IE6. I no longer use even these additional style sheets. Instead I use the CSS Browser Selector javascript that allows me to target browsers inside my single CSS stylesheet.

So, I've had enough of the multiple style sheet thing. Actually, I had enough of it when I first heard of it, years ago when it was touted as "the right way" to go about setting up CSS. The premise is this: use one style sheet to set all elements of a browser back to ground zero, often called a "reset" style sheet; use one style sheet for fonts; use one style sheet for colors; use one for other stuff like layout.

Wow, what a pain in the ass. And I mean that from a couple viewpoints -- from having to set it up, to having to maintain it as the original coder, to having to update it as the non-original coder.

When it comes to CSS I do try to do things "the right way" because I realize in the long run some extra work or setup, etc, pays off later. For example a web site doesn't have to be "valid HTML" to run just fine in browsers. Even cross-browser sites don't necessarily "need" to be valid. We do it because it helps down the line in other ways, and because we care about doing things well as an HTML professional.

But this whole multiple style sheet issue is ridiculous. I've worked on projects where "lead" coders have demanded I work a certain way, which I honor because I've accepted the role as subordinate and its therefore a request of my client. I've seen articles from highly respected sites in the industry about multiple style sheets. But I just don't buy it.

Why So Cranky About Multiple Style Sheets?

My reasons are pretty simple. I've been on the side of the person creating those style sheets, and I've been the person who had to edit those style sheets created by others (and even created by me), and I can't possibly fathom how all those style sheets add up to a savings in time. I see strong production value and savings in time and money in using as few style sheets as possible because very simply, it is easier to track down a style to make a change if its all in one style (or as much as possible in one sheet). Multiple style sheets means knowing or searching multiple files for what might be the style you're looking to update. Big waste of time.
I've heard some of the arguments and I just can't agree. It hasn't proven to be a production value to me.

There are times when I HAVE to use separate sheets because I know of no other way to acheive certain goals, such as targeting Safari. In those cases I do have to have separate style sheets.

For your info, although the Way Cool Web Design site does NOT support IE6, you can target certain version of IE by using IE conditional comment like this:

You can also target Safari by using a malformed style sheet call:
<link type="text/nonsense" rel="stylesheet" href="safari.css" media="all">

The above situations are the some of the only times I use multiple style sheets. So, are you buying into the hype of using multiple style sheets?