When you’re a web designer, or any other kind of programmer you’ll probably be familiar with following problem. You’re thinking about your newest design, making sketches, writing down your thoughts perform some tests and there it is… The Light… You have a superb idea!
And there you go, you start implementing. You program the screens, the backbone and whatever other thing you need to program, and then it’s time for the big moment. You press the button (or enter or anything), you’re expecting the best, the really best, ‘because let’s face it… you are the best… But the system says: “Nope, ain’t gonna do it”.
Yes, it’s sad but true, you got an error.
So you curse a little, browse through the code to see if you can find anything that shouldn’t be there, you start downloading half the internet, you curse a little more, you smoke 10 cigarettes in one hour like that’s going to help, and at the end… hopefully… you find a solution. Now that ruined all the fun didn’t it? Isn’t that one of those situations where you want to rip your head off?
Now here’s a case study:
In Drupal, I wanted to implement a fancy image gallery. As I’m not the kind of guy who wants to invent the warm water all over again (you may call it lazy if you want), I started browsing the web for solutions. And there it was, the image gallery I’d been dreaming of. So I read the manual, implemented the module, everything was ready to upload the first image, and BAM! An error:
Unable to create scaled Thumbnail image.
No man lost, maybe this module isn’t exactly bug-free, so I downloaded another fancy image gallery module (although not as fancy as the first one), implemented it, but again the system said “Screw you, ain’t gonna happen”.
So I started browsing the internet, downloaded thousand and one different tools, patches, and all other crap, but still nothing.
But then I found a forum, which stated that this error actually didn’t have anything to do with Drupal, but with my PHP installation… When I thought I was a specialist who could install Apache with PHP with my eyes closed I may have done something wrong after all. Next thing I knew I was messing up my installation, editing my PHP.ini file, adding new lines, deleting them again, adding them again, starting the web server, stopping it, restarting it… You know the drill, don’t you?
So are you wondering what solved the problem? Well… I was editing the wrong php.ini file. Whenever I found out which file was actually used it was piece of cake, and the upload of images worked well.
Isn’t that always the case? It’s those small stupid things which keep you up all night searching for a solution. It happens very rarely that I spend my time searching for a problem that appears to be a bug in the software. 99 percent of the time it’s just one stupid mistake.
That really makes me wanting to screw my head loose and put it on a stick!
Here it is…my first Drupal tutorial! The reason why I wrote this is because it took me about a day to figure out how I could link different secondary menus to certain primary menus. I couldn’t find much helpful information on the web, so here goes…
What I wanted to do is following:
On the top pane of the website I have the primary menu with several items. Then on the left pane, I wanted different secondary menus, displayed depending on the choice in the primary menu.
Are you still with me?
I’ll give an example: Let’s say that my primary menu consists of the options “Articles” and “Photography”. When someone presses the Photography button, a sub menu needs to appear in the left pane with the options “Travel photos”, “Portraits” and “Projects”. When someone presses the button “Articles”, I want a sub menu in the left pane with “Travel articles” and “Web design articles”. Do you see what I mean?
Basic knowledge To be able to follow this tutorial, I expect that you had a first touch and feel of Drupal. It might also be useful if you already played a bit with menus and blocks.
Also note that this tutorial is for Drupal v6.*
Enabling the Path module First of all you need to enable the “Path” module.
Go to: Administer > Site building > Modules
In the category “core-optional”, search for the Path module, check it and press Save.
The primary menu First we want to create our primary menu which will appear on top of the screen. We will use the “primary links” menu which is installed by default.
Go to: Administer > Site building > Menus > Primary links
Go to the tab Add item
We don’t have a page or story yet, so in the path field, we’ll just fill out “node/add”, as proposed by Drupal. In the Menu link title field we fill out “Photography”, and we leave the other options as they are. To finish we press the save button.
Now we do the same for the Articles menu. We can set the path again to “node/add”.
Note that by changing the weight of your menu item, you select where it will appear in the menu. The lighter the item, the higher (or more to the left because we work with a horizontal menu) it will appear in the menu. For Photography we took weight “0”, so if we take e.g. “5” for Articles, the Photography item will appear first and the Articles item will appear last. Let’s say we take “-5” for Articles, the order will be the other way around.
* HINT: don’t let your weights follow directly on each other. Maybe later you’ll want to insert a new item between two existing items, and if you don’t have any “free” weights in between, you’ll need to change the weight of your other items too.
Now go to the tab List items, and you’ll see your newly created menu items.
The next step is to determine where your primary menu should be shown.
Go to:Administer > Site building > Blocks
Search for the Primary links block and change the region to “header”. You’ll notice that the block now appears in the header section.
Don’t forget to press the Save button.
The secondary menus The next step is to create our secondary menus. The most logical solution seems to be the use of the predefined “Secondary links” menu, right? Wrong! Because we want to create several different secondary menus, we’ll need to create our own menus.
Let’s start with the submenu for Articles.
Go to: Administer > Site building > Menus
Go to the tab Add menus
We give our menu a name and a title, and we press Save. Now a new empty menu has been created.
You might also want to do the same for every other submenu you want to create (e.g. Photography).
Note that we didn’t add any items to the menu (yet).
Next thing we need to do is define the location of this menu, which we do (similarly to the primary item) with blocks.
Go to: Administer > Site building > Blocks
You’ll notice that by creating the Articles menu, the system also created an articles block. You change the region of this block to “Left sidebar”.
Now press the configure operation of your Articles block (it’s next to region).
This is where we can set when a certain block is or isn’t shown. Let us have a look at the possibilities:
User specific visibility settings: Custom visibility settings This is where you can define if a user can hide a block or not. We don’t want our users to hide our submenu, so we take the option “Users cannot control whether or not they see this block”.
Role specific visibility settings: Show block of specific roles Who should be able to see our submenu? Everyone, I guess… So we just don’t check anything, because nothing seems to mean everything here.
Page specific visibility settings: Show block on specific pages
This is where it gets interesting. Here’s where we define on which pages the menu should be shown.
I can already think of a couple pages that’ll certainly need this menu: the default “Articles” page, the default “Travel articles” page and the default “Web design articles” page. But then what? For each article, we’ll probably create a new page, does this mean that after creating every new article, we’ll need to add it to this setting? That seems very time annoying and time consuming… Indeed, but there’s a trick!
Let’s just leave this setting as it is for now, press Save, and we’ll come back to this later.
Create content for the submenu Now let us start creating the default pages for our articles.
First things first, the default “Articles” page, which appears when the Articles button in the primary menu is pressed.
Go to: Create content > Page Give the page a title and enter some content in the body
All other settings can be left as they are, except for the URL path settings where you fill something like “articles/articles”.
What we’re doing here is a way of grouping our pages. The first part (before the slash) is the name of the group, the second part is the name of the page. I propose that you group your pages similar to your primary menu items, but you can go as far in this as you want, creating several subgroups. E.g. if you’re planning to write a lot of articles about different CMS, you might want to create “articles/webdev/CMS/Drupal” and “articles/webdev/CMS/Wordpress”. You can think this all over before you start, but if you feel like extending your groups later, it’s not a big deal.
You press the Save button, and your first page has been created.
Now we want to link this page to the “Articles” button in our primary menu.
Go to: Administer > Site building > Menus > Primary links
Press the edit operation for the Articles menu item, and change the path to “articles/articles”, or whatever url path you defined previously.
Press save, and your page is linked.
Now let us create a page for your first submenu item “Travel articles”.
Go to: Create content > Page
Similar to the Articles page, you enter a title and some content.
Remember that we didn’t create new items in our submenu? This is because we can do that directly here, which can save us quite some time.
You click on menu settings and fill out following settings:
- Menu link title: how you want to call your submenu item (here it’s “Travel Articles”)
- Parent item: Select the name of your self-created submenu (here it’s “Articles”)
- Weight: similar as in the primary menu, you should already know how this works, right?
Now the only thing that we still need to do is define the URL path. We put it in the same group as the Articles page, but we call the page “travel-articles”.
Press the Save button, and our second page has been created. Now you can do the same for all other pages, don’t forget to group them using URL path, and to enter Menu settings, if you want your page to appear as a menu item.
The secondary menus (part deux) Let’s get back to where we left earlier.
Go to: Administer > Site building > Blocks
First of all make sure that the “Articles” block is put in the Left sidebar region. If this is not the case, change the region and press Save.
Choose the configure operation of the Articles block. Scroll down to “Page specific visibility settings: Show block on specific pages”, and choose the option “Show on only the listed pages”.
Then you have field where you need to enter all the pages where this submenu should be shown, but because we’ve grouped our pages using “URL path”, we can easily use a wildcard to define our pages. Here the wildcard will be “articles/*”
Now the submenu will be shown on every page where the URL path starts with “articles/”.
Testing Of course we now want to see if it works. Let’s follow this test case:
1. In the top (primary) menu, press “Articles”. Now your default Articles page should appear, and on the left pane you should see the Articles submenu with the items you’ve created.
2. Press on an item in the Articles submenu (e.g. “Travel articles”). Your default page for that item should appear, and the Articles submenu is still available on the left pane.
3. Press in the top menu on “Photography”. Now you should see whatever page you’ve set as default for Photography (if you following this manual, it will probably be “node/add”), and the Articles submenu disappeared. Similar to Articles, you’ll need to create a submenu for Photography.
In case this test process failed: You might have done something wrong and you’ll need to start all over again.
In case this test process is successful but it doesn’t do what you expected: I’m sorry to tell you that you probably spent a lot of time reading the wrong tutorial.
In any case, you can certainly post a comment with your ideas and/or doubts.
In my Joomla vs Drupal vs Wordpress post , I’ve already talked about “themes”. The purpose of this post is to tell you a bit more about what they are, where you find them, how you install them, and last but certainly not least how to personalize them.
What are themes?
Themes define the design of your website, how it looks to you and to your visitors.
We have to admit, You may have such interesting, funny or just great content, when the design of your website stinks, you’re very likely to lose visitors.
Each CMS comes with one or more themes in the default installation. Unfortunately this will most probably be the theme that’s used on the website of that CMS. When you know a bit about CMS, you’ll probably recognize the blue design of Drupal, or the grey and white design of Wordpress out of thousands. And let us be honest, we don’t want our website to look like the Drupal or Wordpress site. So we need another design, another theme.
If you don’t find what you like on the CMS websites, don’t worry yet, there are lots of other websites which provide themes for free or for a small contribution. A few examples:
Free sites: cmstheme.net: http://www.cmstheme.net freecmstemplates.com: http://www.freecmstemplates.com/ …
Still haven’t found what you’re looking for? It’s possible that you already had a certain design in mind, which is so unique that it doesn’t exist in a theme yet. There are several options left. If you want to pay for it, there are several companies and web designers who are specialized in the creation of themes. If you want to pay less, you can also purchase software that makes the creation of themes more easy (e.g. premiumwp). I must add here that I never tried such a software packet before, but that it seems to me like you have a lot of limitations (a certain amount of backgrounds, fonts,…). My personal opinion is not to use this kind of software. If you need to have your theme fast, buy it, if you have the time, create it yourself.
How to install Drupal themes In this part I’ll only handle the installation of themes in Drupal, but the procedure is more or less the same for every other CMS (just keep in mind that in Joomla themes are called “templates”).
First thing to do is download the theme you like. You will normally receive some kind of compact archive (zip, tar.gz,…), which you extract to the “themes” folder of your Drupal installation.
Afterwards go to Administer > Site building > Themes
Find the theme you’ve just installed and check the “enabled” box. If you also want to start using the theme immediately, check the “default” button. After pressing Save, you’ll see your layout change. Now that was easy, wasn’t it?
How to personalize Drupal themes You’ve downloaded your theme, you’ve installed it successfully, but probably there are still some things that are not 100% like you want them. For example you want a different font, different colors, a different background image, and so on.
Well here’s some good news: themes are fully open source, which means you have access to all of the code, and you’re able and authorized to change it. Of course, depending on what you like to change, this requires some knowledge of CSS, HTML, PHP and/or Javascript.
But let’s not scare you away yet, first we’ll have a look at the file structure of themes, to see how things work.
page.tpl.php This is the main template , together with style.css it forms the foundations of your theme.
The first thing you notice when you open this file is that it consists of PHP statements with embedded HTML. This is where the “what goes where” takes place.
When you go through this file, you’ll notice the use of a lot of variables ($site_name, $primary_links,…). These are values that come from the Drupal administration. An overview of these standard variables can be found on the Drupal website
style.css
In case you don’t know what a CSS is: it’s Cascaded Style Sheets. Which means that this is where your styling takes place. Here you define your fonts, colors, etc for each single part of your theme
the other .tpl.php files These files contain the design of different parts of your theme, normally the name already tells you which part it’s about:
block.tpl.php : design of blocks
comment.tpl.php: design of comments
page.tpl.php: design of pages
and so on.
All of these files receive their styles from style.css
logo.png
The logo file. If you want a different logo, just replace this file
the .info file As of Drupal 6, this file is obligatory. It contains some basic information of your theme.
With only those files, you should be able to create your own theme. Of course there’s more than that. When you browse through the file structure of more sophisticated themes, you’ll notice some more php of inc files (which are called from the tpl.php files), images (background, border,…), fonts, …
HINT: before you start messing up your theme (if you didn’t already), I propose that you first create your own theme as a copy.
This happens as follows:
You create a new subfolder in the sites/all/themes folder (note that this is different from the standard theme folder!) and you call it whatever you want to call your theme. E.g. mytheme.
You copy the content of the folder of the theme that you want to edit into your “mytheme” folder.
You rename the info file to mytheme.info (of course replace “mytheme” by your theme name).
You edit the info file, and wherever you find the name of the original theme, replace it by “mytheme” (normally this is only for “$id” and “name”).
And that’s that. When you go to Administer > Site building > Themes, you should nowsee your new theme.
It might also be handy to take a backup of your theme folder once and a while.
HINT: If you’re new to Drupal theme development, I propose that you start with the blue marine theme. This is quite a basic one, which only contains the basic files.
As you may remember from a previous post Joomla vs Drupal vs Wordpress, I started with very little knowledge of CSM software, I picked the three famous ones, installed them on my web server and I started messing around. After a while I was quite convinced that I wanted to use either Drupal or Wordpress, so farewell Joomla!
It looks a bit like a reality show, doesn’t it?
Now let me welcome you ladies and gentlemen to our big finale, with only two candidates in the running…On my left hand: Drupal and on my right hand: Wordpress!
In the meanwhile, I have been using both CMS, and I tried to perform similar tests, but both succeeded more or less in all tests. One thing that did occur to me is that Wordpress seems to be a bit more user friendly than Drupal. It might be just me, but everything I tried went a little bit faster in Wordpress.
A second thing that I found quite annoying is that the text editor in Drupal stinks. It really does. It’s just a plain text editor which you can compare with MS Notepad. It’s not that I need something very fancy, but some basics are always welcome. When you look at the editor in Wordpress, you’ll find functionalities like lists, hyperlinks, spellchecker, etc.
Now it seems that I’m not the only one who’s annoyed by this, because there are already a lot of Rich Text Editor modules which you can implement in Drupal, for example FCKeditor and WYMeditor. Nick Lewis has written a nice comparison of a couple of these editors:
Basically, this means I’m still nowhere. Both CMS work fine for me, be it with some adjustments where necessary. So I’ll need to take things to a higher level: Have a look what the professionals think about this. Luckily the internet is full of comparisons between different CMS, and especially between Drupal and Wordpress.
The opinion of the professionals is more or less the same everywhere:
“If you want to create a website around a blog, use Wordpress. If you want a ‘real’ website, use Drupal”.
As I see things now, the blog will be the central point of my website, it’ll be updated regularly, and the articles and photo pages will be more static. So I should go for Wordpress. On the other hand, I don’t know what the future will bring, if I want more sophisticated photo galleries, I will get more possibilities in Drupal, same thing for video galleries, and maybe later I want even more stuff like a forum or a web shop. Therefore my final decision will go to Drupal. In the beginning I’ll need to do more than I should have to do with Wordpress, but in the end I hope it’ll be worth the choice.
Ladies and gentlemen, boys and girls! Our winner is … (drum ruffle) … Drupal!
Also nice to know: In the Open Source CMS Awards, Drupal has been overall winner in 2007 and 2008 (the winners of 2009 are selected November 9th), and Wordpress has won the award for “Best Open Source Social Networking Content Management System” in 2007 (This category didn’t exist anymore in 2008).
