Difference between revisions of "Drupal/C3/Styling-a-Page-using-Themes/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title:''' Styling a Page using Themes '''Keywords: Drupal, Video tutorial, Themes, contributed Themes, starter Themes, base Themes, sub-themes, Zircon Theme, Adaptive them...")
 
Line 19: Line 19:
  
 
Learning Objectives
 
Learning Objectives
−
 
  
  
 
| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn about
 
| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn about
  
−
* Introduction to themes
+
* Introduction to '''themes'''
−
* Finding themes and
+
* Finding '''themes''' and
−
* Installing a basic theme  
+
* Installing a basic '''theme'''
−
 
+
−
 
+
  
 
|-
 
|-
Line 34: Line 31:
  
 
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 54: Line 49:
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.106cm;"| 0:05
 
| style="border:1pt solid #000000;padding:0.106cm;"| 0:05
−
| style="border:1pt solid #000000;padding:0.106cm;"| As mentioned earlier, a''' Drupal''' website can look like anything we want.
+
| style="border:1pt solid #000000;padding:0.106cm;"| As mentioned earlier, a''' Drupal website''' can look like anything we want.
  
 
|-
 
|-
Line 70: Line 65:
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.106cm;"| 0:23
 
| style="border:1pt solid #000000;padding:0.106cm;"| 0:23
−
| style="border:1pt solid #000000;padding:0.106cm;"| '''Themes''' can make your''' Drupal''' site look like anything you want.
+
| style="border:1pt solid #000000;padding:0.106cm;"| '''Themes''' can make your''' Drupal site''' look like anything you want.
  
 
|-
 
|-
Line 80: Line 75:
 
| style="border:1pt solid #000000;padding:0.106cm;"| We can get''' Themes''' from a few different places:
 
| style="border:1pt solid #000000;padding:0.106cm;"| We can get''' Themes''' from a few different places:
  
−
 
+
* We have free''' Themes''' at''' drupal.org '''which are called''' Contributed Themes.'''
−
* We have free''' Themes''' at''' drupal.org '''which are called''' Contributed''' '''Themes.'''
+
 
* Or we can purchase a''' Theme''' from a number of different vendors also.
 
* Or we can purchase a''' Theme''' from a number of different vendors also.
 
* Or we can create our own''' Theme''' like''' Artisteer''' from''' Artisteer.com'''
 
* Or we can create our own''' Theme''' like''' Artisteer''' from''' Artisteer.com'''
−
 
+
*:i.e. build it from scratch
−
i.e. build it from scratch
+
  
 
|-
 
|-
Line 127: Line 120:
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.106cm;"| 0:21
 
| style="border:1pt solid #000000;padding:0.106cm;"| 0:21
−
| style="border:1pt solid #000000;padding:0.106cm;"| Recall from our''' Modules''' tutorial, we have to filter by the''' Core compatibility''' of the''' Drupal''' version we're using.
+
| style="border:1pt solid #000000;padding:0.106cm;"| Recall from our''' Modules''' tutorial.
 +
 
 +
We have to filter by the''' Core compatibility''' of the''' Drupal''' version we're using.
  
 
|-
 
|-
Line 137: Line 132:
  
  
−
With new theme additions after this tutorial was recorded, you may see a higher number now.
+
With new '''theme''' additions after this tutorial was recorded, you may see a higher number now.
  
 
|-
 
|-
Line 169: Line 164:
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.106cm;"| 1:07
 
| style="border:1pt solid #000000;padding:0.106cm;"| 1:07
−
| style="border:1pt solid #000000;padding:0.106cm;"| Recall our''' DMV''' illustration from the''' Module''' tutorial, it’s the same thing here.
+
| style="border:1pt solid #000000;padding:0.106cm;"| Recall our''' DMV''' illustration from the''' Module''' tutorial?
 +
 
 +
It’s the same thing here.
  
 
|-
 
|-
Line 197: Line 194:
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.106cm;"| 1:46
 
