Showing posts with label design. Show all posts
Showing posts with label design. Show all posts

Handling linked primary and secundary menus in Drupal

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.

nicolasdecorte.be V2 officially down

Yes…it’s true… I finally decided to put the old website down.
While I was reviewing the progress of the new website, it came up to me that it became time to leave the past behind and start looking at the future. Sounds quite philosophic, doesn’t it?
According to my (current) planning, I should be able to put the new site online on the first of November, which is in about two months. As this blog is also progressing, I noticed an increased number of visitors to www.nicolasdecorte.be who ended up viewing the old site. This is why I thought it would be nicer to put an under construction message instead.
The thing with under construction messages is that they all look alike: a couple of roadwork signs and some text saying that the website can’t be entered. BORING! Everybody has seen this a thousand times and to be honest, how many times do you return to see if there’s already any progress? Probably not much huh…
Therefore I wanted something else, something that wouldn’t just scare the visitor away.
After renting the Hollywood movie the Bank Job last week, I noticed the cover of the DVD was in newspaper style. It consisted of small articles and pictures which attracted my attention and made me want to have a closer look.
Now I knew what I wanted: an under construction page in newspaper style. I didn’t want to put too much work in it, after all it’s just a temporary page, but still I wanted it to look professional, so I started searching the internet for some kind of template. Soon I found exactly what I wanted on the GTemplates website.

Please have a look at www.nicolasdecorte.be and let me know what you think about it. Do you think it’s better that a regular under construction page? Are you attracted to read at least one article?
The only fear I have is that when you see this first, it might look like this is the actual website and not like it’s under construction. You probably have to read a bit before you notice that this is only temporary…

For those who still want to enjoy the old version, it’s available at www.nicolasdecorte.be/V2

CMS Themes

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.

Where do we find themes
The first resource of themes is the website of your CMS:
Drupal:
http://drupal.org/project/Themes
Wordpress:
http://wordpress.org/extend/themes/
This should already get you started, I guess.

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/

Paysites:
themestock:
http://www.themestock.com/
websitetemplates.bz:
http://www.websitetemplates.bz/wordpress-themes.html

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 now see 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.

Have fun developing!

Joomla vs Drupal vs Wordpress

It’s been already four years ago, I guess, when I created nicolasdecorte.be v1. Based on school knowledge, the web pages were totally created in HTML written in Notepad, only using Macromedia Dreamweaver when I really couldn’t figure out how to design a certain item. I was a hardcore programmer, and I was proud of it!

It didn’t take very long before I found out that this wasn’t something to be very proud of. All I did was spending loads and loads of time on reinventing the hot water. Even worse, I reinvented the cold water when the hot water already existed. So that meant it was time for v2. The same website, the same content, but written in PHP 5. Using professional tools as Dreamweaver and Zend Studio, and implementing scripts I found on the internet, the website became more professional and more dynamic.

Some time ago, I figured that it was time for v3. I had some ideas of changes in mind, but instead of starting to program immediately, I planned some hours of research before the first code would be written. And this is how I found out about CMS software.
After some reading about this subject, I found out that there are lots of software suppliers who each have their own CMS masterpiece, but there are three that seem to be used very often: Joomla, Drupal and Wordpress.

If you’re reading this post because you finally want to figure out which one is the ultimate CMS software package that you must use, I’ll have to disappoint you. Maybe you know more about this stuff than I do. I only had a first experience with both Joomla and Drupal yet, but I read a lot about this item, and what I will bring you here are my personal ideas.

If you haven’t stopped reading now… great!

So what I did next was also install Wordpress, and then try to create a basic website in all three CMS.
The test phase could be divided in following categories:

Installation
All three CMS are kind of similar in installation. You download a zip file from the website and extract it to the source directory of your website. Then you need to create a database (If you don’t already have one), and you have to tell your CMS which database it needs to use. Joomla has a user interface where you can set your database settings, this interface starts automatically when first starting Joomla. For both Drupal and Wordpress you need to adjust a config file where you put your database settings. When this is configured, all three CMS have an installation script which does the database setup.
Guides:
Joomla:
http://help.joomla.org/ghop/feb2008/task048/joomla_15_quickstart.pdf
Drupal:
http://drupal.org/getting-started/install
Wordpress:
http://codex.wordpress.org/Installing_WordPress

First time use
Now wasn’t that easy? But beware…It might get a bit confusing now.
The first thing you need to do is to log on to the administrator page, and have a look at the possibilities. This can be done by using following urls:
Joomla: http:///administrator/index.php
Drupal: http:///?q=admin
Wordpress: http:///wp-admin/
(replace “” by the server/location where you installed your CMS)

There you are, this is where your website will be born. Quite overwhelming, isn’t it?
What’s important to know is that the purpose of every CMS is the same: to let you create a website. They give you the possibility to create structured content, create a specific design and use several add-ons (e.g. calendars, RSS,…).
But still there’s a big difference between them. First of all in the way of working, and secondly in what they can or can’t handle.

