Difference between revisions of "Drupal/C3/Installing-an-Advanced-Theme/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(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
+
'''Ubuntu Linux''' Operating System
* '''Drupal''' 8 and  
+
'''Drupal''' 8 and  
* '''Firefox''' Web browser.
+
'''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 '''site'''.
+
|  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'''.
 
+
|-
+
|  01:56
+
| 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,''' '''Fonts,'''
+
|  Under '''Extensions''', in the left panel, we have '''Responsive menus, Fonts,'''
  
 
|-
 
|-
 
|  03:08
 
|  03:08
| '''Image Settings''' for
+
| '''Image Settings''' for-
 
+
'''ARTICLE'''
* '''ARTICLE'''
+
'''BOOK PAGE'''
* '''BOOK PAGE'''
+
'''EVENTS'''.
* '''EVENTS'''.
+
  
 
|-
 
|-
Line 197: Line 192:
 
|-
 
|-
 
|  03:32
 
|  03:32
|  Back to the left panel. '''Shortcodes''' and''' Markup Overrides.'''
+
|  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''' theme'''.
+
  
 
|-
 
|-
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.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14