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

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