Phil Little's other other business

screenshot plgMy client Phil Little, for whom I've built several other sites over the past 4 years or so, called me when he wanted to start selling a modern part for a vintage military rifle. I don't recall whether it was his idea or mine to go with a single-page site, but it sure works well. All information on the product is instantly available without page switching.

Phil is old-school and likes to talk to his customers personally to make sure they're happy, so we didn't set up e-commerce. 

phillittleguns.com

A rush job for RUSH Boutique

screenshot rushThe members of my family who operate Margo Mundi's just opened a new boutique store in downtown St. Cloud in very short order. They didn't have time yet to put together content for a full site, so I worked from the logo design (by my regular designer Kristina Sippel) and came up with this one-pager.

It's a Joomla 3 site, so it's all set up to add a blog, and I've installed a newsletter extension so they can start building a user list right away. 

(site no longer active due to company sale)

Create responsive menu items in Joomla with Bootstrap's CSS classes

I recently enabled responsive capability in one of my pro-bono sites using RocketTheme's Metropolis template. I made the requisite image size changes for the new larger max width layout, and I did a little customization using media queries to make sure my showcase resized nicely. 

One area where I ran into trouble was with the very nice JEvents extension, which I had previously used to display a monthly calendar layout in my fixed-width site. Obviously a monthly view has a column for each day of the week, each of which must be wide enough to show event titles, etc. I found that the 7-column table didn't want to shrink far enough to fit within the site's layout below Gantry's 768px breakpoint. I decided that I wanted to make the monthly calendar view the default for tablets and larger, and to show a weekly view for phones. 

Joomla 2.5+ uses Twitter's Bootstrap JavaScript/CSS library, which provides a set of utility CSS classes for showing and hiding content based on screen size. To show one menu item for phones, and another for tablets and PCs, here's what I did:

  • Create a menu item for screen sizes smaller than 768px and point it to your article or view.
  • Give it a CSS class of 'visible-phone'. In a RocketTheme template, this field is provided in the appropriate menu type options (Dropdown or Splitmenu).
  • Create a menu item for larger screen sizes pointing to that article or view.
  • Give this item a CSS class of 'hidden-phone'.

It may be helpful to add reminders using the Note field on these menu items that they'll only display in some cases. 

Now my visitors see a monthly calendar layout on tablets, larger phones and desktops, and they see a weekly view on phones, which fits much more nicely in the available width. All users see a useful calendar view. 

To create menu items for phone/tablet and PC, use the classes .hidden-desktop and .visible-desktop, respectively. 

Beta testing Universal Playground's Flickr Suite Extension for Joomla

After years of creating my own photo galleries I finally settled on Flickr Pro as a repository and server for this site. I can publish sets right from Lightroom, and there's a great Joomla extension that lets me load sets anywhere on the site with a snippet of markup: Flickr Suite from Universal Playground. 

After contacting the developer, Jasper Dik, about a duplicate billing issue (which was apparently my fault), I learned that he was in the process of building a new, responsive version of Flickr Suite. I offered to help test it and Jasper sent me his install packages. 

Read more: Beta testing Universal Playground's Flickr Suite Extension for Joomla

A web presence on short notice: GTI Companies

screenshot gtiMy father works as a construction superintendent, and when he learned of a local businessman's need for a website in a hurry, he suggested the gentleman contact me. Glen did, and after a few days of design and content back-and-forth we had put together a respectable representation of his company. 

Building on Joomla's latest stable 3.0.x release, we started with a template by RocketTheme and worked out a logo graphic, coordinating colors, some suitable copy and lots of project photos. Descriptions of projects and mention of some of GTI's more prominent local customers help them stand out from the crowd. We'll continue to add content and refine Glen's message down the road. 

gticompanies.com

Add a Blogger-like collapsible archive block to your Drupal 7 site

A few years back I took advantage of Jack O'Connor's great how-to article to create a collapsible content archive block in Drupal 6. I'm now developing a Drupal 7 site and needed to do the same type of thing. Here's basically the same process, but for Drupal 7. This article assumes that you've installed the Views module (including its prerequisite, Chaos tools suite), and understand how to add JavaScript and a custom stylesheet to your Drupal site. You can see a working example here.

Update: Emilio commented below with a nice way to add node counts to each month. I've added his suggestions to my procedure. 

1. Create a new View

Here's the view exported to a text file. Import it as a new view and you can skip to step 3. Otherwise, carry on...

  • Navigate to the Views page (/admin/structure/views/add) and create a new view (figure 1)drupal7-collapsible-archive1
  • Give the view a name and a description (optional). I called mine 'Collapsible Archive'.
  • Set your desired Show parameters. I went with 'Show Content of type All tagged with [empty] sorted by Newest first' since my archive is for blog articles.
  • Uncheck 'Create a page' and check 'Create a block'
  • Give the block a title and set 'Display format' to 'HTML list'
  • Leave 'Use a pager' unchecked and click 'Continue & edit'

Read more: Add a Blogger-like collapsible archive block to your Drupal 7 site

Subcategories

iwarblk guildwht    profile for isherwood on Stack Exchange, a network of free, community-driven Q&A sites