Difference between revisions of "Drupal/C3/Styling-a-Page-using-Themes/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "{|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...")
 
Line 5: Line 5:
 
|-
 
|-
 
|  00:01
 
|  00:01
−
|Welcome to the Spoken tutorial on''' Styling a Page using Themes.'''
+
|Welcome to the '''Spoken tutorial''' on''' Styling a Page using Themes.'''
  
 
|-
 
|-
 
|  00:06
 
|  00:06
−
|In this tutorial, we will learn about
+
|In this tutorial, we will learn about:
 
* Introduction to '''themes'''
 
* Introduction to '''themes'''
 
* Finding '''themes''' and
 
* Finding '''themes''' and
−
* Installing a basic '''theme'''  
+
* Installing a basic '''theme'''.
  
 
|-
 
|-
 
|00:16
 
|00:16
−
|  To record this tutorial, I am using
+
|  To record this tutorial, I am using:
 
* '''Ubuntu Linux''' Operating System
 
* '''Ubuntu Linux''' Operating System
−
* '''Drupal''' 8 and '''Firefox''' Web browser
+
* '''Drupal''' 8 and  
 +
* '''Firefox''' Web browser.
 
You can use any web browser as per your choice.
 
You can use any web browser as per your choice.
  
Line 27: Line 28:
 
|-
 
|-
 
| 00:36
 
| 00:36
−
| In fact, here are some of the different looks and feels from several''' Drupal sites.'''
+
| In fact, here are some of the different looks and feels from several Drupal sites.
  
 
|-
 
|-
Line 39: Line 40:
 
|-
 
|-
 
| 00:48
 
| 00:48
−
| '''Themes''' can make your''' Drupal site''' look like anything you want.
+
| '''Themes''' can make your Drupal site look like anything you want.
  
 
|-
 
|-
Line 47: Line 48:
 
|-
 
|-
 
| 00:55
 
| 00:55
−
| We can get''' Themes''' from a few different places:
+
| We can get''' Themes''' from a few different places.
−
* We have free''' Themes''' at''' drupal.org '''which are called''' Contributed Themes.'''
+
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 purchase a''' Theme''' from a number of different vendors also.
  
 
|-
 
|-
 
|01:11
 
|01:11
−
|Or we can create our own''' Theme''' like''' Artisteer''' from''' Artisteer.com'''
+
|Or we can create our own''' Theme''' like''' Artisteer''' from''' Artisteer.com''' i.e. build it from scratch
−
*:i.e. build it from scratch
+
  
 
|-
 
|-
 
| 01:19
 
| 01:19
−
| '''Contributed Themes''' can be found at''' drupal.org/project/themes'''
+
| '''Contributed Themes''' can be found at''' drupal.org/project/themes'''.
  
 
|-
 
|-
Line 66: Line 66:
 
|-
 
|-
 
| 01:29
 
| 01:29
−
| So, where we can place''' Blocks''' on our''' website,''' is part of the theming process.
+
| So, where we can place''' Blocks''' on our website, is part of the theming process.
  
 
|-
 
|-
Line 78: Line 78:
 
|-
 
|-
 
| 01:46
 
| 01:46
−
| We can get some fantastic free''' Themes''' at''' drupal.org'''
+
| We can get some fantastic free '''Themes''' at''' drupal.org'''.
  
 
|-
 
|-
 
| 01:51
 
| 01:51
−
| Go to''' drupal.org/projects/themes'''
+
| Go to''' drupal.org/projects/themes'''.
  
 
|-
 
|-
 
| 01:56
 
| 01:56
−
| Let's take a look at some of the''' Themes''' that are available for''' Drupal.'''
+
| Let's take a look at some of the''' Themes''' that are available for Drupal.
  
 
|-
 
|-
 
| 02:01
 
| 02:01
−
| Recall from our''' Modules''' tutorial.We have to filter by the''' Core compatibility''' of the''' Drupal''' version we're using.
+
| Recall from our''' Modules''' tutorial. We have to filter by the''' Core compatibility''' of the Drupal version we're using.
  
 
|-
 
|-
 
| 02:10
 
| 02:10
−
| There are 2205''' Themes''' here.When we click on''' Drupal 8,''' this comes down to a smaller number.
+
| There are 2205''' Themes''' here. When we click on''' Drupal 8,''' this comes down to a smaller number.
  
 
|-
 
|-
Line 110: Line 110:
 
|-
 
|-
 
| 02:33
 
| 02:33
−
| We will start here at''' drupal.org'''
+
| We will start here at''' drupal.org'''.
  
 
|-
 
|-
Line 130: Line 130:
 
|-
 
|-
 
| 02:53
 
| 02:53
−
| Recall our''' DMV''' illustration from the''' Module''' tutorial?It’s the same thing here.
+
| Recall our''' DMV''' illustration from the''' Module''' tutorial? It’s the same thing here.
  
 
|-
 
|-
Line 150: Line 150:
 
|-
 
|-
 
| 03:16
 
| 03:16
−
| And there is a''' development version''' also.
+
| And, there is a''' development version''' also.
  
 
|-
 
|-
 
| 03:20
 
| 03:20
−
| Later on, there's going to be a''' Drupal 8 version''' of this''' Theme''', up here in the green.
+
| Later on, there's going to be a''' Drupal 8''' version of this''' Theme''', up here in the green.
  
 
|-
 
|-
 
| 03:27
 
| 03:27
−
| A''' Contributed Theme''' can have several flavours as well. There are 3 different kinds of''' Themes'''.
+
| A''' Contributed Theme''' can have several flavors as well. There are 3 different kinds of''' Themes'''.
  
 
|-
 
|-
 
| 03:34
 
| 03:34
−
| We can have a very '''simple Contributed Theme'''. that you can configure to a point.
+
| We can have a very '''simple Contributed Theme''' that you can configure to a point.
  
 
|-
 
|-
Line 174: Line 174:
 
|-
 
|-
 
| 03:52
 
| 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.'''.
+
| Or, we can have a''' Base Theme'''. That is designed to have other '''Sub-Themes''' placed on top of it something like''' Adaptive Theme.'''.
  
 
|-
 
|-
Line 182: Line 182:
 
|-
 
|-
 
| 04:05
 
| 04:05
−
| Look at the''' documentation.'''Look at the''' Maintainers'''.And look at the''' versions'''.
+
| Look at the''' documentation.''' Look at the''' Maintainers''' and look at the''' versions'''.
  
 
|-
 
|-
Line 190: Line 190:
 
|-
 
|-
 
| 04:13
 
| 04:13
−
| Let’s go to''' drupal.org/projects/zircon'''
+
| Let’s go to''' drupal.org/projects/zircon'''.
  
 
|-
 
|-
 
|04:20
 
|04:20
−
| Scroll down.This is a nice''' Theme''', that's been developed specifically for''' Drupal 7''' and''' 8'''.
+
| Scroll down. This is a nice''' Theme''', that's been developed specifically for''' Drupal 7''' and''' 8'''.
  
 
|-
 
|-
Line 202: Line 202:
 
|-
 
|-
 
| 04:31
 
| 04:31
−
| We will be using this''' theme''', because it is ready for''' Drupal 8''', as of today.
+
| We will be using this theme because it is ready for''' Drupal 8''', as of today.
  
 
|-
 
|-
 
|04:37
 
|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'''.
+
| Let us right-click on ''' tar.gz''' and copy that link. This is similar to installing''' Modules'''. Let’s go back to our '''site'''.
  
 
|-
 
|-
Line 222: Line 222:
 
|-
 
|-
 
| 05:00
 
| 05:00
−
| The''' Theme''' is downloaded to our''' web server,''' and we are able to now turn it''' on'''.
+
| The''' Theme''' is downloaded to our''' web server,''' and we are able to now turn it''' ON'''.
  
 
|-
 
|-
Line 235: Line 235:
 
| 05:12
 
| 05:12
 
| And you'll see''' Zircon'''.
 
| And you'll see''' Zircon'''.
−
'''A flexible, recolorable theme with many regions and a responsive mobile first layout'''.
+
"A flexible, recolorable theme with many regions and a responsive mobile first layout".
  
 
|-
 
|-
Line 243: Line 243:
 
|-
 
|-
 
| 05:25
 
| 05:25
−
| Now as we learnt in the intro video-
+
| 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'''.
+
* Number one : Installing new''' Themes''' doesn't change the content, and  Number two : We may need to re-position our''' Blocks'''.
  
 
|-
 
|-
 
| 05:38
 
| 05:38
−
| Now let's take a quick look at the''' settings.'''
+
| Now, let's take a quick look at the''' settings.'''
  
 
|-
 
|-
Line 260: Line 260:
 
|-
 
|-
 
| 05:49
 
| 05:49
−
| And the shortcut icon.
+
| And the '''shortcut''' icon.
  
 
|-
 
|-
Line 280: Line 280:
 
|-
 
|-
 
| 06:04
 
| 06:04
−
| This is''' Zircon''' - a completely flexible, robust, and global friendly''' Theme''' for''' Drupal'''.
+
| This is''' Zircon''' - a completely flexible, robust, and global friendly''' Theme''' for Drupal.
  
 
|-
 
|-
Line 296: Line 296:
 
|-
 
|-
 
| 06:22
 
| 06:22
−
| A''' Header''' region.The''' Main menu''' needs to go in the''' Main menu Block Region''' because then it gets proper formatting.
+
| A''' Header''' region. The''' Main menu''' needs to go in the''' Main menu Block Region''' because then it gets proper formatting.
  
 
|-
 
|-
Line 304: Line 304:
 
|-
 
|-
 
| 06:37
 
| 06:37
−
| A''' Featured block region'''.
+
| A''' Featured block region''',
  
 
|-
 
|-
 
| 06:39
 
| 06:39
−
| '''Help. '''
+
| '''Help''',
−
'''Sidebar First.'''
+
'''Sidebar First''',
−
'''Sidebar Second.'''
+
'''Sidebar Second''',
−
'''Content.'''
+
'''Content''',
  
 
|-
 
|-
 
|06:44
 
|06:44
−
| '''Panel First.'''
+
| '''Panel First''',
−
'''Panel Second''' called''' 1, 2, 3''' and''' 4.'''And then a''' Footer region.'''
+
'''Panel Second''' called''' 1, 2, 3''' and''' 4.''' And then a''' Footer''' region.
  
 
|-
 
|-
 
| 06:53
 
| 06:53
−
| Notice that some of the''' regions''' from our default''' Theme''' are no longer available.
+
| Notice that some of the regions from our default''' Theme''' are no longer available.
  
 
|-
 
|-
Line 328: Line 328:
 
|-
 
|-
 
| 07:03
 
| 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.
+
| 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.
  
 
|-
 
|-
Line 364: Line 364:
 
|-
 
|-
 
| 07:47
 
| 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'''.
+
| And we'll see that the''' Main menu''' is nowhere to be found. That's because''' Primary menu''' doesn't exist in this''' Theme'''.
  
 
|-
 
|-
Line 372: Line 372:
 
|-
 
|-
 
| 08:01
 
| 08:01
−
| Scrolling down let's take a quick look.
+
| Scrolling down.. let's take a quick look.
  
 
|-
 
|-
Line 384: Line 384:
 
|-
 
|-
 
| 08:12
 
| 08:12
−
| '''Page title, Primary admin actions''' and''' Page Tabs'''  are fine.
+
| '''Page title, Primary admin actions''' and''' Page Tabs''' are fine.
  
 
|-
 
|-
Line 447: Line 447:
 
| 09:37
 
| 09:37
 
| To change those, we will need to use''' Panels''' or''' Display fields.'''
 
| To change those, we will need to use''' Panels''' or''' Display fields.'''
−
Those are''' add-on Modules''' that we can get from''' drupal.org'''
+
Those are''' add-on Modules''' that we can get from''' drupal.org'''.
  
 
|-
 
|-
 
| 09:48
 
| 09:48
−
| '''Themes''' are fantastic.Now this is really simple''' theme'''.
+
| '''Themes''' are fantastic. Now this is really simple''' theme'''.
 
There are also some very complex''' themes''' that we can get for''' Drupal'''.
 
There are also some very complex''' themes''' that we can get for''' Drupal'''.
  
 
|-
 
|-
 
| 09:58
 
| 09:58
−
| You can come back to''' drupal.org/projects/themes.'''Take a look at some of the''' Drupal 8 themes''' that are available.
+
| You can come back to''' drupal.org/projects/themes.''' Take a look at some of the''' Drupal 8 themes''' that are available.
  
 
|-
 
|-
Line 464: Line 464:
 
|-
 
|-
 
|10:13
 
|10:13
−
|This is a great way to learn about how '''themes''' impact your '''site'''.You may find just the design that you want.
+
|This is a great way to learn about how '''themes''' impact your '''site'''. You may find just the design that you want.
  
 
|-
 
|-
 
|10:21
 
|10:21
−
|  With this we come to the end of this tutorial.
+
|  With this, we come to the end of this tutorial.
  
 
|-
 
|-
 
|10:24
 
|10:24
−
|  Let us summarize.In this tutorial we have learnt about
+
|  Let us summarize. In this tutorial we have learnt about:
 
* Introduction to '''themes'''
 
* Introduction to '''themes'''
 
* Finding '''themes''' and
 
* Finding '''themes''' and
−
* Installing a basic '''theme'''  
+
* Installing a basic '''theme'''.
  
 
|-
 
|-
 
|10:45
 
|10:45
−
|  This video is adapted from Acquia and OSTraining and revised by Spoken Tutorial Project, IIT Bombay.
+
|  This video is adapted from '''Acquia''' and '''OSTraining''' and revised by '''Spoken Tutorial Project, IIT Bombay'''.
  
 
|-
 
|-
 
|10:54
 
|10:54
−
|  The video at this link summarises the Spoken Tutorial project.Pls download and watch it.
+
|  The video at this link summarizes the Spoken Tutorial project. Please download and watch it.
  
 
|-
 
|-
 
|11:00
 
|11:00
−
|  The Spoken Tutorial Project Team conducts workshops and gives certificates.For more details, please write to us.
+
|  The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
  
 
|-
 
|-
 
| 11:08
 
| 11:08
−
| Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development andNVLI, Ministry of Culture
+
| Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development andNVLI, Ministry of Culture,
 
Government of India.
 
Government of India.
  
 
|-
 
|-
 
| 11: 19
 
| 11: 19
−
|  This is Vanessa Varkey signing off.Thanks for joining.
+
|  This is Vanessa Varkey, signing off. Thanks for joining.
  
 
|}
 
|}

Revision as of 17:45, 2 September 2016

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 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/projects/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 just 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/projects/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 called 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 add-on Modules that we can get from drupal.org.

09:48 Themes are fantastic. Now this is 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/projects/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 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 andNVLI, 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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Drupal/C3/Styling-a-Page-using-Themes/English-timed&oldid=28072"