Site3 Guide.v3

8/3/2019 Site3 Guide.v3

1/120


2/120

Site 3: Business Directory www.sitebuildingextravaganza.com

Site 3: Business Directory, Site Building Extravaganza program

2011 by Emma Jane Hogbin

440-13th Street East

Owen Sound, Ontario

N4K 1W6

www.designtotheme.com

[email protected]

License

Creative Commons: Attribution-Noncommercial-No Derivative Works 2.5 Canada unless otherwisenoted.

All photos Emma Jane Hogbin and licensed as CC-BY unless otherwise noted.

About this Workbook

This workbook was created by Drupal expert Emma Jane Hogbin (www.designtotheme.com). It is theresult of years of experience and many hours of work. It is dedicated to making this topic easier for youto quickly masterso that you can create a more profitable experience with Drupal. That said, mistakessometimes sneak into workbooks. If you've found an errorplease let me know by email.

This workbook was produced by Design to Theme as part of a year-long training program in 2011.Content was originally released to the participants of the program. If you were lucky to get this copy forfree, we encourage you to consider how valuable it was to you and send that amount of money via

PayPal [email protected] are not allowed to sell this workbook or extract parts of it to create derivative works. (I've alreadynailed one person who tried selling my stuff on his site without permission. Don't be that guy. Ok?) Youare encouraged to share the work digitally with others for free so long as the entire PDF (including allthe pages) are included. You are also welcome to share print copies of the document with othersagain only the entiredocument may be shared.

If you're a Drupal trainer and you're interested in using this workbook in your classes: get in touch tofind out more about licensing this workbook with your own logo for your next workshop.

We hope you enjoy this workbook. If you do, tell the world. If you don't, tell Emma!

2/120
http://www.designtotheme.com/http://designtotheme.com/mailto:[email protected]?subject=Thanks%20for%20the%20workbookmailto:[email protected]?subject=Thanks%20for%20the%20workbookhttp://designtotheme.com/mailto:[email protected]?subject=Thanks%20for%20the%20workbookhttp://www.designtotheme.com/


3/120


About Design To ThemeEmma Jane Hogbin is the founder of a great little Drupal consulting and training agency. She makestheming Drupal easier, faster and more profitable.

Drupal Site Building Consulting: We're great at saving you money. There are thousands ofDrupal modules out there that will get you from idea to finished Web site faster and withhigher profits. With a Site Building Consultation we can help you choose (install and configure)the bestmodules for your next project. If you're tired of handing over all your profits to yourprogrammer we need to talk.

Support for Small Businesses and Designers: Did you get in over your head a little bit with aproject? We can help you get unstuck with gentle technical support that will make you feelsmart and wonderful and capable of taking back control of your Drupal project.

Drupal Training: Drupal site building and theming training sessions are available on-line. Checkthe web for a list of upcoming workshops. Custom training is also available.

Accolades

Emma is an amazing teacher. Betty

Thank you for sharing your experience through e-books in addition to seminars and presentations. It'sreally helpful to have short, easy-to-use examples to learn from as well as refer back to while trying todevelop good Drupal theming skills. Spence

Emma Jane worked with me on a dramatically ambitious Drupal project a couple of years ago. Shemanaged to keep my overactive imagination in check so we focused on realistic goals and milestones,all the while making me feel like I could get my hands dirty in the project. She was timely, proficient,

and a joy to work with. Kim Werker, founder of CrochetMe.comEmma Jane combines the perfect amount of predictability and spontaneity...her technique hassparked my excitement about developments in technology and has inspired me to engage in newprojects. She presents herself as very approachable and always answers questions thoroughly, makingsure that the user feels comfortable and at ease. Jorge Castro, External Developer Relations,Canonical Ltd.

Taking your course is one of the best investments I have made. Louise

3/120


4/120


Table of Contents

About Design To Theme.......................................................................................................3Site Profile.............................................................................................................................7

Planning the Site..............................................................................................................9Designing the Site...........................................................................................................11

Build the Site.......................................................................................................................14Install Drupal..................................................................................................................14Create Roles....................................................................................................................16Core Modules..................................................................................................................17

Configure Book Module.............................................................................................18Configure Search Module..........................................................................................23Configure Contact Module........................................................................................24

Working with Menus.................................................................................................27

Check Your Work...........................................................................................................28Contributed Modules.....................................................................................................29

Views for Recent Content...............................................................................................31 Views Configuration..................................................................................................33Monthly Archive View...............................................................................................35Recent News...............................................................................................................36

Adding Static Text to a View......................................................................................37 Adding Block to Only Some Pages............................................................................38

Check Your Work...........................................................................................................40Business Directory.........................................................................................................42

Creating a New Content Type........................................................................................46 Adding Fields.............................................................................................................47Node References........................................................................................................48

Taxonomy.......................................................................................................................48Adding Hierarchy to Taxonomy Terms ...................................................................50Adding Taxonomy Fields to Your Content Type.......................................................52

Adjusting the Content Type Display..............................................................................54Navigation for Business Listings...................................................................................56

Menus.........................................................................................................................56Views...........................................................................................................................57

4/120


5/120


6/120


Banner Image...........................................................................................................103Custom Blocks..........................................................................................................105Content to Display (Nodes in Block).......................................................................105Importing Views......................................................................................................108

Announcement Mini Calendars..............................................................................109

Category Display Formatting....................................................................................111Find Local Food Promoted to Front Page............................................................113

Node Template..............................................................................................................115Input Filters on Text Fields......................................................................................118

Summary............................................................................................................................119 About The Author.............................................................................................................120

6/120


7/120


Site Profile

For this site we will be rebuilding the Grey BruceAgriculture and Culinary Association (ACA) Web

site. The Grey Bruce ACA is currently housedalongside another organization, the Local FoodProject. The site started out as a directory of localfood purveyors and has grown out from there. Itis in need of a make-over to refine the navigation,simplify content available on each of the pages,and to separate the Local Food Project contentfrom the Grey Bruce ACA content.

The revised site integrates each of the featuresfrom the existing site:

Business directory sorted by threedifferent types of categories.

Announcements with a monthly archive.

Basic pages for event listings andresources.

An offsite email service provider(MailChimp) will be used for thenewsletter signup.

The functionality that we'll be building out in thissite includes:

Custom content type for business listings.

Views for product listings, announcements and most recent members includingalternate displays for both pages and blocks.

Taxonomy classification system including categories with single-inheritancehierarchy.

7/120


8/120


Specific theming features that we'll be adding to the site include:

PHP theming output of node fields.

Topics that won't be covered:

Installing Drupal. Instructions are also available online athttp://drupal.org/documentation/install

Installing contributed modules (i.e. Getting them onto your Web server) areavailable online at http://drupal.org/documentation/install/modules-themes/modules-7

8/120


9/120


Planning the Site

This month's site is a redesign of an existing site. It makes the planning stages mucheasier because we need only create a shell to receive all of the existing content. When

the new site has copied everything over from the old site, we're done. There will also bea couple of simplifications along the way. The business listing will be expanded to focuson the text descriptionallowing businesses to add lots of extra words that will helpincrease the site's search engine rankings (and the visibility for businesses listed on thesite).

Instead of doing a straight content audit, this site needed more of a functionality audit.The individual content pages are a mix from two different organizations. Movingforward we will not necessarily need to keep all of the old news; however, we don't wantto lose some of the most important features.

We'll use the following modules for the site build:

Functionality Modules

