Drupal/C3/Installing-an-Advanced-Theme/English - Revision history

Nancyvarkey at 06:53, 22 July 2016

2016-07-22T06:53:48Z

Priyacst: Created page with "'''Title:''' Installing an Advanced Theme '''Keywords: Drupal, Video tutorial, Themes, contributed Themes, Zircon Theme, Adaptive theme''' {| style="border-spacing:0;" | s..."

2016-07-15T08:55:57Z

Created page with "'''Title:''' Installing an Advanced Theme '''Keywords: Drupal, Video tutorial, Themes, contributed Themes, Zircon Theme, Adaptive theme''' {| style="border-spacing:0;" | s..."

New page

'''Title:''' Installing an Advanced Theme

'''Keywords: Drupal, Video tutorial, Themes, contributed Themes, Zircon Theme, Adaptive theme'''

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.097cm;"| <center>Visual Cue</center>
| style="border:1pt solid #000000;padding:0.097cm;"| <center>Narration</center>

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 1:

Installing an Advanced Theme
| style="border:1pt solid #000000;padding:0.097cm;"| Welcome to the Spoken tutorial on''' Installing an Advanced Theme.'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 2:

Learning Objectives

| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn to

* Install an advanced theme

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 3:

System requirement

| style="border:1pt solid #000000;padding:0.097cm;"| 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.

|}

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.106cm;"| '''Time'''
| style="border:1pt solid #000000;padding:0.106cm;"| '''Narration'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 0:11
| style="border:1pt solid #000000;padding:0.106cm;"| '''Adaptive theme''' and''' Omega''' are 2 amazing''' Theme frameworks.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 0:24
| style="border:1pt solid #000000;padding:0.106cm;"| Let's take a look at''' Adaptive theme'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 0:29
| style="border:1pt solid #000000;padding:0.106cm;"| Note that''' Adaptive theme''' is a''' Basic Theme'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 0:33
| style="border:1pt solid #000000;padding:0.106cm;"| You need to use a''' Sub-Theme''' for''' Adaptive Theme.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 0:44
| style="border:1pt solid #000000;padding:0.106cm;"| Let us install''' Adaptive Theme.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 0:48
| style="border:1pt solid #000000;padding:0.106cm;"| Depending on when you are watching this video, you might see''' Drupal 8''' up here in green.

Take the''' Drupal 8''' that's in the green not in the red.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 1:02
| style="border:1pt solid #000000;padding:0.106cm;"| Right-click on the''' tar.gz''' link'''.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 1:05
| style="border:1pt solid #000000;padding:0.106cm;"| Select''' Copy link''' option.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 1:07
| style="border:1pt solid #000000;padding:0.106cm;"| Let's come back to our''' website'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 1:09
| style="border:1pt solid #000000;padding:0.106cm;"| Click on''' Appearance''' and''' Install new theme.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 1:12
| style="border:1pt solid #000000;padding:0.106cm;"| Paste the link here and click on''' Install.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 1:15
| style="border:1pt solid #000000;padding:0.106cm;"| Now we don't turn this one''' on''' because''' Adaptive Theme''' is a''' Base Theme'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 1:25
| style="border:1pt solid #000000;padding:0.106cm;"| Let's now get a''' Sub-Theme Pixture Reloaded'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 1:51
| style="border:1pt solid #000000;padding:0.106cm;"| Scroll down and locate the''' Drupal 8 version'''. When you watch this tutorial, it will be up here in the green section.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 2:01
| style="border:1pt solid #000000;padding:0.106cm;"| Right-click on the''' tar.gz link''' and select''' Copy link'''.  

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 2:03

| style="border:1pt solid #000000;padding:0.106cm;"| Back to the''' '''site.

Click on''' Install new theme''' button.

Paste the link here and click on''' Install'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 2:13
| style="border:1pt solid #000000;padding:0.106cm;"| Now, click on''' Install newly added themes.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 2:16
| style="border:1pt solid #000000;padding:0.106cm;"| Scroll down.

