Nancyvarkey at 12:12, 14 September 2016

2016-09-14T12:12:35Z

Nancyvarkey at 12:46, 21 July 2016

2016-07-21T12:46:12Z

Priyacst: Created page with "'''Title of Script:''' Modifying the Page Layout '''Keywords:''' video tutorial, Drupal, Introduction to Layout, Themes, Blocks, Menus, Block regions, Block Configuration and..."

2016-07-15T07:19:23Z

Created page with "'''Title of Script:''' Modifying the Page Layout '''Keywords:''' video tutorial, Drupal, Introduction to Layout, Themes, Blocks, Menus, Block regions, Block Configuration and..."

New page

'''Title of Script:''' Modifying the Page Layout

'''Keywords:''' video tutorial, Drupal, Introduction to Layout, Themes, Blocks, Menus, Block regions, Block Configuration and Permissions, Removing and Re-ordering Blocks

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.097cm;"| <center>Visual Cue</center>
| style="border:1pt solid #000000;padding:0.097cm;"| <center>Narration</center>

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 1:

Modifying the Page Layout
| style="border:1pt solid #000000;padding:0.097cm;"| Welcome to the Spoken tutorial on''' Modifying the Page Layout.'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 2:

Learning Objectives

| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn about

* '''Layouts'''
* '''Block Configuration''' and '''Permissions''' and
* Removing and Re-ordering '''blocks'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 3:

System requirement

| style="border:1pt solid #000000;padding:0.097cm;"| To record this tutorial, I am using

* '''Ubuntu Linux '''Operating System
* '''Drupal 8''' and
* '''Firefox '''Web browser

You can use any web browser as per your choice.

|}

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.185cm;"| '''Time'''
| style="border:1pt solid #000000;padding:0.185cm;"| '''Narration'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:05
| style="border:1pt solid #000000;padding:0.185cm;"| First we will learn about layout.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:08
| style="border:1pt solid #000000;padding:0.185cm;"| Here we will get an introduction to''' Themes '''and''' Blocks'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:17
| style="border:1pt solid #000000;padding:0.185cm;"| '''Themes''' give us the general layout, look and feel of our site.

I will introduce you to''' Themes''' in a little while.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:25
| style="border:1pt solid #000000;padding:0.185cm;"| For now, understand that a''' Theme''' can be applied to a''' Drupal site''', without changing the content.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:32
| style="border:1pt solid #000000;padding:0.185cm;"| And

* it gives us the colour scheme,
* location of the''' Blocks''',
* and all the formating for the text and images.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:43
| style="border:1pt solid #000000;padding:0.185cm;"| Previously, we learnt that''' Blocks''' are information that can be placed in various areas of a''' site'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:50
| style="border:1pt solid #000000;padding:0.185cm;"| '''Blocks''' go into''' Block''' regions, and''' Block regions''' are determined by the''' Theme'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:07
| style="border:1pt solid #000000;padding:0.185cm;"| In the design area,

* we have''' Blocks''',
* we have''' Themes''' and
* we have''' Menus'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:13
| style="border:1pt solid #000000;padding:0.185cm;"| Please note:

We didn’t talk about or apply our''' Themes''' earlier.

This was done to highlight the fact, that we can apply a''' Theme''' at any point while building a''' site.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:25
| style="border:1pt solid #000000;padding:0.185cm;"| The only reason we’ve waited till now, is to show that we can wait till the very end, to apply a''' Theme'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:33
| style="border:1pt solid #000000;padding:0.185cm;"| But I will always prefer to apply my''' Theme''' as soon as it’s ready.

Let us open our website which we created earlier.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:38
| style="border:1pt solid #000000;padding:0.185cm;"| Let’s now get into the''' layout''', with a look at''' Blocks''' and''' Block regions.'''

|}

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.185cm;"| '''Time'''
| style="border:1pt solid #000000;padding:0.185cm;"| '''Narration'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:05
| style="border:1pt solid #000000;padding:0.185cm;"| '''Blocks '''enable us to place information anywhere on our''' site'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:14
| style="border:1pt solid #000000;padding:0.185cm;"| Go to''' Structure''', and''' Block layout.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:19
| style="border:1pt solid #000000;padding:0.185cm;"| All the''' blocks''' that are available from our current''' theme''' are here.

For eg: '''Header, Primary Menu, Secondary Menu''', and others.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:28
| style="border:1pt solid #000000;padding:0.185cm;"| We’ve actually already placed a few of these.

Recall, we had placed the''' Welcome To Drupalville''' custom''' block''' in the''' sidebar.'''