Business directory Fields (core), Views, Advanced Help and CTools(contrib).

Taxonomy-based menus Taxonomy menu (contrib).

Custom URLs Pathauto and Token (contrib).

Basic pages with hierarchy,news articles with images

Core content modules including Book.

Controlled vocabulary forhierarchical taxonomy items

Taxonomy (core), Hierarchical Select (contrib).

Related businesses References (contrib).

Add multiple nodes to thehome page of the site.

Nodes in Block (contrib).

Contact form Contact (core).

Newsletter Hard code the signup form (Full HTML into a block).

9/120


10/120


Currently user logins are created by hand. In the new version, the Drupal default will beused: anyone can create an account, but administrator approval will be required toactivate the account. The link to the account creation page(http://example.com/user/register) is hidden on the new site; however, it could easily

be linked to from the Join information page.

The build for this site can be accomplished entirely with point-and-click configuration;however, if this is your first exposure to Views, you may choose to use the exports of the

Views included in this package instead of configuring each View by hand.

10/120
http://example.com/user/registerhttp://example.com/user/register


11/120


Designing the Site

The most immediate concern with the design of this site was updating the cartoonishlook of the current site and making local food more grown up.

The new site design uses the NineSixty base theme with a three column content areaand a three column footer. The content area uses a three unit column left sidebar andtwo columns of six units and three units for the content area. The footer is equallydivided into three x four unit columns. The wire frame for a basic page is displayed

below:

11/120


12/120


Each of the page templates will use a variation on this basic page; however, you can seethat the overall structure stays the same (navigation across the top; sidebar navigationon the left; footer with three separate areas):

12/120

Business Listing Home Page


13/120


The design we're using is displayed on theright.

Let's start with the site build. We'll stick tothe default theme, Bartik, for the build andtheme it once we have some content in thesite.

13/120


14/120


Build the Site

Here are the basic elements we will be creating and configuring for this site:

1. Hierarchical content pages. Includes the About pages. Modifications requiredto disable comments and enable revision control. No views required. Menu itemsare required. Optional: add Image field to the content type.

2. Announcements. Requires modification to the Article content type to allow up tofive images per node. Views required for Archive and Recent news. Menu item isrequired.

3. Custom content type for Business listing. Several Views required. Menu required.

In addition to these three content types there are also several highlighted blocks onthe home page. These will be added last. The banner will be added when the theme iscreated in the second half of the workbook.

Install Drupal

The first step in building a Drupal site is to ... install Drupal. Instructions are covered inthe Installing Drupal mini guide. If you are new to Drupal go ahead and start with afresh install (not a multisite installation). Make sure the folder sites/default isreadable and writable by the Web server. You will get errors later on if you don't do thisnow. Refer to the Install Guide instructions for more information.

Once you've installed Drupal, log into your site as the administrative user.

14/120


15/120


Note: PHP Errors, Warnings and Notices

Drupal 7 is still pretty new. There has been only one release sinceits initial launch, and contributed modules are still relativelyfresh. A very common problem is that developers turn off non-

essential messages when doing their work. Many servers, however,have a more liberal error message policy. As a result: we see a lot of

warning messages that developers don't see.

If you get a big red error message, read it carefully.Warningsand Notices can almost always be ignored (unless you want tosubmit a bug report on Drupal.org, which makes you awesome).Errors, on the other hand, are typically a real problem that should

be investigated.

15/120

These "notices" can be safely ignored.


16/120


17/120


Core Modules

Click on the Modules link from the admin shortcut menu. Enable the following coremodules:

1. Book.

2. Contact.

3. Update manager (may already be enabled).

You will need to adjust the permissions for several of these modules; however, we'll dothat as we configure each module.

Task

Enable the modules listed in this section.

17/120


18/120


Configure Book Module

Book pages are used to create static pages which have hierarchical content. The Bookmodule automatically creates a new navigation block for each new Book created.

According to the Drupal help pages, this content type is well suited to creatingstructured, multi-page content, such as site resource guides, manuals, and wikis. Itallows you to create content that has chapters, sections, subsections, or any similarly-tiered structure. By default new entries made from this content type:

Are published, but not promoted to the front page.

Accept user-contributed comments.

Are not version controlled.

On public Web sites, such as the one we're creating, I like to turn offcomments and turnon revision control. To make these adjustments, complete the following steps:

1. Navigate to Administration > Structure > Content types.

2. Next to the content type Book page, click the link labelled, edit.

3. Click on the vertical tab Publishing options. Enable the option Create newrevision.

4. Click on the vertical tab Comment setting. Change theDefault comment settingfor new contentfrom open to closed.

5. Click on the vertical tab Display settings. Disable the settingDisplay author anddate information.

6. Scroll to the bottom of the screen and click, Save content type.

The settings for this content type have been adjusted.

Next you will need to adjust the permissions for this content type:

1. Navigate to Administration > People > Permissions.

2. Scroll to the Book module.

3. Adjust the following permissions to permit Executive and Administrator

18/120


19/120


roles to: Administer book outlines, Create new books, Add content and childpages to books.

4. Grant permission to allow all roles to View printer-friendly books.

5. Scroll to the Node module and locate options starting withBook page. It is

appropriate for all content authors (Executive and Administrator roles) to haveall permissions. It is not appropriate for anonymous users to have any of thesepermissions forBook page.

6. Scroll to the bottom of the screen and click, save permissions.

The content type needs to be modified to allow images to be uploaded:

1. Navigate to Administration > Structure > Content types.

2. Next to the content type Book entry, click the link labelled, Manage fields.

3. Under the label, Add existing field enter the labelImage and select Image as

theField to share.4. Scroll to the bottom of the screen and click Save.

5. As configured, this field will allow you to upload one image per node. It isappropriate to leave the default settings. If you would like to have more images(per the wireframes) adjust theNumber of values in theImage Field Settings.

When satisfied with your configuration options for this field, continue to thebottom of the screen and click Save settings.

6. Click the link labelled Manage display. In the top right of the screen you willsee two tabs: Default and Teaser. The darker tab is the one you are currently

working on. Confirm the Image style is set to medium or smaller:

19/120


20/120


21/120


You've just made your first book and its first page. To add more pages to this book clickthe link labelled, Add child page at the bottom of your book page. If the Add childpage link is missing, you probably forgot to complete step #4.

Don't forget to add menu items for About, Events and Resources. Add menu items from

individual nodes by completing the following steps:1. Navigate to the node you'd like to add to the menu.

2. Click the tab labelled, edit.

3. Scroll to the vertical tabs and click the tab labelled, Menu settings.

4. Enable the check box, Provide a menu link.

5. Add a Menu link title and set the parent item toMain menu.

6. Scroll to the bottom of the screen and click Save.

Repeat these steps for all of the nodes you would like to add to your main menu.

Enable the navigation block for your new book:

1. From the administrative toolbar, navigate to Structure > Blocks.

2. Scroll down to the set of Disabled blocks and find the block labelled, Booknavigation. Click Configure.

3. Change the Book navigation block display to: Show block only on book pages.

4. Update the Region Settings to: Bartik, Sidebar first.

5. Scroll to the bottom of the configuration page and click, Save block.

There are several administrative options for books that you should be aware of:

Any content type can be added to a book. Configure which content types youwould like to place into books at Administration, Content, Books, Settings.

Once pages have been placed into a book they can be easily re-ordered atAdministration, Content, Books, List, edit order and titles.

To add any single page to a book, navigate to that page and click the tab labelled,Outline. Then select the book you would like to add the page to and click Add

21/120


22/120


to book outline.

Each book page may belong to only one book at a time.

Task

Create a new book named About as described in this section. Toit, add two child pages: Events and Resources. Create menu itemsin the main menu for all three of these pages.

22/120


23/120


Configure Search Module

Drupal ships with a built-in search engine. It's not as sophisticated as Google, but it'snot too bad. It is enabled by default, but only administrative users are allowed to use it.If you would like site visitors to use it, you must adjust the permissions. We'll use thesame technique to make the Search form public as we did to make the Contact formusable by all visitors.

1. Navigate to People > Permissions.

2. Scroll down to the Search module.

3. Next to the permission labelled, Use search, enable the check boxes foranonymous and authenticated users.

4. Scroll to the bottom and click Save permissions.

Visitors to your site will now be able to search content.

Task

Configure the Search module as described.

To see what site visitors are searching for, use the admin dashboard to navigate toReports > Top search phrases.

To configure the Search module, navigate to Configuration > Search settings. From hereyou can adjust the following:

The size of the words that get indexed. By default words must be at least threecharacters long.

Content ranking factors. For example: you can set content with a lot ofcomments to be automatically better than pages that have fewer comments.

In general the default settings are appropriate for most small business and personalWeb sites; however, if your site is a little unique, you may want to play with thesesettings to suit your needs.

23/120


24/120


25/120


5. Scroll to the bottom of the screen and click, Save permissions.

Now you must create a link to your contact form so that people know where to find it.

1. Navigate to Structure > Menus.

2. Next to the Navigation menu click the link labelled, list links.

3. Next to the link labelled Contact click, edit.

4. Enable (select) the check box labelled, enabled

5. Change the Parent link to Main menu. You will need to scroll to the top of theselect list.

6. Scroll to the bottom of the configuration screen and click Save.

A summary of all links in the Main menu is now visible. Adjust the order of these linksby dragging and dropping them into the correct order. If you do make changes,remember to scroll to the bottom and click, Save configuration to lock in yourchanges.

Optional step: if you would like to add your mailing address, phone number or amessage to the contact form, you can do so with a custom block:

1. Navigate to Structure > Blocks.

2. Click on the link labelled, Add block.

3. Enter a Block description (used in the admin section only) and the text that youwant to appear on the Contact page (this goes into the Block body).

4. Scroll to the fieldset for the Region settings. For your theme, set the appropriateregion name. Depending on your theme this could be something like, Contentor Above content.

5. Scroll to the Visibility settings. Select the vertical tab for Pages. Enable theoption for Only the listed pages. In the large text area below the option you justenabled, type contact (no quotes, all lower case).

6. Scroll to the bottom and click Save block.

Your new message should now appear on the Contact form. Navigate to this page to

25/120


26/120


check your work.

Task

Configure the contact form as described.

26/120


27/120


Working with Menus

The main menu links may not be in the right order. Go ahead and change them now.Refer back to these instructions any time you add a new menu item that does notappear in the correct sequence.

1. Using the administrative toolbar, navigate Structure > Menus.

2. Next to the Main menu, click on the link, list links.

3. Use the cross hairs to adjust the menu items so they are listed in the followingorder:

1. Home

2. Resources

3. Events

4. About

5. Contact

4. Scroll to the bottom of the screen and click, Save configuration.

To add non-node items to your menu navigate to Administration > Structure > Menus.Next to the item Main menu, click the link labelled, List links. To add a new link clickthe link labelled, Add link and follow the on-screen instructions.

27/120


28/120


Check Your Work

Log out of your site and confirm you've followed theinstructions correctly so far. Your site should now appear as

follows:On the home page:

five tabs visible (Home, Resources, Events, About,Contact)

search block visible (first sidebar)

welcome message (no content published to the frontpage)

Click on the About tab. You should be able to see thefollowing:

Text from the about page

sub-pages: Events and Resources listed at the bottom of thepage

search block visible (first sidebar)

section navigation block on the left hand side of the page

28/120

Home page

About page


29/120


Contributed Modules

Install the latest Drupal 7 version of each of the following contributed modules. In orderof preference look first for a module that's Recommended (green). If there isn't a

Recommended release available look for Other releases (yellow) and finallyDevelopment releases (pink):

CTools. http://drupal.org/project/ctools (required by Views)

Views.http://drupal.org/project/viewsEnableViews UI as well.

Advanced Help. http://drupal.org/project/advanced_help

Token. http://drupal.org/project/token(required by Pathauto)

Pathauto. http://drupal.org/project/pathauto

References.http://drupal.org/project/referencesEnable Node Reference as well.

Hierarchical Select.http://drupal.org/project/hierarchical_selectEnable Hierarchical Select Taxonomyas well.

Taxonomy Menu. http://drupal.org/project/taxonomy_menu

Nodes in Block. http://drupal.org/project/nodesinblock

If you don't have any content of your own to add to this month's site, but you want tosee it fleshed out, download and install the module Devel(http://drupal.org/project/devel) as well. Instructions were included in Site 2 on how touse this module.

Tip: CTools and Views are related and are released in paired updates. If you have anolder version of CTools (from Site 2) be sure to get an updated version of CTools.

Task

Download, install and enable the contributed modules listed in thissection.

29/120
http://drupal.org/project/ctoolshttp://drupal.org/project/viewshttp://drupal.org/project/viewshttp://drupal.org/project/advanced_helphttp://drupal.org/project/tokenhttp://drupal.org/project/tokenhttp://drupal.org/project/pathautohttp://drupal.org/project/referenceshttp://drupal.org/project/referenceshttp://drupal.org/project/hierarchical_selecthttp://drupal.org/project/taxonomy_menuhttp://drupal.org/project/nodesinblockhttp://drupal.org/project/develhttp://drupal.org/project/ctoolshttp://drupal.org/project/viewshttp://drupal.org/project/advanced_helphttp://drupal.org/project/tokenhttp://drupal.org/project/pathautohttp://drupal.org/project/referenceshttp://drupal.org/project/hierarchical_selecthttp://drupal.org/project/taxonomy_menuhttp://drupal.org/project/nodesinblockhttp://drupal.org/project/devel


30/120


You could also add to this pack:

Link (http://drupal.org/project/link)

Email (http://drupal.org/project/email)

for the business listings; however, I'm opting to use filters instead to convert Webaddresses and email addresses into clickable links.

30/120
http://drupal.org/project/linkhttp://drupal.org/project/emailhttp://drupal.org/project/linkhttp://drupal.org/project/email


31/120


Views for Recent Content

Drupal uses a relational database to store your content. When you fill out the formto add new content to your site, you are actually creating a series of data entries for

each field that you fill out. When you request a content node, Drupal recombineseach of the related fields into a single page. When you view a node, you are viewinga single piece of content with a unique reference ID. All of this should seem familiarto you as you've been working with the core content types and adjusting theirproperties to add new fields (usually images). Up to now you've been working witha single node at a time, or a reference to a single node (e.g. a menu item).

We've also worked a little bit with taxonomy. This module allows you to applycommon terms to many nodes. Using the Taxonomy module you can view all nodes

which have been tagged with specific terms. You can do this by clicking on a linkedterm name at the bottom of an article. This formatting and display of these nodes

cannot be customized using the Drupal core modules. Views is a highly specializedmodule which will create custom displays for lists of content. It can also create listsof other things, such as a list of users, but for this site we will be focusing on lists ofcontent.

Views is essentially a database query graphical user interface. It allows you to pointand click to create a custom SQL (structured query language) query that willretrieve content from the Drupal database. Understanding that Views can onlycreate lists of content will help you tremendously as you are learning this module.

Take, for example, the diagram on the right. From the list of all content there arethree selections made:

1. Only circles.

2. Only yellow circles.

3. Only green objects.

Being able to identify the common elements of the content makes list building withViews a lot easier. Let's start with a few examples of the types of lists we need for thebusiness directory:

31/120


32/120


1. A list of all announcements, sorted by their publication date in reversechronological order. This is (essentially) a blog.

2. A list of all announcements titles, sorted by their publication date in reversechronological order. This is (essentially) a most recent blog posts block.

3. A list of all announcements, grouped by their month of publication in reversechronological order. This is (essentially) a monthly archive for a blog.

4. A list of all business names, sorted alphabetically and grouped by their location.

5. A list of all businesses, sorted alphabetically and grouped by the types ofproducts they sell.

When you are creating your own views, start by describing what you are trying toretrieve from your Drupal database. There are a few key concepts that you will need to

build a custom list of content using Views:

For each list item, what should be displayed? e.g. Node title? Full node? Onlyspecific content fields?

What qualifiers (limiting criteria) should be applied to items in your list? e.g.only display published nodes? Only display nodes of a specific content type?These are your filters.

How should your list be sorted? e.g. alphabetically? Reverse alphabetically?Chronologically?

Where will your list be displayed on your site? e.g. as a page? As a block? As anRSS feed?

The more detailed your description of what your list looks like, the easier it is to create arelevant view.

32/120


33/120


Views Configuration

Let's take a closer look at the configuration screen (below) you'll come to know and love.In the 3.x series the configuration screen has been refined and a number of theadvanced options have been hidden from view.

The configuration screen has four basic areas:

1. Across the top: display selection and meta information for the view.

2. Basic settings: Title, Format, Filter, Sort.

33/120


34/120


3. Display-specific settings: Path, Menu, Header, Footer, Pager

4. Advanced settings. Contextual Filters, Relationships, No results behaviour,Exposed form, Other. For now we're going to ignore the advanced settings.

Using the settings in the first three columns you can create a wide range of views. If you

try to read all of the configuration options at once you will get overwhelmed, but if youfocus on a checklist of characteristics for your view, you can easily navigate theconfiguration screen.

For example the announcements view used the following settings:

Description Configuration Option Setting

An HTML list Format: format HTML list

Of Node titles Format: show; Fields Node titles; Content: Title

From only Articles Filter Content Type: Article

Displaying only 10 items Use Pager Paged, 10 items

Starting with the mostrecent

Sort Content: Post date (desc)

34/120


35/120


Monthly Archive View

Before creating your first view, make sure you have some content using the content typeArticle. If you don't have any content, your View won't do anything and it will make yousad. Or frustrated. Or both. So please make sure you have some Articles in your site

before proceeding.

For your first view we will create a monthly archive of all announcements in your site.We will use a preconfigured View to simplify the process.

1. From the administrative toolbar, navigate to Structure > Views.

2. Scroll down to the greyed out view labelled, Archive.

3. Under the operations column, select the link clone for the archive view (itmay be part of a drop down menu). This will create a new copy of the View. If youmake a mistake, or want to create multiple archives, the original will be

preserved so that you can create a new copy to try again.You will now be able to proceed through the Views wizard to create your first view.

1. Enter a title for your view. Monthly Announcement Archive.

2. Click continue.

You are now on the Views configuration screen. It might look scary, but it's not really.We will make only a few minor changes to this view.

1. Scroll to the section labelled, Filter criteria. Click the drop-down menulabelled, add. A new modal configuration window will appear.

1. In the search box enter, type. The list will be automatically refreshed.

2. Select the option, content: type.

3. Click the button labelled, Add and configure filter criteria.

4. Under the list of content types choose, Article.

5. Click apply. The modal window will close.

2. Below the heading Displays click on the tab labelled, page.

35/120


36/120


3. Below the heading Page settings click on Path: archive. A modal configurationwindow will open.

1. Change the path to: news/archive

2. Click apply (the modal window will close).

4. At the top of the configuration screen click, Save.

You have now created your view. To see it in action, go tohttp://yourwebsite.com/news/archive. There is no link to the view, so you will have tomanually type in the URL for it. The block for this view has not been placed into yoursite.

Task

Create the monthly archive view as described above.

Recent News

For your second view, we will be creating a custom view which lists the titles of the mostrecent 10 Articles, sorted in reverse chronological order.

1. Navigate to Administer > Structure > Views.

2. At the top of the page, click on the link, Add new view.

3. A new screen will appear where you can enter the basic settings for your newview. Use the following settings:

1. View name: Announcements2. In the mad-libs fill in the blank, alter the sentence to read: Showcontent of

typeArticle tagged with sorted byNewest first.

3. Leave the box selected for Create a page and change only the followingsettings.

1. Path: news

2. Display format offull postswithout comments ,without links.

36/120


37/120


38/120


3. Enable the checkbox next to Global: Text area.

4. Click Add and configure.

5. At the top of the screen locate which display you are changing. By default Alldisplays is selected. You don't want this. You want This block (override).

6. In the text area (large box at the bottom) enter the following HTML:Recent NewsBy using the URL ?q=news you are sending a specific request to Drupal to loadthe page with the URL alias news. This means you don't need to worry about theroot directory of your site (e.g. /news vs /mysamplesite/news). This is likethe base_directory stuff we dealt with in Site 1.)

7. Update the input filter to Full HTML.

8. Click Apply. The modal box will close.

9. On the main View configuration screen click save.

You are now done with this view. You may close the overlay. A new tab will appear inthe main navigation area labelled, Announcements.

Adding Block to Only Some Pages

Next we'll add the monthly archive block to the sidebar of all news articles.

1. In the administrative tool bar navigate to Structure > Blocks.

2. Scroll down to the list of disabled blocks. Next to Archive list click configure.

3. For the Region settings use Bartik, Sidebar first.

4. Under the Pages tab select: Only the listed pages. Then enter: news* into thetext area.

38/120


39/120


5. Scroll to the bottom of the screen and click Save block.

Your block will appear on pages where the URL begins with news including the Archivepage. (And all articles once pathauto is configured.)

Task

Add the static text to link the monthly archive block to the recentnews page.

39/120


40/120


Check YourWork

Log out of your site

and confirm you'vefollowed theinstructionscorrectly so far.

Your site shouldnow appear asfollows:

New tab for

40/120


41/120


42/120


Business Directory

To create the businessdirectory we will need a customcontent type and a series of

views to be able to view thebusinesses by region, the typeof business they are, and thetypes of products they carry.

On the current site eachbusiness listing includes:

Address

Civic / Fire number

(rural address) Postal Code (zip code)

Town

Phone

Hours

Web site URL

Email address

Brief description(optional)

Products Available (listof products)

Marketing Type (e.g.retail vs. Wholesale)

Business links (where

42/120


43/120


44/120


In our enhanced business listing we will include photos (in a second column) and alonger text description to help improve the search engine rankings of the site. The orderis also slightly shuffled with the type of store and text description appearing at the top ofthe listing between the business name and address.

44/120


45/120


45/120


46/120


Creating a New Content Type

The hard part in creating a new content type is deciding how users will interact with itand therefore what fields need to be added. Data modelling is a black art. You're boundto get it wrong at least once. But the more planning you can do to understand how thedata is going to be consumed, the better off you'll be.

The content type Business has nine custom text fields, one image field, two nodereferences and three term references (taxonomy).

Let's start by creating the content type:

1. Navigate to Structure > Content types > Add content type.

2. Enter the following information for each of the fields (if there is no setting, leavethe field as the default value):

Field ValueName Business

Publishing options Publishedunselect promoted to front pageselect Create new revision

Display settings Unselect display author and date

Comment settings Closed

Menu settings Unselect Available menus.

3. Scroll to the bottom of the configuration screen and click Save and add fields.You now have a new content type! It's that easy. Right now it's about as bland as a Basicpage. Time to customize it by adding some fields.

Task

Create a new content type for your business directory.

Tip: you can editing these settings at any time by returning to Structure > Content types

46/120


47/120


and selecting edit for the content type you want to alter.

Adding Fields

There are only four types of fields that we're going to add. The step-by-step instructions

are the same as what you used to add an image field to the Book content type. Use thefollowing table to add each of the newtext fields (field_ is added automatically):

Field Label Field Name Properties

Address field_address Use the default values.

Civic # field_firenum Size: 20.

Postal Code field_postalcode

Size: 7; Max length: 7

Town field_town Size: 60

Phone field_phone Size: 12; Max length 12.

Hours field_hours Use the default values.

Email field_email Use the default values.

Web site field_url Help text: You do not need to add the "http://" part.Just put in your domain name. e.g.

www.greybruceaca.comDefault value: www.

Use the instructions from the customization of the Book content type to add an Imagefield that allows three images to be uploaded.

It's always best to remove the Drupal-speak where you can. Edit the Body field andchange the label to About this Business.

Task

Create each of the text fields and the image field described above.Update the label for the Body field.

47/120
http://www.greybruceaca.com/http://www.greybruceaca.com/


48/120


Node References

We want customers to know where they can buy products around the region. In thecurrent site a single header Business Links indicates some kind of businessrelationship between the current listing and the business it's linking to. In the new sitethis will be broken into two fields: Products Available From and Stocks Products

From.

To add these two fields, make sure you have the module References and Node Referenceenabled and then complete the following steps:

1. Navigate to Structure > Content types > Business > Manage fields.

2. In the field Add new field enter the following:

1. Label: Products Available From

2. Field name: supplies

3. Type of data to store: Node reference4. Form element to edit the data: Autocomplete text field.

3. Scroll to the bottom of the screen and click Save.

4. On the configuration screen for Field Settings, enable the checkbox besideBusiness.

5. Click Save field settings.

6. On the field configuration screen, there is only one option to change: the Numberof values should be changed from 1 to unlimited.

7. Click Save settings.

Repeat steps 1-8 for the field Stocks Products From. Use the field name stocks.

Taxonomy

The businesses in this directory can be accessed through three different sortingmechanisms: by region, by type of business and by products sold. First we'll add the

vocabularies and then we'll tie them to the content type.

48/120


49/120


1. Navigate to Structure > Taxonomy > Add vocabulary.

2. Enter the name of the Vocabulary (from the list above).

That's it. Repeat the following steps for each of: Products, Regions and Type of Business

Now you need to add some terms to your Vocabularies (use the link beside each

Vocabulary name under Structure > Taxonomy). Feel free to use your own terms;however, these are the ones I've used:

Regions

Beaver Valley

Georgian Bay Shoreline

Huron Shoreline

Owen Sound

Peninsula

Southern Bruce

Southern Grey

Type of Business Community Supported Agriculture (CSA)

Farmers' Markets

Farmgate (sales at the end of a farmdriveway)

Processors

Producers

Restaurants and B&Bs

Retailers

Roadside Stand

U-Pick

Products (note: this vocabulary has two tiers! but is also in columns to save space)

Bakeries &Confectioneries

Baked Goods

Bread

Fudge

Gluten-free Baking

Pies

Beans, Grains & Flour

Beverages Beer

Cider

Coffee

Tea

Wine

Fruits &Vegetables

Apples

Meat & Dairy Bacon

Cream

Lake Trout

Milk

Rabbit

Sausage

Sour Cream

49/120


50/120


Cereals

Dried Beans

Oats

Spelt

Blueberries

Kale

Leeks

Honey, Syrup &Preserves

Honey Jam & Jelly

Maple Butter

Pickles

Other

Dry Flowers

Gelato

Gift Baskets

Nuts

Oil Salt

Task

Create three vocabularies (Products, Regions, Type of Business)and add each of the terms listed.

The only vocabulary that will have a second tier for this site is Products. The Views are

different for single tier and two tiers of terms. Make sure you follow the right set ofinstructions.

Adding Hierarchy to Taxonomy Terms

Adding sub-categories to your taxonomy terms can be done either when you are firstadding the term, or afterwards. Use one of the two following techniques to adjust theProducts vocabulary.

If you are editing multiple terms it is easier to make the changes from the listing ofterms:

1. Navigate to Structure > Taxonomy.

2. Next to the Vocabulary you need to adjust, click list terms.

3. Using the crosshairs next to each term, drag the terms into the correct order andhierarchy. To make a term into a sub-category, drag it slightly to the right.

To add hierarchy to one term at a time, make changes using the following instructions:


50/120


51/120


2. Next to the Vocabulary you need to adjust, click list terms.

3. Next to the term you want to adjust, click edit.

4. At the bottom of the configuration screen click the fieldset label, Relations.

5. Set the Parent term for the term you are editing. For example: if you are editing

Coffee you would set the parent to Beverages. But if you are editing the termMeat & Dairy you would set the parent to (which is the magical termfor has no parents).


Task

Create a two-tiered vocabulary for Products using either of the twotechniques listed.

51/120


52/120


Adding Taxonomy Fields to Your Content Type

For each business listing you will need to be able to assign categories for each ofProducts (multiple categories), Region (single category) and Type of Business (multiplecategories). The settings for each of these is a little different, so the instructions are

provided for each one separately.

Region (single term allowed, choose from a select list):



1. Label: Region

2. Field name: region

3. Type of data to store: Term reference

4. Form element to edit the data: Select list.3. Scroll to the bottom of the configuration screen and click Save.

4. On the Field settings page choose Region for the Vocabulary.

5. The default settings are all fine. Proceed through the wizard and save the finalconfiguration screen.

Type of Business (multiple terms allowed, choose from checkboxes):



1. Label: Type of Business

2. Field name: type


4. Form element to edit the data: check boxes / radio buttons.


4. On the Field settings page choose Type of Business for the Vocabulary.

52/120


53/120


5. Proceed through the wizard changing only the number of allowed values from 1to unlimited.

Products (multiple terms allowed, choose from hierarchical select). For this term wewant to limit the choices to the deepest level of choice. In other words: you maychoose Apples but not Fruit & Vegetables. To force this selection we will use the

contributed module, Hierarchical Select.



1. Label: Products

2. Field name: products


4. Form element to edit the data: Hierarchical select.

3. Scroll to the bottom of the configuration screen and click Save.4. On the Field Settings page choose Products for the Vocabulary.

5. Proceed through the wizard. There are no additional changes to make.

If you want to configure the default options for the Hierarchical Select module, click onthe tab labelled, Widget type for the field you want to alter. In other words: you mustfirst edit the field and then the Widget type tab will appear.

Task

Add fields for the three vocabularies (Regions, Products and Typeof Business) to your content type.

53/120


54/120


Adjusting the Content Type Display

Although we will be theming the site, you can do a bit to clean up your display now.Once you've added each of the fields proceed with the following:

1. Click on the tab Manage display.2. Set the label to hidden for About this Business and Images.

3. Set the label to Above for the two node reference fields.

4. Set the labels to inline for all remaining fields.

5. Adjust the Image field to use the medium image style (refer to the instructionsfrom the Book content type).

Task

Update the content display for the business listings as described.Check your work against the image below.

54/120


55/120


55/120


56/120


Navigation for Business Listings

We will use two different approaches to navigate the business directory: menu itemsand views.

Note: The menus omit a layer of navigation and jump immediately to the businesslistings. If you want to keep the sub-categories, skip the next section on menus andjump directly to the next section (create an additional Block display and use these asnavigation).

Task

Add sidebar navigation for Regions and Type of Business using theinstructions for Menus. Add sidebar navigation for Products usingthe instructions for either Menus or Views.

Menus

Make sure you have enabled the contributed module Taxonomy Menu beforeproceeding. There are three different ways to navigate the business listings. We willcreate one menu for each of the vocabularies and place all three in the sub-navigation

bar (first sidebar).

1. Navigate to Structure > Menus > Add menu.

2. Add the title Taxonomy Regions.

3. Add the description: To be populated with the taxonomy vocabulary for Regions.

4. Click Save.

Repeat steps 1-4 for each of Products and Type of Business.

Place each of the Vocabularies into a menu:


2. Next to Regions click the link, edit vocabulary.

3. In the field setting labelled Taxonomy Menu, change the menu location to

56/120


57/120


.

4. Click Save and wait for the menu to be built.

Repeat steps 1-4 for each of Products and Type of Business.

These menus can now be placed as blocks in the first sidebar. Use the steps from the

section Adding Block to Only Some Pages to add each of the menus to pages thatinclude:

business* (nodes of content type business)

products* (taxonomy term pages displaying terms from Products vocab)

type-business* (taxonomy term pages displaying terms from Type of Businessvocab)

regions* (taxonomy term pages displaying terms from Regions vocab)The Products menu will get outrageously long. You can limit the sub-categories fromdisplaying by completing the following instructions:


2. Next to the Menu Products click the link labelled, list links.

3. Disable all of the links you do not want to display.

4. When you have adjusted each of menus appropriate, scroll to the bottom of thescreen and click Save configuration.

Views

There are four views that need to be created to complete the business directory. One for

each of the vocabularies and an additional view to re-write the way category listings aredisplayed so that they are formatted the same as the other listing pages. Each of the four

views are described below.

View: Category Summary

1. Navigate to Structure > Views > Add new view.

2. Complete each of the fields as follows (if the field is omitted, use the default):

57/120


58/120


Field Value

View name Regions

Show Content

Of type Business

Sorted by Title

Create a page Enabled

Page title Regions

Path business/regions

Display format HTML list

Of Titles (linked)

Create a block Enabled

Block title Regions


3. Proceed to the main configuration screen by clicking, continue and edit.

4. Next to the heading Filter Criteria click the link labelled, Add. A modalwindow will appear.

1. Into the search box type Vocabulary.

2. Enable Taxonomy: Vocabulary.

3. Click Apply.

4. For All displays choose the option Regions.

5. Click Apply.

5. Under the heading Pager click on paged output. A modal configurationwindow will appear. Select Display all items and then click Save. The modalconfiguration window will close.

6. Click on the fieldset label, Advanced.

58/120


59/120


7. Next to the label Contextual Filters click add. A modal configuration windowwill open.

8. Select Taxonomy: Term.

9. Apply the following settings to all displays:

1. When the filter value is not in the URL: Display a summary.2. When the filter value is in the URL, Enable override title with the value: %1

10. At the bottom of the configuration window click Apply. The modal window willclose.

11. You are finished configuring this view, scroll to the top of the screen and click,Save.

Repeat steps 1-11 for the Vocabulary Type of Business with the followingsubstitutions:

Replace Regions with Type of Business.

Replace the path with: business/type

In step 4.4 limit the vocabulary to Type of Business (not Regions).

Override Taxonomy Term Listings

I hate the default taxonomy listing page that shows teasers of nodes. Although there arelimited configuration options at Structure > Taxonomy > Manage Display, I want tomake sure the category listings are identical to the summary views I've created. Views

allows you to easily override these pages:1. Navigate to Structure > Views.

2. Locate the view labelled, Taxonomy term. From the dropdown menu, select,Clone.

3. Enter the view name, Taxonomy Rewrite.

4. On the configuration screen, locate the heading Format, Show. Click onContent. A modal window will open.

59/120


60/120


1. Change the setting to Fields.

2. Click Apply and the modal window will close.

5. Locate the heading Fields. If there is no field listed:

1. Click the link add. A modal window will open.

2. Search for title.

3. Enable Content: Title (this is usually the 2nd option, you do not wantComment: Title).

4. Click Add and configure fields. The modal window will close.

6. Locate the fieldset labelled, Advanced and click on it to reveal all of thesettings.

7. Under the heading Contextual filters, click on the link Taxonomy: Term ID (withdepth). A modal window will open.

1. Change the depth to 2.

2. At the bottom of the window, click Apply. The modal window will close.

8. Check the Sort Criteria. It should include: Content: Title (asc). If it doesn't, byclicking on the add link and following the same procedure as is outlined in Step5.

9. Check the Pager. It should be set to display all items. If it isn't, click the link andadjust the settings.

10. You are finished configuring this view. Scroll to the top and click Save.

View: Two-tiered Category Summary

It's quite possible this is either broken, or wrong...except it works.

1. Navigate to Structure > Views > Add new view.

2. Complete each of the fields as follows (if the field is omitted, use the default):

Field Value

60/120

Sit 3 B i Di t it b ildi t


61/120


View name Products

Show Taxonomy terms

Of type Products

Create a page Enabled

Page title Products

Path business/products


Create a block Enabled

Block title Products


3. Proceed to the main configuration screen by clicking, continue and edit.

4. Locate the fieldset label, Advanced and click on it.5. Next to the header, Relationships click add. A modal window will open.

1. Enable Taxonomy: Parent term.

2. Click Add and configure relationship.

3. No additional configuration is required. Click Apply and the modal windowwill close.

6. Next to the heading Contextual filters click add.

1. Enable Taxonomy: Parent term and Taxonomy: Term ID.

2. To Configure Taxonomy: Term ID

1. Set the relationships to Parent.

2. When the filter value is NOT in the URL, display a summary.

3. Enable the option, Override title and set it to: %1

4. Enable Specify validation criteria.

5. Set the Validator to: Taxonomy term

61/120



62/120


6. Set the Filter value type to: Term Ids separated by , or +.

7. Action to take if the filter does not validate: show page not found.

8. Click apply.

3. To configure Taxonomy: Parent term.

1. Do not use a relationship.

2. When the filter value is NOT in the URL: Display all results for thespecified field.

3. Enable the Override the title and set it to %1.

4. Enable Specify the validation criteria.

5. Set the validator to: Taxonomy term

6. set the Filter value type to: Term Ids separated by , or +.

7. Action to take if filter value does not validate: Display no results found.8. Click apply. You are finished configuring the Contextual filters the

modal window will close.

7. Make sure the contextual filters are displayed in the following order (click thearrow on the add button and choose sort if they are in the wrong order):

1. (Parent) Taxonomy: Term ID2. Taxonomy: Parent term

8. Check the Filter Criteria. The Taxonomy: Vocabulary filter should have (Parent)listed. If it does not, click the filter link to edit it. A select window at the top of the

modal window will allow you to easily change the setting. Apply the change tosave the setting and close the modal window.

In the preview (at the bottom of the screen) you should see a list ofonly the top-tier taxonomy terms.

9. Scroll to the top of the configuration screen and click Save.This view is now configured.

62/120



63/120


Task

Create summary views for Products, Regions and Type of Businessvocabularies. Rewrite the output of the taxonomy term pages.

Create a Summary Page for All Blocks

1. From the administrative dashboard, click on the link Add content.

2. Choose Basic Page.

3. Create a basic page with the title, Find Local Food.

4. Add a menu item to the Main menu.

5. Do not use an automated alias. Instead, set the alias to: business.

Create Menu Items for the Views

Although this can be done from within the View, I think this method is a little easier.


2. Next to Main menu, click on add link.

3. Enter each of the following links:

1. Products, business/products

2. Type of Business, business/type

3. Regions, business/regions

4. Adjust the hierarchy of the menu items so that each of the three new menu itemsare a sub-menu item of Find Local Food.

Add Block Display for Vocabulary Views to Find Local Food Page

1. Navigate to Structure > Blocks.

2. Next to regions: Block, click the link labelled, configure.

63/120


64/120

Site 3: Business Directory www sitebuildingextravaganza com


65/120


Automatic URL Aliases for SEO

As a final touch to the site build, we're going to make very search engine-friendly URLswith the module Pathauto (and its helper Token).

1. Navigate to Configuration > URL aliases > Patterns (tab at the top).2. Enter the following patterns:

Option Value

Content, Default path [node:title]

Content, Article news/[node:title]

Content, Business business/[node:title]

Taxonomy Term, Default [term:vocabulary]/[term/name]

3. Scroll to the bottom of the page and click, Save configuration.

4. Click on the tab Bulk update.

5. Select each of Content paths and Taxonomy term paths.

6. Click the button, Update.

You now have shiny, search engine-friendly URLs!

Task

Create four new URL alias patterns and apply them to contentalready entered on your site?

Member-Editable Business Listings

This site assumes that editing business listings happens from a centralized office. If youwant to let members edit their own listings, no problem!

1. Create user accounts for members who want to edit their own listings.

2. Adjust the permissions of the Business content type so that Members can edit

65/120



66/120


their own content.

3. Edit the business listings individually to change the author from yourself to thenew members account.

66/120



67/120


Check Your Work

Log out of your site and confirm you've followed the instructions correctly so far. Yoursite should now appear as follows:

New tab and summary page for Find Local Food. Sidebar navigation for the Find Local Food section (one block for each of

Products, Regions and Type of Business).

Fancy, search engine-friendly URLs.

Business listings which include three taxonomy term references, and nodereferences to related businesses.

67/120



68/120


68/120



69/120


Create the Theme

This month's theme is deceptively simple looking and is going to teach you a number offabulous new tricks if you're new to theming. The theme creation is broken into severalsteps:

1. Conversion of wire frames to a Minimum Viable Theme that can be used forlayout.

2. Application of background colours and special features. This is primarily donewith CSS.

3. Navigation customization to add icons to the menu items.

4. Refinement of the home page layout (nodes in block customization).

5. Customizations for nodes (layout adjustments for the images and input filters forWeb addresses and emails).

6. Fonts and text colour.

69/120



70/120


Layout

This site has a pretty basic layout. There are no resizable regions. This site design hasthe following basic shape:

Pre-content: three rows (top, site_nav, banner). Content: two columns (sidebar_first, content). Above the content there are also

two additional sidebars which are six columns and three columns wide. Thesetwo inner regions are used on the home page.

Post-content: two rows (first row is three columns for footer blocks; second rowis a narrower copyright region).

70/120



71/120

y g g

71/120



72/120

y g g

Theme Shell

This theme uses the NineSixty base theme. Working on your local computer to start,complete the following steps to create your minimum viable theme:

1. Download a copy of the base theme NineSixty(http://drupal.org/project/ninesixty). This base theme allows us to make cross-

browser friendly columns with minimal fuss. It is based on the CSS GridFramework, 960.gs (www.960.gs).

2. Unzip the base theme, ninesixty. You will not edit, or place any additionalfiles into this folder. It is for reference purposes only.

3. Create a new folder for your theme named gastronomique in the same parentdirectory as ninesixty. For example: these two folders may both be on yourdesktop to start.

4. In the folder gastronomique create a new empty text file with the namegastronomique.info. You must use a text editor, not a word processor, whenediting this file.

5. Into the info file you just created, add the definitions for name, description,screenshot, core, engine,base theme, stylesheets, scripts, regions andfeatures to your theme:

name = D7SBE - Gastronomiquedescription = A two-column theme designed by Top Notch Themes and implemented byDesign to Theme.screenshot = screenshot.pngcore = 7.xengine = phptemplatebase theme = ninesixty

; Stylesheetsstylesheets[all][] = styles.cssstylesheets[all][] = fonts.css

; Javascript enhancements

72/120
http://drupal.org/project/ninesixtyhttp://www.960.gs/http://drupal.org/project/ninesixtyhttp://www.960.gs/


73/120



74/120

Name this file screenshot.png.

74/120



75/120

Page Template

Create a new text file in your theme's folder named page.tpl.php. Add the openingand closing HTML tags for your page:

... everything will go below here ...

Using Firebug can help show you the nesting of the columns (see screenshot below). Asyou open the HTML further you start to see Drupal's markup instead of your own.

Firebug can be installed on Firefox as a plugin (www.getfirebug.com). Once it'sinstalled, right-click on your Web page and choose inspect element from thecontextual menu and you will get a window with the markup and associated CSS for

your site.

75/120

http://www.getfirebug.com/http://www.getfirebug.com/


76/120

Top-Most Regions

The code is colour-coded according to the wireframe. Note the code used to create the logo andthe site name are notcolour-coded because they

are not inside a Drupal region.Add the HTML and PHP necessary to shape andprint the three pre-content regions. Use theNineSixty grid definitions to make narrowercolumns for the site logo and the site navigationregion.

The site 2 package covered PHP conditionalstatements. If you need understanding this code,please refer back to this package.

The variable $linked_logo_img is providedby the NineSixty base theme. This variable is notavailable if you are using a different base theme.

Pre-content regions:

76/120



77/120

Task

Add the pre-content regions to your theme's page.tpl.php fileafter the open id='page' div tag.

Content Regions

For the content row this is one main column (content-all) which is divided into twosmaller columns (sidebar-first and content-main). Because the columns arenested, the alpha and omega classes have been applied to the first and last regions inthe row.

Note: the page div is also closed at the bottom. This allows us to stretch the green across

the entire Web page.

For a detailed description of the Drupal variables relating to content, please read:

http://api.drupal.org/api/drupal/modules--system--page.tpl.php/7

77/120

http://api.drupal.org/api/drupal/modules--system--page.tpl.php/7http://api.drupal.org/api/drupal/modules--system--page.tpl.php/7


78/120

78/120



79/120

TaskAdd the content regions to your theme's page.tpl.php filedirectly below the HTML for the pre-content regions.

Footer Regions

The final two rows are coloured green and stretchacross the entire page. Because we don't want

them to be contained, we'll omit the NineSixtycontainer class on the outer footer region andthen apply it on an inner region if one of thethree sidebars exists.

The last region is slightly narrower, but thedark green also stretches the full width. We usethe prefix and suffix classes to reduce the

width by one column on either side.

79/120



80/120

TaskAdd the content regions to your theme's page.tpl.php filedirectly below the code for the content regions.

Your page template is now complete and you have a minimum viable theme that can beapplied to your site.

Task

Compare your page.tpl.php file against the one provided in thetheme package. Make any necessary corrections.

Upload Your Theme Files

You must now upload your theme to your Web server. Once you've connected you willneed to find the Drupal base installation. Depending on your server's configuration itmay be in a directory labelled, public_html or something to that effect.

80/120



81/120

1. The base theme, ninesixty, and all of its contents should be uploaded to thefolder sites/all/themes.

2. Your new theme, gastronomique, and all of its contents should be uploaded tothe folder sites/default/themes. If you have more than one Drupal siterunning on this server you may need to change default to a more specific site

name.

Tip: Check the permissions of sites/default.

By design Drupal removes the ability for you to add files to anyfolder containing the settings file (settings.php). This means

you can't create a sub-folder for your themes without adjusting thepermissions. If you are having difficulty adding files with your FTPprogram to sites/default, check the permissions. Chances are good

you will need to allow the owner to write to the folder. To be mostsecure, change the permission back to non-writable after you have

created the sub-folder for your theme.

See:http://drupal.org/node/1077888 for more information.

Enable Your New Theme

Log in to your Drupal site as an administrative user and complete the following steps:

1. Using the admin dashboard, click on the tab labelled, Appearance.

2. Scroll down to the bottom of the screen (where all the disabled themes live),

beneath your theme's screen shot, click the link, Enable and set default.

3. After the screen refreshes, click on the settings link for your theme.

4. Scroll to the fieldset Logo image settings. Unselect the checkbox Use thedefault logo. A new set of settings will be revealed.

5. Click, Browse and find your banner image for this theme on your hard drive.

6. Scroll to the bottom of the screen and click, Save configuration.

81/120

http://drupal.org/node/1077888http://drupal.org/node/1077888http://drupal.org/node/1077888


82/120

Task

Upload and enable your theme.

We will now refine the theme while looking at the live site.

82/120



83/120

Adjust Blocks

With your new theme in place you will need to adjust the blocks on your site. Start withthe following, we'll continue to refine the site as we progress:

Block Region

Main menu site_nav

User Login footer_first

Recent News footer_second

New Businesses footer_third

Search sidebar_first

83/120



84/120

Check Your Work

With the blocks adjusted, your site will look like the following image:

See that broken logo up in the top left? Make sure you add your logo at: Appearance >Gastronomique > Settings.

84/120



85/120

Navigation

At this point you should be looking back to the design files (PSD or screen shot)frequently to make sure your Web site looks like the design file.

Task

Complete each of the steps outlined in this section. When you arefinished your main menu should display icons per menu item, fade

when not in use, brighten up with a mouse rollover.

Disabling Menu Items

The original design doesn't have a home menu link, but mine does! This menu itemneeds to be eliminated from the main menu. Check to make sure there are no sub-menulinks either (which appear as a second line of links directly beneath the primary items).

To update the items in your main menu:1. Navigate to Structure > Menus.

2. Next to Main menu click, list links.

3. Next to each menu link you'd like to remove from the active menu, disable theenabled checkbox.

4. Scroll to the bottom and click, Save configuration.

Horizontal Menu Items

Let's start by fixing up the primary navigation so that it lays flat along the top of yoursite instead of stacking each of the menu items along one another. This will beaccomplished through CSS.

1. With your text editor create (or open) your theme's file styles.css.

2. Enter the following snippet:

85/120



86/120

#site-nav ul.menu li {float: left;list-style: none;padding: 0 5px;;margin: 20px 0 0 0;text-align: center;

}

3. Save the stylesheet and upload it to your theme directory.

The menu items will now appear side-by-side as shown below:

86/120



87/120

Adding Icons

The design for this theme includes menu icons that are different for each item.Unfortunately my favourite Drupal module for just this task (Menu Icons) isn't readyfor Drupal 7 yet. (There's an alpha version, but it wasn't working when I installed it.)

Instead of hard-coding the menu, I'll use a special function to re-write the menu itemsbefore they get placed into the theme.

First we need to tell each menu item what icon to use.


2. Next to Main menu click on list links.

3. Next the menu item Find Local Food click on edit link.

4. In the Description field for the menu item enter the path to one of the icons inthe theme folder. For example:sites/default/themes/gastronomique/icons/gastro-icons-bizdir.pngsites/example.com/themes/gastronomique/icons/gastro-icons-bizdir.png

5. Scroll to the bottom of the page and click, Save.

Repeat steps 1-5 for each item in the main menu.

The following icons are available for use:

Icon Graphic File Name

Human head and torso (gender neutral) gastro-icons-about.png

Speech bubble gastro-icons-announce.png

Taped box (I think?) gastro-icons-bizdir.png

Closed envelope gastro-icons-contact.png

Page-a-day calendar gastro-icons-events.png

Folder gastro-icons-resources.png

Magnifying glass search.png

These icons are CC-SA 3.0 and can be used for commercial purposes. I downloaded my

87/120



88/120

copy from:http://icondock.com/free/20-free-marker-style-icons

With the path to the icons in place it's now time to rewrite the menu items.

1. In your theme's directory, create a new file named template.php.2. Add the following PHP snippet:


89/120

strpos($url, '.jpg') !== false || strpos($url, '.gif') !== false) {

// build a new array with the image path$img = array ('path' => url($url),'alt' => $item['#title'],

'title' => $item['#title'],'attributes' => array('class' => 'custom-menu-image'),);

// create the new image using drupal's theme function$linked_img = theme('image', $img) .

"".$item['#title']."";

// reset the properties for this link to display// appropriate values (not our hacked up paths)$link['element']['#title'] = $linked_img;$link['element']['#localized_options']['attributes']['title'] =

$item['#title'];$link['element']['#localized_options']['html'] = TRUE;

}}

// send the revised data back to Drupal for processingreturn theme_menu_link($link);

} // end of menu_link function

3. Save the file and upload it to your theme's directory.

4. Clear the theme registry: Configuration > Performance > Clear cache.

Each menu item should now be displaying its associated icon.

We will be covering these types of functions in later workbooks. Right now we're usingthis snippet because Menu Icons isn't working. Hang in there!

Faded Icons

All of that work back there was so that we could use the CSS3 propertyopacity to fadeout the icons. It won't work on background imagesbut with a background image you

89/120



90/120

could easily change the image on :hover and it would take a lot less work...but you'dhave to make more images. Pick your battles, this is the one I chose. :)

This screen shot is also showing the custom fonts. We'll add those later.

Add the following CSS to your theme's style sheet at the end of the file:

/* Main Navigation Styles */#site-nav ul.menu li img {opacity: 0.2;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /* IE 8 hack

*/filter: alpha(opacity = 20); /* IE 5-7 hack */margin-bottom: 10px;

}

#site-nav ul.menu li img:active,#site-nav ul.menu li img:hover,#site

Site3 Guide.v3

Documents

Transcript of Site3 Guide.v3