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

From Script | Spoken-Tutorial
Revision as of 12:23, 22 July 2016 by Nancyvarkey (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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