| style="border:1pt solid #000000;padding:0.106cm;"| 1:46
−
| style="border:1pt solid #000000;padding:0.106cm;"| A''' Contributed Theme''' can have several flavours as well. There are 3 different kinds of''' Themes'''.
+
| style="border:1pt solid #000000;padding:0.106cm;"| A''' Contributed Theme''' can have several flavours as well.  
  
 +
There are 3 different kinds of''' Themes'''.
  
−
We can have a very '''simple Contributed Theme'''. that you can configure to a point.
+
|-
 +
| style="border:1pt solid #000000;padding:0.106cm;"|
 +
| style="border:1pt solid #000000;padding:0.106cm;"| We can have a very '''simple Contributed Theme'''. that you can configure to a point.
  
 
|-
 
|-
Line 261: Line 261:
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.106cm;"| 0:43
 
| style="border:1pt solid #000000;padding:0.106cm;"| 0:43
−
| style="border:1pt solid #000000;padding:0.106cm;"| Let us right-click on the''' tar.gz''' and copy that link.
+
| style="border:1pt solid #000000;padding:0.106cm;"| Let us right-click on ''' tar.gz''' and copy that link.
  
  
Line 267: Line 267:
  
  
−
Let’s go back to our site.
+
Let’s go back to our '''site'''.
  
 
|-
 
|-
Line 302: Line 302:
  
  
−
A flexible, recolorable theme with many regions and a responsive mobile first layout.
+
'''A flexible, recolorable theme with many regions and a responsive mobile first layout'''.
  
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.106cm;"| 1:28
 
| style="border:1pt solid #000000;padding:0.106cm;"| 1:28
−
| style="border:1pt solid #000000;padding:0.106cm;"| Click''' Install''' and set as default.
+
| style="border:1pt solid #000000;padding:0.106cm;"| Click''' Install and set as default'''.
  
 
|-
 
|-
Line 313: Line 313:
  
 
* '''Number one''' : Installing new''' Themes''' doesn't change the content, and
 
* '''Number one''' : Installing new''' Themes''' doesn't change the content, and
−
* '''Number two''' : We may need to reposition our''' Blocks'''.
+
* '''Number two''' : We may need to re-position our''' Blocks'''.
−
 
+
−
 
+
  
 
|-
 
|-
Line 467: Line 465:
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.106cm;"| 4:07
 
