Basic Drupal 7 website step-by-step: WYSIWYG, News, Menu and Slideshow

So here we go. We are new to Drupal and we want to build our first very simple website. In this tutorial, we assume that you already have Drupal core installed and a basic installation running. You know how to install new modules. We also won't look at how one can theme his website.

Admin menu

First of all, for gain of time during all the project, install the admin menu module. Disable the core Toolbar module. You have now a new drop-down administration menu at the top of your site.
Note that this step is not strictly necessary but just make things easier. Most of the people use this admin menu instead of the normal one.

WYSIWYG

Dynamic menu elements with tokens

Under construction.

Creating contextual menu items

Menu Token module allows to insert tokens into menu items title and path.

We are going to create a list of all articles published by the authenticated user using the Menu Token and Views modules.

  1. Create a view with context arguments.
  2. Go to Structure > Views and create a new view named "User Articles" that show "Content" of type "Article" and has the path "/articles".

Controlling Block Display

Author's note: the Context section of this page would benefit from screenshots. During the presentation, I was able to demo the options, but obviously that doesn't work as well with static docs. I'll add them myself in time, unless someone beats me to it. End Note

Blocks and Menus

Every time you create a menu, a corresponding block is created that displays that menu.

You can also create custom blocks at admin/structure/block/add.

Now that we have these blocks, we need to display them.

The two commonly used methods of controlling block display are the core block display functionality, or the contributed Context module. Both means achieve the same goal; the context module provides more flexibility.

Core Block display

The core block visibility settings can be accessed at admin/structure/block.

To display a block in a region, use the drop down menu for the block you want to show:

In addition to setting the region for a block, you can also set additional features by using the "configure" link visible in the above screenshot.

Creating Menu Items

Now that we have created ways to find and browse information on the site, we need to create links that allow people to find these places.

Enable Token and Menu Token modules

Create a blog menu at /admin/structure/menu/add

Click Add link put links in your menu.

Configure your menu link as shown below. The token replacements are generated by the Menu Token module.

Editing User Group and Site Navigation Menus in Julio

Overview

Julio's menus generally fall into one of two categories:

  • User Group Menus - these menus appear in the sidebars of user group landing pages;
  • Site Navigation Menus - the horizontal menus at the top of every page on the site;

You can customize both types of menus, to suit the structure of your site's content. The sections below have detailed instructions for editing each type of menu.

Creating and Editing User Group Menus

The sidebars on user group landing pages are used in Julio to show content and links relevant to that user group. As described on
Creating, Featuring, and Managing Site Content, that while Announcements, Events and Galleries are all linked automatically in the sidebar of the user group to which they belong, the fourth type of content - Group Posts are not automatically linked. The best way to organize a user group's Group Posts is to create a menu for that user group and add links to the Group Posts.

To create a user group menu, you need to be an administrator member for the user group. Only people with adequate privileges will be able to create and edit menus.

Add drop down menu support to Bartik

The Bartik theme doesn't support drop down menus as standard and there are various ways of addressing this, mostly using modules such as superfish.

Here's a way of adding them to a Bartik sub-theme, using a couple of theme function overrides and some CSS.

We will:

  • Add the built in main menu block in the header region
  • Remove Bartik’s main menu implementation
  • Apply some CSS to turn the menu into a drop down menu

No additional modules required! (I've also documented this with pictures on my personal site.)

Add main menu block to header region

We will start by adding the main menu block to the header region. Go to admin/structure/block and add the Main menu block to the header region. Add some children to some of the menu items and make sure the parent item is expanded.

When we refresh the page we should see another menu, albeit expanded, in the header.

Remove existing menu

First create a sub-theme of Bartik. In this example I've called our sub-theme Bartik Drop Down (machine name bartikdropdown).

We can see that in page.tpl.php of Bartik (bartik/templates/page.tpl.php) there’s a line

Pages

Subscribe with RSS Subscribe to RSS - menu