Though not fully supported in all browsers, CSS3 pseudo class selectors are really powerful and exciting. I’ve been using the basic CSS pseudo classes (e.g., a:hover) for ages, but I’ve only recently started using other pseudo classes, particularly the position/number-based ones.
A few people have asked me how I made the new gench site responsive, meaning its layout adjusts depending on the width of the browser or device. You can see it in action here by simply resizing your browser window (or flip your mobile device from horizontal to vertical or vice versa).
Part of the answer is that I created a Drupal subtheme based on a responsive theme (Omega – but there are others). This is taking care of the actual media queries that create the various sized layouts or “breakpoints.”
For the music label site I’m creating, the client wants to prevent people from ordering items no longer in stock, but he wants to continue displaying them as they represent his discography.
For a high-volume Drupal Commerce site, you’re going to want to write or use a custom module for inventory control (like Commerce Stock), but that seemed like overkill for this project.
I decided to deploy a solution that doesn’t require any additional modules – just a little jQuery and the addition of a status field to my product variation type.
Please Note: This example was based on version 3.2.1 of the font-awesome library. I’m not sure when this occurred, but the current version of the font-aewsome library (4.0.3) has changed all the class names for their icons. The example in this posting will work with version 3.2.1, but if you prefer to use the most recent font-awesome library, you should substitute the word ‘icon’ in class names with ‘fa’
For example, in 4.0.3, you would use…
<i class="fa-play fa-rotate-90"></i>
etc…
A commonly desired feature on websites is an expanding/collapsing list, with a rotating arrow button.
I want this feature on both the gench FAQ and album review pages, and I want the currently expanded section to collapse if another section is expanded or if the currently expanded heading is clicked on again.
The gench site I’m building has an inventory of a few dozen albums for sale (mostly CDs).
Once I created all the products and styled the product display, I was pretty happy with my online store except that it lacked functionality for flipping through the products. I want the gench store to feel a bit like flipping through the LP bin at a used record store.
I briefly considered creating a paginated (or paged) view, with just one product per page. In some situations, this may have worked fine, but it would have broken my lovely content-aware view blocks which display songs, reviews and artists for the currently displayed album. Maybe there is a way to do this, but I couldn’t figure it out (at least not quickly).
Plus, it seemed like this wouldn’t be that difficult to accomplish with some PHP and jQuery.
This is what I created…
Here’s how I did it…
So I had this nice jPlayer playlist all set up on the gench site. I’m using song content types plus Drupal’s Views and jPlayer modules to create the playlist. Swell, but the client wants a little play icon and a download button for each track.
jQuery to the rescue!…
banoodle land 