Drupal/C3/Styling-a-Page-using-Themes/English-timed

Time	Narration
00:01	Welcome to the Spoken tutorial on Styling a Page using Themes.
00:06	In this tutorial, we will learn about: Introduction to themes Finding themes and Installing a basic theme.
00:16	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.
00:30	As mentioned earlier, a Drupal website can look like anything we want.
00:36	In fact, here are some of the different looks and feels from several Drupal sites.
00:42	Notice that they are completely different.
00:45	This is based on the Theme.
00:48	Themes can make your Drupal site look like anything you want.
00:51	Here are a few things to remember about Themes.
00:55	We can get Themes from a few different places. We have free Themes at drupal.org which are called Contributed Themes. Or, we can purchase a Theme from a number of different vendors also.
01:11	Or, we can create our own Theme like Artisteer from Artisteer.com i.e. build it from scratch
01:19	Contributed Themes can be found at drupal.org/project/themes.
01:26	Block Regions are all determined by the Theme.
01:29	So, where we can place Blocks on our website, is a part of the theming process.
01:36	If we don't have the right region then its a Theme issue, not a Block issue.
01:42	Let's now understand Themes a little bit more.
01:46	We can get some fantastic free Themes at drupal.org.
01:51	Go to drupal.org/project/themes.
01:56	Let's take a look at some of the Themes that are available for Drupal.
02:01	Recall from our Modules tutorial, we have to filter by the Core compatibility of the Drupal version we're using.
02:10	There are 2205 Themes here. When we click on Drupal 8, this comes down to a smaller number.
02:18	With new theme additions, after this tutorial was recorded, you may see a higher number now.
02:25	Let’s talk about how to find and evaluate Themes.
02:30	This is very similar to Modules.
02:33	We will start here at drupal.org.
02:36	Now, when we filter by Core compatibility, they get automatically sorted by Most Installed.
02:43	Adaptive Theme is number one at this point
02:46	and Bootstrap is number two.
02:50	Let's click on Bootstrap.
02:53	Recall our DMV illustration from the Module tutorial? It’s the same thing here.
02:59	You have to read the documentation first.
03:02	Then check out the Maintainers.
03:05	And look at versions and project informations.
03:08	At the time of recording, this particular Theme is in Drupal 8 x 3.0 alpha 1 version.
03:16	And, there is a development version also.
03:20	Later on, there's going to be a Drupal 8 version of this Theme, up here in the green.
03:27	A Contributed Theme can have several flavors as well. There are 3 different kinds of Themes.
03:34	We can have a very simple Contributed Theme that you can configure to a point.
03:40	We can have Starter Themes like Bootstrap or Zen.
03:46	It will literally give you a blank screen and minor framework, in order to put your own CSS in.
03:52	Or, we can have a Base Theme that is designed to have other Sub-Themes placed on top of it, something like Adaptive Theme..
04:02	But the rules are all the same here.
04:05	Look at the documentation; look at the Maintainers and look at the versions.
04:11	We will install a Contributed Theme now.
04:13	Let’s go to drupal.org/project/zircon.
04:20	Scroll down. This is a nice Theme, that's been developed specifically for Drupal 7 and 8.
04:28	It's not used on many sites.
04:31	We will be using this theme because it is ready for Drupal 8, as of today.
04:37	Let us right-click on tar.gz and copy that link. This is similar to installing Modules. Let’s go back to our site.
04:47	This time click on Appearance and Install new theme.
04:52	Again, same process as with Modules.
04:56	Let us paste that URL and then click Install.
05:00	The Theme is downloaded to our web server, and we are able to now turn it ON.
05:06	Click Install newly added themes.
05:09	Scroll down to the bottom.
05:12	And you'll see Zircon. "A flexible, recolorable theme with many regions and a responsive mobile first layout".
05:21	Click Install and set as default.
05:25	Now, as we learnt in the intro video- Number one : Installing new Themes doesn't change the content and Number two : We may need to re-position our Blocks.
05:38	Now, let's take a quick look at the settings.
05:42	Click on the word Settings.
05:45	We have the normal TOGGLE DISPLAY in Zircon
05:49	and the shortcut icon.
05:51	Once again, if you want to update the logo- that's under Global settings
05:56	And LOGO IMAGE SETTINGS,
05:59	Click Save
06:02	And then go to our site.
06:04	This is Zircon - a completely flexible, robust, and global friendly Theme for Drupal.
06:11	Let's head over to Structure and Blocks.
06:15	And click on Demonstrate block regions for Zircon.
06:19	We'll see a number of Block regions here.
06:22	A Header region. The Main menu needs to go in the Main menu Block Region because then it gets proper formatting.
06:32	There's a Slideshow region, in case you are using something like View Slideshow.
06:37	A Featured block region,
06:39	Help, Sidebar First, Sidebar Second, Content,
06:44	Panel First, Panel Second col 1, 2, 3 and 4. And then a Footer region.
06:53	Notice that some of the regions from our default Theme are no longer available.
07:00	Let's take a quick look and see what we need to do here.
07:03	There are a lot of stuff in the Header region. The Footer region to which we had assigned the "Powered by Drupal" block, no longer exists.
07:14	We will put that back into Footer.
07:17	It immediately disappears from the Header.
07:20	Let's take the Status message out of the Header and put it into messages.
07:26	Let's put the Footer menu again, down into Footer.
07:30	We'll leave Search, Site branding and User account menu where they are for now.
07:36	Primary menu is in the wrong spot but let's just take a quick look at that.
07:42	Click Save blocks.
07:44	Go back to our site.
07:47	And we'll see that the Main menu is nowhere to be found. That's because Primary menu doesn't exist in this Theme.
07:55	So, we will take our Main navigation and change that to Main menu.
08:01	Scrolling down.. let's take a quick look.
08:05	In our Content area, we've got the Help block.
08:09	Let us put that in Help.
08:12	Page title, Primary admin actions and Page Tabs are fine.
08:18	Sidebar first, Welcome to Drupalville, Book navigation, Recent Events Added and Tools.
08:26	Let's take the Tools menu and put that inside Sidebar second. We haven't done this before.
08:34	There are four Panel regions here in which we can place anything we want.
08:39	Now, click Save.
08:41	And let's take a look at what we did.
08:44	This is a lot better now.
08:47	Our menu is properly placed in the Main menu block region. The CSS is picked up, making it a nice in-line menu, with some shading and some colouring.
08:58	BOOK NAVIGATION, RECENTLY ADDED EVENTS on the left.
09:03	And the TOOLS are on the right, again Sidebar first and Sidebar second.
09:10	And all the content is in the middle.
09:12	A couple of things to point out here.
09:15	We've changed our themes. Everything has changed, except our content.
09:20	We've got new fonts, new font styles, new H3 tags, new Block regions, layouts and a new Footer area.
09:31	But what's not changed is our content and the actual layout of our content.
09:37	To change those, we will need to use Panels or Display fields.Those are the add-on Modules that we can get from drupal.org.
09:48	Themes are fantastic. Now this is a really simple theme.There are also some very complex themes that we can get for Drupal.
09:58	You can come back to drupal.org/project/themes. Take a look at some of the Drupal 8 themes that are available.
10:08	Find some themes that you like, install them and play with them.
10:13	This is a great way to learn about how themes impact your site. You may find just the design that you want.
10:21	With this, we come to the end of this tutorial.
10:24	Let us summarize. In this tutorial we have learnt about: Introduction to themes Finding themes and Installing a basic theme.
10:45	This video is adapted from Acquia and OSTraining and revised by the Spoken Tutorial Project, IIT Bombay.
10:54	The video at this link summarizes the Spoken Tutorial project. Please download and watch it.
11:00	The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
11:08	Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India.
11: 19	This is Vanessa Varkey, signing off. Thanks for joining.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Priyacst, Ranjana, Sandhya.np14, Vijinair