1 / 74

Drupal Training Series

Drupal Training Series. Foundations for OSU Drupal 6 Formatting Blocks. What We’ll Be Covering…. Blocks What Blocks Are & How They Work Understanding Regions Ex. 01 A Theme Enabling Refresher Configuring & Enabling Default Blocks Ex. 02 Configure Block Title Visibility

penaloza
Télécharger la présentation

Drupal Training Series

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Drupal Training Series • Foundations for OSU Drupal 6 • Formatting Blocks

  2. What We’ll Be Covering… • Blocks • What Blocks Are & How They Work • Understanding Regions • Ex. 01 A Theme Enabling Refresher • Configuring & Enabling Default Blocks • Ex. 02 Configure Block Title Visibility • Ex. 03 Add Glossary: Random Block • Ex. 04 Configure Page Visibility • Menus • What Menus Are & How They Work • Ex. 05 Organize Menu Items • Ex. 06 Create Custom Menu Block • Nice Menus • What Nice Menus Is and How It Works • Ex. 07 Create Nice Menus Blocks • Ex. 08 Configure Nice Menus for Navigation Menu • Nice Menu 2 Lab • Optimized Menus • Ex. 09 Combine Menu Features • Beyond Menus • Default Add-On Blocks • Ex. 10 Add Announcement: Small List Block • Ex. 11 Add Most Recent Poll Poll Block • Ex. 12 Add Feed Aggregator Block • Custom Add-On Blocks • Ex. 13 Create Custom Contact Info Block • Ex. 14 Create OSU Events List Block • OSU Mini-Calendar Lab • Summary

  3. Getting Started • As a reminder, to get to your personal development site go to: • http://drupaldev.cws.oregonstate.edu/training/<yourONIDname>/login • From there, log in with your ONID information. • After logging in, please open a second tab in your browser and go to CWS Training at • http://oregonstate.edu/cws/training • Locate the name of this workshop in the list and click it. This will take you to a page describing the course with download links at the bottom of the page. • Download the lab materials to your desktop and unzip them.

  4. Getting Started: Assignment • Your personal training site should have both the OSU Grey and OSU Orange themes enabled. • The OSU Grey theme should be the default theme in use – at least for the duration of this workshop.

  5. Getting Started: Ex. 01 A Theme Enabling Refresher • Blocks and Themes interact closely with each other, so let’s refresh our memories on how to enable a theme… • Go to Administer > Site building > Themes and enable OSU Drupal Lite and OSU Linen. • Just enable them. Don’t choose them as the default. • Remember to click the Save Configuration button afterwards.

  6. Getting Started: Layout Overview • “Old-fashioned” layout, in terms of print media, regards the final arrangement of information to be displayed to a viewer. It’s how a printed page looks – where images are, where text columns exist, etc. • Web page design, naturally, adopted this term as well. • One of the best features of Drupal is its layout versatility. The appearance can be changed very quickly – as we discovered in the Drupal 6 Exploring OSU Themes workshop. • This isn’t the only way to change the appearance though, or the functionality. • Blocks provide the easiest and most robust way of adding and moving things around on your site: from menus, to images, to add-ons such as poll results or OSU Event Calendar information. • First we should get a grasp on just what a Block is…

  7. Blocks: Overview • What Blocks are: • Movable groups of content on a web page • Ex: A menu block, a “widget”, a hyperlinked list of content • Note: A Menu will always reside within a Block, but a Block does not have to contain only Menus • How Blocks are created: • Some are created automatically by modules • Others may be created manually • Why Blocks are used: • To establish the layout of a page • Help provide a measure of consistency across a web site • Provide additional functionality • Provide structure and readability to content • To “restrict” content access to particular roles

  8. Content Content Top Horizontal Bar Left Sidebar Pre-Content Right Sidebar Top Horizontal Bar Content Left Sidebar Pre-Content Right Sidebar Content Post-Content Footer Post-Content Footer Blocks: Overview – Layout Regions • Regions are areas on your theme where you can place Blocks. These areas are defined in the theme programming. Menu Block Menu Block • Different themes may or may not contain different regional areas, as well as different quantities of regions. It all depends on the design.

  9. Blocks: Overview – Control Panel 3 • Let’s explore the Blocks screen: • Click on Administer > Site building > Blocks • Yellow bar areas are the available Regions – these are places where Blocks can be placed • These Regions correspond to the table rows and Region column at the center of your screen – this is how things are laid out on a Drupal page • Different Themes can possess different Regions • At the top of the screen, is a list of the different enabled themes on the site • Click on the OSU Lite theme to see what happens Enabled Themes 2 1

  10. Blocks: Overview – Layout Region Variation • OSU Grey • OSU Color Scheme • 7 Regions • Fixed sidebar width • OSU Lite • Blue, white & orange color scheme • 4 Regions • Fixed sidebar width Administrators can change themes quite easily. When this happens, Blocks may have to be repositioned for the new theme. Note the lack of a Book navigation block on OSU Lite Now switch back to OSU Grey…

  11. Blocks: Basic Configuration & Enabling • The settings for any other block used on one theme generally will not automatically transfer over if a theme is switched. These blocks must be configured and enabled respective to each theme they are used with. • The terms configure and enable are common in IT practices – what do these terms mean though? Configure: to set something up so it functions in a desired way. Different configurations can be applied to blocks to force them to perform in different ways. Enable: in Drupal terms, to “turn something on” or make it capable of working. For blocks to appear on your screen they must be enabled. • In the following exercises, we’ll configure and enable some different default blocks to see the various ways we can get them to behave.

  12. Blocks: Basic Configuration & Enabling – Ex. 02 Configure Block Title Visibility • A title display is a basic configurable option that all blocks possess. A block title can be configured to show the block name, a different name, or no name at all. • To configure a block title so it shows no name, do the following: • Locate the Primary Links block and click the configure link • Type <none> in the Block title field • Click the Save block button 1 2 3

  13. Blocks: Basic Configuration & Enabling – Ex. 02 Configure Block Title Visibility – Result • The completed configuration displays a Primary Links block that has no title. • Optionally, a different name could be applied to the block, if desired. Before After

  14. Blocks: Basic Configuration & Enabling – Ex. 03 Glossary: Random Block • Let’s add a feature to our site that makes use of some work we’ve already done – we’ll add a Today’s Featured Method block that makes use of Glossary and one of its blocks: • From within the Blocks main screen at Administer > Site building > Blocks, scroll down to the Disabled group and locate the Glossary: Random block • It’s best to make configurations first, so click on the Glossary: Random blocks configure link to open the configuration screen. 1 2

  15. Blocks: Basic Configuration & Enabling – Ex. 03 Glossary: Random Block – Configure • From within the block configuration panel, make the following configurations: • In the Block title field, add the text Today’s Featured Method • In the Choose from group, select the Cooking Methods option. • In the Update every fields, type 1 in the first field and select days from the drop down menu • Leave the Show term as link box checked • Click the Save block button • After saving the block, you will be redirected back to the main Blocks panel 1 2 3 4 5

  16. Blocks: Basic Configuration & Enabling – Ex. 03 Glossary: Random Block – Enable • Now that we’ve configured the Glossary: Random block, it will need to be enabled to be visible: • Locate the Glossary: Random block in the Disabled group • Select the post-content option from the drop-down menu Note: This will immediately move the block up to the area specified within the enabled group • Click the Save blocks button 1 2 Block moves to designated location when enabled 3

  17. Blocks: Basic Configuration & Enabling – Ex. 03 Glossary: Random Block – Completed • View the new addition to the layout by scrolling down the screen.

  18. Blocks: Basic Configuration & Enabling – Ex. 03 Glossary: Random Block – Check Home Page • Now go to the Home page to see how this interacts with the layout of existing content. • A few benefits are realized here now: • The front page has additional content added to it – making it more interesting and fleshed out • The content that has been added is actually “reused” from another source • The content automatically changes as specified • This is quite a list of benefits provided for the time it took to configure and enable one block.

  19. Blocks: Page Visibility • You may have noticed that our newly configured Featured Method block currently shows up on every page of the site. • For some things, such as contact information in a footer, inclusion on every page is a good idea. • Other things, such as our Featured Method block, may lose impact, not be relevant on some pages, or even get annoying if seen on every single page of a site – especially if the site grows very large. • Fortunately, with every block used in Drupal, the Page Visibility can be set in the block configuration. • This means, simply, that you can tell your block to appear on the pages that you want it to appear on and “hide” at other times. • Let’s find out how to do this…

  20. Blocks: Page Visibility – Ex. 04 Configure Page Visibility • We’ll configure our Featured Method block to show only on the Home page – to do this, return to the configuration screen for the Glossary: Random block by clicking its configure link: • Scroll down the screen to the Page specific visibility settings group and select the Show on only the listed pages option • In the Pages field, enter the term <front> • Click the Save blocks button 1 2 3

  21. Blocks: Page Visibility – Ex. 04 Configure Page Visibility – Completed • As a result, only the front page shows our Today’s Featured Methods block, while all others do not show it

  22. Blocks: Summary • As can be seen up to this point, Blocks play a very large role in Drupal. It’s really where most of the versatility comes from. • Blocks interact with many other features on a Drupal site: • Content • Themes • Modules • Views • Blocks do so much, that sometimes it’s easy to forget the main reason for having them in the first place…Menus. • Menus, the automated ones that we can move around easily on a Drupal site, must all reside in blocks.

  23. Menus: Overview • What Menus are: • An organized list of features or content • Often contains sub-items • How Menus are created: • Standard menus automatically created during Drupal installation • Navigation menu • Primary Links menu • Secondary Links menu • Custom menus can be created manually by all contributors on an OSU Drupal 6 site • Why Menus are used: • To provide organization and clear direction • Users want to “get there” in four clicks or less • A plain website with a great menu system will beat out a beautiful website with a poorly designed menu system anytime

  24. Menus: Control Panel • The Menus control panel is where a list of all available menus on the site exists. • This is where to go to quickly order groups of menu links and add new menus. • To view the Menus control panel: • In the Navigation menu, click on Administer > Site building > Menus • The List menus panel provides a list of all available menus on the site Note that there is no menu called “Books” – Book content actually has its own special area independent from Menus • Click on the Navigation link 2 3 1

  25. Menus: Control Panel – Ex. 05 Organize Menus Items • Menu items can be manually grabbed and dragged to put them in the order you want them in • Click on the cross icon next to a menu item and hold it • Drag the item to a new position up or down the list – you can even make it a child by indenting it beneath another item • Click the Save configuration button when you are done ordering things • Now return your items back to their original order (remember to click the Save configuration button when finished) 1 Grab with mouse… 2 …drag to desired location 3

  26. Menus: Custom Menu Blocks • Adding items to menus in OSU Drupal 6 is very easy – it can be done right through the content form. Most of the time the user doesn’t even have to go into the Menus feature. • At some point there may be a need to create a custom menu, though. This could be for a few different reasons: • More refined content organization • To highlight a specific set of links • To configure a menu block to show only under a certain set of conditions • As mentioned previously,Menus, in Drupal, are always contained within a Block. In fact, the Menus feature will actually create a block for you. • In the following exercise, we’ll create a custom menu block that contains links to external websites that relate well to our Food For Thought web site.

  27. Menus: Custom Menu Blocks – Ex. 06 Create Custom Menu Block • To create a custom menu block: • From within the Menus feature main screen at Administer > Site building > Menus, click on the Add menu tab • In the Menu name field, enter the name of-interest This name must contain ONLY lowercase letters, numbers, and hyphens. It must also be a unique name • In the Title field, enter the title Of Interest The title can be mixed case and contain spaces • In the Description field, provide some descriptive text regarding what this menu block is for • Click the Savebutton 1 2 3 4 5

  28. Menus: Custom Menu Blocks – Ex. 06 Create Custom Menu Block – Of Interest Menu Block Created • After the Of Interest menu is created, you will be redirected to the Of Interest menu screen, which currently contains no items • Note the addition of the Of Interest menu link in the Navigation menu To see all menus, click on the Menus item in the Navigation menu • Now we need to add a Menu item 1

  29. Menus: Custom Menu Blocks – Ex. 06 Create Custom Menu Block – Add Menu Item • To add a menu item, click on the Add Item tab at the top of the screen and complete the following information: • Path field = http://www.mypyramid.gov • Menu link title field = MyPyramid.gov • Description field = Link to the USDA’s food group guidelines. • Weight field = -50 • Note that while this new menu appears in the menu list, no block named Of Interest appears on the screen • We still have to go in to Blocks to configure and enable the menu block and we also need to add some content to make this menu visible.

  30. Menus: Custom Menu Blocks – Ex. 06 Create Custom Menu Block – Enable Of Interest Menu Block • To enable the Of Interest block go to Administer > Site building > Blocks: • Once on the Blocks panel, scroll down the page to the Disabled group and locate the Of Interest block • Select the right sidebar option from the Region drop down menu • Grab the small cross on the Of Interest item and position it under the Navigation block • Click the Save blocks button 1 2 4 3

  31. Menus: Custom Menu Blocks – Ex. 06 Create Custom Menu Block – Completed • The Of Interest block will appear beneath the Navigation block

  32. Menus: Custom Menu Blocks – Now You Do It – Add Item To Of Interest Menu Block • Go to Administer > Menus > Of Interest > Add Itemtaband add another link to the Of Interest block • Path field = copy & paste link from lab materials • ex-06.doc • Menu link title field = Calorie Finder • Description field = copy & paste description from lab materials • ex-06.doc • Enabled option= Leave as is • Expanded option = Leave as is • Parent item field = Leave as is • Weight field = -49 • Click theSave button

  33. Nice Menus: Overview • The default menu effect in OSU Drupal 6 is an expanding menu. Some users prefer what is commonly referred to as “fly-out” or “drop-down” menus (for top menu navigation). • The “fly-out” menu style is now available in OSU Drupal 6 as a configurable option for users. This effect is created through the use of a contributed module called Nice Menus. Fly-Out Menu Style Expanding Menu Style

  34. Nice Menus: Ex. 07 Create Extra Nice Menus Blocks • By default, there are two Nice Menus blocks that already exist – if you want all menus on your site to fly out, and more than two menus are used on the site, more Nice Menus blocks must be generated. To do this: • In the Navigation menu go to Administer > Site configuration > Nice Menus • In the text field, enter the number 5 • Leave Enable IE Support checked • Click the Save configuration button 1 2 3 4

  35. Nice Menus: Ex. 08 Nice Menus For Navigation Menu • Let’s make the Navigation menu a fly-out style. From the Blocks main panel at Administer > Site Building > Blocks: • Scroll down into the Disabled group and locate the Nice Menu 1 block • Click on the corresponding configure link 1 2

  36. Nice Menus: Ex. 08 Nice Menus For Navigation Menu – Configure Nice Menus 1 Block • Within the Nice Menu 1 block configuration screen: • Leave the Block title field as is • Leave the Menu Name field as is • From the Source Menu Tree field, select <Navigation> • Leave the Menu Style set at right • Click the Save block button 1 2 3 4 5

  37. Nice Menus: Ex. 08 Nice Menus For Navigation Menu – Enable Nice Menus 1 Block • After redirection back to the Blocks list: • Locate Nice Menu 1 in the Disabled list • Select left sidebar in the corresponding drop-down menu • In the NavigationblockRegion field select <none> • Click the Save blocks button 1 2 3 4

  38. Nice Menus: Now You Do It – Nice Menus For Primary Links • Configure and enable the Nice Menu 2 block for Primary Links • Configure • Go to = Administer > Site building > Blocks > Nice Menu 2 > configure link • Block title field = Leave as is • Menu name field = Leave as is • Source Menu tree field = <Primary Links> • Menu Style field = down • Click Save block button • Enable (after configuration) • Nice Menu 2block region = top horizontal bar • Primary Linksblock region= <none> • Click Save blocks button

  39. Optimized Menus • Space is a valuable asset for a web page. The space “above the fold” – which is the area above the bottom of your screen – is considered prime real estate. • This is why it’s a good idea to make the best use of that space as possible. • Our Book navigation block is a great tool – but we don’t always need it to be there. Remember, this little collection is really more of an appendix to what will be the Recipes section of our site. • There is a way to get the Book navigation block to show up only when we need it to by combining the Page Visibility setting that we’ve worked with, along with the Primary Links menu that we’ve put at the top of our site. • Let’s find out how to do this.

  40. Optimized Menus: Ex. 09 Combine Menu Features – Add Book Page Parent to Primary Links • First, we have to add the top page of our Cooking Companion book to our Primary Links menu: • Click on the Cooking Companion link in the Book Navigation block and open it in Edit mode • Open the Menu settings group and enter the following: Menu link titlefield:Cooking Companion Parent itemfield:<Primary Links> Weightfield:-49 • Click the Save button • A new link appears in Primary links 1 2 3 4

  41. Optimized Menus: Ex. 09 Combine Menu Features – Configure Book Navigation Block • Now, go to Administer > Site building > Blocks to configure the Book navigation block: • Locate the Book navigation block in the right sidebar group and click on its configure link • In the Block title field, enter the title Cooking Companion • In the Book navigation block display group, select Show block only on book pages • Click the Save block button 1 2 3

  42. Optimized Menus: Ex. 09 Combine Menu Features – Completed • Click on the Home link to view the Home page… • …and then compare it to the Cooking Companion page

  43. Beyond Menus • As can be witnessed, Blocks can do quite a bit in terms of how the various menus on a site can be laid out. • But, Blocks extends beyond navigational items as well. • Many different modules that are installed on Drupal sites automatically generate blocks that can be used to increase the appearance, functionality, or entertainment value of a site. • The following exercises are going to focus on increased functionality by looking at some default blocks that are included on your OSU Drupal 6 site: • Announcement blocks • Poll Results block • Feed Aggregator blocks • Note: These are not the only blocks available – there are many more you can experiment with.

  44. Beyond Menus: Announcement Blocks • In the OSU Drupal 6 Content Types workshop we worked with the Announcement content type. The content that was entered into this form would then automatically show and hide itself in a block based upon a Publication and Expiration date entered. • So we know how to make the Announcement content – let’s close the circle by learning how to work with the blocks that correspond with this content type. • There exist two different Announcement blocks in OSU Drupal 6: • Announcements: Small List Provides Announcement title, publication date, and View All link in block • Announcements: Summaries Provides Announcement title, teaser content, Read More link, publication date and expiration date

  45. Beyond Menus: Announcement Blocks – Ex. 10 Add Announcements: Small List Block – Enable • To enable the Announcement block, go to Administer > Site building > Blocks and do the following: • On the Blocks main page, locate the Announcements: Small List block in the Disabled list and select left sidebar from it’s corresponding drop down menu • Position the Announcements: Small List beneath the Nice Menu 1 block • Click the Save blocks button 1 2 3

  46. Beyond Menus: Announcement Blocks – Ex. 10 Add Announcements: Small List Block – Completed • Two things are important to note here: • First – the Announcement: Small List block was purposely placed beneath the Navigation menu and above the Of Interest menu. This is to assist people who work on the site. The Navigation menu will not appear for Anonymous users, but Announcement lists can grow long and get in the way for site contributors. • Second - the Announcement: Small List block is now enabled, but there currently is no content.

  47. Beyond Menus: Announcement Blocks – Now You Do It – Announcement Content Lab • Create an Announcement to populate the Announcements: Small List block • Title field = BBQ Recipe Contest • Body field = use lab materials: • ex-10.doc • Input Format option = Full HTML • Publication Date field = Today’s date • Expiration Date field = Three months from now • Preview and Save • Note how the Announcements: Small List menu block now appears in the left sidebar region

  48. Beyond Menus: Announcement Blocks – Now You Do It – Announcement: Summaries Block Lab • Now return to Administer > Site building > Blocks and enable the Announcements: Summaries block to see what it looks like. • When you’re done, decide which one you like best and disable the one you don’t want.

  49. Beyond Menus: Most Recent Poll Block • In the Drupal 6 Content Types workshop, we explored how to create the Poll content type. • Poll functionality can be increased by using the Most Recent Poll block, which will provide your site’s guests and contributors with the ability to interact with your site. • The most recent poll available will automatically show up in a block on your user’s screen. When the user submits a response to the poll, he or she will then see the current results of the poll. • As new polls are added to a site, the most recent will show. A link is provided at the bottom of the block to lead users to older polls they may not have taken. • Let’s take a look at how this works…

  50. Beyond Menus: Most Recent Poll Block – Ex. 11 Add Most Recent Poll Block – Enable • To activate the Most Recent Poll block go to Administer > Site building > Blocks and do the following: • Locate the Most recent poll block in the Disabled list and select right sidebar in the corresponding drop down menu • Position the Most recent poll block below the Book navigation block • Click the Save blocks button • The block will not show because we don’t have a poll going yet, so let’s make one… 1 2 3

More Related