It appears in the left''' sidebar''' on this particular''' theme'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:41
| style="border:1pt solid #000000;padding:0.185cm;"| We also added a''' Recent Events Added''' view to our left''' sidebar'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:48
| style="border:1pt solid #000000;padding:0.185cm;"| Now, let’s learn how to configure and to give permission to our''' blocks'''.  

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:55
| style="border:1pt solid #000000;padding:0.185cm;"| First, we need to know which''' Block Regions''' do what.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:59
| style="border:1pt solid #000000;padding:0.185cm;"| At the top, there is a''' Demonstrate Block Regions.'''

Click on it.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:06
| style="border:1pt solid #000000;padding:0.185cm;"| Every''' theme''' in''' Drupal''' gives us this kind of a picture, of where the''' Block Regions''' are.

'''Block Regions''' are dependent on the''' themes'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:18
| style="border:1pt solid #000000;padding:0.185cm;"| In''' Bartik''', we have the options''' '''

* '''Secondary Menu, '''
* '''Header, '''
* '''Primary Menu, '''
* '''Highlighted, '''
* '''Featured top, '''
* '''Breadcrumb, '''
* '''Sidebar first, '''
* '''Content'''
* '''Sidebar second'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:30
| style="border:1pt solid #000000;padding:0.185cm;"| We can place any''' block''' in any''' region'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:33
| style="border:1pt solid #000000;padding:0.185cm;"| The important ones like the''' Content block''' should be left in the''' Content region.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:40
| style="border:1pt solid #000000;padding:0.185cm;"| Let us click on''' Exit.'''

Leave the''' Breadcrumbs block''' in the''' Breadcrumbs region.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:48
| style="border:1pt solid #000000;padding:0.185cm;"| But there are some other things we can move around.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:52
| style="border:1pt solid #000000;padding:0.185cm;"| Move the''' Search block''' by either-

* Clicking and dragging it or
* Clicking on the drop down and putting it in the''' Header'''

And it moves up.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:09
| style="border:1pt solid #000000;padding:0.185cm;"| Similarly, move the''' Welcome to Drupalville''' to the top of''' Sidebar first'''.

Save the changes by clicking on the''' Save''' button.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:20
| style="border:1pt solid #000000;padding:0.185cm;"| Now, let’s go to the '''Homepage '''to see the changes.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:25
| style="border:1pt solid #000000;padding:0.185cm;"| Here’s our''' search bar''', up in the''' header'''.

And our''' Welcome to Drupalville block''' is now at the very top.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:31
| style="border:1pt solid #000000;padding:0.185cm;"| So that’s how we position and order''' blocks.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:36
| style="border:1pt solid #000000;padding:0.185cm;"| Now, we will move to''' configurations''' and''' permissions''' of''' Blocks'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:45
| style="border:1pt solid #000000;padding:0.185cm;"| Click on''' Structure''', and''' Block layout.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 02:51
| style="border:1pt solid #000000;padding:0.185cm;"| And let’s find our''' Recent Events Added block'''.

Right now it’s in''' Sidebar first''' and it’s visible on every page.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:00
| style="border:1pt solid #000000;padding:0.185cm;"| Click  on''' Configure'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:04
| style="border:1pt solid #000000;padding:0.185cm;"| Right now,''' Recent Events Added block''' is visible everywhere.

But we may want it to show up only on an''' event page.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:14
| style="border:1pt solid #000000;padding:0.185cm;"| Put a checkmark in''' Events''', and click''' Save Block'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:20
| style="border:1pt solid #000000;padding:0.185cm;"| Once again, scroll down and click''' Save Block''' button again.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:25
| style="border:1pt solid #000000;padding:0.185cm;"| Click''' Back to site'''.

Now the''' Recent Events Added block''' is not there anymore.

But if we go to an''' event''', we can see''' Recent Events Added.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:39
| style="border:1pt solid #000000;padding:0.185cm;"| Now, up here under the''' Welcome to Drupalville block''', we see the welcome message.

Which is not necessary once we have logged in.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:51
| style="border:1pt solid #000000;padding:0.185cm;"| So, let’s hide that.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 03:54
| style="border:1pt solid #000000;padding:0.185cm;"| Just click on the little''' pencil''' here and choose''' Configure Block.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:03
| style="border:1pt solid #000000;padding:0.185cm;"| One of the great things about '''Drupal '''is, we can edit the front end using the pencil or the '''gear'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:09
| style="border:1pt solid #000000;padding:0.185cm;"| Instead of restricting by''' Content type''', let’s restrict it by an individual''' page'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:18
| style="border:1pt solid #000000;padding:0.185cm;"| See here, ’'''Specifying pages by using their paths'''’.

To hide or show something on the front page, use this''' angle bracket- front- angle bracket'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:29
| style="border:1pt solid #000000;padding:0.185cm;"| Copy and paste it.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:32
| style="border:1pt solid #000000;padding:0.185cm;"| Now choose ‘'''Show just for the listed page'''’.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:36
| style="border:1pt solid #000000;padding:0.185cm;"| Then click''' Save'''.

