Difference between revisions of "Drupal/C3/Modifying-the-Page-Layout/English-timed"
From Script | Spoken-Tutorial
Sandhya.np14 (Talk | contribs) |
Sandhya.np14 (Talk | contribs) |
||
| Line 29: | Line 29: | ||
|- | |- | ||
| 00:30 | | 00:30 | ||
| − | | First we will learn about '''layout'''. | + | | First, we will learn about '''layout'''. |
|- | |- | ||
| Line 37: | Line 37: | ||
|- | |- | ||
| 00:37 | | 00:37 | ||
| − | | '''Themes''' | + | | '''Themes''' gives us the general layout, look and feel of our '''site'''. |
|- | |- | ||
| Line 53: | Line 53: | ||
|- | |- | ||
| 01:03 | | 01:03 | ||
| − | | Previously, we learnt that''' Blocks''' are information that can be placed in various areas of a | + | | Previously, we learnt that''' Blocks''' are information that can be placed in various areas of a site. |
|- | |- | ||
| Line 64: | Line 64: | ||
* we have''' Blocks''', | * we have''' Blocks''', | ||
| − | * we have''' Themes''' and * we have''' Menus'''. | + | * we have''' Themes''' and |
| + | * we have''' Menus'''. | ||
|- | |- | ||
| Line 72: | Line 73: | ||
|- | |- | ||
| 01:29 | | 01:29 | ||
| − | | This was done to highlight the fact that we can apply a''' Theme''' at any point while building a | + | | This was done to highlight the fact that we can apply a''' Theme''' at any point while building a site. |
|- | |- | ||
| Line 80: | Line 81: | ||
|- | |- | ||
| 01:42 | | 01:42 | ||
| − | | But I will always prefer to apply my''' Theme''' as soon as it’s ready. | + | | But, I will always prefer to apply my''' Theme''' as soon as it’s ready. |
|- | |- | ||
| Line 92: | Line 93: | ||
|- | |- | ||
| 01:58 | | 01:58 | ||
| − | | '''Blocks '''enable us to place information anywhere on our | + | | '''Blocks '''enable us to place information anywhere on our site. |
|- | |- | ||
| Line 116: | Line 117: | ||
|- | |- | ||
| 02:28 | | 02:28 | ||
| − | | It appears in the left sidebar on this particular | + | | It appears in the left sidebar on this particular theme. |
|- | |- | ||
| Line 140: | Line 141: | ||
|- | |- | ||
| 02:53 | | 02:53 | ||
| − | | Every''' theme''' in | + | | Every''' theme''' in Drupal gives us this kind of a picture of where the''' Block Regions''' are. |
|- | |- | ||
| Line 180: | Line 181: | ||
|- | |- | ||
| 03:34 | | 03:34 | ||
| − | | But there are some other things we can move around. | + | | But, there are some other things we can move around. |
|- | |- | ||
| Line 329: | Line 330: | ||
|- | |- | ||
| 06:27 | | 06:27 | ||
| − | | So configuring, moving, and giving''' permissions''' to''' Blocks''' is really quite simple. | + | | So, configuring, moving, and giving''' permissions''' to''' Blocks''' is really quite simple. |
|- | |- | ||
| Line 361: | Line 362: | ||
|- | |- | ||
| 07:08 | | 07:08 | ||
| − | | Right now, there are no disabled | + | | Right now, there are no disabled blocks. |
|- | |- | ||
| Line 385: | Line 386: | ||
|- | |- | ||
| 07:31 | | 07:31 | ||
| − | | | + | | '''Back to the site.''' |
|- | |- | ||
Revision as of 22:53, 8 September 2016
| Time | Narration |
| 00:01 | Welcome to the Spoken tutorial on Modifying the Page Layout. |
| 00:06 | In this tutorial, we will learn about:
|
| 00:16 | To record this tutorial, I am using:
|
| 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 gives 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 formatting 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,
|
| 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 e.g: 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 Breadcrumb 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 Header. And, 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 check-mark 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, ’Specify 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 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 check-mark 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:
|
| 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 summarizes the Spoken Tutorial project. Please 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. |
