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

From Script | Spoken-Tutorial
Jump to: navigation, search
(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...")
 
 
(One intermediate revision by the same user not shown)
Line 27: Line 27:
 
* '''Block Configuration''' and '''Permissions''' and
 
* '''Block Configuration''' and '''Permissions''' and
 
* Removing and Re-ordering '''blocks'''
 
* Removing and Re-ordering '''blocks'''
−
 
−
 
  
 
|-
 
|-
Line 34: Line 32:
  
 
System requirement
 
System requirement
−
 
  
  
 
| style="border:1pt solid #000000;padding:0.097cm;"| To record this tutorial, I am using
 
| style="border:1pt solid #000000;padding:0.097cm;"| To record this tutorial, I am using
−
 
  
 
* '''Ubuntu Linux '''Operating System
 
* '''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;"| 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''',
 
* location of the''' Blocks''',
 
* and all the formating for the text and images.
 
* and all the formating for the text and images.
−
 
−
 
  
 
|-
 
|-
Line 96: Line 90:
 
* we have''' Themes''' and
 
* we have''' Themes''' and
 
* we have''' Menus'''.
 
* we have''' Menus'''.
−
 
−
 
  
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.185cm;"| 01:13
 
| style="border:1pt solid #000000;padding:0.185cm;"| 01:13
 
| style="border:1pt solid #000000;padding:0.185cm;"| Please note:
 
| style="border:1pt solid #000000;padding:0.185cm;"| Please note:
−
 
  
 
We didn’t talk about or apply our''' Themes''' earlier.
 
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;"| 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;"| 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'''
 
* '''Content'''
 
* '''Sidebar second'''.
 
* '''Sidebar second'''.
−
 
−
 
  
 
|-
 
|-
Line 245: Line 234:
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.185cm;"| 02:31
 
| 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;"| 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 327: Line 316:
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.185cm;"| 04:32
 
| 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 397: Line 386:
 
* '''Footer first, second, third, fourth''' and''' fifth'''
 
* '''Footer first, second, third, fourth''' and''' fifth'''
 
* '''Powered by Drupal '''and''' Footer''' menu in the''' Footer fifth''' location.
 
* '''Powered by Drupal '''and''' Footer''' menu in the''' Footer fifth''' location.
−
 
−
 
  
 
|-
 
|-
Line 479: Line 466:
 
* '''Layouts'''
 
* '''Layouts'''
 
* '''Block Configuration''' and '''Permissions''' and
 
* '''Block Configuration''' and '''Permissions''' and
−
* Removing and Re-ordering '''blocks'''
+
* Removing and re-ordering '''blocks'''
−
 
+
−
 
+
  
 
|-
 
|-
Line 494: Line 479:
 
* adapted from Acquia and OSTraining
 
* adapted from Acquia and OSTraining
 
* and revised by the Spoken Tutorial Project, IIT Bombay.
 
* and revised by the Spoken Tutorial Project, IIT Bombay.
−
 
−
 
  
 
|-
 
|-

Latest revision as of 17:42, 14 September 2016

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


Visual Cue
Narration
Slide 1:

Modifying the Page Layout

Welcome to the Spoken tutorial on Modifying the Page Layout.
Slide 2:

Learning Objectives


In this tutorial, we will learn about
  • Layouts
  • Block Configuration and Permissions and
  • Removing and Re-ordering blocks
Slide 3:

System requirement


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.

Time Narration
00:05 First we will learn about layout.
00:08 Here we will get an introduction to Themes and Blocks
00:17 Themes give us the general layout, look and feel of our site.


I will introduce you to Themes in a little while.

00:25 For now, understand that a Theme can be applied to a Drupal site, without changing the content.
00:32 And
  • it gives us the colour scheme,
  • location of the Blocks,
  • and all the formating for the text and images.
00:43 Previously, we learnt that Blocks are information that can be placed in various areas of a site.
00:50 Blocks go into Block regions, and Block regions are determined by the Theme.
01:07 In the design area,
  • we have Blocks,
  • we have Themes and
  • we have Menus.
01:13 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.

01:25 The only reason we’ve waited till now, is to show that we can wait till the very end, to apply a Theme.
01:33 But I will always prefer to apply my Theme as soon as it’s ready.


Let us open our website which we created earlier.

01:38 Let’s now get into the layout, with a look at Blocks and Block regions.
Time Narration
00:05 Blocks enable us to place information anywhere on our site.
00:14 Go to Structure, and Block layout.
00:19 All the blocks that are available from our current theme are here.


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

00:28 We’ve actually already placed a few of those.


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


It appears in the left sidebar on this particular theme.

00:41 We also added a Recent Events Added view to our Left sidebar.
00:48 Now, let’s learn how to configure and to give permission to our blocks.  
00:55 First, we need to know which Block Regions do what.
00:59 At the top, there is a Demonstrate Block Regions.


Click on it.

01:06 Every theme in Drupal gives us this kind of a picture, of where the Block Regions are.


Block Regions are dependent on the themes.

01:18 In Bartik, we have the options
  • Secondary Menu,
  • Header,
  • Primary Menu,
  • Highlighted,
  • Featured top,
  • Breadcrumb,
  • Sidebar first,
  • Content
  • Sidebar second.
01:30 We can place any block in any region.
01:33 The important ones like the Content block should be left in the Content region.
01:40 Let us click on Exit.


Leave the Breadcrumbs block in the Breadcrumbs region.

01:48 But there are some other things we can move around.
01:52 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.

02:09 Similarly, move the Welcome to Drupalville to the top of Sidebar first.


Save the changes by clicking on the Save button.

02:20 Now, let’s go to the Homepage to see the changes.
02:25 Here’s our search bar, up in the header.


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

02:31 So, that’s how we position and order blocks.
02:36 Now, we will move to configurations and permissions of Blocks.
02:45 Click on Structure, and Block layout.
02:51 And let’s find our Recent Events Added block.


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

03:00 Click  on Configure.
03:04 Right now, Recent Events Added block is visible everywhere.


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

03:14 Put a checkmark in Events, and click Save Block.
03:20 Once again, scroll down and click Save Block button again.
03:25 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.

03:39 Now, up here under the Welcome to Drupalville block, we see the welcome message.


Which is not necessary once we have logged in.

03:51 Let’s hide that.
03:54 Just click on the little pencil here and choose Configure Block.
04:03 One of the great things about Drupal is, we can edit the front end using the pencil or the gear.
04:09 Instead of restricting by Content type, let’s restrict it by an individual page.
04:18 See here, ’Specifying pages by using their paths’.


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

04:29 Copy and paste it.
04:32 Now choose ‘Show for the listed page’.
04:36 Then click Save.


Our welcome block will be only on the Homepage.

04:41 Let’s go one step further.
04:43 Click on Roles, and put a checkmark in Anonymous user.
04:49 And click on Save block.
04:51 Now, it’s only going to show up, when we’re not logged in.
04:57 We don’t see this message because we are logged in right now.
05:04 Let’s logout, and our Welcome to Drupalville block shows up again.
05:12 But when we login, and click on Home, it’s no longer there.
05:21 So configuring, moving, and giving permissions to Blocks is really quite simple.
Time Narration
00:05 Let’s practice this more.
00:07 Click on Structure and then on Blocks.
00:12 We have the Main navigation in the Primary menu block.
00:19 If we move that, then our Main navigation will be in a completely different place.
00:26 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.
00:41 Right now, there are no disabled blocks.
00:46 Let’s put one of our menus in the Footer first block region.
00:52 Scroll back up to the top.


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

01:02 It is immediately moved down.


Now, click on Save blocks.

01:07 Back to the site.


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

01:17 So, any block can be placed anywhere, for any purpose.
01:25 Go back to Structure and Block layout.
01:28 Let’s now remove a block.
01:32 Let’s remove Powered by Drupal from the Footer fifth block.
01:41 Simply click on the drop-down and choose None.  Then click on Save blocks.
01:50 Scroll down now.


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

01:56 Click on Back to site to see that it’s totally gone.
With this we come to an end of this tutorial.
Slide 5:

Summary


Let us summarize.


In this tutorial we have learnt about

  • Layouts
  • Block Configuration and Permissions and
  • Removing and re-ordering blocks
Slide 6:

Acknowledgement


This video is
  • adapted from Acquia and OSTraining
  • and revised by the Spoken Tutorial Project, IIT Bombay.
Slide 7:

Acknowledgement


The video at this link summarises the Spoken Tutorial project.


Pls download and watch it.

Slide 8:

Spoken Tutorial Workshops


The Spoken Tutorial Project Team conducts workshops and gives certificates.


For more details, please write to us.

Slide 9:

Acknowledgement

Spoken Tutorial Project is funded by
  • NMEICT, Ministry of Human Resource Development and
  • NVLI, Ministry of Culture

Government of India.

This is Vanessa Varkey signing off.


Thanks for joining.

Contributors and Content Editors

Nancyvarkey, Priyacst

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