Drupal/C3/Installing-an-Advanced-Theme/English-timed

From Script | Spoken-Tutorial
Revision as of 17:59, 2 September 2016 by Sandhya.np14 (Talk | contribs)

Jump to: navigation, search
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.
01:56 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.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14