Difference between revisions of "Drupal/C3/Installing-an-Advanced-Theme/English"
(Created page with "'''Title:''' Installing an Advanced Theme '''Keywords: Drupal, Video tutorial, Themes, contributed Themes, Zircon Theme, Adaptive theme''' {| style="border-spacing:0;" | s...") |
Nancyvarkey (Talk | contribs) |
||
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 | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
|- | |- | ||
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 | + | 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 | + | | 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''' | + | | style="border:1pt solid #000000;padding:0.106cm;"| Separate''' styles''' for''' Titles'''. |
|- | |- | ||
Line 188: | Line 182: | ||
− | Please use these with caution. | + | 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;"| | + | | 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
|
|
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
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.
|
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.
|
2:01 | Right-click on the tar.gz link and select Copy link. |
2:03
|
Back to the site.
|
2:13 | Now, click on Install newly added themes. |
2:16 | Scroll down.
|
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.
|
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.
|
3:22 | Under Extensions in the left panel, we have Responsive menus.
It recognises all of those Content types. |
3:31
|
Let me click on EVENTS.
|
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.
|
3:47 | There are more options here below.
|
4:03 | We will need some time to set this up properly. |
4:08 | Now click on 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.
|
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.
|
4:49 | There are no Sidebar regions here.
|
4:56 | Maybe it was not the best choice for our demonstration. |
5:03 | But you get the idea of how powerful it is.
|
5:15 | That's the theme framework – Adaptive theme and Pixture Reloaded.
|
With this we come to the end of this tutorial. | |
Slide 5:
Summary
|
Let us summarize.
|
Slide 6:
Acknowledgement
|
This video is
|
Slide 7:
Acknowledgement
|
The video at this link summarises the Spoken Tutorial project.
|
Slide 8:
Spoken Tutorial Workshops
|
The Spoken Tutorial Project Team conducts workshops and gives certificates.
|
Slide 9:
Acknowledgement
|
Spoken Tutorial Project is funded by
Government of India. |
This is Vanessa Varkey signing off.
|