Our''' welcome block''' will be only on the''' Homepage.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:41
| style="border:1pt solid #000000;padding:0.185cm;"| Let’s go one step further.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:43
| style="border:1pt solid #000000;padding:0.185cm;"| Click on''' Roles''', and put a checkmark in''' Anonymous user.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:49
| style="border:1pt solid #000000;padding:0.185cm;"| And click on''' Save block.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:51
| style="border:1pt solid #000000;padding:0.185cm;"| Now, it’s only going to show up, when we’re not logged in.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 04:57
| style="border:1pt solid #000000;padding:0.185cm;"| We don’t see this message because we are logged in right now.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 05:04
| style="border:1pt solid #000000;padding:0.185cm;"| Let’s logout, and our''' Welcome to Drupalville block''' shows up again.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 05:12
| style="border:1pt solid #000000;padding:0.185cm;"| But when we login, and click on''' Home''', it’s no longer there.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 05:21
| style="border:1pt solid #000000;padding:0.185cm;"| So''' configuring''', moving, and giving''' permissions''' to''' Blocks''' is really quite simple.

|}

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.185cm;"| '''Time'''
| style="border:1pt solid #000000;padding:0.185cm;"| '''Narration'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:05
| style="border:1pt solid #000000;padding:0.185cm;"| Let’s practice this more.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:07
| style="border:1pt solid #000000;padding:0.185cm;"| Click on''' Structure''' and then on''' Blocks'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:12
| style="border:1pt solid #000000;padding:0.185cm;"| We have the''' Main navigation''' in the''' Primary menu block.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:19
| style="border:1pt solid #000000;padding:0.185cm;"| If we move that, then our''' Main navigation''' will be in a completely different place.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:26
| style="border:1pt solid #000000;padding:0.185cm;"| Down here at the bottom, we have:

* '''Featured bottom first, second''' and''' third'''
* '''Footer first, second, third, fourth''' and''' fifth'''
* '''Powered by Drupal '''and''' Footer''' menu in the''' Footer fifth''' location.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:41
| style="border:1pt solid #000000;padding:0.185cm;"| Right now, there are no disabled''' blocks'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:46
| style="border:1pt solid #000000;padding:0.185cm;"| Let’s put one of our''' menus''' in the''' Footer first block region'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 00:52
| style="border:1pt solid #000000;padding:0.185cm;"| Scroll back up to the top.

Find your''' User account menu''' and put that in''' Footer first.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:02
| style="border:1pt solid #000000;padding:0.185cm;"| It is immediately moved down.

Now, click on''' Save blocks'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:07
| style="border:1pt solid #000000;padding:0.185cm;"| Back to the '''site.'''

Scroll down and see that the''' user account''', instead of being at the top, is down here in the''' footer'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:17
| style="border:1pt solid #000000;padding:0.185cm;"| So, any''' block''' can be placed anywhere, for any purpose.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:25
| style="border:1pt solid #000000;padding:0.185cm;"| Go back to''' Structure''' and''' Block layout'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:28
| style="border:1pt solid #000000;padding:0.185cm;"| Let’s now remove a''' block'''.

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:32
| style="border:1pt solid #000000;padding:0.185cm;"| Let’s remove''' Powered by Drupal''' from the''' Footer fifth block.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:41
| style="border:1pt solid #000000;padding:0.185cm;"| Simply click on the drop-down and choose''' None'''.  Then click on''' Save blocks.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:50
| style="border:1pt solid #000000;padding:0.185cm;"| Scroll down now.

We can see that''' Powered by Drupal block''' is now in the''' disabled block region.'''

|-
| style="border:1pt solid #000000;padding:0.185cm;"| 01:56
| style="border:1pt solid #000000;padding:0.185cm;"| Click on''' Back to site''' to see that it’s totally gone.

|}

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| With this we come to an end of this tutorial.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 5:

Summary

| style="border:1pt solid #000000;padding:0.097cm;"| Let us summarize.

In this tutorial we have learnt about

