By Wombats

This article was posted on my old site on February 2, 2007. To view previous comments, you can visit the old page as long as it stands. The modules have changed, but the concepts should remain. Perhaps I can post an updated tutorial some day...

Purpose: Describe the thought processes and modules used to design the front page of Ubercart.org, a site designed to be both an information portal and user/developer community.

Modules explained: Drupal's own content type creation, Views, and Panels.

Honorable mentions: Deciding on what to display, visual aids, "enhancing" the forums and Navigation menu.

Well, the goal of this article is to explain to you how I constructed the front page at http://www.ubercart.org using some awesome contributed modules, a little bit of HTML, and some great free icons. We're preparing the place to be a community site, and a straight list of recent nodes just wouldn't cut it. I also didn't want to settle for a simple node that I update with new information every so often, so I finally got around to downloading the latest versions of the Panels and Views modules and set to work.

Preliminaries...

Before I actually walk you through the steps, let me explain a little bit of the brainstorming stage. In considering the Ubercart project, I knew I would need a front page that would make information about the project itself easily accessible. To cater to newcomers, I wanted an easy, appealing way to display all the things a member of the community is able to do. For the regulars, I also wanted a way for them to see at a glance the latest happenings at the site. We need a site that will dispense information about Ubercart and help others get involved using and contributing to the project.

You'll need to think through similar things as you prepare the front page for your community. Do I need to display information about what's possible at my site? (Often a good idea, rarely a bad one.) If users are contributing content, how can I make sure others have easy access to it? Are there a lot of things to do at my site, and if so how will people ever find out about them?

I'll tell you right now that I'm bad at this. I'm extremely happy with the front page there now, but I'm no expert. It took several rough drafts being scratched out on paper before I came up with a division of site activities that I liked. Something a member of the forums there mentioned in the past was to use verbs instead of nouns (he was commenting on the admin interface for Ubercart itself at the time). Use topic headings and links that describe to people what they can do, not what they'll see. So, I decided on the division you see across the top. People can come to Ubercart.org to Learn, Download, Participate, and Share. All verbs, all fairly descriptive, and each accompanied by links to different aspects of the site.

Another weak point of mine is graphic design. Visual clues are extremely helpful, though, and make digesting all the text on the page a little easier. I found the Tango Icon Gallery to be extremely helpful for this. They didn't have an Ubercart category for icons, but I went there equipped with my verbs and a general idea of what icons might be used to represent them. I think I only had to tweak the book, as theirs has a nice red @ on the front. No big... it's a lot easier to erase an @ than to draw a book! Once you've got your categories of things to do at your site, I recommend browsing that gallery or some other to add visual clues to your site. (For a great example of using visual aids to describe a site, you really ought to check out what gurpartap's did at his site, http://www.sikhgears.com. He's using Tango icons, too. )

I also knew I wanted an easier way to display announcements than to keep updating an HTML unordered list on a node! That's what I used at first, and it was getting old. I'm using a CMS after all... surely there was a better way. To fill things out, I also figured I'd add a list of recent forum posts. With all that said, I'll dive into what I did to make this front page happen!

Creating a Content Type

First, I knew that with Drupal 5.x came the ability to create content types on the fly. This was the perfect solution for my announcements. Browse to admin/content/types and you'll see a link at the top which I clicked to create a new content type. I set the name and type in the form to News and news respectively, and gave a short one-line description for other site administrators to see. Just for kicks I changed the title field label to Headline, unchecked "Promoted to front page", disabled comments and attachments, and hit submit. Now I could browse to node/add and create new News post whenever I wanted. No longer did I have to rely on editing some HTML somewhere... we were rocking announcements with Drupal style.

Using the Views Module (overview)