| style="border:1pt solid #000000;padding:0.106cm;"| 4:07
−
| style="border:1pt solid #000000;padding:0.106cm;"| In our content area, we've got the''' Help block'''.
+
| style="border:1pt solid #000000;padding:0.106cm;"| In our '''Content''' area, we've got the''' Help block'''.
  
 
|-
 
|-
Line 565: Line 563:
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.106cm;"| 6:08
 
| style="border:1pt solid #000000;padding:0.106cm;"| 6:08
−
| style="border:1pt solid #000000;padding:0.106cm;"| Find some '''themes''' that you like, install them and play with them. This is a great way to learn about how '''themes''' impact your site.
+
| style="border:1pt solid #000000;padding:0.106cm;"| Find some '''themes''' that you like, install them and play with them.  
 +
 
 +
 
 +
This is a great way to learn about how '''themes''' impact your '''site'''.
  
  
Line 580: Line 581:
  
 
Summary
 
Summary
−
 
  
  
Line 588: Line 588:
 
In this tutorial we have learnt about
 
In this tutorial we have learnt about
  
−
* Introduction to themes
+
* Introduction to '''themes'''
−
* Finding themes and
+
* Finding '''themes''' and
−
* Installing a basic theme  
+
* Installing a basic '''theme'''
−
 
+
−
 
+
  
 
|-
 
|-
Line 605: Line 603:
 
* 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 624: Line 620:
  
 
Spoken Tutorial Workshops
 
Spoken Tutorial Workshops
−
 
  
  

Revision as of 11:26, 22 July 2016

Title: Styling a Page using Themes

Keywords: Drupal, Video tutorial, Themes, contributed Themes, starter Themes, base Themes, sub-themes, Zircon Theme, Adaptive theme


Visual Cue
Narration
Slide 1:

Styling a Page using Themes

Welcome to the Spoken tutorial on Styling a Page using Themes.
Slide 2:

Learning Objectives


In this tutorial, we will learn about
  • Introduction to themes
  • Finding themes and
  • Installing a basic 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:05 As mentioned earlier, a Drupal website can look like anything we want.
0:12 In fact, here are some of the different looks and feels from several Drupal sites.
0:18 Notice that they are completely different.
0:20 This is based on the Theme.
0:23 Themes can make your Drupal site look like anything you want.
0:28 Here are a few things to remember about Themes.
0:31 We can get Themes from a few different places:
  • We have free Themes at drupal.org which are called Contributed Themes.
  • Or we can purchase a Theme from a number of different vendors also.
  • Or we can create our own Theme like Artisteer from Artisteer.com
    i.e. build it from scratch
0:51 Contributed Themes can be found at drupal.org/project/themes
1:26 Block Regions are all determined by the Theme.
1:31 So, where we can place Blocks on our website, is part of the theming process.
1:38 If we don't have the right region, then its a Theme issue not a Block issue.
1:45 Let's now understand Themes a little bit more.
Time Narration
0:05 We can get some fantastic free Themes at drupal.org
0:12 Go to drupal.org/projects/themes
0:16 Let's take a look at some of the Themes that are available for Drupal.
0:21 Recall from our Modules tutorial.

We have to filter by the Core compatibility of the Drupal version we're using.

0:28 There are 2205 Themes here.


When we click on Drupal 8, this comes down to a smaller number.


With new theme additions after this tutorial was recorded, you may see a higher number now.

0:39 Let’s talk about how to find and evaluate Themes.
0:43 This is very similar to Modules.
0:48 We will start here at drupal.org
0:51 Now, when we filter by Core compatibility, they get automatically sorted by Most Installed.
0:57 Adaptive Theme is number one at this point.
1:00 And Bootstrap is number two.
1:02 Let's click on Bootstrap.
1:07 Recall our DMV illustration from the Module tutorial?

It’s the same thing here.

1:13 You have to read the documentation first.
1:18 Then check out the Maintainers.
1:21 And look at versions and project informations.
1:25 At the time of recording, this particular Theme is in Drupal 8 x 3.0 alpha 1 version.
1:34 And there is a development version also.
1:37 Later on, there's going to be a Drupal 8 version of this Theme, up here in the green.
1:46 A Contributed Theme can have several flavours as well.

There are 3 different kinds of Themes.

We can have a very simple Contributed Theme. that you can configure to a point.
1:56 We can have Starter Themes like Bootstrap or Zen.


It will literally give you just a blank screen and minor framework, in order to put your own CSS in.

2:08 Or we can have a Base Theme.


That is designed to have other Sub-Themes placed on top of it something like Adaptive Theme..

2:17 But the rules are all the same here.
2:20 Look at the documentation.


Look at the Maintainers.


And look at the versions.

2:27 We will install a Contributed Theme, now.
Time Narration
0:05 Let’s go to drupal.org/projects/zircon
0:16 Scroll down.


This is a nice Theme, that's been developed specifically for Drupal 7 and 8.

0:26 It's not used on many sites.
0:29 We will be using this theme, because it is ready for Drupal 8, as of today.
0:43 Let us right-click on tar.gz and copy that link.


This is similar to installing Modules.


Let’s go back to our site.

0:51 Let us go back to our site.
0:54 This time click on Appearance and Install new theme.
1:00 Again, same process as with Modules.
1:04 Let us paste that URL and then click Install.
1:09 The Theme is downloaded to our web server, and we are able to now turn it on.
1:14 Click Install newly added themes.
1:16 Scroll down to the bottom.
1:18 And you'll see Zircon.


A flexible, recolorable theme with many regions and a responsive mobile first layout.

1:28 Click Install and set as default.
1:31 Now as we learnt in the intro video-
  • Number one : Installing new Themes doesn't change the content, and
  • Number two : We may need to re-position our Blocks.
1:42 Now let's take a quick look at the settings.
1:45 Click on the word Settings.
1:49 We have the normal TOGGLE DISPLAY in Zircon.
1:51 And the shortcut icon.
1:54 Once again, if you want to update the logo that's under Global settings.
1:58 And LOGO IMAGE SETTINGS.
2:00 Click Save.
2:04 And then go to our site.
2:10 This is Zircon - a completely flexible, robust, and global friendly Theme for Drupal.
2:20 Let's head over to Structure and Blocks.
2:25 And click on Demonstrate block regions for Zircon.
2:28 We'll see a number of Block regions here.
2:32 A Header region.


The Main menu needs to go in the Main menu Block Region because then it gets proper formatting.

2:39 There's a Slideshow region, in case you are using something like View Slideshow.
2:48 A Featured block region.
2:50 Help.


Sidebar First.


Sidebar Second.


Content.

2:53 Panel First.


Panel Second called 1, 2, 3 and 4.


And then a Footer region.

2:58 Notice that some of the regions from our default Theme are no longer available.
3:04 Let's take a quick look and see what we need to do here.
3:08 There are a lot of stuff in the Header region.


The Footer region to which we had assigned the Powered by Drupal block, no longer exists.

3:18 We will put that back into Footer.
3:22 It immediately disappears from the Header.
3:24 Let's take the Status message out of the Header and put it into messages.
3:32 Let's put the Footer menu again, down into Footer.
3:36 We'll leave Search, Site branding and User account menu where they are for now.
3:41 The Primary menu is in the wrong spot but let's just take a quick look at that.
3:46 Click Save blocks.
3:48 Go back to our site.
3:50 And we'll see that the Main menu is nowhere to be found.


That's because Primary menu doesn't exist in this Theme.

3:58 So, we will take our Main navigation and change that to Main menu.
4:05 Scrolling down let's take a quick look.
4:07 In our Content area, we've got the Help block.
4:11 Let us put that in Help.
4:13 Page title, Primary admin actions and Page Tabs  are fine.
4:18 Sidebar first, Welcome to Drupalville, Book navigation, Recent Events Added and Tools.
4:23 Let's take the Tools menu and put that inside Sidebar second.


We haven't done this before.

4:33 There are four Panel regions here in which we can place anything we want.
4:39 Now, click Save.
4:42 And let's take a look at what we did.
4:46 This is a lot better now.
4:49 Our menu is properly placed in the Main menu block region.


The CSS is picked up, making it a nice in-line menu, with some shading and some colouring.

5:04 BOOK NAVIGATION, RECENTLY ADDED EVENTS on the left.
5:08 And the TOOLS are on the right, again Sidebar first and Sidebar second.
5:12 And all the content is in the middle.
5:16 A couple of things to point out here.
5:19 We've changed our themes. Everything has changed, except our content.
5:26 We've got new fonts, new font styles, new H3 tags, new Block regions, layouts and a new Footer area.
5:35 But what's not changed is our content and the actual layout of our content.
5:40 To change those, we will need to use Panels or Display fields.


Those are add-on Modules that we can get from drupal.org

5:49 Themes are fantastic.


Now this is really simple theme.


There are also some very complex themes that we can get for Drupal.

5:58 You can come back to drupal.org/projects/themes.


Take a look at some of the Drupal 8 themes that are available.

6:08 Find some themes that you like, install them and play with them.


This is a great way to learn about how themes impact your site.


You may find just the design that you want.

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

Summary


Let us summarize.


In this tutorial we have learnt about

  • Introduction to themes
  • Finding themes and
  • Installing a basic 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, PoojaMoolya, Priyacst

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Drupal/C3/Styling-a-Page-using-Themes/English&oldid=27461"