Structured content
That the content of your website is the most important part is something I probably don’t have to tell you. But how do we structure this content? Let’s take my website as an example, I will have four main topics: photography, writing, travelling and web development. So I need a way to categorize everything I publish under one of these topics. But after I’ll be posting for some time, maybe I have too much content for one specific category, so I’ll need to create subcategories. E.g. Color photography and black & white photography. Each CMS has its own way of structuring content:

Joomla:
Joomla works with sections and categories. Each section can contain several categories, and the content can be linked to a certain category.

Drupal:
Drupal uses something they call “taxonomy”. The point is that you make a tree structures (called “vocabularies”), in which you categorize your content.
So, I’ll create four vocabularies: Writing, photography, travelling and web development, and then I divide these vocabularies into terms, which can also be divided in other terms, and so on.
Here’s an example of a “Photography” vocabulary:

Photography
      Portraits
            Color
            Black and White
      Landscapes

This can go on and on as far as you want to categorize.
A good tutorial on taxonomy can be found here

Wordpress:
In Wordpress, you have categories. The usage is quite similar to Drupal, you create a main category (e.g. photography), and then you create sub categories with that main category as parent.

As you can see, there are different ways of categorizing your content, so it’s very important to take some time to think this over before you start creating content. In the beginning, this might sound boring and useless, but when you become a Problogger, managing thousands of articles, blog posts, stories, pictures, videos and so on, you’ll thank me for this.

Content types
When you reread my previous sentence, you already see that there are different types of content that can be on your website: blog posts, stories, articles,… You have already categorized them under your different categories or sections or whatever you prefer to call it, but that’s not enough. You want them to look differently from each other and you want each content type to have other functionalities. E.g. my “about me” page should be static, my blog posts should be able to receive comments, …

Again, the different CMS have different ways to handle this. They all have certain content types installed by default and the option to add new “non-standard” content types. A short overview:

Joomla:
By default, Joomla works with “articles”, and that seems to be the only content type you can use. However, there seem to be lots of modules and plug-ins which you can use within your article to create an image gallery, make it look like a blog post, and so on.

Drupal:
Drupal has Pages and Stories by default. They both look similar, but pages should be used for static content (e.g. the “about me” section) and Stories should be used for sections that are updated regularly (e.g. a blog). Furthermore, you can install several modules like blog (so each user can have his own blog), image gallery, and so on.

Wordpress:
In Wordpress, several content types are ready to use be default: Posts, Pages, Media, Links and Comments. Pages can be compared with the pages in Drupal, and Posts are similar to Drupal’s Stories. Media is used for images, videos,… Comments manages the comments that are given to a certain post, and Links speaks for itself, I guess, it’s for managing links (duh!)

Themes
Now that you’ve created some content (with the right content type of course), and you categorized it, it’s time for some designing (woohoo!)
If you’re not used to web development (html, php,…) that’s not a big problem, because thousands of others have done the designing for you. It’s called “Themes”.
Each CMS comes with its standard theme, which is normally the same theme as they use on the CMS website. But you probably want things to be more personal, right? That’s why there are lots of free themes available. They can be found on the website of your CMS, but also on specialized websites like proWebCreative , osskins and many others.

Still not personal enough? No problem! You can also build a theme yourself. Or start from a certain theme and make adjustments to it. But this requires at least some basic skills in html, css, php and javascript.

This topic will certainly be discussed in future posts.

Modules/plug-ins/add-ons/extensions
Each CMS has a standard installation package which includes the basic components to get you started. But there’s more…much more! There are lots of pieces of software available that add certain functionalities to your CMS, these are called: extensions (Joomla), modules (Joomla, Drupal), plug-ins (Joomla, Wordpress) or add-ons (Drupal).
A good example is a forum module. It’s not available by default, but you can easily download and implement it. Another example is an image gallery.

Just like themes, these modules are available on the website of the CMS, and on a lot of specialized websites (just google it). And like themes you can also program them yourself, if you have the knowledge.

Conclusion
So far my first comparison of the three major CMS. This is only the top of the iceberg, but I guess it gives a wide overview of what CMS are and what’s the main difference.
So now the big question: Which one will I use?
Based on my experience up to now, I think that I won’t use Joomla. It looks a bit like a mess to me.
So there are two left: Drupal and Wordpress.
Word’s on the street that you need to use Wordpress if you want to create a blog. If you want to create a “real” website, you need to go for Drupal. This means that I should go for Drupal... But I’m not going to decide yet. I’ll test Drupal and Wordpress further, and then I’ll see which one will fit best to me.

Another conclusion that could be made is that there is no such thing as the “best” CMS. If you read about this on forums, you’ll find Joomla-people, Drupal-people and Wordpress-people. I guess I’m just not a Joomla-person myself.