Difference between revisions of "Drupal/C3/Installing-an-Advanced-Theme/English-timed"
From Script | Spoken-Tutorial
Sandhya.np14 (Talk | contribs) |
|||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 14: | Line 14: | ||
| 00:11 | | 00:11 | ||
| To record this tutorial, I am using: | | 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. | You can use any web browser as per your choice. | ||
| Line 89: | Line 89: | ||
|- | |- | ||
| 01:40 | | 01:40 | ||
| − | | Back to the | + | | Back to the site. |
|- | |- | ||
| Line 105: | Line 105: | ||
|- | |- | ||
| 01:55 | | 01:55 | ||
| − | | Scroll down. | + | | Scroll down. We will find''' Adaptive Generator''' and''' Adaptive Sub-theme''' called''' Pixture Reloaded'''. |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
|- | |- | ||
| Line 169: | Line 165: | ||
|- | |- | ||
| 03:01 | | 03:01 | ||
| − | | Under '''Extensions''', in the left panel, we have '''Responsive menus, | + | | Under '''Extensions''', in the left panel, we have '''Responsive menus, Fonts,''' |
|- | |- | ||
| 03:08 | | 03:08 | ||
| − | | '''Image Settings''' for | + | | '''Image Settings''' for- |
| − | + | '''ARTICLE''' | |
| − | + | '''BOOK PAGE''' | |
| − | + | '''EVENTS'''. | |
| − | + | ||
|- | |- | ||
| Line 197: | Line 192: | ||
|- | |- | ||
| 03:32 | | 03:32 | ||
| − | | Back to the left panel | + | | Back to the left panel- '''Shortcodes''' and''' Markup Overrides.''' |
|- | |- | ||
| 03:37 | | 03:37 | ||
| − | | There are more options here below. | + | | There are more options here, below. |
|- | |- | ||
| Line 209: | Line 204: | ||
|- | |- | ||
| 03:44 | | 03:44 | ||
| − | | Now click on''' WIDE''' option. | + | | Now, click on''' WIDE''' option. |
|- | |- | ||
| 03:47 | | 03:47 | ||
| − | | This allows us to set up all the''' layouts''' with the''' Block regions''' and | + | | This allows us to set up all the''' layouts''' with the''' Block regions''' and also to define the''' Media queries''' right here, inside the theme. |
| − | also to define the''' Media queries''' right here, inside the | + | |
|- | |- | ||
| Line 306: | Line 300: | ||
|- | |- | ||
| 05:57 | | 05:57 | ||
| − | | Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development and | + | | Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India. |
| − | NVLI, Ministry of Culture, Government of India. | + | |
|- | |- | ||
Latest revision as of 18:08, 24 March 2017
| Time | Narration |
| 00:01 | Welcome to the Spoken tutorial on Installing an Advanced Theme. |
| 00:06 | In this tutorial, we will learn to install an advanced theme. |
| 00:11 | 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:26 | Adaptive theme and Omega are 2 amazing Theme frameworks. |
| 00:32 | Let's take a look at Adaptive theme. |
| 00:35 | Note that Adaptive theme is a Basic Theme. |
| 00:39 | You need to use a Sub-Theme for Adaptive Theme. |
| 00:42 | Let us install Adaptive Theme. |
| 00:46 | Depending on when you are watching this video, you might see Drupal 8 up here in green. |
| 00:52 | Take the Drupal 8 that's in the green and not in red. |
| 00:57 | Right-click on the tar.gz link. |
| 01:01 | Select Copy link option. |
| 01:04 | Let's come back to our website. |
| 01:06 | Click on Appearance and Install new theme. |
| 01:11 | Paste the link here and click on Install. |
| 01:15 | Now, we don't turn this one ON because Adaptive Theme is a Base Theme. |
| 01:21 | Let's now get a Sub-Theme "Pixture Reloaded". |
| 01:25 | Scroll down and locate the Drupal 8 version. |
| 01:29 | When you watch this tutorial, it will be up here in the green section. |
| 01:34 | Right-click on the tar.gz link and select Copy link. |
| 01:40 | Back to the site. |
| 01:42 | Click on Install new theme button. |
| 01:45 | Paste the link here and click on Install. |
| 01:50 | Now, click on Install newly added themes. |
| 01:55 | Scroll down. We will find Adaptive Generator and Adaptive Sub-theme called Pixture Reloaded. |
| 02:03 | Click on Install and set as default. |
| 02:07 | Click on Settings. |
| 02:09 | There is a difference between a simple theme and a base theme with its own sub-theme. |
| 02:15 | There are settings for almost everything here. |
| 02:19 | We can change just about anything. |
| 02:22 | For instance, we can have Responsive menus, |
| 02:26 | Fonts from Google or Typekit, |
| 02:30 | Separate styles for Titles, |
| 02:32 | Image alignment, |
| 02:35 | Shortcode CSS Classes, |
| 02:38 | Mobile Blocks - which allow us to hide blocks on mobile devices. |
| 02:42 | Slideshows are supported. |
| 02:45 | Touch icons, Custom CSS, more Developer tools and Legacy browser settings for IE 6 to 8. |
| 02:55 | Please use these with caution. Don't enable them unless you need them. |
| 03:01 | Under Extensions, in the left panel, we have Responsive menus, Fonts, |
| 03:08 | Image Settings for-
ARTICLE BOOK PAGE EVENTS. |
| 03:13 | It recognizes all of those Content types. |
| 03:17 | Let me click on EVENTS. |
| 03:20 | This allows us to align our images in our Events Content type. |
| 03:25 | For instance, whether we want them always to be floated to the left or to the right. |
| 03:32 | Back to the left panel- Shortcodes and Markup Overrides. |
| 03:37 | There are more options here, below. |
| 03:40 | Click on LAYOUTS and then on PAGE (DEFAULT). |
| 03:44 | Now, click on WIDE option. |
| 03:47 | This allows us to set up all the layouts with the Block regions and also to define the Media queries right here, inside the theme. |
| 03:56 | We will need some time to set this up properly. |
| 04:01 | Now, click on COLOR SCHEME. |
| 04:03 | There are many predefined color schemes. |
| 04:07 | But if you don't like the ones that come with it, then you can build your own color scheme. |
| 04:13 | Lastly, there are the normal Basic settings. |
| 04:17 | This is an amazing base theme and sub-theme for our Drupal site. |
| 04:23 | We have not really made any changes here. |
| 04:26 | But let's go and take a look at our Home page. |
| 04:30 | We see a brand new look and feel for our Home page. |
| 04:33 | We will need to go into Structure and check our Block layout. |
| 04:38 | We have used the Sub-Theme "Pixture Reloaded". |
| 04:42 | There are no Sidebar regions here. |
| 04:45 | Everything in Pixture Reloaded is just listed this way. |
| 04:50 | Maybe it was not the best choice for our demonstration. But you get the idea of how powerful it is. |
| 04:58 | We can just go in and set up all of those options using this advanced theming engine. |
| 05:04 | That's the theme framework – Adaptive theme and Pixture Reloaded. |
| 05:10 | You can play around with these to understand them thoroughly. |
| 05:15 | With this, we come to the end of this tutorial. |
| 05:17 | Let us summarize. In this tutorial, we have learnt to install an advanced theme. |
| 05:33 | This video is adapted from Acquia and OSTraining and revised by Spoken Tutorial Project, IIT Bombay. |
| 05:42 | The video at this link summarizes the Spoken Tutorial project. Please download and watch it. |
| 05:49 | The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us. |
| 05:57 | Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India. |
| 06:08 | This is Vanessa Varkey, signing off. Thanks for joining. |
