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

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "{| border =1 | '''Time''' |'''Narration''' |- | 00:01 | Welcome to the Spoken tutorial on''' Installing an Advanced Theme.''' |- | 00:06 | In this tutorial, we will lea...")
 
 
(4 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
|-
 
|-
 
|  00:01
 
|  00:01
−
|  Welcome to the Spoken tutorial on''' Installing an Advanced Theme.'''
+
|  Welcome to the '''Spoken tutorial''' on''' Installing an Advanced Theme.'''
  
 
|-
 
|-
 
|  00:06
 
|  00:06
−
|  In this tutorial, we will learn to install an '''advanced theme'''
+
|  In this tutorial, we will learn to install an '''advanced theme'''.
  
 
|-
 
|-
 
|  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 '''Firefox''' Web browser
+
'''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 48: Line 49:
 
|-
 
|-
 
|  00:57
 
|  00:57
−
|  Right-click on the''' tar.gz''' link'''.'''
+
|  Right-click on the''' tar.gz''' link.
  
 
|-
 
|-
Line 64: Line 65:
 
|-
 
|-
 
|  01:11
 
|  01:11
−
|  Paste the link here and click on''' Install.'''
+
|  '''Paste''' the link here and click on''' Install.'''
  
 
|-
 
|-
 
|  01:15
 
|  01:15
−
|  Now we don't turn this one''' on''' because''' Adaptive Theme''' is a''' Base Theme'''.
+
|  Now, we don't turn this one''' ON''' because''' Adaptive Theme''' is a''' Base Theme'''.
  
 
|-
 
|-
 
|  01:21
 
|  01:21
−
|  Let's now get a''' Sub-Theme Pixture Reloaded'''.
+
|  Let's now get a''' Sub-Theme "Pixture Reloaded"'''.
  
 
|-
 
|-
 
|  01:25
 
|  01:25
−
|  Scroll down and locate the''' Drupal 8 version'''.  
+
|  Scroll down and locate the''' Drupal 8''' version.  
  
 
|-
 
|-
Line 96: Line 97:
 
|-
 
|-
 
|  01:45
 
|  01:45
−
| Paste the link here and click on''' Install'''.
+
| '''Paste''' the link here and click on''' Install'''.
  
 
|-
 
|-
Line 104: 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 120: Line 117:
 
|-
 
|-
 
|  02:09
 
|  02:09
−
|  There is a difference between a simple''' theme''' and a''' base theme''' with its own '''sub-theme'''.  
+
|  There is a difference between a simple theme and a''' base theme''' with its own '''sub-theme'''.  
  
 
|-
 
|-
Line 132: Line 129:
 
|-
 
|-
 
|  02:22
 
|  02:22
−
|  For instance, we can have''' Responsive menus'''.
+
|  For instance, we can have''' Responsive menus''',
  
 
|-
 
|-
 
|  02:26
 
|  02:26
−
|  '''Fonts''' from''' Google''' or''' Typekit'''.
+
|  '''Fonts''' from''' Google''' or''' Typekit''',
  
 
|-
 
|-
 
|  02:30
 
|  02:30
−
|  Separate''' styles''' for''' Titles'''.
+
|  Separate''' styles''' for''' Titles''',
  
 
|-
 
|-
 
|  02:32
 
|  02:32
−
|  '''Image alignment.'''
+
|  '''Image alignment,'''
  
 
|-
 
|-
 
|  02:35
 
|  02:35
−
|  '''Shortcode CSS Classes.'''
+
|  '''Shortcode CSS Classes,'''
  
 
|-
 
|-
Line 168: 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'''
+
  
 
|-
 
|-
 
|  03:13
 
|  03:13
−
| It recognises all of those''' Content types'''.
+
| It recognizes all of those''' Content types'''.
  
 
|-
 
|-
Line 196: 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 208: 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 221: Line 216:
 
|-
 
|-
 
|  04:01
 
|  04:01
−
|  Now click on''' COLOR SCHEME.'''
+
|  Now, click on''' COLOR SCHEME.'''
  
 
|-
 
|-
Line 245: Line 240:
 
|-
 
|-
 
|  04:26
 
|  04:26
−
| But let's go and take a look at our''' Homepage'''.
+
| But let's go and take a look at our''' Home page'''.
  
 
|-
 
|-
 
|  04:30
 
|  04:30
−
|  We see a brand new look and feel for our''' Homepage'''.
+
|  We see a brand new look and feel for our''' Home page'''.
  
 
|-
 
|-
Line 257: Line 252:
 
|-
 
|-
 
|  04:38
 
|  04:38
−
| We have used the''' Sub-Theme Pixture Reloaded.'''
+
| We have used the''' Sub-Theme "Pixture Reloaded".'''
  
 
|-
 
|-
Line 285: Line 280:
 
|-
 
|-
 
|  05:15
 
|  05:15
−
|  With this we come to the end of this tutorial.
+
|  With this, we come to the end of this tutorial.
  
 
|-
 
|-
Line 293: Line 288:
 
|-
 
|-
 
|  05:33
 
|  05:33
−
|  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 '''Spoken Tutorial Project, IIT Bombay'''.
  
 
|-
 
|-
 
|  05:42
 
|  05:42
−
|  The video at this link summarises the Spoken Tutorial project.Pls download and watch it.
+
|  The video at this link summarizes the Spoken Tutorial project. Please download and watch it.
  
 
|-
 
|-
 
|  05:49
 
|  05:49
−
|  The Spoken Tutorial Project Team conducts workshops and gives certificates.For more details, please write to us.
+
|  The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
  
 
|-
 
|-
 
|  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.
+
  
 
|-
 
|-
 
|  06:08
 
|  06:08
−
|  This is Vanessa Varkey signing off.Thanks for joining.
+
|  This is Vanessa Varkey, signing off. Thanks for joining.
  
 
|}
 
|}

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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Drupal/C3/Installing-an-Advanced-Theme/English-timed&oldid=34160"