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>
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!…
I did a project this past spring for the libraries at the California College of Arts where I converted their New Materials Library database from a legacy system to the libraries’ catalog. It just got unveiled this week: http://library.cca.edu/search~S6 (search for keyword=air to get some results)
I wanted to change the message of the add-to-cart confirmation popup message on the gench site.
I’m using the Commerce Kickstart distribution of Drupal. Utilizing the Theme Devel module, I can see that a contributed module named commerce_add_to_cart_confirmation is delivering the message text I want to change.
Thanks to my newly minted DrupalizeMe knowledge, I know I can override a contributed module’s function(s) from the theme layer. So I find the function responsible for the message in profiles/commerce_kickstart/modules/contrib/commerce_add_to_cart_confirmation/commerce_add_to_cart_confirmation.rules.inc. I copy & paste the function into my theme’s template.php file. I preface the name of the pasted function with the name of my theme followed by an underscore (genchstyle_). I change the message text, save my new function, clear my cache and load the confirmation message: no change. Why? Continue reading
It’s true what they say about the fastest way to get out of a funk is to help others.
I’m volunteering this week to teach a group of tweens Drupal. We had a blast yesterday – what a great bunch of individuals.
None of the students have prior site building experience, but by the end of our first day, each of them had created their own Drupal 7 site. They spun-up their own dev sites on Pantheon, installed 3 modules, created content and new content types, created page and block views, learned how to use blocks and mastered menus. Continue reading
The Wall Street Journal has an interesting article this morning…
Apple Tests Larger Screens for iPhones, iPads
It got me to thinking about responsive design, specifically the matter of using breakpoints vs. fluid layouts. Continue reading
Re-styling for responsive design is a ton of re-work. It’s much easier to build a website correctly the first time! I’ve still got about a day and a half of css tweaking ahead of me, but here are a few concrete tips for avoiding the pain I am experiencing…
1) Whenever possible, style repeatable components (e.g., menus and block views) so they’ll look good as they adapt to your responsive breakpoints.
Here is a sidebar component that is not very flexible. I will have to write and test separate css code for each breakpoint to make it work with my responsive layout…
I’m excited to see this white paper on PCI compliance published today. This couldn’t be better timing for me, as I plan to spend the next few days on final shopping cart QA and security checks for the gench site.
It looks like most of the recommendations are pretty straightforward, but the big take-away is that I have to make sure the shared hosting service for the new gench e-commerce site is PCI DSS compliant. Something tells me earthlink probably isn’t compliant (their support guy once asked me for my password!!!).
My client is reluctant to move the gench site to another hosting provider, but we may have to if we want to avoid the huge fines and headaches non-compliance could entail.
Here’s a lesson on how NOT to design a responsive website.
Don’t wait until the end of the project to think about it. Thinking about how your site will look and behave on mobile devices should be the first step in planning and designing a site. It should continue to be forefront in your mind during every layout and feature decision, especially anything having to do with menus and navigation.
When I started the gench site, I knew I wanted it to be responsive, so I did my homework and based the genchstyle theme on Omega. This was a good move, but the last time in the project that I focused on responsiveness. As I built and styled the site, I told myself “I’ll tweak the design for mobile devices once I get the ‘basic’ site built.” BIG mistake! Continue reading