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

Title: Styling a Page using Themes

Keywords: Drupal, Video tutorial, Themes, contributed Themes, starter Themes, base Themes, sub-themes, Zircon Theme, Adaptive theme

Visual Cue	Narration
Slide 1: Styling a Page using Themes	Welcome to the Spoken tutorial on Styling a Page using Themes.
Slide 2: Learning Objectives	In this tutorial, we will learn about Introduction to themes Finding themes and Installing a basic theme
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
0:05	As mentioned earlier, a Drupal website can look like anything we want.
0:12	In fact, here are some of the different looks and feels from several Drupal sites.
0:18	Notice that they are completely different.
0:20	This is based on the Theme.
0:23	Themes can make your Drupal site look like anything you want.
0:28	Here are a few things to remember about Themes.
0:31	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. Or we can create our own Theme like Artisteer from Artisteer.com i.e. build it from scratch
0:51	Contributed Themes can be found at drupal.org/project/themes
1:26	Block Regions are all determined by the Theme.
1:31	So, where we can place Blocks on our website, is part of the theming process.
1:38	If we don't have the right region, then its a Theme issue not a Block issue.
1:45	Let's now understand Themes a little bit more.

Time	Narration
0:05	We can get some fantastic free Themes at drupal.org
0:12	Go to drupal.org/projects/themes
0:16	Let's take a look at some of the Themes that are available for Drupal.
0:21	Recall from our Modules tutorial, we have to filter by the Core compatibility of the Drupal version we're using.
0:28	There are 2205 Themes here. When we click on Drupal 8, this comes down to a smaller number. With new theme additions after this tutorial was recorded, you may see a higher number now.
0:39	Let’s talk about how to find and evaluate Themes.
0:43	This is very similar to Modules.
0:48	We will start here at drupal.org
0:51	Now, when we filter by Core compatibility, they get automatically sorted by Most Installed.
0:57	Adaptive Theme is number one at this point.
1:00	And Bootstrap is number two.
1:02	Let's click on Bootstrap.
1:07	Recall our DMV illustration from the Module tutorial, it’s the same thing here.
1:13	You have to read the documentation first.
1:18	Then check out the Maintainers.
1:21	And look at versions and project informations.
1:25	At the time of recording, this particular Theme is in Drupal 8 x 3.0 alpha 1 version.
1:34	And there is a development version also.
1:37	Later on, there's going to be a Drupal 8 version of this Theme, up here in the green.
1:46	A Contributed Theme can have several flavours as well. There are 3 different kinds of Themes. We can have a very simple Contributed Theme. that you can configure to a point.
1:56	We can have Starter Themes like Bootstrap or Zen. It will literally give you just a blank screen and minor framework, in order to put your own CSS in.
2:08	Or we can have a Base Theme. That is designed to have other Sub-Themes placed on top of it something like Adaptive Theme..
2:17	But the rules are all the same here.
2:20	Look at the documentation. Look at the Maintainers. And look at the versions.
2:27	We will install a Contributed Theme, now.

Time	Narration
0:05	Let’s go to drupal.org/projects/zircon
0:16	Scroll down. This is a nice Theme, that's been developed specifically for Drupal 7 and 8.
0:26	It's not used on many sites.
0:29	We will be using this theme, because it is ready for Drupal 8, as of today.
0:43	Let us right-click on the tar.gz and copy that link. This is similar to installing Modules. Let’s go back to our site.
0:51	Let us go back to our site.
0:54	This time click on Appearance and Install new theme.
1:00	Again, same process as with Modules.
1:04	Let us paste that URL and then click Install.
1:09	The Theme is downloaded to our web server, and we are able to now turn it on.
1:14	Click Install newly added themes.
1:16	Scroll down to the bottom.
1:18	And you'll see Zircon. A flexible, recolorable theme with many regions and a responsive mobile first layout.
1:28	Click Install and set as default.
1:31	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 reposition our Blocks.
1:42	Now let's take a quick look at the settings.
1:45	Click on the word Settings.
1:49	We have the normal TOGGLE DISPLAY in Zircon.
1:51	And the shortcut icon.
1:54	Once again, if you want to update the logo that's under Global settings.
1:58	And LOGO IMAGE SETTINGS.
2:00	Click Save.
2:04	And then go to our site.
2:10	This is Zircon - a completely flexible, robust, and global friendly Theme for Drupal.
2:20	Let's head over to Structure and Blocks.
2:25	And click on Demonstrate block regions for Zircon.
2:28	We'll see a number of Block regions here.
2:32	A Header region. The Main menu needs to go in the Main menu Block Region because then it gets proper formatting.
2:39	There's a Slideshow region, in case you are using something like View Slideshow.
2:48	A Featured block region.
2:50	Help. Sidebar First. Sidebar Second. Content.
2:53	Panel First. Panel Second called 1, 2, 3 and 4. And then a Footer region.
2:58	Notice that some of the regions from our default Theme are no longer available.
3:04	Let's take a quick look and see what we need to do here.
3:08	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.
3:18	We will put that back into Footer.
3:22	It immediately disappears from the Header.
3:24	Let's take the Status message out of the Header and put it into messages.
3:32	Let's put the Footer menu again, down into Footer.
3:36	We'll leave Search, Site branding and User account menu where they are for now.
3:41	The Primary menu is in the wrong spot but let's just take a quick look at that.
3:46	Click Save blocks.
3:48	Go back to our site.
3:50	And we'll see that the Main menu is nowhere to be found. That's because Primary menu doesn't exist in this Theme.
3:58	So, we will take our Main navigation and change that to Main menu.
4:05	Scrolling down let's take a quick look.
4:07	In our content area, we've got the Help block.
4:11	Let us put that in Help.
4:13	Page title, Primary admin actions and Page Tabs  are fine.
4:18	Sidebar first, Welcome to Drupalville, Book navigation, Recent Events Added and Tools.
4:23	Let's take the Tools menu and put that inside Sidebar second. We haven't done this before.
4:33	There are four Panel regions here in which we can place anything we want.
4:39	Now, click Save.
4:42	And let's take a look at what we did.
4:46	This is a lot better now.
4:49	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.
5:04	BOOK NAVIGATION, RECENTLY ADDED EVENTS on the left.
5:08	And the TOOLS are on the right, again Sidebar first and Sidebar second.
5:12	And all the content is in the middle.
5:16	A couple of things to point out here.
5:19	We've changed our themes. Everything has changed, except our content.
5:26	We've got new fonts, new font styles, new H3 tags, new Block regions, layouts and a new Footer area.
5:35	But what's not changed is our content and the actual layout of our content.
5:40	To change those, we will need to use Panels or Display fields. Those are add-on Modules that we can get from drupal.org
5:49	Themes are fantastic. Now this is really simple theme. There are also some very complex themes that we can get for Drupal.
5:58	You can come back to drupal.org/projects/themes. Take a look at some of the Drupal 8 themes that are available.
6:08	Find some themes that you like, install them and play with them. This is a great way to learn about how themes impact your site. You may find just the design that you want.

	With this we come to the end of this tutorial.
Slide 5: Summary	Let us summarize. In this tutorial we have learnt about Introduction to themes Finding themes and Installing a basic theme
Slide 6: Acknowledgement	This video is adapted from Acquia and OSTraining and revised by 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, PoojaMoolya, Priyacst