Blog

Rounded corners have become very popular and could be very easy to implement using CSS3. However as we know, some widely used browsers won’t give support to CSS3, making our life more complicated and our code more ugly.

Luckily, there are ways to get around for browser limitations! There are numerous CSS-only techniques that vary in complexity and flexibility. In addition to the numerous javascript techniques that are usually easier to implement. This is my favorite one:

The “jQuery Corner Plugin” (jquery.malsup.com/corner/) will add divs to the element with a solid color background to hide the original corners and create the illusion of rounded corners. What I really like about the “jQuery Corner Plugin” is that it detects if your browser gives support to CSS3 and will use the appropriate CSS if possible.

Here’s how to implement it:

Quicktabs has quickly become one of my favorite Drupal modules of all time. To think that I was actually wasting time creating tabs by using jQuery plugins, and writing custom AJAX. Creating tabbed content is one of the most popular techniques used on the web today, and with Quicktabs it has never been easier to add tabs to your Drupal site - even with AJAX!

First you'll want to install Quicktabs

Once you have Quicktabs installed, there are a couple of ways to generate tabs. You can do it through the Drupal interface, or you can do it programmatically, but first, make sure you have some content that you want to show in tabs! Quicktabs works with your existing content. You can tab between views, blocks, nodes, or a mixture of these.

For this demo, we'll use Views and set up 2 displays filtered by a certain taxonomy term. We will then create a tab that displays nodes of each taxonomy term respectively. Make sure you have some taxonomy terms to choose from for each post. Then you'll want to create a view called "my_listing", or whatever makes sense for you.

When working with large websites and web-applications the number of files on your theme folder can grow quickly, and if you're not organized it can get very messy . As a result you’ll find yourself spending a lot more time looking for bits of code every time you have to change or update something.

Here are some tips to help keep you organized.

File Structure:

On Drupal a couple of files have to be on your theme rood folder:

• - page.tpl.php
• - node.tpl.php
• - template.php
• - themename.info
• - comment.tpl.php

If your file doesn't have to be on the theme root folder, it should be organized with similar files on subfolders. Here is what we typically use:

A lot of times designers forget to make sure that their websites print out clean and readable. This means, when a user wants to archive a website as a hard copy, so they can reference it later, it can get messy. Instead of clicking some random print button on the page, most people will print by doing the most obvious: File > Print. In this blog I will explain how easy it is to theme a printed page.

Note: Some important things people print off the web are coupons and purchase orders, which is normally reminded on the web page.

The printed page will show the navigation menu system, a random blank white page, a bunch of ads, which form elements such as input boxes, and useless images. The content that most people really want is just a section on the cluttered page of ink. The solution is to clean these pages up, make it readable for even your grandmother, and most of all to save paper.

First step is to add a print.css file to all your printed pages, to do this is to add the code to your theme_name.info file.

There are several ways you can theme a view on Drupal, and this tutorial will describe a simple and quick way to accomplish just that. I assume that you’re familiar to working with Views and CCK, so I won’t go in much detail on the process of creating the view and content type.

For this example I’m creating a block simple view that will display a teaser for the 3 latest blog posts.

First thing we’ll have to do is create the actual template file on the themes folder (I’d recommend that you create a folder for all the views, but this is optional). We’ll start by going to the views interface to find out how that file should be named.

On the Views interface select “Theme: information” under “Basic Settings”.

You’ll see a list of the possible files you can use listed from the most general(full page)on top to the most specific on the bottom. We’re going to be selecting one option on the “Row Output”. If you don’t need to be too specific about theming that view, you can use the second option. Copy the file name and create that file on your themes folder.

Back to the view interface again. Select “rescan template files” and the file you created should be highlighted on the interface.

Here is where the real theming begins. We’re going to create the variables we need on the template file. In this case, I’ll be creating $title and $body variables.

Go to your views interface under “fields.” However, the links to the fields you want to use are found at the status bar, on the bottom of the browser. We’re looking for the information on the last section of the link. For the Title field, my link looks like this: http://domainname.com/admin/build/views/nojs/config-item/footer_blog/block_1/field/title so the information we’re looking for is “title”.

Knowing that you can set up or title variable like this: $title = $fields['title']->content; And repeating the process for the body will get you something like this: $body = $fields['body']->content;

Now that you have your variables set, can go ahead and theme your file at will! You’ll find yourself dealing with a very simple and clean template file!

Do you have a different technique to theme your views? Share with us!

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.

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.

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!

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.

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.