Design insights & tutorials.

Create a Killer Band Site in Drupal – Part 5 – Drupal Admin

Turquoise Flag-Tip

This tutorial is another special series written guest author Sean Hodge from aiburn.com and Connection Cube. He is an expert in Drupal, which I am totally not familiar with. He intrigued me when he told me that the majority of the bands on Sony’s record label are powered by Drupal. Drupal is basically an open source CMS, and I was interested in learning more about it. So that’s why he’s writing this tutorial for us. You can learn along with me!

Read the introduction – What’s Drupal and why?
Read Part 1 – Design it Illustrator
Read Part 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming Drupal
Read Part 6 -Wrap Up and Additional Resources

Introduction

In our last tutorial we created our Drupal Theme Files. Now we are going to get familiar with the Administration of Drupal and set up our GoBand website.

Review

For review Lullabot has a good video on Installing Drupal 5. The video has you setup your first user account and change the password. This is really important in Drupal. The first user account is the super administrator. So don’t loose that login as its real important. Also, we should have our theme files installed from our last tutorial. If you need to, then download a copy of the final Goband Theme files. Place them in the sites > all > themes directory in Drupal.

Garland Default

Below is the default Administration screen in Drupal. Notice the warning message in the red box. This is nothing to be alarmed about. Let’s take care of that. Click on the status report link within that box.

Garland Admin

We covered this in a previous tutorial, but lets make sure you have the Files folder installed. Make sure your move the files folder we created into the root Drupal install directory.

Files

Once you make a choice for Cron and have your Files folder installed in your root directory you’ll get a good green status report.

Status Report

Turn on Our Unique GoBand Theme

In the default theme Garland you have a few ways to get around the Administration area. On the left is one option. You’ll also notice the breadcrumbs at the top of the main column. If you go to the administration page you’ll also see that you can view all your administration options by task or module.

Admin Navigation Options

Before we turn on our GoBand theme we need to make sure our navigation is set up correctly for the theme. There are no breadcrumbs set up in the GoBand theme and there is only a right sidebar and not a left. So, if we don’t turn set our navigation for the GoBand theme to the right sidebar we’ll be a little lost when we turn the theme on.

Go to Administer > Site Building > Blocks. Click on goband settings. You’ll get a preview of the Administration area of our GoBand Theme. Under the regions column set the Navigation to right sidebar and click Save blocks at the bottom. This makes it so that our theme will have a navigation when we turn it on.

Right Sidebar

Notice how the right side has the Winged Chick Icons. This is not needed for the administration area. So, lets add the code circled below to our theme. After adding this code to your style.css file your results will look like the sidebar in the image above.

Remove Wing Chicks

In the navigation, that just got moved to the right, click on Themes. Now as long as you have your theme files for GoBand installed it will be pretty hard to miss the green chicks with wings image, and the bright green GoBand Text. The other themes come with Drupal 5 by default. In the image below we can see that we are still have Garland as our default theme.

Set Theme to GoBand

Now lets turn on our GoBand theme. Select Enabled and Default radio buttons next to the GoBand Theme. Then at the bottom of the page hit Save configuration. Afterwards, your results should look like the image below.

GoBand Theme Enabled

Let’s change another settings in the Theme before we move on. Click Configure top left below the page title. Uncheck Logo in the Toggle Display column. This is because we don’t have a logo setup. The logo is part of the header image. Then at the bottom of the page hit Save configuration.

Let’s Turn On a Couple of Modules

Go to Administer > Site Building > Modules. Anything set to Enabled already go ahead and leave it that way. Do check Enabled for Path and Search and click Save configuration. We’ll be using both of these modules shortly.

Initial Modules Enabled

Enable Our Search Form

Go to Administer > Site Building > Themes > Configure. This will configure the global settings for our themes. Check off Search in the Toggle display column and hit Save configuration. That’s it. We already have the search set up in our theme. So, all you had to do was enable the module and then turn it on in the theme.

Enable Search

Create Our Home Page

In our Administration Navigation on the right click Create Content. Then click Page, as that is what we are making. Start out by entering our Title and then place the content of our Body. You’ll recognize the content from our Main content section in our HTML from the third part of this series. I set my Input Format to PHP code as this means none of the HTML will get automatically converted. Though if you like the auto conversion certainly try a different setting.

