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

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 49: Line 49:
 
| 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''' i.e. build it from scratch
+
|Or, we can create our own''' Theme''' like''' Artisteer''' from''' Artisteer.com''' i.e. build it from scratch
  
 
|-
 
|-
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 a part of the theming process.
  
 
|-
 
|-
 
| 01:36
 
| 01:36
| If we don't have the right''' region''', then its a''' Theme''' issue not a''' Block''' issue.
+
| If we don't have the right''' region''' then its a''' Theme''' issue, not a''' Block''' issue.
  
 
|-
 
|-
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'''.
  
 
|-
 
|-
Line 90: Line 90:
 
|-
 
|-
 
| 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.
  
 
|-
 
|-
Line 98: Line 98:
 
|-
 
|-
 
|02:18
 
|02:18
|With new '''theme''' additions after this tutorial was recorded, you may see a higher number now.
+
|With new theme additions, after this tutorial was recorded, you may see a higher number now.
  
 
|-
 
|-
 
| 02:25
 
| 02:25
| Let’s talk about how to find and evaluate''' Themes.'''
+
| Let’s talk about how to find and evaluate Themes.
  
 
|-
 
|-
Line 118: Line 118:
 
|-
 
|-
 
| 02:43
 
| 02:43
| '''Adaptive Theme''' is number one at this point.
+
| '''Adaptive Theme''' is number one at this point
  
 
|-
 
|-
 
| 02:46
 
| 02:46
| And''' Bootstrap''' is number two.
+
| and''' Bootstrap''' is number two.
  
 
|-
 
|-
Line 158: Line 158:
 
|-
 
|-
 
| 03:27
 
| 03:27
| A''' Contributed Theme''' can have several flavors 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.
  
 
|-
 
|-
Line 170: Line 170:
 
|-
 
|-
 
|03:46
 
|03:46
|It will literally give you just a blank screen and minor''' framework''', in order to put your own''' CSS''' in.
+
|It will literally give you a blank screen and minor''' framework''', in order to put your own''' CSS''' in.
  
 
|-
 
|-
 
| 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'''.
  
 
|-
 
|-
 
| 04:11
 
| 04:11
| We will install a''' Contributed Theme''', now.
+
| We will install a''' Contributed Theme''' now.
  
 
|-
 
|-
Line 194: Line 194:
 
|-
 
|-
 
|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 244: Line 244:
 
| 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'''.
  
 
|-
 
|-
Line 256: Line 256:
 
|-
 
|-
 
| 05:45
 
| 05:45
| We have the normal''' TOGGLE DISPLAY''' in''' Zircon'''.
+
| We have the normal''' TOGGLE DISPLAY''' in''' Zircon'''
  
 
|-
 
|-
 
| 05:49
 
| 05:49
| And the '''shortcut''' icon.
+
| and the '''shortcut''' icon.
  
 
|-
 
|-
 
| 05:51
 
| 05:51
| Once again, if you want to update the logo that's under''' Global settings'''.
+
| Once again, if you want to update the logo that's under''' Global settings'''
  
 
|-
 
|-
 
| 05:56
 
| 05:56
| And''' LOGO IMAGE SETTINGS.'''
+
| and''' LOGO IMAGE SETTINGS,
  
 
|-
 
|-
 
| 05:59
 
| 05:59
| Click''' Save'''.
+
| click''' Save'''
  
 
|-
 
|-
 
| 06:02
 
| 06:02
| And then go to our''' site'''.
+
| and then go to our site.
  
 
|-
 
|-
 
| 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 308: Line 308:
 
|-
 
|-
 
| 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.
  
 
|-
 
|-
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 the ''' 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 a 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'''.
  
 
|-
 
|-
Line 479: Line 479:
 
|-
 
|-
 
|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 the '''Spoken Tutorial Project, IIT Bombay'''.
  
 
|-
 
|-
Line 491: Line 491:
 
|-
 
|-
 
| 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 and NVLI, Ministry of Culture, Government of India.
Government of India.
+
  
 
|-
 
|-

Revision as of 15:54, 9 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 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/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 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 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/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 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