Drupal/C3/Modifying-the-Page-Layout/English-timed

From Script | Spoken-Tutorial
Revision as of 18:05, 30 August 2016 by Pratik kamble (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Time Narration
00:01 Welcome to the Spoken tutorial on Modifying the Page Layout.
00:06 In this tutorial, we will learn about
  • Layouts
  • Block Configuration and Permissions and Removing and Re-ordering blocks
00:16 To record this tutorial, I am using
  • Ubuntu Linux Operating System
  • Drupal 8 and Firefox Web browser
00:26 You can use any web browser as per your choice.
00:30 First we will learn about layout.
00:33 Here we will get an introduction to Themes and Blocks
00:37 Themes give us the general layout, look and feel of our site.
00:42 I will introduce you to Themes in a little while.
00:47 For now, understand that a Theme can be applied to a Drupal site, without changing the content.
00:54 And* it gives us the colour scheme,* location of the Blocks,
  • and all the formating for the text and images.
01:03 Previously, we learnt that Blocks are information that can be placed in various areas of a site.
01:10 Blocks go into Block regions, and Block regions are determined by the Theme.
01:15 In the design area,
  • we have Blocks,
  • we have Themes and we have Menus.
01:23 Please note:We didn’t talk about or apply our Themes earlier.
01:29 This was done to highlight the fact, that we can apply a Theme at any point while building a site.
01:36 The only reason we’ve waited till now, is to show that we can wait till the very end, to apply a Theme.
01:42 But I will always prefer to apply my Theme as soon as it’s ready.
01:49 Let us open our website which we created earlier.
01:52 Let’s now get into the layout, with a look at Blocks and Block regions.
01:58 Blocks enable us to place information anywhere on our site.
02:03 Go to Structure, and Block layout.
02:06 All the blocks that are available from our current theme are here.
02:11 For eg: Header, Primary Menu, Secondary Menu, and others.
02:18 We’ve actually already placed a few of those.
02:22 Recall, we had placed the Welcome To Drupalville custom block in the sidebar.
02:28 It appears in the left sidebar on this particular theme.
02:33 We also added a Recent Events Added view to our Left sidebar.
02:39 Now, let’s learn how to configure and to give permission to our blocks.  
02:44 First, we need to know which Block Regions do what.
02:48 At the top, there is a Demonstrate Block Regions.
02:52 Click on it.
02:53 Every theme in Drupal gives us this kind of a picture, of where the Block Regions are.
03:00 Block Regions are dependent on the themes.
03:04 In Bartik, we have the options
03:07 Secondary Menu, Header,
03:09 Primary Menu, Highlighted, Featured top, Breadcrumb, Sidebar first, Content
03:16 Sidebar second.
03:18 We can place any block in any region.
03:21 The important ones like the Content block should be left in the Content region.
03:27 Let us click on Exit.
03:30 Leave the Breadcrumbs block in the Breadcrumbs region.
03:34 But there are some other things we can move around.
03:38 Move the Search block by either- Clicking and dragging it or
03:43 Clicking on the drop down and putting it in the HeaderAnd it moves up.
03:49 Similarly, move the Welcome to Drupalville to the top of Sidebar first.
03:55 Save the changes by clicking on the Save button.
03:59 Now, let’s go to the Homepage to see the changes.
04:03 Here’s our search bar, up in the header.
04:06 And our Welcome to Drupalville block is now at the very top.
04:11 So, that’s how we position and order blocks.
04:15 Now, we will move to configurations and permissions of Blocks.
04:20 Click on Structure, and Block layout.
04:24 And let’s find our Recent Events Added block.
04:27 Right now it’s in Sidebar first and it’s visible on every page.
04:33 Click on Configure.
04:35 Right now, Recent Events Added block is visible everywhere.
04:40 But we may want it to show up only on an event page.
04:44 Put a checkmark in Events, and click Save Block.
04:49 Once again, scroll down and click Save Block button again.
04:54 Click Back to site.
04:56 Now the Recent Events Added block is not there anymore.
05:00 But if we go to an event, we can see Recent Events Added.
05:05 Now, up here under the Welcome to Drupalville block, we see the welcome message.

Which is not necessary once we have logged in.

05:15 Let’s hide that.
05:17 Just click on the little pencil here and choose Configure Block.
05:22 One of the great things about Drupal is, we can edit the front end using the pencil or the gear.
05:29 Instead of restricting by Content type, let’s restrict it by an individual page.
05:35 See here, ’Specifying pages by using their paths’.
05:40 To hide or show something on the front page, use this angle bracket- front- angle bracket.
05:47 Copy and paste it. Now choose ‘Show just for the listed page’.
05:52 Our welcome block will be only on the Homepage.
05:58 Let’s go one step further.
06:00 Click on Roles, and put a checkmark in Anonymous user.
06:05 And click on Save block.
06:07 Now, it’s only going to show up, when we’re not logged in.
06:12 We don’t see this message because we are logged in right now.
06:16 Let’s logout, and our Welcome to Drupalville block shows up again.
06:21 But when we login, and click on Home, it’s no longer there.
06:27 So configuring, moving, and giving permissions to Blocks is really quite simple.
06:34 Let’s practice this more.
06:36 Click on Structure and then on Blocks.
06:40 We have the Main navigation in the Primary menu block.
06:44 If we move that, then our Main navigation will be in a completely different place.
06:51 Down here at the bottom, we have: Featured bottom first, second and third
06:58 Footer first, second, third, fourth and fifth
07:03 Powered by Drupal and Footer menu in the Footer fifth location.
07:08 Right now, there are no disabled blocks.
07:12 Let’s put one of our menus in the Footer first block region.
07:17 Scroll back up to the top.
07:19 Find your User account menu and put that in Footer first.
07:25 It is immediately moved down.
07:28 Now, click on Save blocks.
07:31 Back to the site.
07:33 Scroll down and see that the user account, instead of being at the top, is down here in the footer.
07:40 So, any block can be placed anywhere, for any purpose.
07:45 Go back to Structure and Block layout.
07:49 Let’s now remove a block.
07:52 Let’s remove Powered by Drupal from the Footer fifth block.
07:57 Simply click on the drop-down and choose None.Then click on Save blocks.
08:04 Scroll down now.
08:06 We can see that Powered by Drupal block is now in the disabled block region.
08:12 Click on Back to site to see that it’s totally gone.
08:16 With this we come to an end of this tutorial.
08:19 Let us summarize.
08:21 In this tutorial we have learnt about
  • Layouts
  • Block Configuration and Permissions and
  • Removing and re-ordering blocks
08:42 This video is adapted from Acquia and OSTraining and revised by the Spoken Tutorial Project, IIT Bombay.
08:50 The video at this link summarises the Spoken Tutorial project. Pls download and watch it.
08:56 The Spoken Tutorial Project Team conducts workshops and gives certificates.For more details, please write to us.
09:04 Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture Government of India.
09:15 This is Vanessa Varkey signing off.Thanks for joining.

Contributors and Content Editors

Nancyvarkey, PoojaMoolya, Pratik kamble, Sandhya.np14