* '''Layouts'''
* '''Block Configuration''' and '''Permissions''' and
* Removing and Re-ordering '''blocks'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 6:

Acknowledgement

| style="border:1pt solid #000000;padding:0.097cm;"| This video is

* adapted from Acquia and OSTraining
* and revised by the Spoken Tutorial Project, IIT Bombay.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 7:

Acknowledgement

| style="border:1pt solid #000000;padding:0.097cm;"| The video at this link summarises the Spoken Tutorial project.

Pls download and watch it.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 8:

Spoken Tutorial Workshops

| style="border:1pt solid #000000;padding:0.097cm;"| The Spoken Tutorial Project Team conducts workshops and gives certificates.

For more details, please write to us.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 9:

Acknowledgement
| style="border:1pt solid #000000;padding:0.097cm;"| Spoken Tutorial Project is funded by

* NMEICT, Ministry of Human Resource Development and
* NVLI, Ministry of Culture

Government of India.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| This is Vanessa Varkey signing off.

Thanks for joining.

|}

@@ Line 316: / Line 316: @@
 |-
 | style="border:1pt solid #000000;padding:0.185cm;"| 04:32
-| style="border:1pt solid #000000;padding:0.185cm;"| Now choose ‘'''Show just for the listed page'''’.
+| style="border:1pt solid #000000;padding:0.185cm;"| Now choose ‘'''Show for the listed page'''’.
 |-

@@ Line 27: / Line 27: @@
 * '''Block Configuration''' and '''Permissions''' and
 * Removing and Re-ordering '''blocks'''
 |-
@@ Line 34: / Line 32: @@
 System requirement
 | style="border:1pt solid #000000;padding:0.097cm;"| To record this tutorial, I am using
 * '''Ubuntu Linux '''Operating System
@@ Line 62: / Line 58: @@
 |-
 | style="border:1pt solid #000000;padding:0.185cm;"| 00:17
-| style="border:1pt solid #000000;padding:0.185cm;"| '''Themes''' give us the general layout, look and feel of our site.
+| style="border:1pt solid #000000;padding:0.185cm;"| '''Themes''' give us the general layout, look and feel of our '''site'''.
@@ Line 78: / Line 74: @@
 * location of the''' Blocks''',
 * and all the formating for the text and images.
 |-
@@ Line 96: / Line 90: @@
 * we have''' Themes''' and
 * we have''' Menus'''.
 |-
 | style="border:1pt solid #000000;padding:0.185cm;"| 01:13
 | style="border:1pt solid #000000;padding:0.185cm;"| Please note:
 We didn’t talk about or apply our''' Themes''' earlier.
@@ Line 147: / Line 138: @@
 |-
 | style="border:1pt solid #000000;padding:0.185cm;"| 00:28
-| style="border:1pt solid #000000;padding:0.185cm;"| We’ve actually already placed a few of these.
+| style="border:1pt solid #000000;padding:0.185cm;"| We’ve actually already placed a few of those.
@@ Line 157: / Line 148: @@
 |-
 | style="border:1pt solid #000000;padding:0.185cm;"| 00:41
-| style="border:1pt solid #000000;padding:0.185cm;"| We also added a''' Recent Events Added''' view to our left''' sidebar'''.
+| style="border:1pt solid #000000;padding:0.185cm;"| We also added a''' Recent Events Added''' view to our '''Left sidebar'''.
 |-
@@ Line 194: / Line 185: @@
 * '''Content'''
 * '''Sidebar second'''.
 |-
@@ Line 245: / Line 234: @@
 |-
 | style="border:1pt solid #000000;padding:0.185cm;"| 02:31
-| style="border:1pt solid #000000;padding:0.185cm;"| So that’s how we position and order''' blocks.'''
+| style="border:1pt solid #000000;padding:0.185cm;"| So, that’s how we position and order''' blocks.'''
 |-
@@ Line 300: / Line 289: @@
 |-
 | style="border:1pt solid #000000;padding:0.185cm;"| 03:51
-| style="border:1pt solid #000000;padding:0.185cm;"| So, let’s hide that.
+| style="border:1pt solid #000000;padding:0.185cm;"| Let’s hide that.
 |-
@@ Line 397: / Line 386: @@
 * '''Footer first, second, third, fourth''' and''' fifth'''
 * '''Powered by Drupal '''and''' Footer''' menu in the''' Footer fifth''' location.
 |-
@@ Line 479: / Line 466: @@
 * '''Layouts'''
 * '''Block Configuration''' and '''Permissions''' and
-* Removing and Re-ordering '''blocks'''
+* Removing and re-ordering '''blocks'''
-−
-−
 |-
@@ Line 494: / Line 479: @@
 * adapted from Acquia and OSTraining
 * and revised by the Spoken Tutorial Project, IIT Bombay.
 |-

Drupal/C3/Modifying-the-Page-Layout/English - Revision history

Nancyvarkey at 12:12, 14 September 2016

Nancyvarkey at 12:46, 21 July 2016

Priyacst: Created page with "'''Title of Script:''' Modifying the Page Layout '''Keywords:''' video tutorial, Drupal, Introduction to Layout, Themes, Blocks, Menus, Block regions, Block Configuration and..."