CSS Optimization Tips

2 Comments
CSS Optimization Tips

Do you want to reduce your css files to help page load times, well here are a few helpful tips that will become second nature to you after repetitive usage.

1) Shorten Hex Colors.
If you need to have a color that uses the same character such as #FFFFFF. You can simply write #FFF. This works anytime you need to specify color.

/* Original*/
.header {
  background: #FFFFF;
  background: white;
}

/* Optimize */
.header {
  background: #FFF;
}

2) Combining margin-top, margin-bottom, margin-left, and margin-right. Instead of having 4 lines for each margin or padding you can combine them into one. I always remember the order by thinking it goes clockwise, starting at the top followed by right then bottom and finally left.

Drupal Theming RSS Feed Views

5 Comments

A lot of RSS feeds are very plain and boring, which sometimes results to unsubscriptions or plain out ignoring your feed. Web designers should spend some time to make these more readable and more useful to bring in more traffic.

A few reasons why we should include images in RSS feeds is that it draws in users and also gives a visual representation of content. Think of it as a blog landing page. Another reason is that a few sites use aggregators that pull your RSS feeds so that will lead to more traffic.

I had this problem for the longest time of theming and adding images to a RSS feed View. I always got the default feed of just the title and some teaser text. It was too plain, no dates, and no images even when I added fields to the view. Googling for sample code and solutions was not much of any help, so here my purposed solution for all you readers!

drupal_add_js and drupal_add_css in hook_form_alter and hook_form in Drupal 6

6 Comments

The idea of adding custom CSS or JS to a form is a very simple task. With one call
to drupal_add_css, a form can be themed any which way. A call to drupal_add_js can add
effects to a form for a better user experience.

Adding CSS using drupal_add_css allows for CSS preprocessing, which is the process of
aggregating a bunch of separate CSS files into one file that is then compressed by
removing all extraneous white space. This will save on page load time and will bypass
the limit that IE has on the amount of CSS files that can be imported. Using drupal_add_js
also allows you to cache the JS files as well. Using these two functions in Drupal 5
and Drupal 6 are almost identical. However in Drupal 6, the parameters for each of the
functions are passed in an associative array.

With the release of Drupal 6, the form API was slightly changed as well. Here's a
link to the complete list of changes in the FAPI (Form API): http://drupal.org/node/144132.
A big change in Drupal 6 was the fact that forms were being cached. So adding CSS files and JS
files in hook_form_alter or hook_form would lead to issues if the form was reloaded after failing validation.

Theming Forms in Drupal 6

1 Comment

I don't know why but there really aren't a whole lot of resources out there for theming forms in Drupal 6. Maybe it is because overall people try their best to avoid Drupal's dreaded forms just because of how cumbersome they can get. It can be difficult to understand the form API at first but again once past the intimidation you'll wonder why you ever avoided them in the first place. I'm going to use Drupal's registration form as an example for this post. The question that will be answered here is "How can I make my registration form look more elgant and friendly?". You want people to sign up for your site...don't scare them away.