But how was I going to list them? I wanted a concise way for users to see the headline, have a link to the article, and maybe see an extra bit of information or two about the post. Guys and gals, this is where Views becomes your best friend. The Views module (http://drupal.org/project/Views) lets you easily create blocks and pages that will format lists of nodes for display. The Views UI module lets you create these lists by specifying the display type, what fields will be displayed, what nodes to filter out, and how to order them. There are more options, but I think that covers all the bases for our site.

So, I enabled the Views module, browsed to admin/build/views, and clicked the Add link at the top. At first, the add form can seem a little overwhelming. If you tackle it bit by bit, though, it's not complicated at all. For every View, you can display a page and a block. The page can be browsed to by a custom URL, and the block can be displayed in a sidebar (or in our case, a panel). When you first click add, you simply need to give your view a name and define who can access it. For both the News and Forum Activity sections on our front page, I wanted a block to display just a few nodes and a page to display the whole list.

First, I expanded the page fieldset by clicking on the word Page. I checked the box to provide the page view and filled in the URL field. For the News view, I wanted the page to display a standard listing of node teasers, so I chose the appropriate View Type. For the Forum Activity view, I wanted to show a lot more topics in a single screen so I went with the table view. I set the other information as need be and moved on by collapsing the Page fieldset and expanding the Block fieldset. The block for both of these would be just a compact list of nodes, so I set them both to table view. I wanted a More Link that would lead to the page so users could browse the whole list if they wanted, so I checked that box. After filling out the information there, I collapsed the Block fieldset and moved on.

Expanding the Fields fieldset displays a table that you can begin to fill up! You simply have to select the fields from the select box that you want to display in your view and hit the Add Field button. For the News view, I started by adding the fields Node: Title, Node: Created Time, and Node: Author Name. The Label for a table view will be displayed in the table's header row. I set these to what you see on our front page. I didn't mess with any of the other settings except the Handler and Option for the Node: Create Time field. I just wanted to display the date, so I set the Handler to As Custom Date and put in the Option m/d/y. To see what syntax to use for custom dates, check out the PHP.net page for the functiondate. (The recent forum activity block uses Comment: Last Comment Time with Handler set to As Time Ago to show when the last person posted.) When all that was done, I collapsed the fieldset.

Next I wanted to make sure my views displayed only News type nodes and Forum type nodes respectively. I skipped the Arguments fieldset and expanded Filters. I added the filter Node: Type for each and set it to the appropriate type. Mission accomplished, I collapsed that fieldset and skipped down to the Sort Criteria. To list News items with the latest one first, I added the criteria of Node: Created Time and set its Order to Descending. (For forum posts, I used Comment: Last Comment Date set to Descending.) With that set, I was finished with the views and hit submit!

Well.. that was a whirlwind tour of Views that hardly touches on all there is to do. If you've ever thought, "I'd like a block to display ____ type nodes" or "I need a page with a sortable list of ____ type nodes", Views is the module for you! Use my description as a starting point and go to town. You can also view the documentation at Drupal.org (http://drupal.org/handbook/modules/views).

Using the Panels Module

So, here we are with blocks and pages that display latest additions to the site. How in the world would I get those blocks to display in the content section of the front page? Well, I didn't want to write my own theme, and I knew I wanted another section for general site links... so I recalled hearing about this module called Panels being the updated version of the old Dashboard (which I never used). I downloaded the module from http://drupal.org/project/panels and once again set to work.

Installing the module and browsing to admin/build/panels brings you to a basic page that lists the panel layouts you have created. To get started with a new one, you simply click Add at the top and come to a very easy to understand screen. You need to pick which layout to use from those represented. I chose the Two column stacked layout for Ubercart.org and determined not to use the bottom content area. When choosing which layout to use, you should be careful not to use one that will squish your content too much! If you use Google anayltics, you can easily track the screen resolution stats for people browsing your site. I designed our site with people using 1024 x 768 in mind, and that seems to be the smallest resolution that's widely used. (I hope most people have moved on from the glory days of 800x600!)

So, clicking on the image brings you to a screen where you can add general information for the layout and then fill the content areas. I gave the front page there a title of "What to Do at Ubercart.org..." and path of "home". What you fill in is largely up to you... those just seemed to work.

For the content areas, I first used the Add content form to fill in the left and right columns. To do this, I clicked the Left side radio button, selected the Views - news_block option from the select box, and clicked Add block. I repeated this for the right column by selecting the Right side radio button and Views: forum_block from the select list.

I knew I was going to use some sort of HTML table to display the top section. For that section, then, I selected the Top radio button and clicked the Add custom button without entering a title. As you add content to sections, you'll notice that the content forms have been getting filled in with icons and fieldsets for each thing we add. This last time, the word Custom: appeared for the Top content area with a Configure fieldset. Clicking this will display a very simple form to you. Here I simply set the Input format to Full HTML and toyed with the table's HTML until I liked it. If you really want to see what I used, view the page's source. Each section of the table is its own table displaying the icon, title, and links. This is all tucked inside a div that defines the background color and border. I'm a big fan of visual aids for separating content. I matched the colors with other parts of my theme (a custom colored Garland) by copying/pasting a screenshot into Fireworks and using the eye drop tool to find the color codes. There has to be an easier way! It worked, though, and the simple color difference helps the display and separation of this information box from the rest of the page.

Once the page layout was complete, I saved it and browsed on over to the Site information form at admin/settings/site-information. Here I set the Default front page to home, the URL I chose for my new page layout.

Closing Comments and Freebies

Well, that's about all there was to it. The whole process took me a few hours, from brainstorming, to creating the views, to setting up the page layout. I hope this write-up teaches you something new or at least brings modules to your attention that you hadn't discovered yet.

Two quick notes regarding the site... Because we expect the forums to be crucial to the continued development of the Ubercart project, we weren't satisfied with the standard Drupal forums. We installed and tweaked the flatforum theme/module files to our liking, though there's still room for improvement. If you plan to use flatforum with Garland, be sure to go to your Garland settings page and re-save the configuration after making the changes to styles.css. (The changes you put in that file for flatforum need to be compiled into the stylesheet Garland is actually using for the site.) I also grabbed the User Badges and Private Message modules for our use, and I hope to clean up the badge display and private message user interface in the near future.

Also, I highly recommend doing something about the navigation menu for your site. There should be a separation between general content navigation and account action pages. Perhaps I'll discuss this in some other article in more detail... You can see at Ubercart I have simply created a second menu named Navigation that is displayed to all users. Links to content pages or sections of the site are placed in here. The traditional navigation block is still used, it just doesn't display till a user logs into the site and gets access to the links it contains. Once they do, this menu pops up beneath the site Navigation menu with links to their account, private message inbox, content creation links, etc. Don't spice up your front page and leave your menus feeling neglected!

Let me know if you'd like to know more about the site setup at Ubercart.org or if I made some sort of glaring mistake in this article. Thanks for reading! Ciao.

(I've noticed that the two column layout isn't displaying properly in IE7, so check it out in Firefox to see what it's supposed to look like. I'll try to figure out the IE bug on Monday when I'm back at work...)