View source for Drupal/C3/Styling-a-Page-using-Themes/English-timed

{|border=1
|'''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.

|}