We will find''' Adaptive Generator''' and''' Adaptive Sub-theme''' called''' Pixture Reloaded'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 2:24
| style="border:1pt solid #000000;padding:0.106cm;"| Click on''' Install and set as default.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 2:29
| style="border:1pt solid #000000;padding:0.106cm;"| Click on''' Settings'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 2:34
| style="border:1pt solid #000000;padding:0.106cm;"| There is a difference between a simple''' theme''' and a''' base theme''' with its own '''sub-theme'''.  

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 2:43
| style="border:1pt solid #000000;padding:0.106cm;"| There are settings for almost everything here.

We can change just about anything.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 2:50
| style="border:1pt solid #000000;padding:0.106cm;"| For instance, we can have''' Responsive menus'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 2:53
| style="border:1pt solid #000000;padding:0.106cm;"| '''Fonts''' from''' Google''' or''' Typekit'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 2:56
| style="border:1pt solid #000000;padding:0.106cm;"| Separate''' styles''' for''' titles'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 2:58
| style="border:1pt solid #000000;padding:0.106cm;"| '''Image alignment.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 2:59
| style="border:1pt solid #000000;padding:0.106cm;"| '''Shortcode CSS Classes.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 3:03
| style="border:1pt solid #000000;padding:0.106cm;"| '''Mobile Blocks''' - which allow us to hide blocks on mobile devices.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 3:06
| style="border:1pt solid #000000;padding:0.106cm;"| '''Slideshows''' are supported.

'''Touch icons, Custom CSS''', more''' Developer tools''' and '''Legacy browser''' settings for''' IE 6''' to''' 8'''.

Please use these with caution.  Don't enable them unless you need them.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 3:22
| style="border:1pt solid #000000;padding:0.106cm;"| Under''' Extensions''' in the left panel, we have''' Responsive menus.'''

'''Fonts.'''

'''Image Settings''' for

* '''ARTICLE'''
* '''BOOK PAGE'''
* '''EVENTS'''

It recognises all of those''' Content types'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 3:31

| style="border:1pt solid #000000;padding:0.106cm;"| Let me click on''' EVENTS'''.

This allows us to align our images in our''' Events Content type.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 3:37
| style="border:1pt solid #000000;padding:0.106cm;"| For instance, whether we want them always to be floated to the left or to the right.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 3:43

| style="border:1pt solid #000000;padding:0.106cm;"| Back to the left panel.

'''Shortcodes''' and''' Markup Overrides.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 3:47
| style="border:1pt solid #000000;padding:0.106cm;"| There are more options here below.

Click on''' LAYOUTS''' and then on''' PAGE (DEFAULT).  '''

Now click on''' WIDE''' option'''.'''

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'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 4:03
| style="border:1pt solid #000000;padding:0.106cm;"| We will need some time to set this up properly.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 4:08
| style="border:1pt solid #000000;padding:0.106cm;"| Now click on''' COLOR SCHEME.'''

There are many predefined color schemes.

But if you don't like the ones that come with it, then you can build your own''' color scheme'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 4:16
| style="border:1pt solid #000000;padding:0.106cm;"| Lastly, there are the normal''' Basic settings.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 4:20
| style="border:1pt solid #000000;padding:0.106cm;"| This is an amazing''' base theme''' and''' sub-theme''' for our''' Drupal site.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 4:28
| style="border:1pt solid #000000;padding:0.106cm;"| We have not really made any changes here.

But let's go and take a look at our''' Homepage'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 4:35
| style="border:1pt solid #000000;padding:0.106cm;"| We see a brand new look and feel for our''' Homepage'''.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 4:40
| style="border:1pt solid #000000;padding:0.106cm;"| We will need to go into''' Structure''' and check our''' Block layout.'''

We have used the''' Sub-Theme Pixture Reloaded.'''

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 4:49
| style="border:1pt solid #000000;padding:0.106cm;"| There are no''' Sidebar regions''' here.

Everything in''' Pixture Reloaded''' is just listed this way.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 4:56
| style="border:1pt solid #000000;padding:0.106cm;"| So, maybe it was not the best choice for our demonstration.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 5:03
| style="border:1pt solid #000000;padding:0.106cm;"| But you get the idea of how powerful it is.

We can just go in and set up all of those options using this advanced theming engine.

