Customizing Drupal - Part 3 Blocks and Menus

So by  now, you've gone ahead an installed some modules. Attempted to configure them, and of course, checked out some of the documentation on Drupal.org. You wouldn't want me to tell you EVERYthing? Would you?

Once you have a theme that you like, it is important to realize that each theme has a number of zones, or "regions". In these regions, you can place blocks that have everything from html code, menues, or extensions of your modules. It is important to keep in mind that every theme's regions will be different, and for the purpose of this tutorial, we will be using Drupal's default theme, Garland. It should be noted, that by default, there are already two blocks enabled on your site, when you first install, which are the login block, and the navigation block.

One of the first things I do when I install Drupal is to install the DHTML menus module, which will then give you the option to switch out your navigation block with a more user friendly, java-script enabled block, that wont refresh your page so much.

If you havn't already, go to the dhtml menu page, and download the tar file to your /var/www/sites/default/modules directory. Then untar the module and enable it under the administer-->Site building-->Modules menu. If you are not familiar with this process, please refer to last week's tutorial.

Now lets head over to our Blocks configuration page and see what we have in store. Navigate to Administer-->Site building-->Blocks. The first thing I would like you to notice is the regions that you can enable blocks are now highlighted within the page, such as "header" "right sidebar" "left sidebar" "content" and "footer".

Scroll down and take a look at your available blocks. Depending on what modules you have enabled, you will see various blocks. Feel free to enable them by assigning them to a region, then give them a weight. The lighter the weight, the higher up on the page the block will be. For instance, if I want my navigation bar to always be at the very top of the right sidebar, I would give it a weight of -10, which would make it as light as it would go. Get it? Got it? Play with it and you will see the heavier the block the lower it will show up on the page.

Lets go ahead and replace our regular Navigation block with the DHTML: Navigation block. Go ahead and change the Navigation block to <none> in the region column, and change the DHTML: Navigation to one of the sidebar regions. I am going to change mine to right sidebar, and give it a weight of 10, because I like my navigation bar to be at the bottom of my right sidebar. When you get the settings you want, hit "Save blocks" at the bottom.

You should see your settings save, and change on the page. And you should see the new DHTML: Navigation block move to wherever you located it on the page. Experiment with some of the other blocks, and try configuring a few. If you click on configure, you can specify who can see the blocks, and some of the block behaviour. This comes in handy if you only want blocks to show up on certain pages. Also please note that you can create new blocks on this page at the top, where the tab says add block. Here, you can put custom HTML  or php code to put just about anything you want in the block. You could even put some nice flash bling in here.

Lets now navigate over to the Menus administration page. This is one of the more intimidating features of drupal when you first see it, and I believe they are making some changes in Drupal 6 to make it a bit friendlier. Head over to Administer-->Site Building-->Menus.  Notice that navigation menu we keep talking about is here again. Also notice there are primary links here, but it is empty. This is the page where you can add new menus, and modify existing ones. I personally like to restrict the navigation menu to administrators of the site only, and then create custom menus using this page for the users of the site. Lets go ahead and add a link to the primary links.

Click add item. I'm going to add a link to the linux basement web site. You can add a link to whatever you want. Just enter the title, description of the link, and the path. Please note, that if the path is local to the site, you do not need to use the full URL. For instance, if i wanted to link to the admin portion of the site, I would just put admin for the path, not http://localhost/admin. Notice you can pick the parent item here, and weight works just like blocks, the more weight, the higher it will be in the list, or more to the left in this instance. Click submit when you are finished.

You should notice you now have a link up in the top right of your web site, which is where the primary links are located for the garland theme. Cool huh? Add as many links as you'd like, and the more weight they have, the more to the right they will be.

Now lets add a new menu. I'm going to call mine, more cool stuff. So go to add menu at the top of the menus admin page. Enter the name of the new Menu you want to create, and click submit.

Great, now you should have a new empty menu. Lets go ahead and add a link in there so that we can show off our new menu. I'm going to add my favorite podcasts by adding new items to the menu just like we did above.

Once you are done submitting, you now have a nice list of links to your favorite podcasts! Great, but now what? How do people get to see this list? The good news is, you already know the answer. Lets head back over to our block administration at Administer-->site building-->blocks.

Scroll down until you see the name of your menu you just created. That's right, when you created the new menu, Drupal went ahead and created a block for you, so that your content will show up in that block automatically. Cool huh? Now we enable the block just like we did before. Place it wherever you want to on your page. I will place mine at the very top of the right sidebar. I'm going to use the DHTML version of the block. In this case, it does not matter, but keep in mind you can make hierarchal menus. For instance, I can make a menu item called Podcasts, and put these podcasts under it, so that it is a javascript dropdown of the podcasts when you click on it. I will let you experiment with that on your own, but it is a good thing to keep in mind.

That's it! You should now have a new menu inside of a new block on your website. Keep exploring and don't forget to look around at drupal.org.