css

Making your current Drupal theme responsive, simply

Submitted by Jeff Geerling on April 1, 2012 - 10:19pm

For a few of my smaller sites (like my portfolio website, www.jeffgeerling.com), I've had a little todo item on my list for the past year or so to make the them 'more responsive'—mostly meaning "make it legible on an iPhone or comparable Android phone". Most tablets I've used render traditional 960px layouts appreciably well, including the iPad, Kindle Fire, Samsung Galaxy Tab, etc., so I want to just focus on making the websites usable on smartphones.

What we had, and what we're going for (which one seems more readable and user-friendly on a small screen?):

Life is a Prayer.com - Responsive Design (Before)    Life is a Prayer.com - Responsive Design (After)

I'll show you how I quickly (in less than half an hour) added a <meta> tag to the site's <head> tag to instruct mobile phones on the width of my site, and how I added a simple @media query to my theme's stylesheet to apply a few layout rules to make the design of the site better for mobile phones.

Using hook_init() to include CSS and JS files

Submitted by Jeff Geerling on December 28, 2010 - 2:21pm

For some time, I've been using the most hackish ways of including custom CSS and Javascript in my site via themes and custom modules. The problem has been (at least, in Drupal 6) that the hook_preprocess_page() function, inside which I'd really like to include my drupal_add_css() and drupal_add_js() functions, due to the fact that it's easy to see what page I'm on, or what kind of page I'm on, is not able to add CSS or JS to the page, due to the order in which the hooks are fired.

I've often just put my JS and CSS includes (via the drupal hooks) into the end of my custom module file, instead of inside a function at all.

However, a much cleaner way to include your CSS and JS is inside your own implementation of hook_init(). For example:

Adding Module Stylesheets using drupal_add_css()

Submitted by Jeff Geerling on August 27, 2009 - 12:58pm

A couple days ago, when building a quick site with limited functionality (basically a pretty front end to a database website), I ran into a hiccup with my custom module/theme for the site, which caused me to scratch my head for a few minutes.

In my custom module (called 'idcards'), I added a stylesheet for a couple forms on the site using the drupal_add_css() function:

/**
 * Implementation of drupal_add_css()
 */
drupal_add_css(drupal_get_path('module', 'idcards') .'/idcards.css');

Later on in the development, I added a custom theme (based off a Zen subtheme I use for many smaller sites), and in that custom theme's .info file, I added a stylesheet named idcards.css.

When I cleared all the caches, I noticed the custom form styling (added by the module's idcards.css file) was missing, and on further investigation, I found that the module's idcards.css file was not being added to the pages!

Luckily for me, this is a small site, so I pretty quickly intuited that it was probably a namespace collision of some sort, and I renamed the module's file to idcards-forms.css. This fixed the issue for me, and now both stylesheets are happily living together. But just throught I'd share this tip in case anyone else encounters this problem: Make sure each one of your site's stylesheets (whether added by a module, your template.php file, or your theme's .info file) has a distinct name.

Let's Get Through the PHPTemplates!

Submitted by Jeff Geerling on June 19, 2009 - 8:16pm

I just finished rolling a patch for fixing node.tpl.php in Drupal 7 over on the Drupal.org issue queue; hopefully it's ready to be rolled into core, as it's been weeks months since that particular issue was started. Page.tpl.php is already complete. We still have a few more to go, including comment.tpl.php, block.tpl.php and a bunch of little .tpl.php files.

I think Drupal 7 is going to be the best release of Drupal yet, in terms of being able to have a lot of appeal to non-programmers/techies. I set up my first ever full-fledged Wordpress site a few days ago, and it was super-easy to get things going (although also severely limited in what it could do, compared to a base Drupal install with Views and CCK), choose a new theme, change some settings, and hit the ground running.

By making it easier for themers and designers to quickly customize a Drupal site to their liking, and by having some themes included with core that are either (a) beautiful and functional or (b) great for starter themes (like zen, stark, or genesis... all which are great for different reasons), we can grow the Drupal design community exponentially.

Pages

Subscribe to RSS - css