Difference between revisions of "Drupal/C3/Modifying-the-Page-Layout/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "{| border =1 | '''Time''' |'''Narration''' |- | 00:01 | Welcome to the Spoken tutorial on''' Modifying the Page Layout.''' |- | 00:06 | In this tutorial, we will learn abou...")
 
 
(6 intermediate revisions by 3 users not shown)
Line 5: Line 5:
 
|-
 
|-
 
| 00:01
 
| 00:01
−
| Welcome to the Spoken tutorial on''' Modifying the Page Layout.'''
+
| Welcome to the '''Spoken tutorial''' on''' Modifying the Page Layout.'''
  
 
|-
 
|-
 
| 00:06
 
| 00:06
−
| In this tutorial, we will learn about
+
| In this tutorial, we will learn about:
−
 
+
'''Layouts'''
−
* '''Layouts'''
+
'''Block Configuration''' and
−
* '''Block Configuration''' and '''Permissions''' and Removing and Re-ordering '''blocks'''
+
'''Permissions''' and  
 +
Removing and Re-ordering '''blocks'''.
  
 
|-
 
|-
 
| 00:16
 
| 00:16
−
| To record this tutorial, I am using
+
| To record this tutorial, I am using:
−
 
+
'''Ubuntu Linux '''Operating System
−
* '''Ubuntu Linux '''Operating System
+
'''Drupal 8''' and '''Firefox '''Web browser.
−
* '''Drupal 8''' and '''Firefox '''Web browser
+
  
 
|-
 
|-
Line 27: Line 27:
 
|-
 
|-
 
| 00:30
 
| 00:30
−
| First we will learn about layout.
+
| First, we will learn about '''layout'''.
  
 
|-
 
|-
 
| 00:33
 
| 00:33
−
| Here we will get an introduction to''' Themes '''and''' Blocks'''  
+
| Here, we will get an introduction to''' Themes '''and''' Blocks'''.
  
 
|-
 
|-
 
| 00:37
 
| 00:37
−
| '''Themes''' give us the general layout, look and feel of our '''site'''.
+
| '''Themes''' gives us the general layout, look and feel of our '''site'''.
  
 
|-
 
|-
Line 47: Line 47:
 
|-
 
|-
 
| 00:54
 
| 00:54
−
| And* it gives us the colour scheme,* location of the''' Blocks''',
+
| And, it gives us the colour scheme, location of the''' Blocks''' and all the formatting for the text and images.
−
* and all the formating for the text and images.
+
  
 
|-
 
|-
 
| 01:03
 
| 01:03
−
| Previously, we learnt that''' Blocks''' are information that can be placed in various areas of a''' site'''.
+
| Previously, we learnt that''' Blocks''' are information that can be placed in various areas of a site.
  
 
|-
 
|-
 
| 01:10
 
| 01:10
−
| '''Blocks''' go into''' Block''' regions, and''' Block regions''' are determined by the''' Theme'''.
+
| '''Blocks''' go into Block regions and Block regions are determined by the''' Theme'''.
  
 
|-
 
|-
 
| 01:15
 
| 01:15
 
| In the design area,
 
| In the design area,
−
 
+
we have''' Blocks''',
−
* we have''' Blocks''',
+
we have''' Themes''' and  
−
* we have''' Themes''' and we have''' Menus'''.
+
we have''' Menus'''.
  
 
|-
 
|-
 
| 01:23
 
| 01:23
−
| Please note:We didn’t talk about or apply our''' Themes''' earlier.
+
| Please note, we didn’t talk about or apply our''' Themes''' earlier.
  
 
|-
 
|-
 
| 01:29
 
| 01:29
−
| This was done to highlight the fact, that we can apply a''' Theme''' at any point while building a''' site.'''
+
| This was done to highlight the fact that we can apply a''' Theme''' at any point while building a site.
  
 
|-
 
|-
 
| 01:36
 
| 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'''.
+
| 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
 
| 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 87: Line 86:
 
|-
 
|-
 
| 01:52
 
| 01:52
−
| Let’s now get into the''' layout''', with a look at''' Blocks''' and''' Block regions.'''
+
| Let’s now get into the''' layout''' with a look at''' Blocks''' and''' Block regions.'''
  
 
|-
 
|-
 
| 01:58
 
| 01:58
−
| '''Blocks '''enable us to place information anywhere on our''' site'''.
+
| '''Blocks '''enable us to place information anywhere on our site.
  
 
|-
 
|-
 
| 02:03
 
| 02:03
−
| Go to''' Structure''', and''' Block layout.'''
+
| Go to''' Structure''' and''' Block layout.'''
  
 
|-
 
|-
Line 103: Line 102:
 
|-
 
|-
 
| 02:11
 
| 02:11
−
| For eg: '''Header, Primary Menu, Secondary Menu''', and others.
+
| For e.g: '''Header, Primary Menu, Secondary Menu''' and others.
  
 
|-
 
|-
Line 111: Line 110:
 
|-
 
|-
 
| 02:22
 
| 02:22
−
| Recall, we had placed the''' Welcome To Drupalville''' custom''' block''' in the''' sidebar.'''
+
| Recall, we had placed the "Welcome To Drupalville" '''custom block''' in the''' sidebar.'''
  
 
|-
 
|-
 
| 02:28
 
| 02:28
−
| It appears in the left''' sidebar''' on this particular''' theme'''.
+
| It appears in the left sidebar on this particular theme.
  
 
|-
 
|-
 
| 02:33
 
| 02:33
−
| We also added a''' Recent Events Added''' view to our '''Left sidebar'''.
+
| We also added a "Recent Events Added" '''view''' to our '''Left sidebar'''.
  
 
|-
 
|-
 
| 02:39
 
| 02:39
−
| Now, let’s learn how to configure and to give permission to our''' blocks'''.  
+
| Now, let’s learn how to configure and to give permission to our''' blocks'''.  
  
 
|-
 
|-
Line 131: Line 130:
 
|-
 
|-
 
| 02:48
 
| 02:48
−
| At the top, there is a''' Demonstrate Block Regions.'''
+
| At the top, there is a''' Demonstrate Block Regions.''' Click on it.
−
 
+
−
|-
+
−
| 02:52
+
−
| Click on it.
+
  
 
|-
 
|-
 
| 02:53
 
| 02:53
−
| Every''' theme''' in''' Drupal''' gives us this kind of a picture, of where the''' Block Regions''' are.
+
| Every''' theme''' in Drupal gives us this kind of a picture of where the''' Block Regions''' are.
  
 
|-
 
|-
Line 147: Line 142:
 
|-
 
|-
 
| 03:04
 
| 03:04
−
| In''' Bartik''', we have the options''' '''
+
| In''' Bartik''', we have the options:
  
 
|-
 
|-
 
| 03:07
 
| 03:07
−
| '''Secondary Menu, ''' '''Header, '''
+
|'''Secondary Menu,  Header''',
  
 
|-
 
|-
 
| 03:09
 
| 03:09
−
| '''Primary Menu,''' '''Highlighted, ''' '''Featured top, '''  '''Breadcrumb, ''' '''Sidebar first, '''  '''Content'''
+
| '''Primary Menu,  Highlighted, Featured top, Breadcrumb, Sidebar first, Content'''
  
 
|-
 
|-
Line 175: Line 170:
 
|-
 
|-
 
| 03:30
 
| 03:30
−
| Leave the''' Breadcrumbs block''' in the''' Breadcrumbs region.'''
+
| Leave the''' Breadcrumbs''' block in the''' Breadcrumb''' region.
  
 
|-
 
|-
 
| 03:34
 
| 03:34
−
| But there are some other things we can move around.
+
| But, there are some other things we can move around.
  
 
|-
 
|-
 
| 03:38
 
| 03:38
−
| Move the''' Search block''' by either- Clicking and dragging it or
+
| Move the''' Search block''' by either- clicking and dragging it or
  
 
|-
 
|-
 
| 03:43
 
| 03:43
−
|  Clicking on the drop down and putting it in the''' Header'''And it moves up.
+
|  clicking on the drop down and putting it in the''' Header'''. And, it moves up.
  
 
|-
 
|-
 
| 03:49
 
| 03:49
−
| Similarly, move the''' Welcome to Drupalville''' to the top of''' Sidebar first'''.
+
| Similarly, move the "Welcome to Drupalville" to the top of''' Sidebar first'''.
  
 
|-
 
|-
Line 207: Line 202:
 
|-
 
|-
 
| 04:06
 
| 04:06
−
| And our''' Welcome to Drupalville block''' is now at the very top.
+
| And our "Welcome to Drupalville" block is now at the very top.
  
 
|-
 
|-
Line 219: Line 214:
 
|-
 
|-
 
| 04:20
 
| 04:20
−
| Click on''' Structure''', and''' Block layout.'''
+
| Click on''' Structure''' and''' Block layout.'''
  
 
|-
 
|-
 
| 04:24
 
| 04:24
−
| And let’s find our''' Recent Events Added block'''.
+
| And, let’s find our''' Recent Events Added''' block.
  
 
|-
 
|-
 
| 04:27
 
| 04:27
−
| Right now it’s in''' Sidebar first''' and it’s visible on every page.
+
| Right now, it’s in''' Sidebar first''' and it’s visible on every page.
  
 
|-
 
|-
Line 235: Line 230:
 
|-
 
|-
 
| 04:35
 
| 04:35
−
| Right now,''' Recent Events Added block''' is visible everywhere.
+
| Right now,''' Recent Events Added''' block is visible everywhere.
  
 
|-
 
|-
Line 243: Line 238:
 
|-
 
|-
 
| 04:44
 
| 04:44
−
| Put a checkmark in''' Events''', and click''' Save Block'''.
+
| Put a check-mark in''' Events''' and click''' Save Block'''.
  
 
|-
 
|-
Line 255: Line 250:
 
|-
 
|-
 
| 04:56
 
| 04:56
−
|Now the''' Recent Events Added block''' is not there anymore.
+
|Now, the''' Recent Events Added''' block is not there anymore.
  
 
|-
 
|-
 
| 05:00
 
| 05:00
−
|But if we go to an''' event''', we can see''' Recent Events Added.'''
+
|But, if we go to an''' event''', we can see''' Recent Events Added.'''
  
 
|-
 
|-
 
| 05:05
 
| 05:05
−
| Now, up here under the''' Welcome to Drupalville block''', we see the welcome message.
+
| Now, up here, under the''' "Welcome to Drupalville" block''', we see the welcome message
−
Which is not necessary once we have logged in.
+
which is not necessary once we have logged in.
  
 
|-
 
|-
Line 272: Line 267:
 
|-
 
|-
 
| 05:17
 
| 05:17
−
| Just click on the little''' pencil''' here and choose''' Configure Block.'''
+
| Just click on the little''' pencil''' here and choose''' Configure block.'''
  
 
|-
 
|-
 
| 05:22
 
| 05:22
−
| One of the great things about '''Drupal '''is, we can edit the front end using the pencil or the '''gear'''.
+
| One of the great things about Drupal is, we can edit the '''front end''' using the pencil or the '''gear'''.
  
 
|-
 
|-
Line 284: Line 279:
 
|-
 
|-
 
| 05:35
 
| 05:35
−
| See here, ’'''Specifying pages by using their paths'''’.
+
| See here, ’Specify pages by using their paths..’.
  
 
|-
 
|-
Line 292: Line 287:
 
|-
 
|-
 
| 05:47
 
| 05:47
−
| Copy and paste it. Now choose ‘'''Show just for the listed page'''’.
+
| '''Copy''' and '''paste''' it. Now choose "Show for the listed page".
  
 
|-
 
|-
Line 304: Line 299:
 
|-
 
|-
 
| 06:00
 
| 06:00
−
| Click on''' Roles''', and put a checkmark in''' Anonymous user.'''
+
| Click on''' Roles''' and put a check-mark in''' Anonymous user.'''
  
 
|-
 
|-
Line 312: Line 307:
 
|-
 
|-
 
| 06:07
 
| 06:07
−
| Now, it’s only going to show up, when we’re not logged in.
+
| Now, it’s only going to show up when we’re not logged in.
  
 
|-
 
|-
Line 320: Line 315:
 
|-
 
|-
 
| 06:16
 
| 06:16
−
| Let’s logout, and our''' Welcome to Drupalville block''' shows up again.
+
| Let’s logout and our''' 'Welcome to Drupalville' block''' shows up again.
  
 
|-
 
|-
Line 328: Line 323:
 
|-
 
|-
 
| 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 340: Line 335:
 
|-
 
|-
 
| 06:40
 
| 06:40
−
| We have the''' Main navigation''' in the''' Primary menu block.'''
+
| We have the''' Main navigation''' in the''' Primary menu''' block.
  
 
|-
 
|-
Line 348: Line 343:
 
|-
 
|-
 
| 06:51
 
| 06:51
−
| Down here at the bottom, we have: '''Featured bottom first, second''' and''' third'''
+
| Down here, at the bottom, we have: '''Featured bottom first, second''' and''' third'''
  
 
|-
 
|-
Line 360: Line 355:
 
|-
 
|-
 
| 07:08
 
| 07:08
−
| Right now, there are no disabled''' blocks'''.
+
| Right now, there are no disabled blocks.
  
 
|-
 
|-
 
| 07:12
 
| 07:12
−
| Let’s put one of our''' menus''' in the''' Footer first block region'''.
+
| Let’s put one of our''' menus''' in the''' Footer first''' block region.
  
 
|-
 
|-
Line 384: Line 379:
 
|-
 
|-
 
| 07:31
 
| 07:31
−
| Back to the '''site.'''
+
| '''Back to the site.'''
  
 
|-
 
|-
Line 408: Line 403:
 
|-
 
|-
 
| 07:57
 
| 07:57
−
| Simply click on the drop-down and choose''' None'''.Then click on''' Save blocks.'''
+
| Simply click on the drop-down and choose''' None'''. Then click on''' Save blocks.'''
  
 
|-
 
|-
Line 424: Line 419:
 
|-
 
|-
 
| 08:16
 
| 08:16
−
| With this we come to an end of this tutorial.
+
| With this, we come to an end of this tutorial.
  
 
|-
 
|-
Line 432: Line 427:
 
|-
 
|-
 
| 08:21
 
| 08:21
−
|In this tutorial we have learnt about
+
|In this tutorial, we have learnt about:
−
 
+
'''Layouts'''
−
* '''Layouts'''
+
'''Block Configuration''' and  
−
* '''Block Configuration''' and '''Permissions''' and
+
'''Permissions''' and
−
* Removing and re-ordering '''blocks'''
+
Removing and re-ordering '''blocks'''.
  
 
|-
 
|-
 
| 08:42
 
| 08:42
−
| This video is adapted from Acquia and OSTraining and revised by the Spoken Tutorial Project, IIT Bombay.
+
| This video is adapted from '''Acquia''' and '''OSTraining''' and revised by the '''Spoken Tutorial Project, IIT Bombay'''.
  
 
|-
 
|-
 
| 08:50
 
| 08:50
−
| The video at this link summarises the Spoken Tutorial project. Pls download and watch it.
+
| The video at this link summarizes the Spoken Tutorial project. Please download and watch it.
  
 
|-
 
|-
 
| 08:56
 
| 08:56
−
| The Spoken Tutorial Project Team conducts workshops and gives certificates.For more details, please write to us.
+
| The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
  
 
|-
 
|-
 
| 09:04
 
| 09:04
−
| Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture Government of India.
+
| Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India.
  
 
|-
 
|-
 
| 09:15
 
| 09:15
−
| This is Vanessa Varkey signing off.Thanks for joining.
+
| This is Vanessa Varkey, signing off. Thanks for joining.
  
 
|}
 
|}

Latest revision as of 18:30, 17 October 2016

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 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,

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 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. 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:

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 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.

Contributors and Content Editors

Nancyvarkey, PoojaMoolya, Pratik kamble, Sandhya.np14

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Drupal/C3/Modifying-the-Page-Layout/English-timed&oldid=29436"