Home HTML

Next we insert our Menu Title as Home and set our Description. We want this to be a part of our Primary links. It will be the first one so give it to a Weight of 1. Set our URL path settings to home. Under Publishing Options check off Published. Then click Submit. Congrats, you’ve just made your first page in Drupal. Next we want this page to show up on our home page.

Home Menu Settings

Go to Administer > Site Configuration > Site Information. Then set the Default front page to Home. While we are here drop in the HTML for our footer under Footer message and hit Save configuration.

Site Info Home

Now check that the home page is correct and that the footer message is showing up. Your Home Page should look like the image below so far.

Home Page

Now Let’s Create Our Other Pages

Go to Create Content > Page. For the Title use About GoBAND and drop some Lorem Ipsum in for the Body content. For the Menu Settings Title enter About. Give it a Description of About GoBAND. Set the Parent Item to Primary Links. Set the Weight to 2. And the URL path settings to about. Check off Published and hit Submit. Then go ahead and follow a similar process for the Blog, Booking, and Tour Schedule Pages.

About Menu Settings

Create Some Sample Sidebar Content

Go to Administer > Site Building > Blocks. Then click on Add Block in the top left hand corner of the main content area. Give it a Block description of Sidebar. Then drop in our sidebar content from our HTML file. Select an Input format and hit Save block.

Block Sidebar Settings

Now we are back in our blocks area. Give the Sidebar a Region of Right Sidebar and a Weight of 1. Give our Navigation a Weight of 9 to push it down. The hit Save block.

Block Sidebar Setup

Create Links Up Top

Go to Administer > Site Building > Menus. Then click Add menu in top left of the main content area. Give it a title of Top Nav and hit Submit. Under our newly constructed Top Nav menu click Add item. Fill in the Menu item to point to the front page and hit Submit. See image below.

Top Menu Add Item

Repeat this process for another sample Link for the Top Nav.

Top Nav Admin

Next we need to go to Administer > Site Building > Blocks. In the Region column set Top nav to top nav and click Save blocks.

Top Nav Block

Now click on configure for Top nav. For the Block title put <none>. Then click Save blocks. This will get rid of the Top Nav title that we don’t want to show up top.

Top Nav Block Title None

Set Access Control

Go to Administer > User Management > Access Control. This is an important and useful screen to review. If you were to log out you would notice that Search doesn’t show up. That’s because by default it won’t show up for Anonymous Users. Check off the boxes in the image below and then hit Save permissions. Spend some time reviewing the different options on this page. If you want to create new roles for different users its easy to do that and then set permissions for them here. Though that’s beyond the scope of this tutorial.

Search User Access

After allowing access to the Search we are almost done with this setup. Below is how the site now looks to an Anonymous User to the site.

Front Anonymous

Setting Up One Columns

Go to Administer > Site Building > Blocks. In the Sidebar row click configure. At the bottom of the page insert the user page instructions into the Pages window as shown below. Then hit Save block. This tells Drupal not to display the sidebar on those pages. So we end up with one column and not two for those pages.

Sidebar Block User Pages

We have already set up the our theme to recognize when there is only one column so it displays correctly automatically, see sample below.

Login One Column

Enable Clean URLs

Enabling Clean URLs will remove some unsightly characters from the URL: “?q=”. Go to Administer > Site Configuration > Clean URLs. First click on Run the clean URL test. If you were successful you’ll see the message below. Then select Enabled and click Save configuration. Now the ugly “?q=” characters have been cleaned from your pristine URLs.

Clean URLs

Conclusion

We’ve set up the GoBand website, which is awesome. Bask in the spotlight of your first Drupal success. This site is a solid foundation that could be used to promote the band and build a community with. We’ll conclude this series in the final edition by giving you lots of excellent Drupal resources. So stay tuned as it will be out shortly. In it we’ll give you further advice on growing your Druapl based site that will keep it Rockin’.

Read the introduction – What’s Drupal and why?
Read Part 1 – Design it Illustrator
Read Part 2 – Slicing it Illustrator
Read Part 3 – XHTML
Read Part 4 – Theming Drupal
Read Part 6 -Wrap Up and Additional Resources

About the Author, Jeff Finley

