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

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title:''' Installing an Advanced Theme '''Keywords: Drupal, Video tutorial, Themes, contributed Themes, Zircon Theme, Adaptive theme''' {| style="border-spacing:0;" | s...")
 
 
Line 19: Line 19:
  
 
Learning Objectives
 
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
 
System requirement
−
 
  
  
 
| style="border:1pt solid #000000;padding:0.097cm;"| To record this tutorial, I am using
 
| 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.
 
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;"| 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'''.  
 +
 
 +
 
 +
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;"| 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;"| 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;"| 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;"| 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;"| 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.  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;"| 3:43
−
 
−
 
  
 
| style="border:1pt solid #000000;padding:0.106cm;"| Back to the left panel.
 
| 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).  '''
+
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
 
* 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 297: Line 287:
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.106cm;"| 4:56
 
| 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
 
Acknowledgement
−
 
  
  
Line 341: Line 330:
 
* adapted from Acquia and OSTraining
 
* adapted from Acquia and OSTraining
 
* and revised by Spoken Tutorial Project, IIT Bombay.
 
* and revised by Spoken Tutorial Project, IIT Bombay.
−
 
−
 
  
 
|-
 
|-
Line 360: Line 347:
  
 
Spoken Tutorial Workshops
 
Spoken Tutorial Workshops
−
 
  
  

Latest revision as of 12:23, 22 July 2016

Title: Installing an Advanced Theme

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


Visual Cue
Narration
Slide 1:

Installing an Advanced Theme

Welcome to the Spoken tutorial on Installing an Advanced Theme.
Slide 2:

Learning Objectives

In this tutorial, we will learn to install an advanced theme
Slide 3:

System requirement


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.

Time Narration
0:11 Adaptive theme and Omega are 2 amazing Theme frameworks.
0:24 Let's take a look at Adaptive theme.
0:29 Note that Adaptive theme is a Basic Theme.
0:33 You need to use a Sub-Theme for Adaptive Theme.
0:44 Let us install Adaptive Theme.
0:48 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 and not in red.

1:02 Right-click on the tar.gz link.
1:05 Select Copy link option.
1:07 Let's come back to our website.
1:09 Click on Appearance and Install new theme.
1:12 Paste the link here and click on Install.
1:15 Now we don't turn this one on because Adaptive Theme is a Base Theme.
1:25 Let's now get a Sub-Theme Pixture Reloaded.
1:51 Scroll down and locate the Drupal 8 version.


When you watch this tutorial, it will be up here in the green section.

2:01 Right-click on the tar.gz link and select Copy link.
2:03


Back to the site.


Click on Install new theme button.


Paste the link here and click on Install.

2:13 Now, click on Install newly added themes.
2:16 Scroll down.


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

2:24 Click on Install and set as default.
2:29 Click on Settings.
2:34 There is a difference between a simple theme and a base theme with its own sub-theme.
2:43 There are settings for almost everything here.


We can change just about anything.

2:50 For instance, we can have Responsive menus.
2:53 Fonts from Google or Typekit.
2:56 Separate styles for Titles.
2:58 Image alignment.
2:59 Shortcode CSS Classes.
3:03 Mobile Blocks - which allow us to hide blocks on mobile devices.
3:06 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.

3:22 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.

3:31


Let me click on EVENTS.


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

3:37 For instance, whether we want them always to be floated to the left or to the right.
3:43 Back to the left panel.


Shortcodes and Markup Overrides.

3:47 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.
4:03 We will need some time to set this up properly.
4:08 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.

4:16 Lastly, there are the normal Basic settings.
4:20 This is an amazing base theme and sub-theme for our Drupal site.
4:28 We have not really made any changes here.


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

4:35 We see a brand new look and feel for our Homepage.
4:40 We will need to go into Structure and check our Block layout.


We have used the Sub-Theme Pixture Reloaded.

4:49 There are no Sidebar regions here.


Everything in Pixture Reloaded is just listed this way.

4:56 Maybe it was not the best choice for our demonstration.
5:03 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.

5:15 That's the theme framework – Adaptive theme and Pixture Reloaded.


You can play around with these to understand them thoroughly.

With this we come to the end of this tutorial.
Slide 5:

Summary


Let us summarize.


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

Slide 6:

Acknowledgement


This video is
  • adapted from Acquia and OSTraining
  • and revised by Spoken Tutorial Project, IIT Bombay.
Slide 7:

Acknowledgement


The video at this link summarises the Spoken Tutorial project.


Pls download and watch it.

Slide 8:

Spoken Tutorial Workshops


The Spoken Tutorial Project Team conducts workshops and gives certificates.


For more details, please write to us.

Slide 9:

Acknowledgement


Spoken Tutorial Project is funded by
  • NMEICT, Ministry of Human Resource Development and
  • NVLI, Ministry of Culture

Government of India.

This is Vanessa Varkey signing off.


Thanks for joining.

Contributors and Content Editors

Nancyvarkey, Priyacst

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