|-
| style="border:1pt solid #000000;padding:0.106cm;"| 5:15
| style="border:1pt solid #000000;padding:0.106cm;"| That's the''' theme framework''' –''' Adaptive theme''' and''' Pixture Reloaded'''.

You can play around with these to understand them thoroughly.

|}

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| With this we come to the end of this tutorial.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 5:

Summary

| style="border:1pt solid #000000;padding:0.097cm;"| Let us summarize.

In this tutorial we have learnt to install an advanced theme.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 6:

Acknowledgement

| style="border:1pt solid #000000;padding:0.097cm;"| This video is

* adapted from Acquia and OSTraining
* and revised by Spoken Tutorial Project, IIT Bombay.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 7:

Acknowledgement

| style="border:1pt solid #000000;padding:0.097cm;"| The video at this link summarises the Spoken Tutorial project.

Pls download and watch it.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 8:

Spoken Tutorial Workshops

| style="border:1pt solid #000000;padding:0.097cm;"| The Spoken Tutorial Project Team conducts workshops and gives certificates.

For more details, please write to us.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 9:

Acknowledgement

| style="border:1pt solid #000000;padding:0.097cm;"| Spoken Tutorial Project is funded by

* NMEICT, Ministry of Human Resource Development and
* NVLI, Ministry of Culture

Government of India.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| This is Vanessa Varkey signing off.

Thanks for joining.

|}

@@ Line 19: / Line 19: @@
 Learning Objectives
+| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn to install an '''advanced theme'''
-−
-−
 | style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn to
-−
-* Install an advanced theme
-−
-−
 |-
@@ Line 32: / Line 25: @@
 System requirement
 | style="border:1pt solid #000000;padding:0.097cm;"| 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.
@@ Line 75: / Line 66: @@
-Take the''' Drupal 8''' that's in the green not in the red.
+Take the''' Drupal 8''' that's in the green and not in red.
 |-
@@ Line 107: / Line 98: @@
 |-
 | style="border:1pt solid #000000;padding:0.106cm;"| 1:51
-| style="border:1pt solid #000000;padding:0.106cm;"| Scroll down and locate the''' Drupal 8 version'''. When you watch this tutorial, it will be up here in the green section.
+| style="border:1pt solid #000000;padding:0.106cm;"| Scroll down and locate the''' Drupal 8 version'''.
 |-
 | style="border:1pt solid #000000;padding:0.106cm;"| 2:01
-| style="border:1pt solid #000000;padding:0.106cm;"| Right-click on the''' tar.gz link''' and select''' Copy link'''. &nbsp;
+| style="border:1pt solid #000000;padding:0.106cm;"| Right-click on the''' tar.gz link''' and select''' Copy link'''.
 |-
@@ Line 118: / Line 112: @@
-| style="border:1pt solid #000000;padding:0.106cm;"| Back to the''' '''site.
+| style="border:1pt solid #000000;padding:0.106cm;"| Back to the site.
@@ Line 147: / Line 141: @@
 |-
 | style="border:1pt solid #000000;padding:0.106cm;"| 2:34
-| style="border:1pt solid #000000;padding:0.106cm;"| There is a difference between a simple''' theme''' and a''' base theme''' with its own '''sub-theme'''. &nbsp;
+| style="border:1pt solid #000000;padding:0.106cm;"| There is a difference between a simple''' theme''' and a''' base theme''' with its own '''sub-theme'''.
 |-
@@ Line 166: / Line 160: @@
 |-
 | style="border:1pt solid #000000;padding:0.106cm;"| 2:56
-| style="border:1pt solid #000000;padding:0.106cm;"| Separate''' styles''' for''' titles'''.
+| style="border:1pt solid #000000;padding:0.106cm;"| Separate''' styles''' for''' Titles'''.
 |-
@@ Line 188: / Line 182: @@
-Please use these with caution. &nbsp;Don't enable them unless you need them.
+Please use these with caution.  Don't enable them unless you need them.
 |-
@@ Line 222: / Line 216: @@
 |-
 | style="border:1pt solid #000000;padding:0.106cm;"| 3:43
 | style="border:1pt solid #000000;padding:0.106cm;"| Back to the left panel.
@@ Line 235: / Line 227: @@
-Click on''' LAYOUTS''' and then on''' PAGE (DEFAULT). &nbsp;'''
+Click on''' LAYOUTS''' and then on''' PAGE (DEFAULT).'''
-Now click on''' WIDE''' option'''.'''
+Now click on''' WIDE''' option.
@@ Line 245: / Line 237: @@
 * set up all the''' layouts''' with the''' Block regions''' and
 * also to define the''' Media queries''' right here, inside the''' theme'''.
 |-
@@ Line 297: / Line 287: @@
 |-
 | style="border:1pt solid #000000;padding:0.106cm;"| 4:56
-| style="border:1pt solid #000000;padding:0.106cm;"| So, maybe it was not the best choice for our demonstration.
+| style="border:1pt solid #000000;padding:0.106cm;"| Maybe it was not the best choice for our demonstration.
 |-
@@ Line 304: / Line 294: @@
-We can just go in and set up all of those options using this advanced theming engine.
+We can just go in and set up all of those options using this '''advanced theming engine'''.
 |-
@@ Line 328: / Line 318: @@
-In this tutorial we have learnt to install an advanced theme.
+In this tutorial, we have learnt to install an '''advanced theme'''.
 |-
@@ Line 334: / Line 324: @@
 Acknowledgement
@@ Line 341: / Line 330: @@
 * adapted from Acquia and OSTraining
 * and revised by Spoken Tutorial Project, IIT Bombay.
 |-
@@ Line 360: / Line 347: @@
 Spoken Tutorial Workshops