I'm a partner at Go Media, a Cleveland web design and development firm. We also specialize in print design and branding. I started Weapons of Mass Creation Fest and wrote the book Thread's Not Dead, teaching artists and designers how to start a clothing company. In my spare time, I write songs and play drums in Campfire Conspiracy. I'm a happy husband and an aspiring b-boy and lucid dreamer.
Discover More by Jeff Finley

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 3 - XHTML

  • http://www.jucallme.com Lathan Britz

    Hi there,

    iv been having issues with my css and IE 5/6/7 rendering things all wobbly (thank heavens IE 8 will be standards compliant). Could you be so kind as to provide some resources (links, how to’s what ever can help me) in your next article on how to design some IE specific css.

    PS: i know you use the tag/part to use the over riding style sheet.

    luv this tut.

  • http://www.jucallme.com Lathan Britz

    Hi there,

    iv been having issues with my css and IE 5/6/7 rendering things all wobbly (thank heavens IE 8 will be standards compliant). Could you be so kind as to provide some resources (links, how to’s what ever can help me) in your next article on how to design some IE specific css.

    PS: i know you use the tag/part to use the over riding style sheet.

    luv this tut.

  • Iaan

    Any possibility of providing an update guide for Drupal 6? My GoBand site is a mess when installed in Drupal 6 – or is it just me?

  • Iaan

    Any possibility of providing an update guide for Drupal 6? My GoBand site is a mess when installed in Drupal 6 – or is it just me?

  • http://www.WarGraphicArts.com William A. Rodriguez

    I have setup a different design utilizing this great set of tutorials. I have came across many problems, but have fixed most of the issues myself. I have one issue that I cannot figure out.

    I cannot get drupal to switch between the two column layout and single column layout. Once I made the separate CSS code for each my site only shows the single column version on all pages. Has anyone else came across this same issue?

    Here is the web address associated with this issue below.

    http://www.Tangible-Dreams.org/drupal

  • http://www.WarGraphicArts.com William A. Rodriguez

    I have setup a different design utilizing this great set of tutorials. I have came across many problems, but have fixed most of the issues myself. I have one issue that I cannot figure out.

    I cannot get drupal to switch between the two column layout and single column layout. Once I made the separate CSS code for each my site only shows the single column version on all pages. Has anyone else came across this same issue?

    Here is the web address associated with this issue below.

    http://www.Tangible-Dreams.org/drupal

  • http://www.WarGraphicArts.com William A. Rodriguez

    Never mind that last post. I just let it stew for a while and eventually figured it out on my own. It was a simple mistake that I overlooked numerous times. Thanks anyway.

    Great tutorial by the way, I was able to soak it in very well.

    Thanks

  • http://www.WarGraphicArts.com William A. Rodriguez

    Never mind that last post. I just let it stew for a while and eventually figured it out on my own. It was a simple mistake that I overlooked numerous times. Thanks anyway.

    Great tutorial by the way, I was able to soak it in very well.

    Thanks

  • MattLikeALion

    Re: Iaan
    “Any possibility of providing an update guide for Drupal 6…”

    I would be interested in any thoughts on how the tutorial procedure might differ when developing for the new Drupal 6. I am going to go back through this series soon to learn it a little more thoroughly, but I would prefer to gear that knowledge to the new rather than the old.

    I realize Drupal 5 has more prolific support due to its age, however, I still would rather be forward thinking. I don’t want to have to port my new site to 6 when I’m done – I’d rather build it in 6 to begin with.

    Any ideas on peculiarities I may encounter following these tutes but working in Drupal 6?

    Thanks for taking the time to give us this series, Sean and Jeff. I appreciate you guys taking time to contribute to the community.

  • MattLikeALion

    Re: Iaan
    “Any possibility of providing an update guide for Drupal 6…”

    I would be interested in any thoughts on how the tutorial procedure might differ when developing for the new Drupal 6. I am going to go back through this series soon to learn it a little more thoroughly, but I would prefer to gear that knowledge to the new rather than the old.

    I realize Drupal 5 has more prolific support due to its age, however, I still would rather be forward thinking. I don’t want to have to port my new site to 6 when I’m done – I’d rather build it in 6 to begin with.

    Any ideas on peculiarities I may encounter following these tutes but working in Drupal 6?

    Thanks for taking the time to give us this series, Sean and Jeff. I appreciate you guys taking time to contribute to the community.

  • http://www.forumistan.net Forumistan

    Thanks for this tutorial, I am already using it…

  • http://www.forumistan.net Forumistan

    Thanks for this tutorial, I am already using it…

  • http://www.avangelistdesign.com The Avangelist

    It has taken a few stabs but I have started to get this nailed now.

    The only thing I seem to be suffering on is where you have navigation in the sidebar retaining its default styling, I can’t seem to work out how to over-ride it, if you check it with firefox web-dev the li’s come up as .leaf, but you cannot seem to style that.

  • http://www.avangelistdesign.com The Avangelist

    It has taken a few stabs but I have started to get this nailed now.

    The only thing I seem to be suffering on is where you have navigation in the sidebar retaining its default styling, I can’t seem to work out how to over-ride it, if you check it with firefox web-dev the li’s come up as .leaf, but you cannot seem to style that.

  • Tenchedesigns.com – Nathan Pie

    Yeah I would love a updated tut on drupal 6…
    I ran into tons of problems and don’t have the time to fix them..

  • Tenchedesigns.com – Nathan Pierce

    Yeah I would love a updated tut on drupal 6…
    I ran into tons of problems and don’t have the time to fix them..

  • http://www.eggs-factory.com/drupal5 chagit

    Hi.
    after setting the right bar, i can’t see the login link anymore, and can’t go to the admin pages any more.
    how can I login now ? please help…

  • http://www.eggs-factory.com/drupal5 chagit

    Hi.
    after setting the right bar, i can’t see the login link anymore, and can’t go to the admin pages any more.
    how can I login now ? please help…

  • http://23rdworld.com mahalie

    Wow, just finished the whole series – thanks so much! This tut does require some broad knowledge – illustrator, css, xhtml, and some server config. Perfect for a web designer who is new only to Drupal (me). I cannot thank you enough as this really elevated my understanding of the whole system.

    Re: Drupal 6 – views and cck are two modules that are very popular and used on almost all sites and they’re not ready yet. Most docs are in 5.x too, at this time most recc’d using 5.x unless you can wait a few more months. That said Lullabot and the Drupal Dojo have some Drupal 6 theming tutorials and videos.

    @chagit: go to http://localhost/yoursite/user – I put the login link mentioned earlier in my footer too.

  • http://23rdworld.com mahalie

    Wow, just finished the whole series – thanks so much! This tut does require some broad knowledge – illustrator, css, xhtml, and some server config. Perfect for a web designer who is new only to Drupal (me). I cannot thank you enough as this really elevated my understanding of the whole system.

    Re: Drupal 6 – views and cck are two modules that are very popular and used on almost all sites and they’re not ready yet. Most docs are in 5.x too, at this time most recc’d using 5.x unless you can wait a few more months. That said Lullabot and the Drupal Dojo have some Drupal 6 theming tutorials and videos.

    @chagit: go to http://localhost/yoursite/user – I put the login link mentioned earlier in my footer too.

  • Pedro Pinto

    Olá, gostei deste teu post e gostaria de perguntar se não estarias interessado em ganhar mais algum dinheiro extra como Afiliado de um projecto que estou a desenvolver? Basta fazeres um pequeno post sobre o assunto neste teu blog. Recebes em dois niveis, pelo que qualquer pessoa que adira por este teu post pode-te gerar rendimentos futuros. Temos duas maneiras de te poderes Afiliar. Acede: http://www.link3.biz/affiliates_pt.htm

  • Pedro Pinto

    Olá, gostei deste teu post e gostaria de perguntar se não estarias interessado em ganhar mais algum dinheiro extra como Afiliado de um projecto que estou a desenvolver? Basta fazeres um pequeno post sobre o assunto neste teu blog. Recebes em dois niveis, pelo que qualquer pessoa que adira por este teu post pode-te gerar rendimentos futuros. Temos duas maneiras de te poderes Afiliar. Acede: http://www.link3.biz/affiliates_pt.htm

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site in Drupal - Part 4 - Theming Drupal

  • Pingback: The Go MediaZine - Exclusive insights for art, design, marketing and more. » Create a Killer Band Site with Drupal: A 6-part Tutorial Series

  • Pingback: Create a Killer Band Site in Drupal - Part 6 - Additional Functionality and Resources | GoMediaZine

  • Pingback: Create a Killer Band Site in Drupal - Part 2 - Slicing in Illustrator | GoMediaZine

  • Pingback: Create a Killer band site in Drupal - Part 1 - Design | GoMediaZine

  • Jeff

    Thank you this was much more helpful than the other site I was looking at that only seemed to contain recipes for gingerbread.

  • Jeff

    Thank you this was much more helpful than the other site I was looking at that only seemed to contain recipes for gingerbread.

  • http://www.downloadic.com Downloadic

    Wow that is excellent, thanks a lot…

  • http://www.downloadic.com Downloadic

    Wow that is excellent, thanks a lot…

  • Holly

    Awww…I got like 0% of the entire tutorial. Lol!
    I guess web designing isn’t for me.

  • Holly

    Awww…I got like 0% of the entire tutorial. Lol!
    I guess web designing isn’t for me.

  • Pingback: 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation | 1stwebdesigner - Love In Design

  • Donna

    Great tutorial! This cleared up a lot of things for me. I really appreciate it!

  • drclaw

    Someone made posted this in part 4 to make it work in Drupal 6 (just thought I would spread it out to the other parts in case anyone was wondering…)


    1) Don't need any codes in template.php (remove all code in your template.php).
    2) Create a goband.info file with these content :

    name = goband
    description = Some descriptions
    core = 6.x
    engine = phptemplate
    stylesheets[all][] = style.css

    regions[top_nav] = top nav
    regions[right] = right sidebar

    HOWEVER I figured out that you also need to replace in page.tpl.php any occurances of $sidebar_right with $right

    All these changes should make the theme visually work in Drupal 6 for the most part. The only thing I can't seem to get to work is the search functionality… Keeps giving me a validation error…

  • giyim

    Thank you very much for the excellent and useful subject. Türkiyenin en iyi alışveriş sitesi. internette ucuz alışveriş yapabilme imkanı sağlar kadınlar için bayan giyim kategorisi altında yüzlerce ürün barındırır. Beyler için erkek giyim kategorisi içinde 100lerce giyim ürünü satılmaktadır. Ateşli geceler için fantazi giyim kategorisi altında cinsel hayatınızı daha sıcak ve daha sehvetli bir sekilde yasamaniz icin 100lerce ürün barındırmaktadır.! Evde beslemekte olduğumuz hayvalar için pet shop ürünlerini mağazamızdan temin edinebilirsiniz. Ucuz fiyatı ile cebinize dost outlet ürünlerimizle sizleri ucuz alışverişe davet ediyoruz. ha bide unutmadan iskenderun icinde lazim bogle bisi . en iyi haber sitesi budur.

  • Sonicshinji

    I can´t make this theme to be shown in the drupal theme list …! Im using Drupal 6 and tried adding the .info file drclaw suggested, I still can´t get it to work! Help!

  • michaelsharaton

    You can try using the drupal content management systems tutorial. Maybe it will help you solve your problem.

  • http://www.facebook.com/pedro.turco Pedro Turco Neto

    Amazing tutorial, really really good
    but i have a question, on the middle of the part 6 i did the logout to see how the things were, and now i cant login again.. what should i do?

  • none

    pedro, you should change name of theme, goband whatever its called, just put like an x on end, drupal will go to default theme.

  • Matt

    Thanks for this nice work!
    dizi izle

  • http://www.archivetr.net/ Archivetr

    Thanks for this tutorial.nice.

  • Ganhar Dinheiro

    Very interesting post!
    I wonder when you’ll have another post with this content?
    Thanks

  • clickddl

    very goood site. thank.

  • http://www.klavisnurs.com Klavis

    I can´t make this theme to be shown in the drupal theme list …! Im
    using Drupal 6 and tried adding the .info file drclaw suggested, I still
    can´t get it to work! Help

  • http://www.webdesignfunda.com/ cynthianelson

    Really good post. I think CSS based website design that really looking very nice.

  • Anonymous

    Thanks for the tutorial

  • http://www.domain2host.in Domain Registration

    Nice blog. I will keep visiting this blog very often.

  • http://www.domain2host.in Domain Registration

    Thanks a lot for sharing this useful and attractive information and interesting posts from you. keep it up.