Difference between revisions of "Drupal/C3/Styling-a-Page-using-Themes/English-timed"
(One intermediate revision by one other user not shown) | |||
Line 2: | Line 2: | ||
|'''Time''' | |'''Time''' | ||
|'''Narration''' | |'''Narration''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
− | | 00:01 | + | | 00:01 |
− | | | + | |Welcome to the '''Spoken tutorial''' on''' Styling a Page using Themes.''' |
|- | |- | ||
− | | 00:06 | + | | 00:06 |
− | | | + | |In this tutorial, we will learn about: |
− | + | Introduction to '''themes''' | |
− | + | Finding '''themes''' and | |
− | + | Installing a basic '''theme'''. | |
|- | |- | ||
− | | 00: 16 | + | |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 | + | |00:30 |
− | | | + | | As mentioned earlier, a''' Drupal website''' can look like anything we want. |
|- | |- | ||
| 00:36 | | 00:36 | ||
− | | | + | | In fact, here are some of the different looks and feels from several Drupal sites. |
|- | |- | ||
| 00:42 | | 00:42 | ||
− | | | + | | Notice that they are completely different. |
|- | |- | ||
| 00:45 | | 00:45 | ||
− | | | + | | This is based on the''' Theme'''. |
|- | |- | ||
| 00:48 | | 00:48 | ||
− | | '' ' | + | | '''Themes''' can make your Drupal site look like anything you want. |
|- | |- | ||
| 00:51 | | 00:51 | ||
− | | | + | | Here are a few things to remember about''' Themes'''. |
|- | |- | ||
| 00:55 | | 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 | + | |01:11 |
− | | | + | |Or, we can create our own''' Theme''' like''' Artisteer''' from''' Artisteer.com''' i.e. build it from scratch |
|- | |- | ||
| 01:19 | | 01:19 | ||
− | | '' ' | + | | '''Contributed Themes''' can be found at''' drupal.org/project/themes'''. |
|- | |- | ||
| 01:26 | | 01:26 | ||
− | | '' | + | | '''Block Regions''' are all determined by the''' Theme.''' |
|- | |- | ||
| 01:29 | | 01:29 | ||
− | | | + | | 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. |
|- | |- | ||
| 01:42 | | 01:42 | ||
− | | | + | | Let's now understand''' Themes''' a little bit more. |
|- | |- | ||
| 01:46 | | 01:46 | ||
− | | | + | | We can get some fantastic free Themes at''' drupal.org'''. |
|- | |- | ||
| 01:51 | | 01:51 | ||
− | | | + | | Go to''' drupal.org/project/themes'''. |
|- | |- | ||
| 01:56 | | 01:56 | ||
− | | | + | | 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. |
− | + | |- | |
| 02:10 | | 02:10 | ||
− | | 2205 '' ' | + | | There are 2205''' Themes''' here. When we click on''' Drupal 8,''' this comes down to a smaller number. |
|- | |- | ||
− | | 02: 18 | + | |02:18 |
− | | | + | |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. |
|- | |- | ||
| 02:30 | | 02:30 | ||
− | | | + | | This is very similar to''' Modules.''' |
|- | |- | ||
| 02:33 | | 02:33 | ||
− | | ' 'drupal.org' '' | + | | We will start here at''' drupal.org'''. |
|- | |- | ||
| 02:36 | | 02:36 | ||
− | | | + | | Now, when we filter by''' Core compatibility''', they get automatically sorted by''' Most Installed'''. |
|- | |- | ||
| 02:43 | | 02:43 | ||
− | | '' ' | + | | '''Adaptive Theme''' is number one at this point |
+ | |||
|- | |- | ||
| 02:46 | | 02:46 | ||
− | | | + | | and''' Bootstrap''' is number two. |
|- | |- | ||
| 02:50 | | 02:50 | ||
− | | | + | | Let's click on''' Bootstrap.''' |
|- | |- | ||
| 02:53 | | 02:53 | ||
− | | '' ' | + | | Recall our''' DMV''' illustration from the''' Module''' tutorial? It’s the same thing here. |
|- | |- | ||
| 02:59 | | 02:59 | ||
− | | | + | | You have to read the''' documentation''' first. |
− | . | + | |
|- | |- | ||
| 03:02 | | 03:02 | ||
− | | | + | | Then check out the''' Maintainers'''. |
|- | |- | ||
| 03:05 | | 03:05 | ||
− | | versions ' '' | + | | And look at''' versions''' and''' project informations.''' |
|- | |- | ||
| 03:08 | | 03:08 | ||
− | | | + | | At the time of recording, this particular''' Theme''' is in''' Drupal 8 x 3.0 alpha 1 version.''' |
|- | |- | ||
| 03:16 | | 03:16 | ||
− | | | + | | 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. |
|- | |- | ||
| 03:27 | | 03:27 | ||
− | | | + | | 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. |
|- | |- | ||
| 03:40 | | 03:40 | ||
− | | | + | | We can have''' Starter Themes''' like''' Bootstrap''' or''' Zen.''' |
+ | |||
|- | |- | ||
− | | 03: 46 | + | |03:46 |
− | | | + | |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.'''. |
|- | |- | ||
| 04:02 | | 04:02 | ||
− | | | + | | But the rules are all the same here. |
|- | |- | ||
| 04:05 | | 04:05 | ||
− | | '' '' ' | + | | Look at the''' documentation;''' look at the''' Maintainers''' and look at the''' versions'''. |
|- | |- | ||
| 04:11 | | 04:11 | ||
− | | | + | | We will install a''' Contributed Theme''' now. |
|- | |- | ||
| 04:13 | | 04:13 | ||
− | | | + | | Let’s go to''' drupal.org/project/zircon'''. |
|- | |- | ||
− | | 04: 20 | + | |04:20 |
− | | | + | | Scroll down. This is a nice''' Theme''', that's been developed specifically for Drupal 7 and 8. |
|- | |- | ||
| 04:28 | | 04:28 | ||
− | | | + | | It's not used on many sites. |
|- | |- | ||
| 04:31 | | 04:31 | ||
− | | | + | | 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. |
|- | |- | ||
| 04:47 | | 04:47 | ||
− | | | + | | This time click on''' Appearance''' and''' Install new theme'''. |
|- | |- | ||
− | | 04: 52 | + | |04:52 |
− | | | + | | Again, same process as with''' Modules'''. |
|- | |- | ||
| 04:56 | | 04:56 | ||
− | | | + | | Let us paste that''' URL''' and then click''' Install'''. |
|- | |- | ||
| 05:00 | | 05:00 | ||
− | | '' ' | + | | The''' Theme''' is downloaded to our''' web server,''' and we are able to now turn it''' ON'''. |
|- | |- | ||
| 05:06 | | 05:06 | ||
− | | '' | + | | Click''' Install newly added themes.''' |
|- | |- | ||
| 05:09 | | 05:09 | ||
− | | | + | | Scroll down to the bottom. |
|- | |- | ||
| 05:12 | | 05:12 | ||
− | | | + | | And you'll see''' Zircon'''. |
− | " | + | "A flexible, recolorable theme with many regions and a responsive mobile first layout". |
|- | |- | ||
| 05:21 | | 05:21 | ||
− | | ' | + | | Click''' Install and set as default'''. |
|- | |- | ||
| 05:25 | | 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 | | 05:38 | ||
− | | | + | | Now, let's take a quick look at the''' settings.''' |
|- | |- | ||
| 05:42 | | 05:42 | ||
− | | | + | | Click on the word''' Settings'''. |
|- | |- | ||
| 05:45 | | 05:45 | ||
− | | | + | | We have the normal''' TOGGLE DISPLAY''' in''' Zircon''' |
|- | |- | ||
| 05:49 | | 05:49 | ||
− | | | + | | and the '''shortcut''' icon. |
|- | |- | ||
| 05:51 | | 05:51 | ||
− | | | + | | Once again, if you want to update the logo- that's under''' Global settings''' |
|- | |- | ||
| 05:56 | | 05:56 | ||
− | | LOGO IMAGE SETTINGS, | + | | And''' LOGO IMAGE SETTINGS, |
|- | |- | ||
| 05:59 | | 05:59 | ||
− | | | + | | Click''' Save''' |
|- | |- | ||
| 06:02 | | 06:02 | ||
− | | | + | | And then go to our site. |
|- | |- | ||
| 06:04 | | 06:04 | ||
− | | | + | | This is''' Zircon''' - a completely flexible, robust, and global friendly Theme for Drupal. |
|- | |- | ||
| 06:11 | | 06:11 | ||
− | | ' | + | | Let's head over to''' Structure''' and''' Blocks'''. |
|- | |- | ||
| 06:15 | | 06:15 | ||
− | | | + | | And click on''' Demonstrate block regions for Zircon.''' |
|- | |- | ||
| 06:19 | | 06:19 | ||
− | | | + | | We'll see a number of''' Block regions''' here. |
|- | |- | ||
| 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. |
|- | |- | ||
| 06:32 | | 06:32 | ||
− | | '' Slideshow | + | | There's a''' Slideshow region''', in case you are using something like''' View Slideshow'''. |
|- | |- | ||
| 06:37 | | 06:37 | ||
− | | A Featured block region, | + | | A''' Featured block region''', |
|- | |- | ||
| 06:39 | | 06:39 | ||
− | | 'Help,Sidebar First, Sidebar Second, Content, | + | | '''Help, |
+ | Sidebar First, | ||
+ | Sidebar Second, | ||
+ | Content''', | ||
|- | |- | ||
− | | 06: 44 | + | |06:44 |
− | | Panel First, Panel Second col 1, 2, 3 and 4. And then a Footer region. | + | | '''Panel First, Panel Second col 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. |
|- | |- | ||
− | | 07: 00 | + | |07:00 |
− | | | + | | Let's take a quick look and see what we need to do here. |
|- | |- | ||
| 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. |
|- | |- | ||
| 07:14 | | 07:14 | ||
− | | | + | | We will put that back into''' Footer.''' |
|- | |- | ||
| 07:17 | | 07:17 | ||
− | | | + | | It immediately disappears from the''' Header.''' |
|- | |- | ||
− | | 07: 20 | + | |07:20 |
− | | | + | | Let's take the''' Status message''' out of the''' Header''' and put it into messages. |
|- | |- | ||
| 07:26 | | 07:26 | ||
− | | | + | | Let's put the''' Footer menu''' again, down into''' Footer'''. |
|- | |- | ||
| 07:30 | | 07:30 | ||
− | | | + | | We'll leave''' Search, Site branding''' and''' User account menu''' where they are for now. |
+ | |||
|- | |- | ||
| 07:36 | | 07:36 | ||
− | | '' ' | + | | ''' Primary menu''' is in the wrong spot but let's just take a quick look at that. |
|- | |- | ||
| 07:42 | | 07:42 | ||
− | | '' Save blocks. | + | | Click''' Save blocks.''' |
|- | |- | ||
| 07:44 | | 07:44 | ||
− | | | + | | Go back to our''' site'''. |
|- | |- | ||
| 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'''. |
|- | |- | ||
− | | 07: 55 | + | |07:55 |
− | | | + | | So, we will take our''' Main navigation''' and change that to''' Main menu'''. |
|- | |- | ||
| 08:01 | | 08:01 | ||
− | | | + | | Scrolling down.. let's take a quick look. |
|- | |- | ||
| 08:05 | | 08:05 | ||
− | | | + | | In our '''Content''' area, we've got the''' Help block'''. |
|- | |- | ||
| 08:09 | | 08:09 | ||
− | | | + | | Let us put that in''' Help'''. |
|- | |- | ||
| 08:12 | | 08:12 | ||
− | | '' ' | + | | '''Page title, Primary admin actions''' and''' Page Tabs''' are fine. |
|- | |- | ||
| 08:18 | | 08:18 | ||
− | | '' 'Drupalville, | + | | '''Sidebar first, Welcome to Drupalville, Book navigation, Recent Events Added''' and''' Tools'''. |
|- | |- | ||
− | | 08: 26 | + | |08:26 |
− | | '' ' | + | | Let's take the''' Tools menu''' and put that inside''' Sidebar second.''' |
− | + | We haven't done this before. | |
− | + | |- | |
| 08:34 | | 08:34 | ||
− | | | + | | There are four''' Panel regions''' here in which we can place anything we want. |
|- | |- | ||
| 08:39 | | 08:39 | ||
− | | | + | | Now, click''' Save.''' |
|- | |- | ||
| 08:41 | | 08:41 | ||
− | | | + | | And let's take a look at what we did. |
|- | |- | ||
| 08:44 | | 08:44 | ||
− | | | + | | This is a lot better now. |
|- | |- | ||
| 08:47 | | 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 | + | |08:58 |
− | | BOOK NAVIGATION, RECENTLY ADDED | + | | '''BOOK NAVIGATION, RECENTLY ADDED EVENTS''' on the left. |
|- | |- | ||
| 09:03 | | 09:03 | ||
− | | '' 'TOOLS' '' | + | | And the''' TOOLS''' are on the right, again''' Sidebar first '''and''' Sidebar second.''' |
+ | |||
|- | |- | ||
| 09:10 | | 09:10 | ||
− | | | + | | And all the content is in the middle. |
|- | |- | ||
| 09:12 | | 09:12 | ||
− | | | + | | A couple of things to point out here. |
|- | |- | ||
| 09:15 | | 09:15 | ||
− | | | + | | We've changed our''' themes.''' Everything has changed, except our content. |
− | + | |- | |
| 09:20 | | 09:20 | ||
− | | | + | | We've got new''' fonts''', new''' font styles,''' new''' H3 tags''', new''' Block regions, layouts''' and a new''' Footer area.''' |
|- | |- | ||
| 09:31 | | 09:31 | ||
− | | | + | | But what's not changed is our content and the actual''' layout''' of our content. |
|- | |- | ||
| 09:37 | | 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 | | 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 | | 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 | | 10:08 | ||
− | | | + | | Find some '''themes''' that you like, install them and play with them. |
|- | |- | ||
− | | 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. |
|- | |- | ||
− | | 10: 21 | + | |10:21 |
− | | | + | | With this, we come to the end of this tutorial. |
|- | |- | ||
− | | 10: 24 | + | |10:24 |
− | | | + | | Let us summarize. In this tutorial we have learnt about: |
− | + | Introduction to '''themes''' | |
+ | Finding '''themes''' and | ||
+ | Installing a basic '''theme'''. | ||
|- | |- | ||
− | | 10: 45 | + | |10:45 |
− | | | + | | This video is adapted from '''Acquia''' and '''OSTraining''' and revised by the '''Spoken Tutorial Project, IIT Bombay'''. |
|- | |- | ||
− | | 10: 54 | + | |10:54 |
− | | | + | | 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. |
|- | |- | ||
| 11:08 | | 11:08 | ||
− | | | + | | Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India. |
|- | |- | ||
| 11: 19 | | 11: 19 | ||
− | | | + | | This is Vanessa Varkey, signing off. Thanks for joining. |
|} | |} |
Latest revision as of 18:06, 24 March 2017
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