IntroductionWelcome| 00:04 | Hello and welcome to Drupal 7: Creating
and Editing Custom Themes. I'm Chaz Chumley.
| | 00:09 | In this course we look for some of
the tools and techniques needed to be
| | 00:12 | successful in building
beautiful and exciting Drupal websites.
| | 00:17 | We will begin by walking
through Drupal's theme administration.
| | 00:21 | Taking a look at basic theming
concepts such as templates, regions, and
| | 00:26 | variables followed by how Drupal's
default themes are configured, structured,
| | 00:33 | and just how easy it is to install a
theme and modify the look and feel.
| | 00:38 | Together we will work with some of
the most common tools any designer
| | 00:41 | needs while we build a brand-new Drupal 7
theme using HTML, CSS, PHP, and Drupal templates.
| | 00:51 | Finally we will finish up with migrating
from an existing Drupal 6 theme to Drupal 7.
| | 00:58 | So let's get started with Drupal 7:
Creating and Editing Custom Themes.
| | Collapse this transcript |
| Using the exercise files| 00:00 | While we progress through each
chapter of our series Drupal 7: Creating and
| | 00:04 | Editing Custom Themes, we have
provided all the files, assets, and
| | 00:08 | database backups needed to make sure
you can start and finish at any point
| | 00:12 | while following along.
| | 00:14 | In this video we will take a look at
the Exercise folder which contains all the
| | 00:18 | assets, database snapshots,
design mockup, and completed theme.
| | 00:24 | Once you've downloaded the Exercise
Files and expanded them to your Desktop, you
| | 00:28 | should have a folder that looks like
this, and if we actually open up this
| | 00:32 | folder, you're going to see that there
are various folders for each chapter that
| | 00:36 | you can use to follow along.
| | 00:38 | If I take a look at one of the folders
you may find in there a .mysql.zip file.
| | 00:44 | This file should allow you to do a
database restore so that you can catch up
| | 00:48 | with where we are currently in that chapter.
| | 00:52 | For information on how to actually do
a database restore, you can refer to
| | 00:56 | Chapter 1, Setting Up the Environment
with Using the Backup and Migrate Module.
| | 01:01 | As we also take a look through the
folders we can see that toward the bottom we
| | 01:05 | actually have a copy of the Mockup,
and if I expand this, this is the full
| | 01:09 | static rendition of the site that we will be
using to convert to Drupal 7 Custom Themes.
| | 01:15 | Within this folder we have static
HTML as well as the assets, and even
| | 01:20 | the Photoshop comps.
| | 01:21 | This will give you a more realistic
representation of what you actually may be
| | 01:25 | working with if a designer is
handing off the files to you.
| | 01:29 | Finally we actually have the completed
theme and in this folder you'll actually
| | 01:33 | see the database snapshot and a zip
file containing the actual site's folder.
| | 01:38 | Now that we've explored the exercise
files, database snapshots, design mockup
| | 01:44 | and completed theme, one thing to know,
if you are not a premium subscriber you
| | 01:49 | will not have access to these files,
but you can still follow along using your
| | 01:53 | own assets and the readme
files provided in each chapter.
| | 01:57 | Let's move on to previewing the
completed project we will be designing in
| | 02:00 | Drupal 7: Creating and Editing Custom Themes.
| | Collapse this transcript |
| Viewing the finished project| 00:00 | Drupal 7 is an amazing open-source
content management system and can be used to
| | 00:05 | build a variety of websites including
blogs, forums, e-commerce, corporate,
| | 00:11 | government, and educational institutions.
| | 00:14 | In this video we will take a look
at our finished project and the key
| | 00:17 | sections we will be theming.
| | 00:19 | We begin with the comp that was handed
to us by the designer and we've converted
| | 00:23 | it into a static HTML site.
| | 00:26 | In this case a fictitious museum called
the San Angelico Museum of Contemporary
| | 00:31 | Art, and if we quickly take a
look at how the pages are composed.
| | 00:36 | We can see that the homepage consists
of some different featured sections like
| | 00:41 | the newest collection, upcoming
events, and how to plan your visit;
| | 00:45 | and if we scroll down a little bit we
can see some other exhibits that are being
| | 00:49 | displayed on the homepage.
| | 00:52 | If we actually take a look at the
collections page we're getting the same
| | 00:56 | information, but it is being
displayed to us in a different fashion.
| | 00:59 | For instance now we have
current and upcoming exhibitions and
| | 01:03 | previous exhibitions.
| | 01:05 | As well as going from our homepage to
an interior page our layout is changed so
| | 01:11 | that we now have this right sidebar
region and a content region which our
| | 01:15 | homepage does not have.
| | 01:18 | Finally if we take a look at the
About Us page we're getting into a more
| | 01:22 | standard looking interior page, in
that we have a title, we have an image and
| | 01:27 | then we have some
content that's being displayed.
| | 01:29 | We still have our right sidebar, but
those are all things that keep in mind
| | 01:33 | when we get ready to convert this to Drupal 7,
let's take a look at the finished product.
| | 01:40 | Here I actually have the homepage laid
out exactly like our static HTML comp is
| | 01:45 | as well as the collections and about us page.
| | 01:50 | However, one thing we need to
take a look at is exactly how we made
| | 01:54 | those regions appear?
| | 01:55 | For instance, if we go back to the
homepage the consistency between the
| | 01:59 | homepage and into your pages is only in the
header and in the social icon and footer regions.
| | 02:07 | That's where the similarity is in.
| | 02:10 | For the homepage we actually have a
featured region, our content region has now
| | 02:15 | moved down to the very bottom, and
then if we actually go to the collections
| | 02:20 | page the content region for our interior
pages is now shifted to the left with a
| | 02:26 | sidebar region introduced.
| | 02:28 | All the important things to keep in
mind when you're talking about theming, we
| | 02:33 | have taken a look at the finished
Drupal 7 theme we will be building
| | 02:36 | throughout this series.
| | 02:38 | The different key sections we will be
theming and the different theming aspects
| | 02:42 | to think about while moving from concept
to completion, let's move on by setting
| | 02:47 | up our development environment so
that we can actually begin theming.
| | Collapse this transcript |
|
|
1. Setting Up the EnvironmentInstalling Drupal 7 (Mac or Windows)| 00:00 | Drupal 7 is platform agnostic,
meaning it can run on both the Windows and
| | 00:05 | open source platforms.
| | 00:07 | With that being said, it is more common
to find Drupal running on what is known
| | 00:10 | as a LAMP stack or Linux, Apache, MySQL,
PHP, and this come in various packages,
| | 00:17 | such as for the Mac, there's a product
known as MAMP and for Windows, there's a
| | 00:22 | product known as WAMP.
| | 00:23 | We, however, are not going to focus on
either of those as Acquia, the developers
| | 00:29 | of Drupal, have created the Acquia Dev Desktop.
| | 00:32 | This takes away all the hard work of
setting up a LAMP stack from scratch, and
| | 00:37 | in this video, we will walk through
exactly how to install and configure a
| | 00:40 | Drupal 7 site using this product.
| | 00:43 | The Acquia Dev Desktop can be found
at www.acquia.com/downloads, and if we
| | 00:51 | scroll down, we can take
a look at the Dev Desktop.
| | 00:54 | Whether or not you're on a Windows
platform or a Mac platform, you have the
| | 00:59 | option of downloading this product.
| | 01:01 | I'm going to go ahead and choose
Mac and then click on Download.
| | 01:04 | I am then going to go ahead and save
this, and while it's downloading, there's
| | 01:08 | one other thing that we want to do.
| | 01:10 | We also want to browse over to the
drupal.org/download, because we want to make
| | 01:17 | sure we have the most
current Core version of Drupal.
| | 01:21 | So from here, we can see that we
can download the Drupal 7.10 Core.
| | 01:24 | I am going to click on this, scroll
down and find the 7.10 version and then
| | 01:31 | either click on the zip or
the tar file and download it.
| | 01:36 | Now if I tab over to my Finder and into
my Downloads, I can actually begin the
| | 01:40 | installation process.
| | 01:42 | Now that we have that downloaded, go
ahead and click on the acquia-drupal DMG or
| | 01:47 | EXE depending on whether or not
you're on a Mac or a Windows machine.
| | 01:52 | For our instance, we have the .dmg and
we are going to go ahead and double-click
| | 01:55 | that to begin the installation process.
| | 01:58 | Once we have the splash screen for the
Acquia Dev Desktop Stack Installer up, we
| | 02:02 | simply double-click on the
box to begin the installation.
| | 02:06 | If you're prompted with a
warning, go ahead and click Open.
| | 02:11 | From here, we want to go ahead
and click on the Next button.
| | 02:14 | Quickly take a look at the overview, this will
actually tell us what's going to be installed.
| | 02:18 | For instance, we see, Apache, MySQL,
PHP, and the phpMyAdmin tool for
| | 02:25 | managing the database.
| | 02:26 | Go ahead and click Next, go ahead and
accept the license agreement and then go
| | 02:31 | ahead and accept the default
installation locations. Click Next again.
| | 02:35 | The Apache web server port and the
MySQL database port for the Acquia Dev
| | 02:40 | Desktop are not the standards that you
may be familiar with if you've done any
| | 02:44 | type of web development before.
| | 02:46 | These will actually run on Port 8082
versus Port 8080 and the MySQL database
| | 02:52 | port runs on 33066 instead of 3306.
| | 02:55 | Go ahead and accept those
as a default and click Next.
| | 03:00 | From the Drupal settings, this is
going to ask you what do you want to call
| | 03:03 | your site name, what the username and
password are going to be, and the email
| | 03:07 | and this is for the default instance
that Drupal will automatically install
| | 03:13 | with the Acquia Dev Desktop.
| | 03:14 | I can go ahead and leave the site name
as the default and I am going to go ahead
| | 03:18 | and change the Username to be
admin, the Password can be drupal.
| | 03:22 | Go ahead and confirm the password and
then for the E-mail, I am just going to
| | 03:28 | put admin@localhost.com.
| | 03:31 | Go ahead and click Next, review the
information, and then click Next once again.
| | 03:37 | Now it's going to prompt us that it's
actually Ready to begin the Installation.
| | 03:40 | Click Next one more time and the
installation process will begin.
| | 03:46 | Once the installation has
completed, go ahead and click Finish.
| | 03:51 | At this point, the Acquia Dev Desktop
control panel will go ahead and start up
| | 03:55 | and if I actually clicked on Go to my
site, I'll be taken to the first Drupal
| | 04:00 | instance that was installed.
| | 04:02 | I can actually log in with the admin
and Drupal username, passwords and now I
| | 04:10 | have my first Drupal instance.
| | 04:12 | However, there's one thing
I want to take a look at.
| | 04:15 | The Acquia Dev Desktop actually
installs a version in Drupal that doesn't have
| | 04:19 | some folders in place that will make
theming very easy for you in the long run.
| | 04:24 | So what I want to do is actually
walk you through the process of actually
| | 04:28 | importing a different version of Drupal,
in this case, the Drupal Core version
| | 04:33 | into the Acquia Dev Desktop Control Panel.
| | 04:36 | Earlier we had downloaded the Drupal
Core, so let's go back to our Downloads
| | 04:40 | folder and take a look at that.
| | 04:42 | Here we see the drupal-7.10 core and I
realized by the time you begin to watch
| | 04:49 | this, that Core may have changed, but
you want to make sure that you do get the
| | 04:52 | latest Core for this process.
| | 04:55 | Go ahead and extract the Drupal Core
and then once I have this folder in place,
| | 05:00 | what I want to do is actually right-
click on it, copy it, go to my web root, in
| | 05:04 | this case, it's my Sites folder.
| | 05:06 | Now I am going to paste it in place,
and from here to make it easier as we
| | 05:12 | progress through our series, let's
go ahead and rename this to samoca.
| | 05:15 | That will be the name of the
theme that we work on later.
| | 05:20 | Now that I have that folder in place,
let's go back to the Acquia Dev Desktop
| | 05:24 | control panel, click on Settings>
Sites and then click on Import.
| | 05:31 | From here, we actually want to
browse to that particular samoca folder.
| | 05:35 | So locate these sites,
samoca folder and click on Choose.
| | 05:40 | From here, we want to go ahead
and create a new database for it.
| | 05:42 | So click on the Create new database
option and give the database the same name
| | 05:47 | as the folder, in this case, samoca.
| | 05:51 | For the name of the server, let's
change it from localhost to samoca as well,
| | 05:55 | and then click on Import.
| | 05:56 | This will actually pull up the Drupal
installation profile, and this maybe
| | 06:03 | something that you're more used to
seeing if you haven't used the Acquia Dev
| | 06:07 | Desktop control panel.
| | 06:09 | From here, go ahead and leave the
default Standard installation profile selected
| | 06:13 | and click on Save and continue.
| | 06:15 | From here, leave the English language
selected by default, and then click on
| | 06:20 | Save and continue one more time.
| | 06:22 | This will now begin the installation
process for that Drupal Core version into
| | 06:28 | the Acquia Dev Desktop control panel.
| | 06:32 | Once it's done, will be at the
Configure site screen and this is something that
| | 06:36 | you saw earlier when we actually
installed the Acquia Dev Desktop control panel,
| | 06:40 | however, this time it's
actually inside of the web interface.
| | 06:44 | The Site name we can leave as samoca.
| | 06:46 | For the address here, we'll
actually put in info@samoca.org.
| | 06:51 | For the Username, we can actually put
in admin, and for the Password, we can
| | 06:57 | actually put in the word, drupal.
| | 06:59 | Go ahead and confirm it and then leave the
remaining defaults and click on Save and continue.
| | 07:06 | With the Drupal installation complete,
we can go ahead and Visit our new site.
| | 07:10 | Now we have a fresh Drupal Core instance
of our samoca theme that we're going to
| | 07:15 | use for the rest of the series.
| | 07:18 | Next, let's take a look at setting up a
coding environment using Aptana Studio.
| | Collapse this transcript |
| Using a development environment| 00:00 | In this video, we will explore
integrating a coding environment into our
| | 00:03 | development setup using the free
open-source IDE Aptana Studio 3.
| | 00:09 | This can be found at aptana.com.
| | 00:11 | Aptana is simply a subset of the
Eclipse IDE, which can be found
| | 00:16 | at www.eclipse.org.
| | 00:20 | To actually download this, you
simply click on the Download Aptana Studio
| | 00:24 | 3 button, specify which version you want,
and then click on Customize Your Download.
| | 00:32 | From here, make sure you choose
Operating System, enter in this optional
| | 00:38 | information and then click
on Download Aptana Studio 3.
| | 00:42 | One thing to talk about while this is
downloading, while we've chosen Aptana
| | 00:46 | Studio 3 for our product to use as
our IDE, there are other options out
| | 00:51 | there and you should be comfortable
with the IDE that you're going to be
| | 00:54 | using for this series.
| | 00:56 | A couple of choices for you are some
paid ones, but I thought I'd point them out
| | 01:01 | because they are very
handy when it comes to theming.
| | 01:04 | One is CODA, now this is for the Mac
environment, but this is a text editor that
| | 01:09 | includes file transfer, subversion,
CSS, terminal, books and more.
| | 01:16 | Great coding environment for
one-window web development IDEs!
| | 01:21 | The other is Adobe Dreamweaver CS5.5
and I use this product all the time,
| | 01:26 | because of the fact that I can
integrate into it, both of my code view and my
| | 01:30 | design view, so that I'm constantly not
having to switch back and forth between browsers.
| | 01:36 | Once again, just a few options
if Aptana is not your cup of tea.
| | 01:40 | Let's browse over to our Downloads
folder and then I've actually already
| | 01:45 | installed this, but it's as simple as
double-clicking on the file and depending
| | 01:50 | on your operating system, it may
take a couple of minutes to install.
| | 01:54 | However, once it's installed, let's
actually take a look at what it provides us.
| | 01:59 | Go head and open up Aptana Studio 3
and while it loads, what we want to do is
| | 02:03 | from the Project Explorer tab, I want to
create a reference to our samoca Drupal instance.
| | 02:11 | I can do that by right
clicking and saying New>PHP Project.
| | 02:16 | From here, I want to give the Project
a Name, in this case, samoca and then I
| | 02:21 | want to uncheck Use default location,
because I want to be able to browse to
| | 02:25 | where that samoca instance resides.
| | 02:29 | Uncheck, Use default location and
then click on the Browse button.
| | 02:33 | From here, locate your web root, in
this case, mine is under Sites and then
| | 02:37 | select the samoca folder.
| | 02:39 | Click on Open and then I want
you to be aware of one thing;
| | 02:44 | the warnings specified here says
the selected location already contains
| | 02:48 | preexisting files, deleting this
project later may delete this content.
| | 02:53 | Don't let this worry you right now.
| | 02:54 | All this is saying is if you choose to
delete this project later, make sure you
| | 02:59 | don't accidentally delete the
files that it is referencing.
| | 03:02 | Go ahead and click on the Finish
button and now the Project Explorer, if we
| | 03:06 | expand the samoca folder, we can see
our Drupal instance, we can see the
| | 03:11 | sites folder and inside of the sites folder,
we can see the all, modules, and themes folder.
| | 03:18 | These are all folders that we'll
be using later on in this series.
| | 03:21 | Now that we explored how to download,
install and configure Aptana Studio 3 as
| | 03:27 | our preferred code editor, let's move
on to taking a look at some contributed
| | 03:31 | modules that will enhance our
development workflow in Drupal 7.
| | Collapse this transcript |
| Installing contributed modules| 00:00 | Drupal by itself is a very powerful
content management system, but we can extend
| | 00:05 | this functionality even
further by using contributed modules.
| | 00:09 | In this video, we will discuss what
contributed modules are, why we should use
| | 00:13 | them, and how they extend
the functionality of Drupal.
| | 00:16 | We will walk through enabling modules,
taking a look at the importance of where
| | 00:20 | modules reside, and how we set the
permissions to enable module functionality.
| | 00:26 | By taking a look at the Drupal 7
interface and navigating to the Modules
| | 00:31 | interface from the Toolbar menu and
scrolling down to the Toolbar module itself,
| | 00:38 | we can see some different
characteristics that make up what a module is.
| | 00:42 | First we can see if a
module is Enabled or Disabled.
| | 00:46 | We can see what the actual Name of
the module is, what current Version this
| | 00:51 | module is, and a short Description
of what exactly this module does.
| | 00:55 | Let's take, for instance, disabling a module.
| | 00:57 | Let's say, we want to turn off the
Toolbar module so the menu itself disappears.
| | 01:02 | We can simply disable a module by
unchecking in the Enabled checkbox and
| | 01:07 | clicking on Save configuration.
| | 01:10 | Drupal itself will tell us if this is
successful by displaying the configuration
| | 01:14 | options have been saved message.
| | 01:16 | By closing the Modules interface,
we can now see that the toolbar has
| | 01:20 | disappeared, but you may be asking yourself,
how do I get back to the Modules interface?
| | 01:26 | By clicking in the browser and typing
in the word, admin, this'll take us back
| | 01:31 | to the Administration screen.
| | 01:33 | From here, we can click on the
Modules link and this'll take us back to
| | 01:37 | the Modules interface.
| | 01:39 | Let's take a look now at how we
would enable the Toolbar module.
| | 01:43 | By scrolling back down to Toolbar
and checking the Enabled checkbox and
| | 01:49 | then clicking on Save configuration, we can
now see that the Toolbar menu has returned.
| | 01:54 | It's just that easy.
| | 01:56 | One thing to keep in mind though when
you were dealing with modules is that if
| | 02:00 | you go to Enable a module and you can't
see that actual module's functionality
| | 02:05 | be turned on or you can't interact with
that module, it's probably because the
| | 02:09 | Permissions on it have not been set.
| | 02:11 | By scrolling back down to the Toolbar
module and looking to the right, I see a
| | 02:16 | link for Permissions.
| | 02:18 | By clicking on Permissions and then
locating our module, we can see that the
| | 02:25 | administrator role is the only role that
actually has access to view the Toolbar menu.
| | 02:30 | If that was not checked, we would not
see the Toolbar menu and if you're working
| | 02:35 | with other modules in the future, and
once again, for some reason, do not see
| | 02:39 | that functionality come into play,
take a look at Permissions screen and make
| | 02:43 | sure that the role you are using is checked.
| | 02:46 | So now that we've Enabled a module and
Disabled a module and taken a look at
| | 02:50 | the permissions, where does a module live,
and how do I utilize that for my theming needs?
| | 02:57 | If I go ahead and tab over to Aptana
Studio 3, take a look at the Modules
| | 03:02 | folder and expand it.
| | 03:04 | I can see all of the core modules that
are installed by the Drupal 7 instance.
| | 03:10 | If I scroll down to the Toolbar folder
and expand it, I can see all the files
| | 03:16 | that make up a module.
| | 03:17 | A module by itself is a software.
| | 03:19 | It's a code that extends the Drupal
features and/or functionality of Drupal.
| | 03:25 | Core modules by themselves are included
with the downloaded Drupal and you can
| | 03:28 | turn on their functionality without
even installing additional software.
| | 03:33 | In a later video, we are going to
take a look at adding two modules, how we
| | 03:37 | download them, how we actually
install them, and where they need to reside.
| | Collapse this transcript |
| Using the Administration Menu module| 00:00 | Drupal 7 provides a toolbar module
installed and configured by default that
| | 00:04 | provides a navigation
element for logged in users.
| | 00:08 | However, as helpful as it maybe it
still truly lacks administration, navigation
| | 00:12 | experience that some users may be used to.
| | 00:15 | In this video we'll explore installing,
enabling, and configuring the Admin menu module.
| | 00:21 | We will also take a look at disabling
and uninstalling the toolbar module and
| | 00:26 | walking through the new
administration toolbar interface.
| | 00:30 | Let's start out by how we actually
disable and physically uninstall a module by
| | 00:36 | clicking on the Modules interface and
scrolling down to Toolbar, we can disable
| | 00:43 | this module by clicking on the Enable
checkbox and then clicking on the Save
| | 00:49 | configuration button.
| | 00:50 | The next thing we need to do is click on
the Uninstall tab and this maybe new to
| | 00:55 | you but by clicking on the Uninstall
tab and then clicking on the Uninstall
| | 01:01 | checkbox what this is doing is going
through the process of physically removing
| | 01:06 | the reference to this
module in the Drupal database.
| | 01:10 | So clicking Uninstall will give us a
confirmation, are you sure you truly want to do this?
| | 01:16 | In this case, we do.
| | 01:17 | So we will click on the Uninstall button again.
| | 01:20 | By closing the module interface we now
see that the toolbar has disappeared.
| | 01:25 | Next, we need to navigate to the
Drupal,org/project/modules page on
| | 01:33 | the drupal.org site.
| | 01:35 | From here we can see, wow, we have over 9,
000 modules to choose from. No problem.
| | 01:40 | Let's go ahead and search for the
module that we need by clicking on the search
| | 01:45 | interface and typing in admin_menu and
by refining our search to Modules and
| | 01:51 | then clicking on the Search button, we
can see in our search results the modules
| | 01:55 | that we are looking for.
| | 01:57 | The Administration menu provides
this functionality similar to the
| | 02:01 | toolbar, however it's going to
give us an interface that we were more
| | 02:05 | comfortable in seeing in Drupal 6.
| | 02:09 | By scrolling down to Downloads we want
to identify the Drupal 7 version that we
| | 02:15 | are going to download, and then
clicking on either the zip or the tar file and
| | 02:20 | saving this to our Downloads folder.
| | 02:23 | Next, we will browse back over to our
Drupal 7 instance and browsing back to our
| | 02:30 | admin/modules interface we can now
locate the Install new module link by
| | 02:37 | clicking on this link and browsing to
our admin_menu module, then click Open and
| | 02:45 | finally click on the Install button.
| | 02:48 | Our installation was completed successfully.
| | 02:50 | So let's go ahead and browse on over to
our modules and locate the module toward
| | 02:56 | the bottom of the page.
| | 02:58 | We want to enable this module by
clicking on the Enable checkbox and then
| | 03:03 | clicking on Save configuration.
| | 03:06 | The configuration options have been
saved and we now see our new Admin menu
| | 03:12 | toolbar at the top of the page.
| | 03:14 | One last thing we want to make sure
we do though is check the permissions.
| | 03:19 | If we scroll back down to
Administration menu, click on the Permissions link,
| | 03:25 | and then locate the Administration menu
module inside of our Permissions we want
| | 03:31 | to verify that the
administrator role has these enabled.
| | 03:35 | We can see that the Access
administration menu, the Flush caches, and the
| | 03:40 | Display Drupal links are all enabled
for the administrator role which we
| | 03:44 | are currently using.
| | 03:47 | Next, we are going to move on to
taking a look at one of the more important
| | 03:50 | contributor modules that will enhance
our development workflow in Drupal 7.
| | Collapse this transcript |
| Using the Backup and Migrate module| 00:00 | As we progress through the different
steps involved in Drupal 7 creating and
| | 00:04 | editing custom themes, you may find
yourself in need of using the database
| | 00:07 | snapshot provided in the exercise files.
| | 00:10 | In order to restore the database
file you will need to be familiar with
| | 00:14 | restoring MySQL files.
| | 00:17 | In this video we will explore
installing, enabling, and configuring the
| | 00:21 | Backup and Migrate module and walk
through the interface for restoring the
| | 00:25 | database snapshots provided.
| | 00:27 | In order to locate the Backup and
Migrate module we will first need to browse on
| | 00:32 | over to Drupal and locate the
Drupal Backup and Migrate module.
| | 00:37 | This is located at drupal.
org/projects/backup_migrate.
| | 00:43 | By scrolling down to the Downloads
section we want to make sure that we identify
| | 00:48 | the Drupal 7 version.
| | 00:49 | Go ahead and click on either the
zip or the tar file and save this to
| | 00:54 | your Downloads folder.
| | 00:57 | Next navigate over to the Modules
interface and click on Install new module.
| | 01:04 | From here we want to browse to our
Downloads folder, locate the Backup and
| | 01:08 | Migrate module and click Open.
| | 01:11 | Next click the Install button and
then enable the newly added module.
| | 01:18 | Scroll down to the bottom of your page
locate the Backup and Migrate module and
| | 01:23 | click on the Enabled checkbox.
| | 01:26 | Then click Save configuration, and make
sure that Drupal has identified that the
| | 01:32 | configuration options have been saved properly.
| | 01:35 | As with any module we want to
make sure we check the permissions.
| | 01:39 | So scroll back down to the bottom of
the page, locate the Backup and Migrate
| | 01:43 | module and click on the Permission's link.
| | 01:48 | From the Permission screen we want to
make sure that the Backup and Migrate
| | 01:52 | module has administrator rights.
| | 01:55 | Make sure that under administrator
role that the Access Backup and Migrate,
| | 02:00 | Perform a backup, Access backup
files, Delete backup files, Restore the
| | 02:05 | site, and the ability to Administer the
backup and Migrate module roles are all enabled.
| | 02:11 | From here we should be able to
browse to the Configuration>System>Backup
| | 02:18 | and Migrate module.
| | 02:19 | Now there are various features here that
allow us as a Drupal administrator or a
| | 02:25 | Drupal themer to quickly backup our
database, restore our database, and actually
| | 02:31 | schedule backups to make sure that we
don't corrupt any of the database data
| | 02:35 | while we are actually doing any type of theming.
| | 02:37 | Let's go ahead and take a
look at the Advanced Backup tab.
| | 02:41 | From here we can actually
choose some different settings.
| | 02:43 | For instance, we can
give our backup file a name.
| | 02:47 | Here it's actually going to take the
default site name, which is fine for us.
| | 02:52 | We can also append a timestamp.
| | 02:55 | We can also specify whether we
want compression to be enabled or not.
| | 03:00 | In this case I am going to choose Zip,
and then I'm going to scroll down and
| | 03:05 | click on the Backup now button.
| | 03:08 | We can see that this is going to save
this in the format of the name of the
| | 03:11 | site, the timestamp, and
then the .zip compression.
| | 03:15 | In most cases I don't like to actually
add a timestamp when I am doing theming.
| | 03:19 | So I'm actually going to uncheck the
Append a timestamp, scroll back down and
| | 03:24 | say Save these settings by clicking on
the Save these settings checkbox, which
| | 03:28 | is going to replace the
default settings profile.
| | 03:32 | From here I will go ahead and click on
Backup now and save this to my Downloads folder.
| | 03:41 | We now have actual copy
of this database backed-up.
| | 03:45 | So if we were to make any type of
changes, we could then turn around and
| | 03:48 | restore this module later.
| | 03:50 | Let's say for instance that we've made
these changes and we want to make sure we
| | 03:55 | restore back to a previous version.
| | 03:57 | This is something that you will be
doing as we progress through this series in
| | 04:02 | order to get caught up to where
we are in the theming process.
| | 04:05 | By clicking on the Restore tab and
browsing to the Backup, in this case we want
| | 04:12 | to locate the samoca.mysql.zip file,
click on Open, then click on Restore now.
| | 04:21 | This may take a while
depending on the size of the database.
| | 04:24 | However, once it is completed Drupal 7
will notify you by the following message.
| | 04:31 | Default Database restored from
the upload file samoca.mysql.
| | 04:36 | Now we have backed-up a database,
restored a database, and we have familiarized
| | 04:41 | yourself with the Backup and Migrate module.
| | Collapse this transcript |
|
|
2. Using Theming ToolsUsing the Devel and Theme Developer modules| 00:00 | When we begin creating a custom theme,
we often do not have all the content
| | 00:04 | provided to us by the client or we need
to know exactly how Drupal is outputting
| | 00:09 | the content, and what template it is using.
| | 00:12 | The Theme Developer module is a
contributed module that provides us
| | 00:15 | functionality along with some other
helpful functions any Drupal themer needs.
| | 00:20 | In this video we'll explore installing,
enabling, and configuring the Theme
| | 00:24 | Developer module and walk through the
interface for generating dummy data and
| | 00:28 | exposing what templates Drupal is using.
| | 00:32 | We can begin this by browsing over
to the drupal.org/project/devel_themer
| | 00:39 | webpage and then locating the Drupal 7
version and clicking on either the TAR or
| | 00:45 | ZIP and saving it to our Downloads folder.
| | 00:48 | Since the devel_themer has a dependency
known as devel, we also need to grab and
| | 00:53 | install this module along with it.
| | 00:56 | You will see the link for the Devel
project right along with the Theme Developer.
| | 01:00 | And if I click on this link, we
are now at the Devel modules page.
| | 01:04 | Again, I'll scroll down to Downloads,
locate the Drupal 7 version and click on
| | 01:09 | either the TAR or ZIP file
and save that to your downloads.
| | 01:15 | Once the files have downloaded, we
are going to go ahead and browse over to
| | 01:19 | them, and I'm going to copy the Devel
and the devel_themer zip files and paste
| | 01:25 | them into my Sites>samoca>
sites>all>modules folder.
| | 01:33 | Once they're there, I'm going to
extract them and then browse back over to our
| | 01:39 | Drupal 7 instance Modules interface,
scroll down to the bottom of the page, and
| | 01:46 | locate the Devel module and
the Theme Developer module.
| | 01:50 | What I want to enable is Devel,
Devel generate, and Theme developer.
| | 01:55 | So I will click on the checkbox next
to each module to enable them and then
| | 02:00 | click Save configuration.
| | 02:02 | Once Drupal has saved the configuration,
we will get a message that says the
| | 02:05 | configuration options have been saved.
| | 02:07 | I am going to close the module
interface and then we are going to go ahead and
| | 02:12 | browse over to Structure>Blocks and
I want to locate a block that's been
| | 02:18 | generated by the Devel module.
| | 02:20 | So if I scroll down to Disabled, I am
going to see a block called Development.
| | 02:25 | If I go ahead and assign this to the
Sidebar first region by choosing Sidebar
| | 02:30 | first from the Region drop down, and
then clicking on Save Blocks, followed by
| | 02:36 | closing the Blocks interface, I will
now see the Development module menu items
| | 02:43 | being displayed in the left sidebar.
| | 02:45 | Let's go ahead and take a look at one of
the Devel settings that's going to come
| | 02:50 | in handy for us as a themer when
we have no content to work with.
| | 02:54 | If I click on Devel settings,
we are presented with the Devel
| | 02:58 | settings interface.
| | 03:00 | Since Drupal itself is a content
management system, everything is database driven.
| | 03:05 | Let's actually take a look to see what
queries a particular page is calling, and
| | 03:11 | exactly how many queries is
involved in outputting the data to us.
| | 03:15 | We can do that by clicking on the
Display query log checkbox in the Devel
| | 03:20 | settings interface, then scrolling
down to the bottom, and clicking Save
| | 03:25 | configuration, closing the Devel
settings interface, and then scrolling down
| | 03:30 | to the bottom of our Drupal 7
instance, we will now see some output being
| | 03:35 | display of exactly how many queries,
how long it took, and exactly what's
| | 03:42 | being queried from the database.
| | 03:44 | You maybe asking yourself, well, how
is this handy to me as a Drupal themer?
| | 03:49 | The fact of knowing exactly where data
is coming from is part of the battle when
| | 03:54 | it comes to theming any type of output.
| | 03:57 | If we go ahead and scroll back up to
the top and locate the Devel settings and
| | 04:01 | turn off the Display query log, click
on Save configuration, and then closing
| | 04:08 | the interface, we will notice that,
that query log is no longer displayed.
| | 04:12 | Now, we are back to the subject of content.
| | 04:16 | I have a Drupal 7
instance that doesn't have any.
| | 04:19 | Well, if I have nothing to
output, I have nothing to theme.
| | 04:22 | So let's take a look at actually
generating some content for our Drupal 7 instance.
| | 04:29 | If we scroll up to the top
and look at our Admin menu under
| | 04:32 | Configuration>Developments, one of the
new menu items that Devel has provided to
| | 04:39 | us is Generate content.
| | 04:42 | By clicking on this menu item, I am
presented with the Generate content interface.
| | 04:47 | Under Content Types, I see Article and
Basic page which are the only types of
| | 04:53 | content currently provided to me
with the Drupal 7 default instance.
| | 04:57 | I'm going to actually generate some
article and basic pages for us, so that you
| | 05:02 | as a Drupal themer have something to work with.
| | 05:06 | Under how many nodes would you like to
generate, we can go ahead and leave this
| | 05:09 | as a default of 50, but if you'd like
to change this option, you can simply do
| | 05:13 | that by changing the number in the textbox.
| | 05:16 | Once again, we will leave this as a
default, we will scroll down, and we can
| | 05:20 | also add comments to our node.
| | 05:22 | So we are going to actually
change the number from 0 to 5.
| | 05:25 | We are then going to scroll down
to the bottom and click on Generate.
| | 05:31 | If this is successful, Drupal will tell
us that it's finished creating 50 nodes.
| | 05:35 | And when I close this interface, we
are going to see that now our homepage is
| | 05:39 | actually displaying content.
| | 05:42 | So this is another one of the great
tools that Devel provides us when we as a
| | 05:46 | Drupal themer have no content of theme.
| | 05:49 | Now that we actually have some
content displaying, how do I know what
| | 05:53 | templates are being used?
| | 05:55 | How do I know what variables Drupal
is outputting to display the title, to
| | 06:00 | display this image, and to
display the body of the text?
| | 06:04 | I can locate this information by
clicking on the Themer Info checkbox that is in
| | 06:10 | the bottom-left of your browser.
| | 06:11 | This is similar to Firebug.
| | 06:14 | By clicking on this and then
navigating around the page, I start to outline
| | 06:19 | different sections of Drupal and by
clicking on a particular section, I get all
| | 06:24 | types of information that is
handy to me as a Drupal themer.
| | 06:28 | First of all, I can see exactly
what template is being called;
| | 06:31 | in this case, node.tpl.php.
| | 06:34 | I can also see what type of advanced
theming functions are being preprocessed as
| | 06:39 | well as processed, and last but not least,
I can take a look to see what type of
| | 06:45 | array variables are being
presented to me and being output by Drupal.
| | 06:49 | In order to turn off the Themer
Information, it's as simple as clicking on the
| | 06:55 | box to close the display window, and
you notice by doing so, the Themer Info
| | 07:00 | box is now unchecked.
| | 07:02 | We have taken a look at how to
download, install, and configure the Theme
| | 07:06 | Developer module, worked with
generating dummy content needed for styling our
| | 07:10 | theme as well as exposed what
template Drupal uses the output content;
| | 07:16 | all great tools to us as a Drupal
themer when it comes to designing any type of
| | 07:20 | output that we need to display.
| | Collapse this transcript |
| Using Firefox, Firebug, and Web Developer extensions| 00:00 | With web standards and functionality
constantly changing, the implementation of
| | 00:05 | HTML5 and CSS3 along with mobile
technologies and responsive web design, we need
| | 00:12 | both the browser, and tools to go along with it.
| | 00:16 | In this video, we will explore using
the standards-based Firefox browser as
| | 00:20 | well as how to install and use two theming add-
ons called Firebug and the Web Developer Toolbar.
| | 00:27 | We will use these for viewing our
custom Drupal theme later on as well as being
| | 00:32 | able to troubleshoot any CSS
issues we may need to address.
| | 00:36 | I already have Firefox installed, but if
you need to install it or if you're not
| | 00:41 | quite familiar with it, it's one of the
best standards-based compliant browsers
| | 00:46 | out on the market today.
| | 00:48 | You can download it at www.mozilla.org.
| | 00:54 | Once you have it installed, you can
extend the functionality of Firefox with the
| | 00:58 | use of Add-ons, and the first add-on
that I want to take a look at installing is
| | 01:04 | the Web Developer Toolbar.
| | 01:07 | The Web Developer Toolbar is an
extension that adds various web developer
| | 01:11 | tools to the browser.
| | 01:12 | Let's go ahead and click on the Add to
Firefox, and then click on the Install
| | 01:18 | button to install it.
| | 01:21 | In order for this to finish,
we need to restart Firefox.
| | 01:24 | So go ahead and click on the Restart Now.
| | 01:26 | Don't worry about the tabs
that you had opened previously.
| | 01:29 | Those will actually pop back up
like we see once Firefox restarts.
| | 01:34 | Now, right off the bat, we
should see something new.
| | 01:36 | We have this toolbar which has a lot
of different features and functionality
| | 01:41 | that make our job as a web designer
or web developer that much easier.
| | 01:46 | The first thing I want to take a look at is CSS.
| | 01:51 | If I actually expand the CSS section,
I can actually physically disable all
| | 01:56 | styles on any page I am looking at by
clicking on Disable Styles>All Styles.
| | 02:01 | Now I am actually seeing what this
website looks like with the CSS turned off.
| | 02:06 | If I refresh the page, the CSS will come back.
| | 02:10 | There are other tools such as ability
to look at images and I can disable the
| | 02:15 | images as well as view all the image
information that a site is made up of.
| | 02:21 | By clicking on the View Image
Information, this will open up a new tab, and I
| | 02:24 | can now see all the images whether
they are being referenced from the image
| | 02:28 | source or being used by the CSS background.
| | 02:33 | Go ahead and close that tab, and take a
look at another tool, and that is View Source.
| | 02:39 | I can quickly click on View Source
and see the webpage as HTML output with
| | 02:45 | the click of a button.
| | 02:46 | Go ahead and close the View Source,
and I'll let you go ahead and experiment
| | 02:51 | with the other tools that make
up the Web Developer Toolbar.
| | 02:54 | What I want to do now is actually take a look
at one more tool and that is called Firebug.
| | 03:01 | Firebug integrates with Firefox to put
a wealth of development tools at your
| | 03:05 | fingertips while you browse.
| | 03:07 | You can edit, debug, and monitor CSS,
HTML, and JavaScript live in any webpage.
| | 03:14 | By clicking on the Add to Firefox, we
can actually install this by clicking on
| | 03:19 | the Install button, restart Firefox,
and now when Firefox restarts, we see
| | 03:26 | another icon added to our toolbar.
| | 03:29 | If we look up to the top-right, we
see what looks like an actual bug.
| | 03:33 | By clicking on it, it will
actually open up a console window.
| | 03:38 | From here, I can take a look at the
HTML for any page that I am currently
| | 03:42 | browsing, I can click on this icon
to inspect any element on the page.
| | 03:47 | By simply clicking on it, and then
moving my cursor around, it will highlight
| | 03:52 | the HTML for that particular item.
| | 03:55 | The other thing that I'm seeing on the
page to the right of the console window
| | 03:59 | is the ability to see any styling
being applied to this particular design.
| | 04:03 | For instance, if I click on the nav
with the ID of breadcrumbs, I can actually
| | 04:08 | see that this has a margin-bottom of 15 pixels.
| | 04:12 | I can see the text color
as well as the font-family.
| | 04:15 | The breadcrumbs are right here.
| | 04:17 | So let's just take a look at
exactly what we could do with this tool.
| | 04:20 | For instance, the color is a grayish color.
| | 04:24 | But, if I highlight this, and change
this to actual text name for a color, in
| | 04:28 | this case red, we see that it
automatically changes on the screen for us.
| | 04:33 | We will be utilizing this tool when it
comes to debugging some of the CSS and
| | 04:39 | some of the items in Drupal that we
need to override to get our design to come
| | 04:43 | more in line with our static
composition that we will be looking at later.
| | 04:47 | Let's move on to taking a look at
theme administration next in Drupal 7:
| | 04:52 | Creating and Editing Custom Themes.
| | Collapse this transcript |
| Using the Block Class module| 00:00 | There are numerous tools for theming
Drupal without the need for actually
| | 00:03 | modifying templates.
| | 00:05 | With blocks and regions playing such a
dominant part in presenting data, you
| | 00:09 | often find yourself for the need to
add your own CSS classes to blocks.
| | 00:14 | This is where the Block Class
module assists the Drupal Developer.
| | 00:17 | If we navigate on over to the drupal.org
site and locate the Block Class module,
| | 00:23 | we see that the Block Class allows users
to add classes to any block through the
| | 00:27 | Block Configuration Interface, by
adding a very short snippet of PHP to a theme
| | 00:32 | the block that tpl.php file allows
for classes to be added to the element
| | 00:37 | directly through the structured block interface.
| | 00:40 | Let's go ahead and scroll on down to
the bottom of the page and locate the
| | 00:43 | Drupal 7 instance of this module, and
either click on the zip or tar file to
| | 00:48 | download it to our Downloads folder.
| | 00:50 | We browse on over to our Finder, and
locate the Block Class module, we're going
| | 00:56 | to copy this to our Sites;
| | 01:00 | samoca>sites>all>modules folder.
| | 01:06 | Once it's there, we want to go ahead
and extract it, and then we can go ahead
| | 01:10 | and navigate back over to our Drupal 7
instance, Modules interface, scroll down
| | 01:17 | to the bottom of the page, locate the
Block Class module, click on the Enabled
| | 01:22 | checkbox and click Save configuration.
| | 01:25 | Once that has been successfully
saved, we're going to close the Modules
| | 01:29 | interface, and before I actually go and
take a look at this, I want to go ahead
| | 01:34 | and open this page in Firebug.
| | 01:37 | So I can either click on the Firebug icon,
or I can locate a particular element,
| | 01:42 | right-click in my Browser,
and say Inspect Element.
| | 01:45 | So for this particular block, we have
the navigation, and in the Navigation
| | 01:51 | block, we see that there are current system
defaults for the classes that are being added;
| | 01:57 | block, block-system, contextual-links, so on.
| | 02:01 | The Block Class module is going
to allow us to add a class to this
| | 02:05 | particular div element without
actually having to modify the template that
| | 02:11 | is outputting this.
| | 02:12 | Let's see how that is done.
| | 02:13 | If we locate the Structure>Blocks
interface, scroll down to the Navigation block
| | 02:23 | which is located in the Sidebar first
region, and click on configure, the Block
| | 02:29 | Class settings module has
added the section for us.
| | 02:33 | We can simply then type-in a class name
of nav, scroll to the bottom, click Save
| | 02:40 | block, close the block interface, and
now when we inspect this element, we now
| | 02:47 | see that nav is a class that has been added.
| | 02:50 | So now that we've taken a look at one
of the many tools to help assist Drupal
| | 02:54 | developers in theming blocks, we'll want
to be able to expose the HTML output by
| | 02:59 | Drupal, by modifying the CSS generated
and quickly manipulate the display from
| | 03:04 | when in the Browser before
actually making the changes permanent.
| | 03:08 | We've been utilizing Firebug to
introspect some of those elements, let's take a
| | 03:12 | look at actually how we use Firefox
and the many add-ons that it provides.
| | Collapse this transcript |
|
|
3. Theme AdministrationExploring the Appearance interface| 00:00 | One of the many powerful features
of Drupal 7 is its ability to have
| | 00:03 | many different layouts.
| | 00:05 | Whether you're viewing a website
from the end user's perspective or are
| | 00:09 | responsible for site administration,
being able to control the look and feel
| | 00:13 | provides you as a
developer with great flexibility.
| | 00:16 | But, exactly where do I
make such changes in Drupal 7?
| | 00:19 | In this video, we'll explore the new
Appearance interface which allows us to set
| | 00:24 | and configure the
default theme for your website.
| | 00:27 | Let's do that now by browsing to the
Appearance interface through the Toolbar Menu.
| | 00:33 | The Appearance interface allows us to
enable themes, disable themes, set themes
| | 00:39 | as a default, as well as
set the administration theme.
| | 00:43 | As we quickly browse through the
interface, we can see which themes are enabled,
| | 00:47 | which ones are disabled, and which ones
are set for that administration theme.
| | 00:52 | If I scroll back to the top, I can see
some certain characteristics of a theme.
| | 00:57 | For instance, the name of the theme
that's currently enabled is Bartik 7.10.
| | 01:00 | I also know that it's the default
theme because Drupal tells me so.
| | 01:06 | I also see a description of the theme,
a flexible re-colorable theme with
| | 01:10 | many regions, as well as I see the Settings
link which we will look at a little bit later.
| | 01:16 | I also see that I have a second
theme enabled, this is the Seven theme.
| | 01:19 | This is new to Drupal 7 and
this is the administration theme.
| | 01:23 | If I want to enable a different theme,
I simply scroll down to the Disabled
| | 01:28 | Themes area and click on the Enable link.
| | 01:32 | By doing so, it will move that
particular theme up into the Enabled Themes' area.
| | 01:36 | However, it's not set as my
default yet, so I won't actually see it.
| | 01:41 | If I want to swap out the Bartik theme for the
Garland theme, I simply click on Set default.
| | 01:48 | By doing so, I should now see that the
Garland theme is my default theme, and by
| | 01:52 | closing the interface, we'll
notice that the theme changes.
| | 01:56 | To simply change it back, I once again
click on the Appearance menu item, and
| | 02:02 | through the Appearance interface,
set the default back to Bartik.
| | 02:06 | I can then disable the Garland
theme by clicking on the Disable link.
| | 02:11 | This will then move that theme
back down to Disabled Themes.
| | 02:15 | One other thing of importance
is the Administration theme.
| | 02:19 | It is vital that when you are doing any
type of theming, that you separate the
| | 02:24 | front-end appearance
from the backend appearance.
| | 02:28 | So the Administration theme by
default is set as the Seven theme, and we're
| | 02:32 | going to choose to leave this as
the default theme for administration.
| | 02:36 | The problem with having both your front-
end theme and your backend theme being
| | 02:40 | the same exact theme is that if you
make any mistake in Drupal that creates a
| | 02:46 | PHP error, you're going to be seeing
nothing but a white blank page and you're
| | 02:50 | going to have all types of
issues trying to get back into Drupal.
| | 02:55 | So by separating these themes, I still
have a way to get back into the Admin
| | 02:59 | interface without having to worry
about the theme that's currently set.
| | 03:03 | We've taken a look at the Appearance
interface, how to determine which themes
| | 03:08 | are installed and enabled and the
importance of using a separate Administration
| | 03:12 | theme when working with Drupal.
| | 03:14 | Let's move on to taking a look at
how to configure both global and
| | 03:17 | theme-specific settings next.
| | Collapse this transcript |
| Choosing global and theme-specific settings| 00:00 | Drupal's Appearance interface allows
you as an administrator to configure
| | 00:04 | various features specific to an
individual theme, as well as global
| | 00:08 | features used by all themes.
| | 00:11 | Enabling or disabling the display of a
certain page element such as the site
| | 00:15 | name and logo or enabling which
navigation menus are available, and many other
| | 00:20 | options will be explored.
| | 00:22 | Let's take a look at the Appearance interface.
| | 00:26 | We were there previously to enable and
disable themes, but there is also another
| | 00:30 | section here called Settings.
| | 00:32 | By clicking on Settings either from the
theme or from the top tab will jump us
| | 00:38 | into the Settings interface.
| | 00:41 | We have Global settings and we
have theme specific settings.
| | 00:45 | Global settings allow us to toggle the
display which in turn enables or disables
| | 00:51 | the display of certain page elements
such as the logo and site name, as well as
| | 00:56 | on a per theme basis.
| | 00:59 | So click on Bartik, and I see right
at the top some other additional theme
| | 01:04 | features that are specific to this theme.
| | 01:07 | But, if I scroll down to the bottom, I
see the Toggle Display that I saw back on
| | 01:12 | the Global settings page.
| | 01:14 | Let's disable the logo.
| | 01:15 | Simply uncheck the logo checkbox
and click on Save configuration.
| | 01:22 | Close the Appearance interface and we
will notice that the Drupal drop which was
| | 01:27 | the site's logo for the
Bartik theme has disappeared.
| | 01:32 | To turn it back on, simply navigate
back to the Appearance interface, the
| | 01:36 | settings for Bartik, scroll down to
the logo, check the checkbox for logo,
| | 01:43 | and click Save configuration, close
the Appearance interface, and like magic,
| | 01:51 | the site logo is back.
| | 01:52 | There are some other things that you
may not know where they've been moved to.
| | 01:56 | For instance, articles which were
known as stories in Drupal 6 have these
| | 02:01 | submitted by author's name as well as the date.
| | 02:06 | In Drupal 6, this was done under the
Appearance interface, but in Drupal 7, this
| | 02:11 | is actually part of the content type.
| | 02:13 | So if we navigate to Structure>Content
Types>Article and scroll down to Display
| | 02:22 | settings, we see a checkbox for
Display author and date information.
| | 02:27 | By unchecking this and clicking Save
content type, and closing the content type
| | 02:33 | interface, we see now that the
post information no longer displays.
| | 02:39 | As you can see Drupal out-of-the-
box provides a web developer or site
| | 02:43 | administrator the flexibility to
configure both theme specific and global
| | 02:47 | features as well as adjusting the post-
settings which changed from Drupal 6 to Drupal 7.
| | Collapse this transcript |
| Installing prebuilt themes| 00:00 | While Drupal's core themes maybe just
right for your theming needs, you may find
| | 00:04 | yourself wanting something a
little more to choose from.
| | 00:07 | Whether you are building an
ecommerce site, a blog, or much more, one of
| | 00:12 | the great things about Drupal is
the ability to install beautifully
| | 00:15 | constructed pre-built themes.
| | 00:18 | In this video, we'll explore where to
find themes, how to download and install
| | 00:22 | them into your Drupal's site, and why
you may choose this option over creating
| | 00:27 | a theme from scratch?
| | 00:28 | If we browse over to the drupal.org
site /project/themes, we can see that there
| | 00:35 | is over 900 themes to choose from.
| | 00:38 | One of the themes that we're going
to take a look at installing for the
| | 00:40 | front-end is known as A cloudy day.
| | 00:44 | The same way that you're familiar with
downloading modules is the same concept
| | 00:47 | we will use for downloading a theme.
| | 00:49 | We will scroll down to Downloads,
locate the Drupal 7 version, and click on
| | 00:55 | either the zip or the tar file and
save that to our Downloads folder.
| | 00:59 | Then, we'll actually browse
over to our Finder, Downloads and
| | 01:04 | locate a-cloudy-day theme.
| | 01:06 | We're going to just extract it right
here in place, then we're going to copy it
| | 01:12 | to our Sites>samoca>sites>all>
themes folder, and paste it in place.
| | 01:21 | Once we have a theme inside of our
Themes folder, we can navigate back over to
| | 01:27 | our Drupal 7 instance, click on the
Appearance tab, and inside the Appearance
| | 01:32 | interface under Disabled Themes, we
will see the theme that we downloaded.
| | 01:37 | We can quickly then select Enable and
Set default, close the interface and now
| | 01:44 | our front-end design is completely
changed into a new look and feel.
| | 01:48 | The same can be done for a
backend or Administration theme.
| | 01:53 | If we browse over to our Exercise Files,
inside of your Exercise Files, you'll
| | 01:59 | find the rubik and tao themes.
| | 02:03 | I am going to copy both of those, back
over to my Sites>samoca>sites>all>themes
| | 02:12 | folder and paste those in place.
| | 02:15 | Once they're there, I need to extract them.
| | 02:20 | Then, you can go ahead and simply
delete the tar or zip files that are there.
| | 02:26 | Once again, we'll browse back over
to our Drupal 7 instance, go to our
| | 02:31 | Appearance tab and under
Disabled Themes, we will see Rubik.
| | 02:37 | Let's go ahead and enable this.
| | 02:39 | We're not going to enable it, and set it
as a default, because remember, we want
| | 02:42 | to utilize this as the administration theme.
| | 02:45 | If we clicked on Enable and Set
default, it would change our front-end
| | 02:49 | appearance to look like this.
| | 02:51 | So simply click Enable, then scroll
back down to Administration theme options
| | 02:58 | and choose Rubik as your administration theme.
| | 03:03 | As soon as I click Save configuration,
you're going to see that the appearance
| | 03:06 | for the back end is now changed.
| | 03:08 | One thing to keep in mind is themes
allow you to change the look and feel
| | 03:12 | of your Drupal site.
| | 03:14 | You can use these themes contributed
by others or create your own to share
| | 03:18 | with the community.
| | 03:19 | However, contributed themes are not
part of any official release and may not
| | 03:23 | have optimized code or
functionality for your purposes.
| | Collapse this transcript |
|
|
4. Theming ConceptsAnatomy of a theme| 00:00 | Before we can truly understand how
to modify or create a custom theme for
| | 00:04 | Drupal, we need to take a
look at what makes up a theme.
| | 00:07 | And this is broken down into several
key components, including Theme Anatomy,
| | 00:11 | Structure and Terminology.
| | 00:14 | These are outlines by Designing the
layout, Converting the layout, and then
| | 00:19 | Modifying Drupal's output.
| | 00:22 | In designing the layout, we need
to take a look at two key points.
| | 00:26 | The first is creating a design.
| | 00:28 | This would be your web designer
or graphic artist's responsibility.
| | 00:32 | For visually creating a design for the
homepage or any of the interior pages,
| | 00:36 | and this is generally
created in a Photoshop composition.
| | 00:40 | The second would be purchasing a design.
| | 00:42 | Numerous sites such as ThemeForest,
provide very well designed HTML themes that
| | 00:47 | come in .PSD format.
| | 00:49 | They also come in HTML format and can
be used to create your layout or modify
| | 00:53 | your layout to match your
needs at a very affordable rate.
| | 00:57 | The next is, Converting the layout,
and this begins with the HTML.
| | 01:02 | Depending on whether you are creating a
design or purchase one, you may need to
| | 01:06 | slice up the Photoshop Comp into assets,
and create the home and interior HTML
| | 01:10 | pages for your site.
| | 01:12 | Next CSS, CSS is for creating the
visual layer of your website, which will
| | 01:17 | require you create the CSS and a layout,
typography, browser resets, and any
| | 01:23 | other visual aesthetics that
may help form your HTML website.
| | 01:27 | Next are your images.
| | 01:29 | These are your assets that will be
sliced from the Photoshop comp and referenced
| | 01:33 | by an image tag or as a CSS background.
| | 01:36 | Finally is your
interactivity or your JavaScript.
| | 01:39 | jQuery being one of the most common
JavaScript libraries available, for use
| | 01:44 | in modern web design that provide
you with some interactivity, such as
| | 01:48 | libraries like modernizer.
| | 01:50 | That assists with creating HTML5
websites and support of CSS3 in browsers that
| | 01:55 | may not completely support it.
| | 01:57 | Finally, modifying the Drupal HTML output.
| | 02:01 | This begins with the INFO file or .info file.
| | 02:05 | This is the metadata that describes
the Drupal what your theme is named, what
| | 02:09 | your theme includes, like CSS, JavaScript.
| | 02:13 | What regions are available to
display the content on your page and any
| | 02:17 | additional features your theme may provide?
| | 02:19 | Once you have a .info file in place, it's
time to start taking a look at template files.
| | 02:25 | Drupal provides many different theming
engines but the most commonly used is
| | 02:29 | the Templating engine.
| | 02:30 | This provides designer or developer
with various ways to output content.
| | 02:35 | Speaking of output in content, replacing
page variables is the last piece of the
| | 02:39 | pie when it comes to Drupal theming.
| | 02:41 | Most everything in Drupal is wrapped up
into a variable and you can control how
| | 02:44 | variables are displayed to the user
by replacing your static HTML headings,
| | 02:49 | subheadings, menus and regions with
these variables which will allow you to
| | 02:53 | shape Drupal into outputting the
data exactly how you would like.
| | Collapse this transcript |
| Structure of a theme| 00:00 | Previously we examined the anatomy of
a theme from creation to conception.
| | 00:04 | However, knowing exactly what files
make up a theme, where those files live and
| | 00:09 | how they work within the confines
of Drupal are just as important.
| | 00:13 | When it comes to theming, creating that
custom theme folder, starts with taking
| | 00:17 | a look at how Drupal 7
core handles their themes.
| | 00:21 | If we browse over to Aptana Studio 3
and look into the themes folder, we see
| | 00:27 | bartik, garland, seven, all the themes
we've been seeing in the Appearance tab.
| | 00:31 | However, these are the core themes to
Drupal, and by all means you do not want
| | 00:37 | to put your custom theme into this folder,
for you may have a chance of it being
| | 00:41 | overwritten, the next time
you run a Drupal 7 update.
| | 00:45 | Instead, we want to take a look at
the following site folder structure.
| | 00:51 | Within sites>all>themes, it's best
practiced that we actually create a folder
| | 00:57 | with the same theme name, in this case, samoca.
| | 01:01 | With inside the samoca folder, things
such as our assets which include CSS,
| | 01:08 | images, JavaScript, our .info meta
file, our screen shot so that we have a
| | 01:13 | graphical representation of our theme,
all belong inside of that samoca folder.
| | 01:18 | When it comes to actually templating,
templates such as our html, our page tpl,
| | 01:25 | and other templates such as a region,
node, block, and views are all best suited
| | 01:31 | to be inside of templates folder,
for organizational structure.
| | 01:35 | So now we have taken a look
at the structure of a theme.
| | 01:38 | The reason for not putting it inside
the Drupal Core themes folder and best
| | 01:42 | practice it for following the
structure of a theme, it's time to move on to
| | 01:46 | taking a look at what templates are in a high-
level look at how they function in Drupal 7.
| | Collapse this transcript |
| Understanding templates and variables| 00:00 | Drupal outputs content and regions
of your design through the use of
| | 00:03 | templates and variables.
| | 00:05 | We are going to explore how templates
work in Drupal 7 and what's changed since
| | 00:09 | Drupal 6, including template suggestions,
how regions render, and how Drupal 7
| | 00:15 | outputs content and variables.
| | 00:18 | This all begins with the new
template known as html.tpl.
| | 00:22 | This template is responsible for
displaying a basic header, and wrapping
| | 00:26 | the body of the page.
| | 00:28 | Items such as styles and script
variables are referenced from the .info file of
| | 00:33 | your theme and display the stylesheets
or JavaScript that you have referenced.
| | 00:39 | The New $classes_array is the HTML class
generated through a variable, no longer
| | 00:44 | required to construct is a $body_class
that you maybe familiar with in Drupal 6.
| | 00:50 | The new page_top and $page_bottom
variables replaced the closure variable,
| | 00:55 | while the $page variable itself
prints the content generated by the
| | 00:59 | page.tpl.php template.
| | 01:02 | Speaking of page.tpl, this
template now contains the logic to render
| | 01:07 | regions within a page.
| | 01:08 | This template can be overridden
by copying it into your themes
| | 01:11 | template directory.
| | 01:13 | Several page variables have been moved
to the HTML template including styles,
| | 01:18 | scripts, and the new $classes variable.
| | 01:20 | Variables now rendered as blocks
include $mission, $search_box, $feed_icons,
| | 01:26 | and $footer_message.
| | 01:28 | Menu variables have also been renamed
from $primary_links and $secondary_links
| | 01:32 | to $main_menu and $secondary_menu.
| | 01:35 | The left and right regions have
been renamed to $sidebar_first and
| | 01:39 | $sidebar_second and the $page array
now contains data rendered by regions.
| | 01:45 | The templating suggestions
are made based on these factors.
| | 01:48 | Listed from the most specific
template to the least, Drupal will use these
| | 01:52 | in order;
| | 01:53 | node, then the node type
followed by the node's ID.
| | 01:58 | The next template to take a
look at is the region.tpl.
| | 02:01 | This is another new template to Drupal
7 and was added to simplify the mark up.
| | 02:07 | The templates act as wrappers for
nodes, blocks, and views and the template
| | 02:11 | suggestions are similar and that it
will reference these in order such as the
| | 02:16 | region itself followed by the region
that you've defined in your .info file.
| | 02:22 | Next is the node.tpl.
| | 02:24 | This is a template that if you've done
theming in the past, you should be very
| | 02:27 | comfortable with and very familiar with.
| | 02:30 | However, this has changed in Drupal 7
as the content variable has been replaced
| | 02:35 | with the content array, which can be
rendered completely or by specific fields.
| | 02:41 | You can now hide content to control
how content is displayed, so as you can
| | 02:45 | easily rearrange the flow of data.
| | 02:48 | The $picture variable has been
renamed to $picture_author and has its own
| | 02:53 | template $user_picture to make
theming a little bit simpler.
| | 02:57 | Template suggestions like previous
ones are made based on the factors of the
| | 03:02 | most specific to the least specific,
starting with node, node--type, and nodeid.
| | 03:09 | Next is the block.tpl template which
renders the HTML markup for blocks.
| | 03:14 | The box.tpl has been completely
removed in Drupal 7 while the $search_box,
| | 03:19 | $content, and $help have
all been moved to blocks.
| | 03:22 | Template suggestions are similar and
that they are made based on these factors,
| | 03:26 | listed from the most specific template
to the least, starting with block-region,
| | 03:29 | block--module and block--module--delta.
| | 03:36 | Also the comment-wrapper.tpl.php
template acts as a wrapper for the
| | 03:40 | comment.tpl.php which prints
the HTML markup for comments.
| | 03:44 | Template suggestions like previous
are made up from most specific to
| | 03:49 | least specific, starting with
comment, comment--node type and then
| | 03:53 | finally comment-wrapper.
| | 03:56 | Once you have started creating or
overriding templates, you'll find one very
| | 04:00 | frustrating, but purposeful feature
of Drupal, that's known as caching.
| | 04:04 | Knowing how caching works and how the
Theme Registry functions will be the topic of our next movie.
| | Collapse this transcript |
| Exploring the theme registry| 00:00 | Drupal being a content management system,
it is very dynamic in nature, with the
| | 00:04 | content coming directly from a database.
| | 00:07 | That said, performance is a necessity;
| | 00:10 | so to increase page loading, Drupal has
deployed a theme registry to cache the
| | 00:15 | layout related activities.
| | 00:16 | Drupal's Theme Registry maintains
this cached data on the available theming
| | 00:21 | hooks and how to handle them.
| | 00:23 | For most theme developers, the
registry does not have to be dealt with
| | 00:27 | directly in any way.
| | 00:29 | Just remember to clear it when adding or
removing theme functions and templates.
| | 00:33 | Editing existing functions and
templates do not require a registry re-build.
| | 00:37 | However, to clear the theme registry, we
can do it in one of the following ways.
| | 00:42 | Under Configuration, under
Development, and Performance, we see an item
| | 00:48 | called Clear Cache.
| | 00:50 | By clicking the Clear all caches button,
any templating changes that we made
| | 00:55 | that do not seem to appear will appear
and you'll see the modified Drupal output
| | 01:00 | once the cache has been cleared.
| | 01:02 | The second way and the reason for
installing the new Admin Menu toolbar is that
| | 01:08 | under the Drupal drop icon, under
Flush all caches, we have the ability to
| | 01:13 | rebuild a theme registry, cache table
directly or simply just click on Flush all
| | 01:18 | caches to achieve the same effect.
| | 01:21 | By now, you should have a better
understanding of the theme registry, how to
| | 01:25 | work with cached templates
when theming in Drupal 7.
| | 01:28 | Now it's time to actually start
working with the core theme to get a deeper
| | 01:31 | understanding of theming as we move on to
taking a look at the Bartik theme in Drupal 7:
| | 01:37 | Creating and Editing Custom Themes.
| | Collapse this transcript |
|
|
5. Customizing Existing ThemesExploring the Bartik themes folder, file structure, and .info file| 00:00 | In this video, we'll explore how the
Bartik theme organizes files and folders,
| | 00:04 | announces the theme is available to
Drupal, and the basic configuration of the
| | 00:09 | metadata exposed in the .info file.
| | 00:11 | We can then utilize this information
in creating a simple sub-theme to get
| | 00:15 | ourselves more comfortable with creating
themes prior to working with our custom
| | 00:19 | samoca theme later in this series.
| | 00:22 | Let's begin by browsing over to
Aptana Studio and expanding our
| | 00:26 | themes>bartik folder.
| | 00:28 | Let's go ahead and take a look and see what
folders and files make up the Bartik theme.
| | 00:33 | The first folder we see is the color folder.
| | 00:35 | This contains the color module which
allows for visually changing the color
| | 00:39 | of backgrounds, header, footer, titles,
headings, and links within the Bartik theme.
| | 00:45 | Next is the CSS folder.
| | 00:47 | This contains all the stylesheets used
by the Bartik theme along with the Images
| | 00:52 | folder for containing all the
images, and the Templates folder.
| | 00:56 | I want to stop here for a second,
because the Templates folder contains actual
| | 01:00 | templates that are being
overridden by the Bartik theme.
| | 01:05 | We will explore these in great depth later on.
| | 01:08 | Next, we have the bartik.info file.
| | 01:11 | This is the file that contains
the metadata for the bartik theme.
| | 01:15 | This tells Drupal what the theme is
called, its description, what core version
| | 01:20 | of Drupal it uses along with any
stylesheets and scripts needed to be included.
| | 01:25 | Last is regions that can be used to output
content, and any feature specific to the theme.
| | 01:32 | Next, we have the logo and screenshot.
| | 01:34 | These provide the theme with a
visual reference from the Appearance Tab.
| | 01:38 | Finally, there's the template.php.
| | 01:41 | This allows for advanced theming not
covered in this series, which you can used
| | 01:46 | to override variables through
preprocess and process functions.
| | 01:51 | Let's go ahead and create our own sub-
theme based off of the Bartik theme.
| | 01:55 | We can do this by expanding the sites>
all>themes folder, and inside here, we
| | 02:01 | want to go ahead and create a new folder.
| | 02:03 | So we click on File>New>
Folder, and give it a name.
| | 02:07 | In this case, we will
give it a name of bartiksub.
| | 02:11 | Now that we have a folder for our sub-theme,
we need to go ahead and create a .info file.
| | 02:17 | Same process;
| | 02:18 | click on File>New and instead of clicking on
Folder this time, we are going to click on File.
| | 02:23 | We want to give this a name of bartiksub.info.
| | 02:28 | Inside this bartiksub.info file, we
want to go ahead, and give it a name.
| | 02:33 | We are going to specify name = Bartik Sub.
| | 02:39 | This tells Drupal 7 what our theme is called.
| | 02:42 | Next is description;
| | 02:44 | Description = A Sub Theme
based off the Bartik Theme.
| | 02:51 | Now, you can give this description
whatever name you want, but just make sure
| | 02:54 | it makes sense to the end-user when
they are looking at this through the
| | 02:57 | Appearance Interface.
| | 02:59 | Next and very mostly important is the core.
| | 03:01 | If we don't specify the core, then this
theme will be disabled by default, and
| | 03:06 | if we don't specify a core of 7.x, then
this will be defaulted to 6.x and thus
| | 03:12 | disabled if we're trying
to use this in Drupal 7.
| | 03:15 | Next, base theme = bartik.
| | 03:20 | If we do not specify a base theme
and try to actually enable this without
| | 03:23 | actually adding any stylesheets or
regions, then we would be simply looking at
| | 03:28 | the default output of
Drupal without any styling.
| | 03:32 | Now that we have a name, a description,
a core, and a specified base theme, the
| | 03:37 | only thing really left at this
point is to add some regions.
| | 03:41 | If we don't add any regions, Drupal 7
by default will add in regions such as
| | 03:46 | header, highlighted, help, contents,
left, and right sidebars and footer.
| | 03:52 | Since we'd want to make sure we don't
accidentally have content not display
| | 03:57 | based off the Bartik theme, we're going
to go ahead and open up the bartik.info
| | 04:02 | file, and copy in the regions from
this particular theme; so Copy, Paste.
| | 04:13 | Now, let's go ahead and save this.
| | 04:16 | One last thing before I actually go
and enable this theme, I want to copy the
| | 04:20 | logo and the screenshot from the
Bartik Theme into our sub-theme.
| | 04:25 | This way, we actually have the Drupal
drop on the main homepage display and we
| | 04:30 | actually have a screenshot for the theme
back in the Appearance Interface that I
| | 04:34 | can visually see what this theme looks like.
| | 04:37 | Once I have those in place, I can go
ahead, and tab back over to Drupal, go to
| | 04:41 | the Appearance Interface,
scroll down to Disabled Themes.
| | 04:46 | Here I see the name of my theme, the
description, the screenshot which we just
| | 04:50 | copied in, and if I click on Enable,
and set default, close this tab, nothing
| | 04:58 | should have changed, and that's
because we are using all the same
| | 05:01 | characteristics of Bartik, but we know
that we are actually using the bartiksub,
| | 05:05 | and from here on, we can start
manipulating it or modifying it to our needs.
| | 05:10 | One last thing if any of information
that I covered seems to be a little over
| | 05:15 | your head, no problem, you can simply
browse out to drupal.org/node/171205.
| | 05:22 | I don't make up the page IDs, but that's
what it's called and you can simply see
| | 05:26 | in the documentation for the theming
guide, the Structure of the .info file.
| | 05:30 | Now that we have taken a look at how
the Bartik theme organizes its files and
| | 05:34 | folder structure, lets Drupal know that
is a theme, and the configuration of its
| | 05:38 | metadata, we will take a look further
on how CSS is configured and utilized.
| | Collapse this transcript |
| Exploring how CSS references work in Drupal| 00:00 | With a varying support of CSS in
different browsers such as Internet Explorer,
| | 00:04 | the need for print stylesheets and
better ways to organize your CSS through
| | 00:08 | referencing multiple stylesheets,
Drupal allows us to reference styles from
| | 00:12 | within a .info file.
| | 00:14 | In this video, we will explore how
CSS is referenced by Drupal to satisfy
| | 00:19 | all these requirements.
| | 00:20 | We will also take a look at how to
reference external stylesheets outside of our
| | 00:24 | theme's structure and important changes
from Drupal 6 to Drupal 7 as we continue
| | 00:29 | to build our subtheme.
| | 00:31 | So far our Bartik subtheme has been
using all the characteristics of the base
| | 00:36 | theme Bartik, however,
it's time to make it our own.
| | 00:40 | Let's do that now by flipping over to
Aptana Studio 3 and taking a look at how
| | 00:46 | exactly the stylesheets have been
included from the Bartik base theme.
| | 00:50 | If we look at themes>bartik>bartik.
info and double-click on this, we can see
| | 00:57 | the reference to stylesheets, both for
layout, style, the colors module, and for print.
| | 01:04 | We want to be able to do this for our
subtheme so that we can make it more our own.
| | 01:09 | Let's go ahead and scroll up to our
subtheme, bartiksub.info and open it up.
| | 01:17 | Let's take a look first at how we
actually add a stylesheet for all media.
| | 01:23 | Just so that I can have a better
understanding exactly where the CSS is going
| | 01:27 | into my .info file, I am
going to add a quick comment.
| | 01:30 | This can easily be done by adding
a Semicolon and then the word CSS.
| | 01:36 | You can add whatever word you want here,
but since we are adding CSS that's what
| | 01:40 | we are going to comment it as.
| | 01:42 | Next, we actually want to make a
reference to a stylesheet that's going to
| | 01:47 | handle all of our layouts or colors
when we are viewing this from a browser.
| | 01:52 | We can do this by adding a
reference to a custom stylesheet.
| | 01:56 | Before we do that though, let's go
ahead and set the structure properly.
| | 02:00 | Inside of bartiksub, let's go ahead
and create a new folder called assets.
| | 02:05 | We can do this by
clicking on File>New, and Folder.
| | 02:09 | From here we will actually
create our assets folder.
| | 02:12 | Now that we have our assets folder,
let's create a folder that will contain all
| | 02:16 | the CSS we will be working with.
| | 02:18 | We can do this by once again,
clicking on File>New, and Folder.
| | 02:24 | Give the folder a name of css and now
we have a folder to contain all the CSS
| | 02:29 | files we will be working with.
| | 02:30 | Let's go ahead and create our first stylesheet.
| | 02:33 | We can do this by actually browsing
over to our Desktop and inside the Exercise
| | 02:38 | Files, the first one we will
be working with is custom.css.
| | 02:42 | Let's go ahead and copy this.
| | 02:44 | Go back to Aptana Studio 3 and
paste that into our css folder.
| | 02:48 | If we quickly look at this, all that
the stylesheet is going to do is simply
| | 02:53 | change the background color of our heading.
| | 02:56 | All we need to do now is make a
reference to this within our stylesheet.
| | 03:00 | We can do this by typing in stylesheets, open and
closed bracket, all since we want to target all the browsers.
| | 03:07 | Another open and closed bracket and a
reference to our assets/css/custom.css file.
| | 03:17 | Now that we actually have this
reference inside of our .info file, we need
| | 03:20 | to save it, and then we need to
actually go back to our browser and make
| | 03:24 | sure we flush the cache.
| | 03:26 | Since we are adding a new
reference, Drupal caches a .info file.
| | 03:30 | It needs to clear that cache
if the changes take effect.
| | 03:33 | So click on Flush all caches and we should
notice the header changes to a red color.
| | 03:39 | Great!
| | 03:40 | So one step down, a couple more to go here.
| | 03:42 | We will next want to add a
stylesheet for print media.
| | 03:45 | So how do we go about doing that? Same concept;
| | 03:48 | let's go back over to our Desktop,
to our Exercise Files, and copy the
| | 03:53 | print.css stylesheet.
| | 03:57 | Go back to Aptana and
paste that into our CSS folder.
| | 04:02 | Next, we are going to copy
the first line we made here.
| | 04:06 | Paste it in and change the all
reference to a print reference.
| | 04:10 | Also, we need to make sure that
we target the print.css stylesheet.
| | 04:17 | Save the .info file, go back to the
browser and you are right, flush that cache,
| | 04:23 | or also change would not take effect.
| | 04:25 | Since this has to do with targeting
a print stylesheet or the ability to
| | 04:30 | actually print what you are looking at,
when you would take a look at that by
| | 04:34 | doing File>Print, and we are
actually going to preview this as a PDF.
| | 04:39 | So we will say Open PDF in Preview.
| | 04:42 | Once that opens up, we are going to
notice that the logo, which was currently
| | 04:46 | visible in the browser is not
visible in our print stylesheet.
| | 04:50 | The reason for that is because if
we actually take a look at our print
| | 04:55 | stylesheet, we are
telling the logo to not display.
| | 04:58 | So, so far we've added a print stylesheet
and we've added a stylesheet for our browser.
| | 05:04 | The next type of stylesheet that we
want to take a look at is actually how we
| | 05:08 | would target different
browser widths or browser devices.
| | 05:13 | This is known as Responsive Web Design,
and with the introduction and media
| | 05:17 | queries, we can actually add a
reference into our .info file to target those
| | 05:22 | different browser widths.
| | 05:23 | If we flip back over to our Exercise
Files and copy the media.css stylesheet
| | 05:30 | into our CSS folder and then go
back to our bartiksub.info, copy our
| | 05:37 | stylesheet's print statement and paste it.
| | 05:41 | Now we actually need to make sure we
reference what it is we are wanting
| | 05:45 | to actually target.
| | 05:46 | In this case, we want to target the
screen and we want to make sure we target a
| | 05:51 | max-width of 600 pixels.
| | 05:55 | Next, we want to make reference to that
media query, so we actually make sure we
| | 06:00 | target the assets/css/media.
css stylesheet. Let's save this.
| | 06:07 | Go back over to Firefox, flush the
cache and if we start to adjust the width on
| | 06:14 | our browser, once we have reached
that max-width, we are going to see the
| | 06:17 | background change to a
gray color. Okay, red, gray.
| | 06:21 | Based off the media query saying, hey,
I'm looking a screen device and the width
| | 06:25 | has been reached in order
for that rule to be targeted.
| | 06:29 | The next thing we want to take a look
at is how do we actually reference an
| | 06:34 | external stylesheet.
| | 06:36 | Maybe we were wanting to make reference
to the Google Font API and to be able to
| | 06:42 | do some sort of font substitution that
our design or layout is asking us to do.
| | 06:47 | We can do this only really one way.
| | 06:49 | The .info file won't allow us to do this,
however, with advanced theming, and I
| | 06:55 | am going to cover this really quickly,
this is more of an advanced topic, we
| | 06:58 | have the ability to reference a
template.php file to override any type of
| | 07:03 | process or preprocessing
functions that happen in Drupal.
| | 07:07 | So if we go ahead and browse back over
to our Exercise Files, you are going to
| | 07:12 | see a file called template.php.
| | 07:14 | We want to copy this and paste
this into the roots of our bartiksub.
| | 07:19 | I will go ahead and
quickly take a look at this file.
| | 07:23 | Again, if you're not familiar with PHP
or how functions work, don't worry about
| | 07:28 | it at this point, all that you
really need to know is that this
| | 07:30 | bartiksub_preprocessing of the HTML
page is going to add a reference to the
| | 07:36 | fonts, the Google API by the
function called drupal_add_css.
| | 07:41 | So let's see how this actually works.
| | 07:44 | When I make a reference by flushing
the cache and preview the output by using
| | 07:51 | Firebug, we can actually go and take a
look at the head section, and now we see
| | 07:57 | a new line here referencing
the Google API for the fonts.
| | 08:01 | This is being done through that
preprocess function utilizing the template, and
| | 08:05 | that is the only way to
add external stylesheets.
| | 08:10 | You may be asking yourself, well,
this is great for Firefox or any
| | 08:13 | standards-compliant browsers, but what
about our old friend, Internet Explorer?
| | 08:18 | Yes, you can add conditional
stylesheets and yes, you can do it through the
| | 08:22 | .info file, and you do not have to add
those conditional stylesheets actually
| | 08:26 | hard-coded into your HTML template.
| | 08:29 | If we flip over to our Exercise Files,
we are going to see a module called
| | 08:33 | conditional stylesheets.
| | 08:35 | If we go ahead and double-click to
extract that and then copy this into
| | 08:41 | our Sites>samoca>sites>all>
modules folder, then browse back over to
| | 08:51 | Firefox, go ahead and close Firebug
and then click on Modules to take us
| | 08:56 | to the Modules interface.
| | 08:57 | Scroll down to the bottom of the page;
| | 09:00 | we should see the
Conditional Stylesheets module.
| | 09:02 | We can quickly enable this by
clicking on the Enabled checkbox and then
| | 09:06 | Save configuration.
| | 09:08 | What this is going to allow us to do
is to add these conditional stylesheets
| | 09:12 | directly to our .info file.
| | 09:15 | Go ahead and close the Modules interface,
navigate back over to Aptana Studio 3
| | 09:20 | and inside of our bartiksub.info
file, we can add a reference to this
| | 09:26 | conditional stylesheet.
| | 09:27 | We can do so by typing in a reference
to stylesheets-conditional, then open and
| | 09:35 | closed square bracket, and
then our conditional statement.
| | 09:38 | So in this case, we are going to say, [
if less than IE 8] [all] and then set
| | 09:45 | this equal to the stylesheet that
we want to reference, in this case,
| | 09:48 | assets/css/ie.css, save that and then
go back over to our Exercise Files on
| | 09:59 | our desktop and actually copy the ie.css
stylesheet and paste that into our css folder.
| | 10:09 | Now we have a reference to that.
| | 10:11 | If we save this and then flush the page cache
back in Drupal, that reference is now being made.
| | 10:18 | However, we really can't see it
unless we actually go ahead and open up
| | 10:21 | in Internet Explorer.
| | 10:22 | You will actually need to have a copy
of Internet Explorer to be able to see
| | 10:27 | the output from Drupal.
| | 10:28 | Whether modifying an existing theme or
creating a theme from scratch, knowing
| | 10:32 | the correct folder structure, what
files make up a theme and the best practices
| | 10:37 | for naming the theme plays an important
part of the Drupal theming methodology.
| | 10:42 | From here, we'll move on to taking a
higher level look at templates and how they function in Drupal 7.
| | Collapse this transcript |
| Exploring how script references work in Drupal| 00:00 | Just as important as being able to add
CSS to your Drupal theme is a need to add
| | 00:04 | different scripts to enhance the
presentational functionality of your thing.
| | 00:08 | In this video we will explore how
scripts are referenced by Drupal, how to add
| | 00:11 | JavaScript to your theme, and the
important changes from Drupal 6 to Drupal 7.
| | 00:17 | Something of note, traditionally themes
could add JavaScripts by calling Drupal
| | 00:21 | add JS function in the template.php file.
| | 00:25 | Starting in Drupal 6, if a file named
script.js existed in the themes directory,
| | 00:31 | then it was automatically included.
| | 00:33 | However, in Drupal 7 this behavior has
been changed again so that script.js is
| | 00:40 | only included if it has been
specified in the .info file.
| | 00:43 | Let's take a look at extending
the functionality of our sub theme.
| | 00:48 | There is a great JavaScript library
called Modernizr which allows it to take in
| | 00:53 | consideration the advancements in HTML
5 and being able to identify whether the
| | 00:59 | Browser that we are currently viewing
the site on can take those characteristics
| | 01:04 | of HTML 5 and use those for theming needs.
| | 01:08 | Let's go ahead and browse on over to
Aptana Studio 3 and see how we actually add
| | 01:12 | our reference to JavaScript.
| | 01:14 | Similar to what we have done before
where we added a comment, we want to add a
| | 01:18 | comment for JavaScript.
| | 01:20 | So by adding a Semicolon and then the
letters JS for JavaScript, we've added a
| | 01:25 | comment, and now if we actually type-
in the word scripts, Open Square Bracket
| | 01:31 | equals and then make a reference to the
JavaScript that we want to include we'll
| | 01:35 | be able to access that JavaScript and
have Drupal output a reference to that
| | 01:39 | JavaScript when viewing our site.
| | 01:42 | Before we actually had that
reference, so let's do one more step here.
| | 01:45 | Let's go ahead and create inside of our
assets folder a new folder to hold that JavaScript.
| | 01:51 | Make sure assets folder is selected and
then click File>New>Folder and create a
| | 01:57 | folder called js, click on Finish.
| | 02:00 | Now let's go ahead and browse over
to our Desktop, to our Exercise Files
| | 02:05 | and let's go ahead and copy the
modernizr.js file back into our Aptana
| | 02:11 | Studio 3 JavaScript folder.
| | 02:16 | Now that we have a reference to it there,
we can actually finish our inclusion
| | 02:21 | for our metadata file, the
reference to that modernizer script.
| | 02:25 | So after the Equal sign we are going
to type-in assets/js/modernizr.js, make
| | 02:34 | sure we save the .info file.
| | 02:36 | Browse back over to
Firefox, flush the page cache;
| | 02:41 | now if I go to view this in Firebug,
we are going to see two things, first of
| | 02:45 | all we have a class that's been
added to the HTML element with bunch of
| | 02:49 | multiple class names.
| | 02:51 | This is Modernizr in action.
| | 02:53 | Next, we can actually expand the head
element and scroll down and see that we
| | 02:59 | actually are making a reference to the
bartiksub/assets/js/modernizr.js script,
| | 03:06 | so just that simple, making
a reference to JavaScript.
| | 03:09 | However, there is one more thing
that you might want to take a look at.
| | 03:13 | If you're wanting to add an external
reference to JavaScript, how is that done?
| | 03:17 | Similar to the way that we added
reference to external style sheet in the
| | 03:22 | previous video, we're going to take a
look at how we actually add a reference to
| | 03:26 | external JavaScript.
| | 03:28 | If we browse back over to our Exercise
Files and copy the template.php file, go
| | 03:35 | back to Aptana Studio 3, make sure the
bartiksub folder is highlighted, and then
| | 03:40 | paste an override, the
current template.php file we had.
| | 03:46 | We can now open this up and take a
look at the reference, similar to the
| | 03:49 | drupal_add_css function, we now have
a drupal_add_js, and this is making a
| | 03:55 | reference to the external location
of where the modernizr script resides.
| | 04:01 | This way you can always make sure
that your modernizer script is up-to-date
| | 04:04 | without actually having to go and
download a new copy and add it back into
| | 04:08 | your folder structure.
| | 04:10 | Before we actually do this,
let's do one more thing.
| | 04:13 | Let's go back into our bartiksub.info
and actually delete the reference to the
| | 04:19 | script, so that's we are going to be
referencing it externally, save our .info
| | 04:24 | file, browse back over to
Firefox and flush the page cache.
| | 04:30 | Now we see that we still have the
reference to the modernizr classes that are
| | 04:35 | being added to the HTML element.
| | 04:37 | And if we expand the head element and
scroll down, we can now see that we are
| | 04:43 | actually referencing the modernizr
script from an external resource.
| | 04:48 | We have taken a look at how Drupal 7
references scripts to support additional
| | 04:52 | presentational functionality, how to
add JavaScript to your theme and the
| | 04:57 | important changes from Drupal 6 to Drupal 7.
| | 05:00 | Let's now move on to taking a look at how
regions in Drupal are referenced in Drupal 7:
| | 05:04 | Creating and Editing Custom Themes.
| | Collapse this transcript |
| Exploring regions and how they are referenced in a theme| 00:00 | A very important part of creating a
theme in Drupal is the ability to identify
| | 00:04 | areas or regions where
content will generally be displayed.
| | 00:09 | Regions allow for Drupal to
dynamically place content on the page as well as
| | 00:13 | allow for the administrator to specify
where they want a piece of content known
| | 00:18 | as blocks to be placed.
| | 00:20 | Let's take a look at what regions are,
how they are added to your theme, how to
| | 00:24 | add content to regions from within the
blocks module and key differences between
| | 00:29 | Drupal 6 and Drupal 7.
| | 00:32 | If we navigate to the Structure>
Blocks interface, we are presented with
| | 00:37 | different blocks in different regions to
where we can place content or blocks into.
| | 00:44 | We can see that we have regions such
as Header, Help, Highlighted, Featured,
| | 00:49 | Content, Sidebar first and Sidebar
second and some additional regions that the
| | 00:54 | bartik theme has added.
| | 00:57 | Couple of things to note, Drupal 7 adds
the Highlighted and Help as default regions.
| | 01:03 | By default the textual content of
the Help region is the same as the Help
| | 01:07 | variable was in the page.
tpl template for Drupal 6.
| | 01:12 | Also the Content region has become a full
region and is now mandatory in all themes.
| | 01:17 | This new requirement was set up so that
when enabling new themes, Drupal knows
| | 01:21 | where to put the main page content by default.
| | 01:25 | In Drupal 6, it was only possible to put
blocks after the main page content in this region.
| | 01:31 | The only way to put blocks before the
main page content was to define a specific
| | 01:35 | region for that purpose.
| | 01:37 | Drupal 7 now makes the
main page contents on block.
| | 01:40 | This makes it possible to put blocks
before or after the main page content in
| | 01:45 | the region without hacking in a new region.
| | 01:48 | Let's take a look at the .info file.
| | 01:51 | Browse back over to Aptana
Studio 3 and look at bartiksub.info.
| | 01:57 | Currently we're exposing the following regions;
| | 01:59 | Header, Help, Page top, Page bottom,
Highlighted, Featured, Content, Sidebar
| | 02:07 | first and second, and then some
additional regions which we saw back over in
| | 02:12 | the block interface.
| | 02:14 | Let's go ahead and add one of our own regions.
| | 02:17 | So at the top of the regions' area
we're going to add a region for Custom.
| | 02:22 | So if we type-in the word regions and
then in square brackets, all lowercase the
| | 02:28 | word custom, followed by equals and
then a readable name, so in this we can
| | 02:33 | capitalize it, the word Custom and
save this, we have exposed a new area for
| | 02:40 | content to be displayed in.
| | 02:41 | Go ahead and flip back over to our
Browser, close the block interface really
| | 02:46 | quick and flush the page cache.
| | 02:48 | You are now telling Drupal go
ahead and expose this region.
| | 02:53 | If we go back to Structure and Blocks,
we can now see at the very top we have a
| | 02:58 | new region called Custom.
| | 03:01 | If we try to demonstrate the Block
regions by clicking on the Demonstrate block
| | 03:05 | regions for the Bartik Sub, we are
not going to quite see this yet, and the
| | 03:09 | reason being is because we
haven't rendered this as a region.
| | 03:13 | We've told Drupal 7, this is a
region we can use, but until we actually
| | 03:17 | physically render this inside of a
template, there's no way for Drupal to
| | 03:21 | actually place content into it.
| | 03:23 | Let's do that real quick so
we can see this demonstrated.
| | 03:26 | Go ahead and click on the Exit block
region demonstration and at this point
| | 03:31 | we're going to go back into Aptana
Studio 3, locate the themes>bartik folder,
| | 03:38 | open up the templates folder and we
want to copy the page.tpl into our sub.
| | 03:46 | Inside the sub theme here we're going
to create a new folder called templates
| | 03:54 | and inside the templates
we're pasting in the page.tpl.
| | 03:58 | Now realize this may be your first
class into a template, don't worry, we'll be
| | 04:02 | taking a deeper look into these
templates as we move on into future videos.
| | 04:06 | Just go ahead and open up the page.tpl.
php file and actually render this new
| | 04:12 | region so that we can see it being exposed.
| | 04:15 | And if we go ahead and scroll down to
where we can see the render and right
| | 04:21 | after the header region we copy this
line of code and then paste it in and
| | 04:26 | change this from header to the word
custom, save this, go ahead and go back over
| | 04:33 | to Firefox, close the Block region
real quick, and flush the page cache, any
| | 04:39 | page template should now
have this region exposed.
| | 04:42 | And we can see this by going back
to Structure>Blocks and clicking on
| | 04:48 | Demonstrate block regions.
| | 04:50 | We now see our Custom region being highlighted.
| | 04:53 | This means that we can physically put
content into this area. Let's do that now.
| | 04:58 | Click on Exit block region demonstration.
| | 05:01 | And if we scroll down to some
disabled blocks, in this case how about the
| | 05:07 | Who's online block.
| | 05:10 | If we assign this to the Custom region,
click on Save blocks and we close the
| | 05:15 | interface, although not very pretty
with our current theme, we aren't seeing
| | 05:20 | that we have some new content
being exposed into that near region.
| | 05:25 | We have explored what regions are, how
they work in the context of displaying
| | 05:29 | data, how you add regions to your theme and
the important changes from Drupal 6 to Drupal 7.
| | 05:34 | Now that we're starting to get more
comfortable with theming, let's move on to
| | 05:38 | our samoca theme and make all the magic work.
| | Collapse this transcript |
|
|
6. Creating a New ThemeUsing the Backup Migrate module to create content for a web site| 00:00 | Now that we have a basic understanding
of how themes function, all necessary
| | 00:03 | modules configured and browser-based
tools in place, let's get our hands dirty
| | 00:08 | and start creating our custom theme.
| | 00:10 | We are going to take a look at creating
the content for the Samoca website using
| | 00:14 | the Backup and Migrate
module that we installed earlier.
| | 00:17 | We will utilize this to restore all the
data that makes up our website as well
| | 00:21 | as replacing the sites folder
so that we're better prepared.
| | 00:25 | If we go ahead and browse on over to
our Desktop, to our Exercise Files, we're
| | 00:30 | going to see two files.
| | 00:32 | One is the sites.zip folder;
| | 00:34 | the other is samoca.mysql.zip which is the
database backup that we are going to restore.
| | 00:40 | Let's go ahead and start by
replacing the sites folder.
| | 00:43 | Go ahead and double-click on sites.
zip to extract it, then once we have the
| | 00:49 | sites folder simply copy, navigate to
Sites>samoca and paste this item in place.
| | 00:58 | This is going to replace the existing sites
folder and this is exactly what we want to do.
| | 01:03 | Click on Replace and now we have our
new sites folder structure in place.
| | 01:09 | That's part one, the second
part is restoring the data.
| | 01:14 | So if we go ahead and
browse on over to Firefox, go to
| | 01:18 | Configuration>System>Backup and Migrate
and then the Restore tab, from here we
| | 01:25 | can browse to the mysql back
up that we need to restore.
| | 01:29 | Click on the Browse button, locate
your Exercise Files, and then locate the
| | 01:37 | samoca.mysql.zip file, click on it,
click Open and click Restore now.
| | 01:44 | Depending on the size of the
database, this may take a second.
| | 01:47 | Once the Default Database has been
restored Drupal will actually notify us with
| | 01:51 | the following message;
| | 01:53 | default database restored
from Upload file samoca.mysql.
| | 01:57 | We want to confirm that it
has successfully been restored.
| | 02:01 | Once we have, we can close this tab and
we can see that our site is now changed.
| | 02:07 | We are now seeing some new data
including new menu items and new content that
| | 02:12 | make up the samoca theme.
| | 02:14 | We have used the Backup and Migrate
module to populate the content for the San
| | 02:18 | Angelico Museum of Contemporary Art, as
well as reviewed the site content that
| | 02:23 | makes up our non-themed website.
| | 02:25 | Let's move on to reviewing our static
HTML website and create a roadmap for what
| | 02:30 | sections of our site will need to be themed.
| | Collapse this transcript |
| Creating a theming roadmap| 00:00 | With content in place it's time to
review our static HTML mockup and compare it
| | 00:04 | to our Drupal output to determine what
regions blocks and templates will need to be themed.
| | 00:10 | In this video we are going to take a
look at making a roadmap for what pages we
| | 00:14 | will be theming and preparation for
creating and modifying Drupal templates.
| | 00:20 | When you mention the word Drupal 7 and
theming, lots of things come to play.
| | 00:26 | You have these page variables, you have
these regions, you have these templates,
| | 00:30 | and it's quite overwhelming.
| | 00:32 | But what it really boils down to is
knowing exactly what pages you are dealing with.
| | 00:37 | In this case we have a Home Page
layout and we have an internal page layout.
| | 00:42 | And knowing what page variable, such
as logo, the navigation, knowing what
| | 00:47 | regions such as featured, content, social,
footer and what blocks and views need
| | 00:53 | to be placed into those
regions, it's half the battle.
| | 00:57 | Looking at the internal page, there is
no difference, we still have to deal with
| | 01:01 | page variables, we have to deal with
the regions, in this case we have a new
| | 01:05 | region such as content and sidebar,
but we also have blocks, views and nodes,
| | 01:10 | that all make up Drupal 7's output.
| | 01:13 | If we go ahead and browse on over to
the Samoca mockup, this is the first time
| | 01:18 | that we're actually getting a chance
to see visually what it is that we are
| | 01:21 | going to be creating.
| | 01:23 | And if we take a look at this in
closer detail, we can see things that should
| | 01:28 | stand out to you as a designer.
| | 01:30 | First of all I have a header region that
consists of the logo and consists of the navigation.
| | 01:36 | If I scroll down, I see a featured
content section with three blocks of content.
| | 01:41 | If I scroll down even further, I see
another section followed by a footer
| | 01:46 | and some social icons.
| | 01:48 | And as I go ahead and click on an
internal page such as collections, I'd now get
| | 01:52 | a completely different layout.
| | 01:54 | I have layout where I have content in
the left, a sidebar with more content in
| | 01:58 | the right, but I also see some repeating
areas that make up regions, such as the
| | 02:04 | social icons and the footer.
| | 02:06 | Knowing how these things come to play
when it comes to Drupal makes your job as
| | 02:11 | a Drupal themer, or a Drupal
developer just that much easier.
| | 02:16 | If we go ahead and browse over to the
Drupal output, we can see the pages, we
| | 02:21 | have our home page, we have our internal pages,
and the contents are already in place for us.
| | 02:27 | We just need to know based off of that
that roadmap what regions to create, such
| | 02:32 | as header, featured, content, social,
footer, sidebar, the choice is up to you,
| | 02:40 | but make sure whatever regions you come
up with makes sense for the design from
| | 02:45 | both a home page and an internal page.
| | 02:49 | Now that we've reviewed the various
regions, blocks and content areas with our
| | 02:53 | static HTML mockup, and have come to
decide on a roadmap for our theming needs,
| | 02:59 | we'll have a better understanding of
how to create our theme folder, our base
| | 03:03 | structure, the .info file and how to
expose our newly created theme in Drupal 7.
| | Collapse this transcript |
| Creating a theme folder, theme structure, and a .info file and enabling a theme| 00:00 | Now that we have our content in place,
it's time that we begin to create our
| | 00:04 | theme folder and base structure along
with the .info file and any of references
| | 00:09 | to stylesheets that need
to be applied to our theme.
| | 00:12 | We will also review the Drupal HTML
output and discuss what steps we need to
| | 00:17 | take to get the Drupal
output to match our static HTML.
| | 00:21 | Let's begin by browsing to our editor
and expanding these sites>all>themes
| | 00:27 | folder and let's go ahead and create a
new folder for our theme, so right-click
| | 00:32 | and say New>Folder and give it a name of samoca.
| | 00:38 | Now that we have the samoca folder, we
need another folder to hold all the assets.
| | 00:43 | Right click on samoca and say New>
Folder and give it a name of assets.
| | 00:50 | Now if we expand the Exercise Files
for 06_03, I want to copy in both the CSS
| | 00:58 | and the images into my assets folder.
| | 01:00 | I'll go ahead and select both of those,
right-click say Copy, tab back down to
| | 01:06 | my assets folder, and paste them.
| | 01:13 | Now that I have my assets in place
it's time that we create a new file
| | 01:17 | called samoca.info.
| | 01:20 | This will hold all of our theme's metadata.
| | 01:23 | Right-click on the samoca
folder and say New>File.
| | 01:26 | We are going to give this a name of samoca.info.
| | 01:32 | The first thing that any theme needs
is a name and this is a required field.
| | 01:36 | So let's go ahead and add
that now, name = Samoca.
| | 01:41 | Next it would be nice if our
theme actually had a description.
| | 01:45 | While it's not a required field, it
is highly recommended that we add it.
| | 01:48 | Let's go ahead and add that now,
description = A custom theme for SAMOCA.
| | 01:57 | Next we need to add the required
metadata to specify which version of Drupal our
| | 02:02 | theme is compatible with.
| | 02:04 | This is core = 7.x.
| | 02:08 | Remember that if you do not specify
the core or specify a version less than
| | 02:13 | the current Drupal instance that you are using,
you will not be allowed to enable this theme.
| | 02:18 | So make sure that you specify the proper
core for the theme that you are developing.
| | 02:25 | Let's go ahead and save this, browse
back to Drupal, and then navigate to the
| | 02:30 | Appearance interface.
| | 02:32 | From here we want to locate our theme.
| | 02:34 | So scroll down to Disabled Themes and we see
the new theme that we've started to create.
| | 02:40 | Go ahead and click on Enable and set
default, close the Appearance interface, we
| | 02:47 | are now seeing that default Drupal HTML
output which gives us a good example of
| | 02:51 | what styling, if any, gets applied
by the core and contributing modules.
| | 02:55 | And we could technically create a
theme by creating a Style Sheet directly
| | 02:59 | addressing the default elements and
classes that Drupal outputs without even
| | 03:03 | touching a template.
| | 03:05 | However, let's add some CSS so
that our theme starts to take shape.
| | 03:10 | Begin by browsing back to your editor.
| | 03:13 | Go ahead and tab down a couple of
spaces and let's add a comment for CSS.
| | 03:19 | If we scroll back up to the Exercise
Files, we see that we already have a copy
| | 03:24 | of the samoca.info file.
| | 03:26 | Let's go ahead and open that and I want
to copy the four references to stylesheets.
| | 03:31 | Go ahead and paste those in and then I'll
go ahead and discuss what's happening here.
| | 03:38 | First of all there is a stylesheets array.
| | 03:40 | The stylesheets metadata
references the actual location where our
| | 03:45 | stylesheets reside.
| | 03:47 | In this case we are saying
stylesheet, all, equals assets/css/reset,
| | 03:55 | typography, layout, and drupal.
| | 03:58 | Now that we have the metadata in place
for a theme, we can save our .info file,
| | 04:05 | tab back over to our Drupal
instance, and Flush the page cache.
| | 04:11 | Now we're beginning to see some of
the theme's characteristics be applied.
| | 04:16 | Let's go ahead and quickly open up
Firebug and take a look at the head element
| | 04:22 | and scroll down a little bit to where
we can actually see the reference to our
| | 04:26 | stylesheets that Drupal is outputting.
| | 04:28 | So we now know that our metadata
information is being picked up by Drupal
| | 04:33 | and outputted properly.
| | 04:35 | Go ahead and close Firebug and if
you'd like, you can go ahead and start
| | 04:39 | comparing this to our static theme, and
as you see, we're not quite there yet,
| | 04:44 | but we are picking up some of the styling.
| | 04:47 | For instance, we have some background
graphics that if we take a look at our
| | 04:52 | Drupal instance are starting to be picked up.
| | 04:55 | We'll slowly keep working through this
and modifying templates so that our HTML
| | 05:00 | output and our Drupal
will slowly begin to match.
| | 05:04 | It's time to discuss exactly how we
need to get the HTML and page content to
| | 05:09 | match our static website a little better.
| | 05:11 | Let's move on to reviewing the html.tpl.
php and page.tpl.php templates in Drupal 7.
| | Collapse this transcript |
|
|
7. Customizing TemplatesCustomizing HTML templates and variables| 00:00 | With the release of Drupal 7, a new
template that wraps up all of the page
| | 00:04 | content was introduced called html.tpl.php.
| | 00:09 | This will be our first look at this
template and templates in general and
| | 00:13 | we will look to where Drupal stores
this template, how to copy it to our
| | 00:17 | own theming directory, and how to modify or
override the content for our theming needs.
| | 00:23 | Let's begin by browsing over to Aptana
Studio and expanding the modules>system
| | 00:31 | folder and we get our first glance
over where this template actually lives.
| | 00:38 | Now one thing to note, never override
a template inside of the Drupal Core.
| | 00:43 | Make sure that you copy this template
instead to your templates directory.
| | 00:48 | Let's do that by highlighting
it, copying it, going to our
| | 00:54 | sites>all>samoca>templates
folder and pasting it in place.
| | 01:01 | At this point, we can actually go ahead
and double-click on it to open it and we
| | 01:05 | get our first glance of templates in
general, but more specifically the HTML
| | 01:12 | template that wraps up all this page content.
| | 01:15 | We can see that it's consisting of
variables, such as $css, $head_title, the
| | 01:22 | page title, a name and slogan as well as other
various variables that make up this template.
| | 01:28 | What we want to do is compare the
contents of this template to the index page
| | 01:35 | of our .html document.
| | 01:37 | So let's go ahead and browse over to
our Exercise Files and copy the index.html
| | 01:44 | over to Aptana Studio to our samoca theme.
| | 01:48 | Now we can double-click to open it and
we're starting to get a glimpse of what
| | 01:53 | it is that we exactly need to do.
| | 01:55 | We need to make the index.html or a
static webpage, looks similar in Drupal.
| | 02:02 | Let's do this by simply replacing
elements inside of our HTML template with the
| | 02:07 | elements from our index.html document.
| | 02:10 | I am going to copy the .type and the
HTML and since we are using HTML 5, I'm
| | 02:17 | simply going to replace the doc type and
HTML element inside of Drupal's HTML template.
| | 02:25 | Now that we have the doc type in
HTML done, it's a matter of cleaning up
| | 02:29 | the rest of the page.
| | 02:30 | If I open up index.html and take a look,
I see that I need everything from the
| | 02:37 | closing head up and I need
everything from the closing body down.
| | 02:43 | If I flip back over to my HTML template,
I can see there are a couple of things
| | 02:48 | in here I don't need.
| | 02:50 | First, I'm not worried about skip-
links so I will delete that element.
| | 02:56 | Next, I want to make sure that any
conditional statements that are being used in
| | 03:00 | the index.html page are copied over as well.
| | 03:04 | Now there are some differences in how
conditional statements work inside of
| | 03:09 | Drupal and the paths to where that is located.
| | 03:12 | So if I actually open up my readme
documents, I can see the conditional
| | 03:18 | statement here and I am simply going
to copy it and paste it into my HTML
| | 03:24 | template right before the closing head elements.
| | 03:31 | One thing to note is in order to
actually see this being generated, you'll have
| | 03:35 | to have a copy of Internet Explorer available.
| | 03:38 | But what I want to point out is the
actual path to where this is pointing.
| | 03:43 | It is using some Drupal Variables,
such as the base_path and path_to_theme to
| | 03:49 | build the directory structure that
points to our assets JavaScript folder.
| | 03:54 | Now that we have this in place, I can go
ahead and hit Save, but I still need to
| | 03:59 | pull in my JavaScript assets and I
need to make a reference to one particular
| | 04:04 | JavaScript asset in my .info file.
| | 04:07 | So go ahead and browse back over to
the finder and inside of the JavaScript
| | 04:11 | folder, go ahead and copy both the
modernizr and selectivizr scripts.
| | 04:16 | Go ahead and tab back over to Aptana
Studio 3, select the JavaScript folder
| | 04:21 | and paste those in.
| | 04:23 | One last step before we actually go
ahead and browse what's being output, that
| | 04:27 | is to actually go ahead and
open the samoca.info file.
| | 04:31 | With this open, I need to
make a reference to JavaScript.
| | 04:34 | I'll actually go ahead and add my
comment and then tab back over to my
| | 04:38 | readme document and copy the script reference
metadata information for the modernizr script.
| | 04:45 | Paste that in place, hit Save and now I
am going to browse back over to Firefox.
| | 04:52 | I am going to Flush the page cache and
then open up Firebug and see what we have.
| | 04:59 | I can see the modernizr is being
referenced properly as the HTML 5 classes are
| | 05:05 | being displayed inside of the HTML element.
| | 05:08 | If I expand the head element and scroll
down a little bit, I can see references
| | 05:14 | to my JavaScript for the modernizr
that is being referenced as well.
| | 05:20 | Next, we will take a look at the
page template which we will need for
| | 05:23 | customizing our homepage and
interior pages in Drupal 7.
| | Collapse this transcript |
| Customizing page templates and variables| 00:00 | When it comes to theming, the page.
tpl.php template is the most important
| | 00:06 | and widely utilized, as it focuses on
all the elements between the opening
| | 00:12 | and closing body text.
| | 00:14 | We will take a look at how it's used in
Drupal, where to find it, and the best
| | 00:19 | practice implementation
for using it when theming.
| | 00:23 | If we expand the modules' system
folder, we can begin to take a look at the
| | 00:31 | page.tpl.php template.
| | 00:35 | With it opened, scroll down to
where we begin to see the HTML and page
| | 00:41 | variables being displayed.
| | 00:43 | The page template file focuses on the
elements that are displayed between the
| | 00:48 | opening body and closing body tags and
includes the HTML structure of the page.
| | 00:54 | It is also responsible for printing the
page level regions and other hard-coded
| | 00:59 | variables, such as logo, site name,
tabs, main menu, and other variables.
| | 01:05 | The full control of the site layout
is actually possible by manipulating
| | 01:10 | this single template.
| | 01:12 | If we browse back over to Drupal and
take a look at our static HTML page, we can
| | 01:18 | compare the home page of our static
mockup to that of our Drupal instance.
| | 01:23 | And as we do so, we can see that the
HTML being output is quite different.
| | 01:29 | In order for us to modify the
Drupal HTML output, we need to begin by
| | 01:33 | modifying the page template.
| | 01:35 | Let's begin by browsing back to our
editor, closing the page.tpl from the
| | 01:41 | modules' system folder, browsing up
to the Exercise Files for 07_02, and
| | 01:53 | copying the index.html
page and pasting it into our
| | 02:00 | sites>all>themes>samoca>templates folder.
| | 02:05 | Now, you may be asking yourself, why
are we copying a static HTML page into our
| | 02:15 | templates folder where
Drupal templates should reside?
| | 02:19 | The reason being is we're actually
going to convert this index page into a
| | 02:23 | page.tpl.php template, simply by renaming it.
| | 02:29 | Right-click and rename it to page.tpl.
php, click OK, and then browse back to
| | 02:38 | Drupal and flush the page cache.
| | 02:42 | While we can technically say we're done
theming at this point, we only actually
| | 02:47 | have about 10% dynamic content being displayed.
| | 02:51 | If we view the source of the page, we
can see that the HTML template wrapper is
| | 02:58 | actually displaying the HTML properly,
but if we scroll down to where we see the
| | 03:04 | page content, we're seeing
a duplication of the HTML.
| | 03:09 | The reason being is that our static version
actually contains the HTML and head elements.
| | 03:16 | Close the View Source for this
page and browse back to your editor.
| | 03:21 | Open up the page.tpl and let's remove the
HTML that we don't need to be displayed.
| | 03:28 | Simply highlight the DOCTYPE all the way
to the opening body element and delete it.
| | 03:33 | Scroll down to the bottom of the
page and delete the closing body and
| | 03:38 | closing HTML element.
| | 03:40 | Save the page, browse back to
Drupal, and Flush the page cache.
| | 03:46 | Now if we View the Source, we see the
HTML template in action, and if we scroll
| | 03:54 | down a little bit, we see that the page
template is actually being displayed and
| | 03:59 | the duplication is no longer there.
| | 04:02 | Go ahead and close the View
Source and browse back to your editor.
| | 04:07 | Let's continue this process by
replacing some of the page variables.
| | 04:12 | In this instance, we're going to
actually replace the navigational element with
| | 04:17 | Drupal's dynamic navigational elements.
| | 04:21 | In order for us to see a comparison,
I'm going to actually add a little bit of
| | 04:25 | whitespace before the unordered list.
| | 04:28 | I'm then actually going to open up
the readme file and take a look at the
| | 04:33 | snippet of code that
generates the navigational element.
| | 04:37 | I'm going to copy it and
paste it into the whitespace.
| | 04:43 | The first thing I want to take a look
at here is, I am noticing that there's an
| | 04:47 | id of main-menu that's being
printed out by this navigational element.
| | 04:52 | My unordered list doesn't have an id,
therefore I'm going to remove that
| | 04:57 | from this instance.
| | 04:59 | The next thing that I want to
focus on is the class array.
| | 05:02 | My unordered list has a class of menu.
| | 05:05 | However, this navigational element only has
the classes of links, inline, and clearfix.
| | 05:12 | So how do we add that to
our navigational element?
| | 05:15 | We can do that by simply putting in
single quotations followed by a comma and
| | 05:20 | then adding in that class name of menu.
| | 05:23 | I'm going to go and hit Save, and
then at this point I'm actually going to
| | 05:27 | delete our unordered list, save the
page, browse back over to Drupal, and
| | 05:36 | flush the page cache.
| | 05:39 | Now that I see the actual HTML being
outputted by Drupal, I'm noticing one thing
| | 05:44 | that wasn't part of our design.
| | 05:46 | If we flip back over to our version,
we do not see a Main menu heading.
| | 05:52 | However, the Drupal output is
displaying the word Main menu.
| | 05:57 | If we browse back to our editor,
we can actually see that there's a
| | 06:00 | heading being displayed.
| | 06:02 | I can remove that by simply
highlighting it and deleting that section along
| | 06:08 | with the comma and then saving the
page and then browsing back to Drupal and
| | 06:14 | Flushing the page cache.
| | 06:16 | Now the Main menu heading is gone, and
if I compare the pages between my static
| | 06:22 | version and my dynamic version,
I'm starting to see the similarities.
| | 06:27 | The next thing we need to take a
look at is how we go about replacing the
| | 06:31 | other page variables.
| | 06:32 | However, if I click between the home
page, to the collections page, and so
| | 06:39 | forth, I'm not seeing any changes.
| | 06:42 | And if actually look at our static
version, our home page layout and our
| | 06:47 | interior page layouts are extremely different.
| | 06:51 | So how do I tell Drupal to create a
template for the home page as well as create
| | 06:57 | a template for the interior pages?
| | 07:01 | If we open up a new tab and we browse to
drupal.org/node/1089656, this will take
| | 07:13 | us to the Drupal 7 Template Suggestions page.
| | 07:16 | And if we scroll down to page, we can now see
the template suggestions for page templates.
| | 07:24 | In this case, we're seeing the page--
front, page--internal, and page--path are
| | 07:30 | the suggestions from Drupal for
creating additional page templates.
| | 07:35 | Taking this into account, let's browse
back to our editor, close the page.tpl,
| | 07:43 | scroll back down to our templates folder,
and let's copy and paste back in the
| | 07:52 | page.tpl, but this time we're actually
going to rename it based off the template
| | 07:57 | suggestion to page--front.tpl.php.
| | 08:04 | Go ahead and click OK, and then I
want to concentrate right now on the
| | 08:09 | page.tpl.php, because this is
actually the template that the interior pages
| | 08:14 | are going to utilize.
| | 08:16 | So if I open it back up, what I want
to do is replace the static HTML content
| | 08:22 | for the home page, with the static
HTML content of the interior pages.
| | 08:28 | So if I scroll up to my Exercise Files,
open up the aboutus.html, I want to
| | 08:34 | simply replace the main section and
the sidebar section by copying it and
| | 08:45 | tabbing back over and pasting it on
top of the featured section and content
| | 08:54 | section of the page.tpl.
| | 08:58 | By doing so and hitting Save, we can
then browse back to Drupal, go to the About
| | 09:03 | Us page, or any of the other interior
pages that you may have clicked on, and
| | 09:08 | Flush the page cache.
| | 09:10 | At this point we're
starting to see some changes.
| | 09:13 | We're actually seeing the static
rendition of the About Us page.
| | 09:18 | And if I click on the collections
page, I should still see it as well.
| | 09:23 | However, if I click on the home page, I
should now see the home page static content.
| | 09:28 | The reason being is that Drupal is
now recognizing the fact that we have
| | 09:32 | two page templates;
| | 09:34 | one for the front page and then a default
one that it's using for the interior pages.
| | 09:40 | Let's continue this exercise by
replacing some more of the page variables.
| | 09:46 | Browse back to your editor, and within
the page.tpl, scroll up right before the
| | 09:53 | main section, add a little bit of
whitespace, and then from the readme.txt file,
| | 09:58 | we want to copy in print messages.
| | 10:03 | Copy that and paste it in place, save
the page, and then browse back to Drupal
| | 10:09 | and Flush the page cache.
| | 10:13 | Now when I go over to the collections
page and Flush the page cache again, I'm
| | 10:19 | going to see a message appear.
| | 10:20 | That is the message
variable displaying the content.
| | 10:24 | Let's browse back to our editor and
concentrate on replacing the title of the page.
| | 10:30 | I'm going to go ahead and add a little
bit of whitespace, Tab back over to the
| | 10:34 | readme file, and copy the section of
code that will output the Drupal title.
| | 10:41 | Tab back to the page.tpl and paste it in place.
| | 10:46 | Quickly taking a look at this, I see
that the page variable title is being
| | 10:51 | printed, as well as a title_prefix
and a title_suffix, and just for your
| | 10:56 | knowledge, the title_prefix and the title_
suffix being rendered is new to Drupal 7.
| | 11:02 | It's there so that modules can
interact with your pages and inserts any
| | 11:07 | HTML that it may need.
| | 11:10 | If I now delete the h1 for the About Us
page, save the page and browse back over
| | 11:15 | to Drupal and Flush the page cache, I
should now see the heading for About Us be
| | 11:21 | replaced with the heading
for the specific page we're on.
| | 11:26 | Now I see Collections.
| | 11:27 | And if I click on about us, I should
see it change to About Us, and if I click
| | 11:32 | on the ask us page, I
should see it change to Ask Us.
| | 11:36 | Let's browse back over to our editor and
now let's actually go ahead and add the
| | 11:41 | tabs that will allow us to
view and edit the Drupal content.
| | 11:46 | If I Tab back over to the readme text
file, I will see the snippet of code
| | 11:51 | that I need to copy.
| | 11:53 | Copy that and then Tab back over to the
page and paste it right after the title.
| | 11:59 | Now if I hit Save, browse back over to
Drupal, and Flush the page cache, I now
| | 12:06 | begin to see the tabs being displayed by Drupal.
| | 12:11 | Browse back to your editor, and right
after the Tabs section, enter a little
| | 12:14 | bit more whitespace and then Tab back over to
the readme section and copy the action_links.
| | 12:21 | Go ahead and paste that in
place right after the tabs.
| | 12:26 | Tab back over to the readme again, and
we're also going to copy in the feed_icons.
| | 12:32 | Copy that and Tab back over to page.tpl
and add the feed_icons right before the
| | 12:37 | closing wrapper for the main section element.
| | 12:42 | So scroll down a little bit, add
some whitespace and paste that in.
| | 12:46 | Go ahead and hit Save, browse back over to
your Drupal instance and Flush the page cache.
| | 12:52 | Now that we've gone through the
process of replacing static content with the
| | 12:57 | Drupal page variables, we can repeat
this process for the interior page.
| | 13:03 | For sake of having to repeat the same
steps involved in replacing the page
| | 13:07 | variables, you can refer to the
readme.txt file labeled page.tpl.php and
| | 13:14 | page--front.tpl.php to make sure that
you correctly replaced the static content
| | 13:22 | with the page variables
that you need to have replaced.
| | 13:26 | Now that we've explored the
characteristics of the page.tpl template, followed
| | 13:31 | best practices for creating our page
templates, it's time we look a little
| | 13:36 | deeper into theming by taking a look at
regions and how they play an important
| | 13:40 | part in displaying content.
| | Collapse this transcript |
| Creating regions and rendering page variables| 00:01 | While we've replaced our static
navigation and page content with Drupal's
| | 00:04 | dynamic menu and page variables,
we've only touched the surface on theming.
| | 00:09 | To begin replacing whole content areas
in Drupal, we need to discuss regions;
| | 00:14 | what regions are, how to create regions,
and exactly how to tell Drupal what
| | 00:20 | content to place in those regions
so it can render them to the browser.
| | 00:24 | If we take a look at the Structure>
Blocks interface and scroll down to the
| | 00:30 | Highlighted and Help section, we can
see that regions are areas in the theme
| | 00:35 | that are available for
adding blocks of content to.
| | 00:38 | The regions available in the theme are
defined within the .info file, and in
| | 00:43 | Drupal 7 the Highlighted and Help
regions have been added as default regions.
| | 00:48 | Also in Drupal 7 the Content
variable has become a full region and is now
| | 00:53 | mandatory in all themes.
| | 00:55 | This new requirement was set up so
that when enabling new themes Drupal knows
| | 01:00 | where to put the main page content by default.
| | 01:04 | One last thing to note is that if no
regions are added to your theme, then the
| | 01:08 | default Drupal regions will be used.
| | 01:11 | Let's begin my browsing to
your editor and expanding the
| | 01:14 | sites>all>themes>samoca folder.
| | 01:20 | Let's go ahead and open up the
samoca.info file, and we can see that we
| | 01:24 | currently have no regions defined.
| | 01:27 | Let's go ahead and add the regions that
our particular theme is going to need so
| | 01:32 | that we have somewhere to assign content to.
| | 01:35 | If we navigate to the Exercise Files
for 07_03 and open up the readme file, we
| | 01:44 | can copy and paste the regions that
our particular theme are going to need.
| | 01:51 | Tab back over to samoca and
simply paste in those regions.
| | 01:54 | Now, let's take a quick look at these
regions before we actually go and start
| | 01:59 | replacing the page variables or
assigning content to these regions.
| | 02:04 | The regions that we're going
to be dealing with are Featured.
| | 02:07 | This is for the home page, along with the
Content area, which is mandatory by Drupal 7.
| | 02:13 | For the interior pages we have the
Sidebar, and for all of the pages we have the
| | 02:19 | Social Icons and the Footer.
| | 02:21 | Also, it is recommended to add a Page
Top and Page Bottom region to comply with
| | 02:26 | contributing modules that utilize
these regions for their own use.
| | 02:31 | Now that we've added that to the samoca.
info file, let's go ahead and hit Save
| | 02:36 | and browse back to your Drapal
instance and Refresh the page.
| | 02:42 | If we scroll down, remember, we're not
going to see anything yet, and that's
| | 02:47 | because we need to Flush the page cache.
| | 02:51 | Once we Flush the page cache, we
should now see those new regions appear.
| | 02:56 | If we go back to Structure>locks, we
now see the Featured section, we see the
| | 03:03 | Content, the Sidebar,
Social Icons, and Footer section.
| | 03:09 | Now, what we need to do here is actually
assign the content to the proper regions.
| | 03:15 | We'll start with the Featured region.
| | 03:18 | The Featured region actually
takes the View: Spotlight, View:
| | 03:22 | Upcoming and Plan Your Visit block.
| | 03:36 | For the Content region, it takes
Main page content, View: Current, View:
| | 03:46 | Previous, View:
| | 03:49 | Featured, and the Home Page Content Links.
| | 03:58 | For the Sidebar region, we need to
assign the View's Sidebar Exhibit, the Become
| | 04:07 | A Volunteer, Talk to Us, and the Content Links.
| | 04:22 | The Social Icons region
takes the Social Icons block.
| | 04:31 | And finally the Footer
region takes the Copyright.
| | 04:35 | I'm going to go ahead and disable the
Development module from the Footer by
| | 04:39 | selecting None, and then I'm going to
scroll down to the bottom and click Save blocks.
| | 04:44 | One last thing I want to check is to
make sure that these are in the correct
| | 04:48 | order within each region.
| | 04:50 | For instance, View:
| | 04:52 | Spotlight should be first, followed by View:
| | 04:55 | Upcoming and Plan Your Visit.
| | 04:59 | For the Content region, the order is
Main page content, View: Current, View:
| | 05:04 | Previous, View:
| | 05:05 | Featured, and Home Page Content Links.
| | 05:10 | For the Sidebar region, it should be View:
| | 05:12 | Sidebar Exhibit, Become A
Volunteer, Talk To Us, and Content Links.
| | 05:19 | The rest of the blocks inside the
regions are fine, so let's go ahead and
| | 05:23 | Save this one more time.
| | 05:27 | Go ahead and close the Blocks interface.
| | 05:31 | Now that we are confident that the
proper blocks are assigned to the
| | 05:35 | correct regions, we need to make sure that
the page templates are printing those regions.
| | 05:41 | We need to be able to see if the static
content is actually being replaced with
| | 05:45 | a dynamic content from Drupal.
| | 05:47 | Let's begin this by browsing back
to your editor, scrolling down to the
| | 05:51 | sites>all>themes>samoca>
templates folder and open up the
| | 05:56 | page--front.tpl template.
| | 06:02 | If I scroll down a little bit, I need
to take a look at first replacing the
| | 06:08 | featured section content.
| | 06:11 | So I want to highlight everything
between the wrapping div and delete it, and I
| | 06:21 | want to replace this with a print
statement for the correct region.
| | 06:31 | I can copy that from the
readme file and paste that in place.
| | 06:37 | Now, what this is saying is go
ahead and render the page variable with
| | 06:41 | the Featured region.
| | 06:44 | So we should see, once we save this, and
by browsing back to our Drupal instance
| | 06:49 | and Flushing the page cache, the static
content being replaced with the dynamic
| | 06:53 | content, which it has.
| | 06:56 | You can see that we've lost some of the
static styling that we saw and we're now
| | 07:00 | showing the dynamic content.
| | 07:03 | Let's browse back to our
editor and continue this process.
| | 07:08 | For the content section, I need to
delete the content between the wrapping div,
| | 07:17 | paste in that render statement and
change the word featured to be content.
| | 07:22 | I'm going to Save that, browse back
to Drupal, and scroll to the top and
| | 07:28 | Flush the page cache.
| | 07:30 | If I scroll down I should actually
see the static content once again being
| | 07:37 | replaced with the dynamic content.
| | 07:39 | Let's browse back to our editor and
replace the content for the Social Icons,
| | 07:47 | highlight the unordered list, paste in
the print render statement and change the
| | 07:55 | word featured to social. Save that.
| | 07:59 | And then let's do this one more time
for the footer, and then take a quick look
| | 08:11 | to make sure that we've successfully
replaced any static content with the
| | 08:16 | dynamic content that should
be rendered with the regions.
| | 08:19 | Save the page, browse back to
Drupal, and Flush the page cache.
| | 08:27 | Now if we take a look, the front page should
be completely dynamic in nature, and it is.
| | 08:36 | Now, let's repeat the
process for our interior pages.
| | 08:40 | Browse back to your editor, close page--
front.tpl.php and open up page.tpl.php.
| | 08:54 | Scroll down to the main content and
replace the static content remaining with
| | 09:05 | the print statement for the content region.
| | 09:09 | Now, if I browse back to our
Drupal instance and click on one of the
| | 09:13 | interior pages, I now see some of the static
content being replaced with the dynamic content.
| | 09:23 | Browse back over to our editor
and let's continue this process.
| | 09:28 | Locate the sidebar and replace its content
with the print render statement for the sidebar.
| | 09:39 |
| | 09:41 | Repeat the process for the social-icons
and the footer, save that page, browse
| | 09:55 | back to Drupal and refresh.
| | 09:58 | Now, you may be asking yourself, why
didn't I have to Flush the page cache?
| | 10:04 | Once the template is actually created,
you don't have to get in the habit of
| | 10:09 | Flushing the page cache, I would
recommend it though so that you're not looking
| | 10:14 | at a page and wondering why
something hasn't happened.
| | 10:17 | By Flushing the page cache you're
ensuring that you're getting that fresh copy
| | 10:21 | of any dynamic content that
Drupal should be outputting.
| | 10:24 | If I go ahead and scroll down, I should
see all dynamic content and if I go to
| | 10:29 | the other pages, I should also
see dynamic content being displayed.
| | 10:36 | If I compare this with our static HTML
mockup, I should begin to see a little
| | 10:43 | bit closer relationship between how the
themes look for the home page, for the
| | 10:52 | collections page, the about us
page, and finally the ask us page.
| | 11:11 | Rendering Drupal content is as simple as
defining the proper regions within your
| | 11:16 | .info file, arranging the block
content to display in the correct region, and
| | 11:21 | rendering the regions within your
template to replace static HTML content.
| | 11:26 | However, Drupal 7 introduced the new
region template, which allows us some
| | 11:32 | flexibility in theming the
output of regions in Drupal 7.
| | Collapse this transcript |
| Customizing region templates and variables| 00:00 | If we wanted to for some reason add
additional classes, add additional HTML
| | 00:04 | markup to give us the ability to apply
different theming characteristics, we
| | 00:10 | could break those out on a per region basis.
| | 00:14 | However in our case, we don't need that.
| | 00:17 | So, in taking a look at the new region
templates in Drupal 7, we see that it
| | 00:22 | provides us with a way to modify the
wrapping HTML around content areas, add
| | 00:27 | those additional classes and
test for conditional logic.
| | 00:30 | All of these features allow for us to
have more control over theming and making
| | 00:35 | sure we follow best practices for
modifying this template will ensure we design
| | 00:40 | a cleaner looking theme.
| | 00:42 | When it comes to creating pages,
articles and custom content types, being able
| | 00:48 | to theme the no display in
Drupal is just as important.
| | Collapse this transcript |
| Customizing node templates and variables| 00:00 | Most content in Drupal that is not
generated by a block or a view is considered
| | 00:05 | to be a node and each node can be
identified by its ID or type whether it's a
| | 00:10 | page, article, or custom content type.
| | 00:14 | These attributes give us great
control over theming the HTML output by each
| | 00:19 | node and its template.
| | 00:21 | Based off our static mockup we are
not doing anything special with the
| | 00:24 | individual nodes or node types,
other than simply cleaning up the HTML.
| | 00:30 | So let's begin by browsing to your
editor and expanding the modules>node folder.
| | 00:38 | And if we look in here we can
see the node.tpl.php template.
| | 00:44 | I am going to right-click and copy this
and then I am going to paste this into
| | 00:48 | my sites>all>themes>samoca>templates folder.
| | 00:54 | Now that I have this in my folder I can
go ahead and double-click on it to open
| | 01:01 | it and take a look at
what this template contains.
| | 01:06 | If we scroll down a little bit we can
see Available variables such as $title and
| | 01:12 | $content as well as other variables
such as, $node, $type, $comment_count, and
| | 01:18 | Node status variables to tell us
whether or not the $view_mode is full, teaser,
| | 01:22 | whether or not this particular node
has been promoted to the front page or if
| | 01:27 | it's sticky or whether or not the
comment settings have been turned on.
| | 01:32 | We can also see if there are Field
variables available to us for each field instance.
| | 01:37 | As I continue to scroll down I can see
the wrapping div and an HTML markup along
| | 01:43 | with the variables that
make up this particular page.
| | 01:46 | Something new in Drupal 7 is the
ability to hide and then render content later.
| | 01:53 | This can be seen here in the div class
content and as we take a look a little
| | 01:58 | later at how we migrate from Drupal 6
to Drupal 7, this hide and render will
| | 02:04 | come in handy in order to modify the layout.
| | 02:09 | For now though, all that we're interested
in is actually removing any wrapping divs.
| | 02:15 | And if we browse back to Drupal and we
actually take a look through Firebug at
| | 02:21 | how the page is laid out, I can navigate to the
about us page and actually see a node in action.
| | 02:29 | Within the main section, within the
wrapping div, if I open it a little bit
| | 02:35 | I'll see the system-main-block, which
is the main content area, and then I
| | 02:40 | finally reach the node.
| | 02:43 | I can see that I have a wrapping div
for the node and if I expand a little bit
| | 02:47 | further I see I have another
wrapping div specifically for the content.
| | 02:52 | I want to remove those two
HTML elements from our design.
| | 02:57 | Browse back to the editor and simply
scroll up and remove the opening div,
| | 03:05 | scroll to the bottom, delete the closing div,
and then also remove the div for the content.
| | 03:16 | Save that node, browse back to
Drupal, and Flush the page cache.
| | 03:24 | Now if I inspect the node element, I
should see that this block-system-main
| | 03:32 | which is the main content region no
longer contains a wrapping div for the node.
| | 03:39 | If I browse back to the editor, we can
see by simply removing the HTML elements,
| | 03:44 | we have the ability to
clean up the Drupal output.
| | 03:49 | Now for our particular theme we had no
need to create additional node templates.
| | 03:54 | But if you need to know the
recommended template suggestions, we can quickly
| | 03:58 | view the documentation.
| | 04:00 | If we browse back over to Drupal, we can
click on the drupal.org website for its
| | 04:06 | template suggestions for a node.
| | 04:08 | We can see that they're pretty simple.
| | 04:10 | It starts with the node, followed by a
node with the custom content type name,
| | 04:16 | finally a node with the actual ID.
| | 04:19 | You can use these template
suggestions to extend your theming needs.
| | 04:24 | Examining what a node template is,
where to find the template, and the best
| | 04:29 | practice is for modifying its output,
we were able to clean up some of the HTML
| | 04:34 | to better suit our theming needs.
| | 04:36 | What generally is in a node is
considered to be a block of HTML and we will
| | 04:41 | take a look at that next on how you actually go
about modifying the output of a block in Drupal 7.
| | Collapse this transcript |
| Customizing block templates and variables| 00:00 | Block templates act as a rapidable block
content and views content and just like
| | 00:05 | other templates can be modified to
change the HTML output generated by Drupal.
| | 00:11 | We will take a look at where the
default block.tpl resides, what variables it
| | 00:17 | outputs and best practices for
overriding this template and its recommended
| | 00:21 | template suggestions.
| | 00:23 | Now that we are displaying dynamic
content from our page, node and region
| | 00:28 | templates our theme is starting to take shape.
| | 00:31 | However we take a look at our home page
and our interior pages, you'll see that
| | 00:40 | we still have a little more work to
do before we are completely finished.
| | 00:45 | It's time for us to take a look at
blocks and how we can modify them to output
| | 00:50 | HTML just the way we need.
| | 00:53 | Let's begin by browsing to your editor,
expanding the modules>block folder
| | 00:59 | and copying the block.tpl.php template to your
| | 01:07 | sites>all>themes>samocha>templates folder.
| | 01:12 | Now I can actually go ahead and double-
click on the block.tpl and take a look at
| | 01:21 | exactly what it contains.
| | 01:25 | If I scroll down I can see that it's
simply a wrapper for block content.
| | 01:30 | I see a couple of attributes available
to me such as the title_prefix and the
| | 01:34 | title_suffix, which is used by
contributed modules as well as the title if one
| | 01:40 | exists for the specific block
followed by the actual content that's being
| | 01:45 | displayed and some wrapping div elements.
| | 01:49 | If I browse back over to Drupal and I
actually inspect the elements on the page
| | 01:55 | using Firebug, I can actually take a
look at the talk to us block and I can see
| | 02:02 | this actual block has a wrapping div
for both the container of it as well as
| | 02:07 | another one for the content.
| | 02:10 | Let's actually navigate over to the about us
page and see if we see the exact same thing.
| | 02:16 | We have a different block called Current
Exhibits and yes we are actually seeing
| | 02:23 | that this particular block has a
wrapping div and has a div for the content.
| | 02:29 | Now we see some additional wrapping
divs because of the fact that this specific
| | 02:34 | block is a block that has
been composed of a view.
| | 02:37 | We're going to take a look at that a
little bit later but, for now let's look at
| | 02:41 | how we actually go about cleaning up
the content wrapped around a block.
| | 02:47 | If we browse back to our editor, the
first thing I want to do is actually remove
| | 02:53 | the div for the container
and the div for the content.
| | 03:01 | I'm going to save this, browse back
to Drupal and Flush the page cache.
| | 03:09 | By doing so, I can see that that
wrapping div both around the content and around
| | 03:16 | the actual block has been removed.
| | 03:18 | Knowing that I can actually manipulate
the HTML around the block, let's browse
| | 03:23 | back our editor and undo the changes
that we just did and this time I actually
| | 03:30 | want to modify the block.tpl and change
the div tag to an aside and remove the
| | 03:42 | div around the content.
| | 03:44 | So, I'm going to leave an HTML element
here, in fact I'm converting the div to
| | 03:48 | an HTML 5 element to
better match our HTML 5 layout.
| | 03:54 | The next thing I want to do is
actually remove the id attribute and add an
| | 04:01 | additional class for the sidebar.
| | 04:04 | But if I add it here then I add it to
all the blocks and that's not specifically
| | 04:10 | what I want to do at this point.
| | 04:11 | I want to be able to use the template
suggestions to create additional blocks
| | 04:16 | that target specific blocks for my layout.
| | 04:20 | So for our purposes, let's go ahead
and save this page as it is, browse back
| | 04:26 | over to our Drupal
instance and Flush the page cache.
| | 04:32 |
| | 04:35 | Now if I inspect this element I can
see that there's in aside wrapped around
| | 04:39 | this and the div that was wrapped
around the content has disappeared.
| | 04:45 | Now if I compare this to the about us
page for our static layout, I see some CSS
| | 04:50 | styling that's currently not being applied.
| | 04:54 | I have this bluish background, the
heading is a little bit bigger in a different
| | 05:00 | color and I have some shadow effects in
the box here, which currently I do not
| | 05:05 | have over in my Drupal version.
| | 05:07 | But how do I go about
actually targeting just that block?
| | 05:11 | Well, there's a tool that we've
looked at earlier that's currently disabled
| | 05:15 | and we need to make sure we go back and
enable it and that's known as the Theme developer.
| | 05:19 | So, if I scroll back up to Modules
and then scroll down to the Development
| | 05:26 | field set I can see the Theme developer
and the dependency of the Devel, which
| | 05:33 | also needs to be enabled and by
enabling both of those modules and clicking on
| | 05:38 | Save configuration, I can then use
the Theme developer module to inspect
| | 05:45 | different sections of Drupal output
to see what variables and what template
| | 05:50 | suggestions are available.
| | 05:53 | By clicking on Themer Info and then
moving my cursor around the page I can
| | 05:58 | highlight the Current Exhibits, locate the
block and then see what template is being called.
| | 06:06 | Currently the default block template,
which is inside our templates folder is
| | 06:12 | being called, but if I want to target a
specific block, I can look above to take
| | 06:18 | a look at some of the template
suggestions that Drupal would like to use.
| | 06:22 | In this case, I see one called views_
view__sidebar_exhibit__block as well as
| | 06:33 | seeing a couple of other
different template suggestions.
| | 06:36 | So, which one do we use?
| | 06:38 | The choice is yours.
| | 06:40 | But let's take a look at how
we can actually create one now.
| | 06:44 | Browse back to your editor and if we
scroll up to the Exercise Files and locate
| | 06:51 | the 07_06 folder, we can see that
I've already created this for you.
| | 06:59 | I'm simply going to copy this and
paste it into our templates folder.
| | 07:09 | Now if you're not a premium lynda.com
subscriber I've also added the content of
| | 07:15 | these templates into the readme file so
that you can create these templates and
| | 07:20 | just copy and paste the content.
| | 07:22 | If I take a look at the block--views--
sidebar-exhibit-block template I can see
| | 07:31 | that I've added a class of a feature-block.
| | 07:33 | That's the only thing that I've added to
this particular block and if I now save
| | 07:39 | this and then browse back to my Drupal
instance, turn off Themer information,
| | 07:45 | and Flush the page cache,
let's see what happens.
| | 07:49 | I am now seeing some
styling start to take place.
| | 07:52 | My shadow are there, my typography
is starting to come through, however I
| | 07:58 | have some shifting going on within
other block below it, let's go ahead and
| | 08:02 | address that as well.
| | 08:04 | Tab back over to your editor, scroll
back up to your Exercise Files and copy the
| | 08:11 | block--block--3.tpl and paste
that into your templates folder.
| | 08:19 | This block--block--3.tpl.php template
is the block that has shifted up on the
| | 08:30 | page and the reason it shifted up is
because it has a class that it's looking
| | 08:35 | for to help it clear anything
that's being floated on the page.
| | 08:39 | If I open this up I can see that
this has been assigned a different class
| | 08:44 | called content-block.
| | 08:47 | Now, make sure this is saved and then
browse back over to your Drupal instance,
| | 08:51 | scroll at the top and Flush the cache.
| | 08:56 | Now we see that the block below it has
shifted back down and if we compare this
| | 09:01 | with the about us page for the static
version, we can see that we are exactly
| | 09:06 | spot on with how this
custom theme has been applied.
| | 09:14 | Now, you may be thinking to yourself,
if I need to add a class do I have to
| | 09:18 | create a custom template for every single block?
| | 09:22 | And the answer is, no.
| | 09:24 | If we actually scroll back up to the
top and go to Structure>Blocks and go to
| | 09:30 | the Block interface, one of the
modules that's actually installed and enables
| | 09:35 | called Block Class Settings and what
this module allows you to do is when
| | 09:40 | clicking on the Configure option, it
provides you with a space to actually add
| | 09:45 | additional CSS classes.
| | 09:48 | Let's go ahead and see how
that works now. For the View:
| | 09:52 | Spotlight block, it's
actually going to require a CSS class
| | 09:56 | of feature-collection.
| | 10:01 | Scroll down, hit the Save block and then
I'm going to close the Blocks interface
| | 10:07 | and go to the home page
and see what has happened.
| | 10:12 | If you remember previously, the heading
and the links for this particular image
| | 10:17 | were below the image.
| | 10:19 | By adding this class and actually
inspecting this element I can see that the
| | 10:28 | class for a feature-collection has been added.
| | 10:34 | Let's go ahead and repeat this
process for a couple of additional blocks.
| | 10:39 | Go back to the Structure>
Blocks interface and for View:
| | 10:43 | Upcoming click on Configure and then for
the CSS class, let's add feature-block.
| | 10:56 | Save the block and for the next one
Plan Your Visit, click on Configure, this
| | 11:03 | also gets a feature-block.
| | 11:06 | Scroll down and hit Save block and
we need to repeat this process for the
| | 11:11 | Content and the Sidebar.
| | 11:15 | Census information is
located in the readme file;
| | 11:19 | I will go ahead and let you do that on your own.
| | 11:22 | Remember, if you needing to create
individual block templates, then you can take
| | 11:26 | a look at the following.
| | 11:28 | Open up a tab and browse out to drupal.
org/node/1089656 and this is where the
| | 11:38 | Drupal 7 template suggestions are.
| | 11:40 | So, if you do not have access to the
Theme Developer module, you can take a look
| | 11:46 | at the recommended template
suggestions from this page.
| | 11:50 | By copying the default block.tpl
template and utilizing the suggested template
| | 11:55 | names, we were able to override
the HTML output generated by Drupal.
| | 11:59 | We also took a look at using the block
class module versus creating a template
| | 12:04 | for every block when it
comes to simple theming needs.
| | 12:07 | In our next lesson we will take a
look at views and how we go about
| | 12:11 | modifying view templates.
| | Collapse this transcript |
| Customizing view templates and variables| 00:00 | One of the most dynamic capabilities
of Drupal is when it comes to Views.
| | 00:04 | Views give the theme or the ability to
output list of nodes or content in varying manner.
| | 00:11 | With the Views UIs you can override the
output without even touching a template.
| | 00:15 | But for cleaner HTML we can also
modify the templates for views and the page
| | 00:21 | variables it outputs.
| | 00:23 | Even though our theme is complete I want to
discuss views and views template in general.
| | 00:28 | Most Drupal sites use Views to display
data in the form of lists of nodes with
| | 00:34 | various filters and fields being displayed.
| | 00:37 | And if you're not familiar with Views,
then I would ask you to take a look at
| | 00:40 | the series just released by Tom Geller
called Drupal 7 Reporting and Visualizing Data.
| | 00:47 | As we take a look at the same and
compare it to our static HTML we can see that
| | 00:53 | the homepage, even though a static
version of it, is a now completely being
| | 00:57 | displayed and all the
dynamic glory that's called Drupal.
| | 01:02 | And as we had walk through all of
this it really wasn't that difficult.
| | 01:08 | But I want to do one more thing.
| | 01:10 | The purist in me can't handle the HTML
output that Views are wrapping around
| | 01:17 | some of the content.
| | 01:18 | And if I inspect the elements such as
upcoming events I can see a wrapping div
| | 01:24 | for the view, one for the
constant, and one for the Views fields.
| | 01:29 | I want to remove that just kind
of strip it down a little bit more.
| | 01:33 | So let's take a look at how we do that.
| | 01:36 | Browse over to our editor and let's
actually explore where View templates live.
| | 01:41 | They actually reside inside of the sites>
all>modules folder, and this is because
| | 01:48 | views are a contribute module.
| | 01:50 | And if I scroll down to views and
expand the folder and then look inside of the
| | 01:55 | theme folder, I can see that there are
quite a few different templates available to me.
| | 02:01 | The one that I want to take a
look at first his views-view.
| | 02:05 | I want to copy this and paste it into my
| | 02:09 | sites>all>themes>samoca>templates folder.
| | 02:16 | Once I have them in place I can
double-click on it and take a look at
| | 02:21 | exactly what it does.
| | 02:22 | There is not a lot of information here
other than wrapping developments and some
| | 02:27 | of the different variables
that make up the Views interface.
| | 02:31 | Items such as a title prefix and title
suffix used by contributed modules, the
| | 02:36 | ability to expose filters attachments,
and display rows of content based off
| | 02:43 | of the Views query.
| | 02:44 | In our case what I want to do is
actually remove the wrapping div.
| | 02:50 | So I am going to highlight that div
and delete it and find its closing div
| | 02:53 | at the bottom and then I also want to
remove the div that is wrapped around
| | 03:01 | the rows statement.
| | 03:04 | If I highlight the div with the class
of view content and delete it and then
| | 03:09 | delete the closing div and then save
this template, I am going to browse back
| | 03:13 | over to Drupal and I am
going to Flush the page cache.
| | 03:16 | Now if I inspect this element, I can
see that the only thing left really
| | 03:26 | wrapping around this particular view
is the wrapper for the views row and the
| | 03:32 | wrapper for the views field.
| | 03:34 | Let's now take a look at removing
the wrapper for the views field.
| | 03:39 | Browse back to our Editor, scroll up to
the views folder and the particular view
| | 03:45 | templates that we are looking for is
called views-view fields, copy this, and
| | 03:53 | paste it into your sites all>
themes>samoca>templates folder.
| | 04:00 | Once it's in there, go ahead and
double-click to open and actually what I
| | 04:05 | want to do here is remove every thing
that's in here except for where it's
| | 04:11 | printing the field content.
| | 04:14 | So I should be left with a foreach
statement followed by the actual printing
| | 04:19 | of the field content.
| | 04:21 | If I save this template, browse back to
Drupal, and Flush the page cache, then
| | 04:30 | inspect this element, I can see that all I'm
left with now is a wrapping div for the views row.
| | 04:36 | Hopefully, you are seeing a pattern
here and we could take this step by step
| | 04:40 | and eventually clean up the HTML to where only
thing left is the content that's being output.
| | 04:46 | We have taken a look what a view
template is, the complexity of view templating,
| | 04:52 | and where to locate views templates.
| | 04:54 | We've also followed best
practices for modifying the HTML output.
| | 04:59 | While you can get even more events with
view streaming it's best to use a fine
| | 05:03 | balance between template
modifications and overriding Drupal CSS.
| | 05:08 | Hopefully, you have a better
understanding of what is involved in taking the
| | 05:12 | templates in a step by step manner and
modifying them to have your static HTML
| | 05:18 | look like a dynamic HTML.
| | Collapse this transcript |
|
|
8. Making Your Theme Production-ReadyRemoving unnecessary modules| 00:00 | Prior to moving any Drupal site to
production it is very important that you
| | 00:04 | disable and uninstall any modules that
may create bottlenecks when it comes to
| | 00:09 | performance or possible security related issues.
| | 00:13 | We'll take a look at what module should
be disabled and how to uninstall them.
| | 00:18 | So if we select Modules from our
toolbar and scroll down to the first module I
| | 00:23 | want to take a look at
deactivating which is the Devel module.
| | 00:26 | If it is unable make sure you uncheck
it and then once it is actually unchecked
| | 00:33 | and you saved it what we want to
take a look at is the uninstall tab.
| | 00:38 | If we click on uninstall we'll see any
modules that we can actually check to
| | 00:43 | make sure that they are uninstalled
properly, let's begin by uninstalling the
| | 00:47 | Theme developer and Devel generate
models by checking the uninstall checkbox and
| | 00:53 | then clicking on the Uninstall button.
| | 00:56 | Drupal will prompt us to make sure
we truly want to uninstall a module;
| | 01:00 | we do in this case, so we will
click on the Uninstall button again.
| | 01:06 | We have one more model here that we
didn't take a look at and that's a Devel
| | 01:09 | module, so same process.
| | 01:12 | Click on the Uninstall checkbox
and then the Uninstall button.
| | 01:17 | Confirm that you want to uninstall it
and click on the Uninstall button again.
| | 01:22 | Now we can click back over to the List.
| | 01:25 | Just to let you know, there are a few
other modules that are safe to remove if
| | 01:30 | you're moving aside in production.
| | 01:32 | Those are the performance logging, the
advanced help example module, and image
| | 01:37 | cache UI and the views UI.
| | 01:39 | Now that we have those modules
uninstalled, we still need to physically remove
| | 01:44 | them from our Drupal instance before
files actually get moved to production.
| | 01:50 | Let's tab over to our Aptana
Studio 3 instance and expand these
| | 01:55 | Sites>All>Modules folder, and the module
we're looking for is devel and devel_themer.
| | 02:03 | So if we select those, right-click and say
Delete and then confirm the deletion of them.
| | 02:11 | Now we have uninstalled which has
removed them from the database and physically
| | 02:16 | remove the module from our Drupal instance.
| | 02:20 | We began our Drupal migration process
by going through a checklist of modules
| | 02:25 | that should be disabled and
uninstalled in production.
| | 02:28 | By completing such a task we have
ensured that we don't have to worry about
| | 02:32 | these models causing performance bottlenecks.
| | 02:35 | Next let's move on to making sure
that our stylesheets and script files are
| | 02:40 | optimized and cached to help
increase page load times in production.
| | Collapse this transcript |
| Optimizing the CSS and JavaScript| 00:00 | Optimization of files in any website
is important, but when you compound that
| | 00:05 | with the CMS such as Drupal
performance is always a must.
| | 00:10 | We'll explore methods for minification
and compression as well as take a look at
| | 00:15 | how Drupal 7 provides you the Drupal
themer with the solution for optimization.
| | 00:21 | A quick glance at our site we can see
that our theme is been completed, but
| | 00:26 | exactly how long would this
take for user to view this page.
| | 00:30 | If we open a firebug and then expand
the head section we can see all of the
| | 00:35 | CSS and scripts that are being
referenced and if we want to know exactly how
| | 00:42 | many page requests are being made for the
simple homepage we can click on the Net tab.
| | 00:47 | We can then refresh the page and then
scroll down to the bottom and see that
| | 00:52 | this particular site is actually
making 51 requests to the server and taking
| | 00:58 | almost 1 second to load.
| | 01:00 | Now I realize this is a simple
site when it comes to Drupal theming.
| | 01:04 | But how can we still look at
reducing the number of page requests?
| | 01:10 | Well Drupal 7 actually gives us a
tool to do this, let's go ahead and close
| | 01:14 | firebug for a second and go to the
Configuration>Development>Performance
| | 01:21 | interface, you might be familiar with
this and this is what we first looked
| | 01:26 | at clearing the cache.
| | 01:28 | However there are quite a few other options to
help us with the performance of a Drupal 7 site.
| | 01:34 | If I scroll down the page and take a
look at Bandwidth Optimization, I can see
| | 01:40 | that I have two settings here that
will allow me to automatically optimize as
| | 01:47 | well as reduce both the size and
number of requests made to our website by
| | 01:52 | simply aggregating and compressing CSS
files and aggregating JavaScript files,
| | 01:59 | let's go ahead and click both these
options and then click Save Configuration.
| | 02:04 | Once that's been saved, close the interface
and then let's open up the site in firebug.
| | 02:10 | Let's quickly look at the
HTML and expand the head section.
| | 02:14 | If we take a look now we can see
that we have quite a few less CSS and
| | 02:22 | JavaScript calls being made and if I
tab back over to the Net tab and refresh
| | 02:29 | the page and then scroll the bottom I can see
now that we're actually down to 27 requests.
| | 02:35 | We've almost cut the number of requests in half.
| | 02:38 | Next we're going to discuss page
caching and solutions available to you as a
| | 02:43 | Drupal developer or designer.
| | Collapse this transcript |
| Enabling caching| 00:00 | When it comes to Drupal, performance is
always mentioned, sometimes overlooked,
| | 00:05 | but very easy to accomplish if
you know the right tools to use.
| | 00:10 | Drupal 7 helps with performance by
allowing for page caching and we'll take a
| | 00:15 | look at why it is important and how
to enable page caching on your site.
| | 00:20 | We're also going to take a
look at some caching solutions.
| | 00:24 | Let's actually start by taking a
look at how to enable caching and
| | 00:27 | feature caching solutions.
| | 00:30 | If I navigate to Configuration>
Development>Performance, we can take a look at
| | 00:37 | the CACHING section of this interface.
| | 00:40 | The first thing that we want to do
is under CACHING, check Cache pages
| | 00:45 | for anonymous users.
| | 00:47 | What this means is caching the pages
for those users that are going to be
| | 00:51 | viewing your site from the public domain
and aren't going to be interacting with
| | 00:55 | it such as logging in or
actually being a site administrator.
| | 00:59 | The next thing we want to do is Cache blocks.
| | 01:03 | Drupal had a bad habit of actually
physically loading blocks with every single
| | 01:08 | page, regardless if that block was
assigned to a region on that page.
| | 01:13 | That is now been resolved and we can
actually cache these blocks to ensure
| | 01:18 | a better performance.
| | 01:20 | Next we want to look at Minimum cache lifetime.
| | 01:24 | The Minimum cache lifetime setting
allows your cached pages not to be re-created
| | 01:31 | and see that at lease
this much time has elapsed.
| | 01:34 | The setting you choose depends on you
and the amount of traffic your site is
| | 01:39 | going to be receiving.
| | 01:41 | My recommendation is to at
least choose a timeframe of 1 hour.
| | 01:46 | Now the Expiration of cached pages
has to deal with the maximum time an
| | 01:51 | external cache can use older versions
of a page, meaning I don't want the page
| | 01:56 | to be cached forever, I do want a
minimum and I do want it to expire after a
| | 02:01 | certain amount of time.
| | 02:03 | If your site is not using a lot of
blog feeds or RSS or aggregation, and is
| | 02:09 | not constantly changing, then I would
recommend an expiration of cached pages
| | 02:14 | setting of 3 hours.
| | 02:17 | Once I have those in place I
can click Save configuration.
| | 02:21 | What that has done is
extremely sped up my Drupal site.
| | 02:26 | However, that's not where performance ends.
| | 02:30 | There are some other tools depending
on the amount of traffic your site is
| | 02:34 | receiving that I would
recommend you taking a look at.
| | 02:38 | The first is known as Alternative
PHP Cache and this can be found at
| | 02:42 | drupal.org/project/apc.
| | 02:47 | The Alternative PHP Cache is a free
and open source code for PHP that allows
| | 02:53 | the site to provide a free open and robust
framework for caching and optimizing PHP code.
| | 03:00 | From there, I would take a look at
actually, instead of using the Drupal Core
| | 03:05 | version of Drupal, take a look at Pressflow.
| | 03:08 | Pressflow 6 actually improved the speed
of Drupal by so much that it was wrapped
| | 03:15 | up into the core of Drupal 7.
| | 03:18 | Well they haven't stopped there;
| | 03:20 | they've actually created a Pressflow 7
version and have continued to work on
| | 03:25 | integrating performance,
scalability and the availability and testing
| | 03:29 | enhancement that Drupal as a
content management system needs.
| | 03:34 | The next tool I would take a look at is
Memcached and this can be found at memcached.org.
| | 03:41 | Memcached actually allows for object
caching more from the database side.
| | 03:46 | So when you are logged in as a site
administrator, this will dramatically
| | 03:50 | increase the performance when you're
actually going and creating pages or custom
| | 03:55 | content types or doing any type of
administration to your Drupal 7's site.
| | 04:00 | Last but not least is Varnish.
| | 04:04 | Varnish can be found at varnish-cache.
org, this is an open-source state of the
| | 04:11 | art web application accelerator.
| | 04:13 | It is installed in front of your web
server where it will cache the content
| | 04:18 | resulting in a huge performance boost,
similar to a CDN or a Content Delivery Network.
| | 04:23 | Now that we have page caching enabled,
discuss why it is important to content
| | 04:29 | management systems and looked at
additional resources for ensuring your Drupal
| | 04:33 | site perform as well, we want to make
sure we don't overlook additional tools
| | 04:39 | that can make Drupal designers
shine when it comes to theming.
| | Collapse this transcript |
| Exploring the performance settings| 00:00 | By now you may be getting tired of
talking about performance, page caching and
| | 00:05 | file compression and optimization.
| | 00:07 | However, performance is not always
Drupal's fault and you as a designer have a
| | 00:12 | couple of other tools you
can use to make sure you shine.
| | 00:15 | One of those tools is a
Yahoo's YSlow for Firefox.
| | 00:20 | This can be found at developer.yahoo.com/yslow.
| | 00:26 | YSlow analyzes web pages and suggest
ways to improve their performance based on
| | 00:32 | a set of rules for high-performance websites.
| | 00:35 | Let's take a look at actually installing
this and then taking a look at our Drupal site.
| | 00:40 | By simply clicking on the Install YSlow
for Firefox, this will take me over to
| | 00:45 | that Add-ons page and I
can click on Add to Firefox.
| | 00:49 | This may take a second to download, but
once it does we actually want to click
| | 00:52 | on the Install Now button
and then restart Firefox.
| | 00:57 | Once Firefox reloads, we can close the
Add-ons tab, go back over to our Drupal's
| | 01:05 | site and we should see a new
icon in the bottom of our page.
| | 01:10 | Right here is YSlow and if I click on
this, it should open up a window for me to
| | 01:14 | where I can then actually analyze my site.
| | 01:19 | And right off the top we can see
that our site currently grades a C.
| | 01:23 | This grade has nothing to do really with
Drupal, but more on how a site is designed.
| | 01:29 | If we take a look at some of the grades
that we are getting here and some of the
| | 01:32 | sections that it actually is displaying,
we can get a better idea of exactly
| | 01:38 | what we can do to improve our site.
| | 01:41 | The first is making fewer HTTP requests.
| | 01:44 | Well we sped that up a little bit
when we enabled page caching and optimize
| | 01:50 | our CSS in JavaScript.
| | 01:52 | However, we can take that one step
further by actually combining some of those
| | 01:56 | JavaScript files and some of those
CSS external stylesheets into one.
| | 02:00 | However the one thing I want to take a
look at, that is often overlooked when
| | 02:05 | doing any type of design or a
theming is the use of CSS sprites.
| | 02:12 | Currently this page has 13 external
background images, which means that for each
| | 02:16 | background image, there is a
call being made to the server.
| | 02:20 | We could reduce this all the way down to
a single call with the use of CSS sprites.
| | 02:26 | If you actually tab over to css-tricks
.com/css-sprites, Chris Coyier has an
| | 02:35 | excellent article on CSS Sprites:
| | 02:38 | What They Are, Why They're
Cool and How To Use Them.
| | 02:42 | I would suggesting taking a look at
this and seeing how you can improve on
| | 02:46 | the samoca website.
| | 02:48 | Tabbing back over to our Home page,
there are quite a few other areas to take a
| | 02:52 | look at and I would suggest looking at
them all and getting familiar with YSlow.
| | 02:58 | Now becoming the next Drupal rockstar
is easier once you know the right tools,
| | 03:03 | also the correct methods for
implementing them and understanding the importance
| | 03:08 | behind a fast loading Drupal site
and a slow one, but what if you have to
| | 03:13 | migrate a site from Drupal 6 to Drupal 7.
| | 03:15 | We are going to take a look at
exactly what we need to do to get your
| | 03:19 | theme migrated properly.
| | Collapse this transcript |
|
|
9. Migrating a Theme from Drupal 6 to Drupal 7Recreating HanselAndPetal content, files, and the .info file| 00:00 | With all the changes from Drupal 6 to
Drupal 7, one of the tasks that you may be
| | 00:05 | asked to do is migrating a theme.
| | 00:07 | We will be discussing the steps
involved in converting a theme from Drupal 6 to
| | 00:11 | Drupal 7, we will migrate files, create
a new theme folder, and discover how to
| | 00:17 | make slight modifications to the .info file.
| | 00:21 | This should allow us enable the theme
for Drupal 7 and the actual theme that
| | 00:25 | we're going to be taking a look at
converting is the Hansel and Petal theme
| | 00:29 | developed in the Drupal 6:
| | 00:31 | Creating and Editing Custom Theme series.
| | 00:34 | I'm going to assume that you've either
completed that series or you actually
| | 00:38 | have a real Drupal 6 site in
need of conversion to Drupal 7.
| | 00:43 | The first thing we need to do is
actually set up a Drupal 7 instance.
| | 00:46 | We also want to browse over to the
drupal.org site/download, because we want to
| | 00:52 | make sure we have the most
current core version of Drupal.
| | 00:56 | So from here, we can see that we
can download the Drupal 7.10 Core.
| | 01:00 | Go ahead and click on this, scroll
down and find the 7.10 version and then
| | 01:07 | either click on the ZIP or
the TAR file and Download it.
| | 01:12 | Here we see the drupal-7.10 Core, and I
realize by the time you begin the watch
| | 01:18 | this that, that Core may have changed,
but you want to make sure that you do get
| | 01:22 | the latest Core for this process.
| | 01:25 | Go ahead and extract the Drupal Core,
and then once I have this folder in place,
| | 01:30 | what I want to do is actually right-
click on it, Copy it, go to my web root;
| | 01:34 | in this case it's my Sites folder, and
I'm going to Paste it in place, and then
| | 01:39 | I want to rename this to hanselpetal7.
| | 01:46 | Next I need to actually
open up the Acquia Dev Desktop.
| | 01:50 | From here, I want to go to Settings
>Sites, and then click on Import.
| | 01:56 | I then want to browse to that hanselpetal7
site that I just dropped into the Sites folder.
| | 02:03 | So click Browse, locate
hanselpetal7, and then click Choose.
| | 02:09 | I also want to create a new database.
| | 02:12 | So choose the Create a new database
option, and for the New Database name, we
| | 02:16 | will call it hanselpetal7.
| | 02:21 | Under Domain, for the Server, we're
going to call it hanselpetal7 as well, and
| | 02:27 | then I'm going to click on the Import button.
| | 02:31 | This should now open up in the
browser and be under the Select an
| | 02:35 | installation profile window.
| | 02:36 | I'm going to go ahead and leave the
Standard installation as the default and
| | 02:40 | click on Save and continue.
| | 02:44 | For the Choose a language option, I
will leave English as the default and then
| | 02:49 | once again click on Save and continue.
| | 02:53 | As this runs through the installation
profile, we're going to be presented with
| | 02:57 | a screen that's going to ask us
to enter some more information.
| | 03:00 | For the Site name, we'll actually go
ahead and leave it as hanselpetal7.
| | 03:05 | And for the Site e-mail address, go
ahead and enter an e-mail that you're going
| | 03:08 | to be able to remember.
| | 03:10 | In this case, I'm going to
enter admin@localhost.com.
| | 03:14 | For the Site Maintenance Account
information, for the Username field, let's go
| | 03:18 | ahead and add admin as our username.
| | 03:22 | For the Password, we will add drupal.
| | 03:24 | Once again, this is for demonstration
purposes only and I'm not worried about
| | 03:29 | the Password strength.
| | 03:30 | I'm going to go ahead and leave the
remaining defaults and click on Save and continue.
| | 03:36 | Once the Drupal installation is
complete, I can go ahead and click on the
| | 03:40 | Visit your new site link.
| | 03:42 | Now that we have our base Drupal 7
instance for the Hansel and Petal theme, we
| | 03:47 | need to populate it with some data.
| | 03:49 | Let's begin by browsing
back to the Acquia Dev Desktop.
| | 03:53 | Go ahead and click on the OK button to
take yourself back to the main interface
| | 03:58 | and then click on Manage my database.
| | 04:03 | Choose the hanselpetal7 database.
| | 04:07 | And then for Structure, make sure that
tab has focus and scroll to the bottom.
| | 04:13 | Click the Check All link and
then in the drop-down choose Drop.
| | 04:17 | It's going to ask, do we really want to do this?
| | 04:21 | We're going to go ahead and say Yes.
| | 04:23 | And what we have done is successfully
dropped all of the tables, along with the
| | 04:27 | data, for the default Drupal 7 instance.
| | 04:31 | The next thing we need to do is
actually import back in all the content that
| | 04:36 | makes up the Hansel and Petal website data.
| | 04:40 | We can do that by clicking on the Import tab.
| | 04:44 | We can then click on the Browse button,
and from the Exercise Files, we want to
| | 04:49 | locate 09_01>completed folder, and
click on the hanselpetal7.sql.zip file.
| | 04:59 | Click on the Open button and
then click on the Go button.
| | 05:04 | Verify the action was successful
and then browse back over to the
| | 05:08 | hanselpetal7 website.
| | 05:12 | Go ahead and Refresh the page.
| | 05:14 | Now we're starting to see the data
that makes up the hanselpetal website.
| | 05:19 | However, there are a few
more steps that we need to take.
| | 05:23 | One of those is that the data in the
database may have a reference to images or
| | 05:27 | files that were uploaded
through the Site Administration Panel.
| | 05:31 | Those images would have resided in the
files folder of the previous hansel and
| | 05:36 | petal Drupal 6 instance.
| | 05:39 | We need to actually copy those files
over to the new Drupal 7 files folder.
| | 05:45 | If we browse back over to our Finder,
we can locate the Exercise Files, scroll
| | 05:51 | down to 09_01, and then
identify the files folder.
| | 05:57 | We can right-click on this folder and say Copy.
| | 06:01 | Then go to your web root;
| | 06:02 | in this case, mine is Sites, hanselpetal7,
sites folder, and then inside of here
| | 06:09 | you're going to see the hanselpetal7
folder, which contains the files folder.
| | 06:14 | I want to right-click and Paste this in place.
| | 06:17 | When it prompts you to
replace, go ahead and Replace it.
| | 06:20 | Now with the database complete and the
files moved over, let's browse back to
| | 06:26 | the website and see if we see any changes.
| | 06:30 | Go ahead and Refresh the page, and now
I'm starting to see references to images
| | 06:36 | that were uploaded to the database now display.
| | 06:40 | Now that our data and files are in
place, let's begin the process of creating
| | 06:44 | the Drupal 7 theme for Hansel and Petal.
| | 06:46 | Go ahead and browse to your editor, and
in my case I need to make a reference to
| | 06:52 | the new hanselpetal7 website.
| | 06:55 | So I'm going to right-click and say
New>PHP Project, give it a name of
| | 07:01 | hanselpetal7, uncheck the Use default
location, and then click on the Browse
| | 07:07 | button to locate the Sites>hanselpetal7 folder.
| | 07:12 | Click on Open and then Finish.
| | 07:16 | Now that I have a new folder to work
with, I can expand the folder, locate
| | 07:21 | the sites>all>themes folder, and inside of here
I need to actually create the hanselpetal theme.
| | 07:30 | If I expand the hanselpetal6
Drupal 6 instance and look inside of
| | 07:35 | the sites>all>themes folder, I
can see that that theme name was
| | 07:39 | called hanselandpetal.
| | 07:40 | I'll go ahead and do that now.
| | 07:43 | Right-click, say New>Folder,
and call it hanselandpetal.
| | 07:53 | Scroll back up to my Drupal 6 instance,
expand the hanselandpetal folder, and
| | 07:59 | actually grab the images folder and Copy it.
| | 08:03 | And then we're going to go back to our
Drupal 7 instance and I'm actually going
| | 08:07 | to organize the files a little bit better.
| | 08:09 | So I'm going to right-click and say
New>Folder, assets, and then Paste the
| | 08:18 | images folder inside of there.
| | 08:19 | I'm going to scroll back up, and the
other thing that I want to be able to
| | 08:28 | pull over is the CSS.
| | 08:31 | Now, I've already made some changes
to the CSS to make sure that everything
| | 08:35 | works properly and I've placed a copy
of that actually in the Exercise folder.
| | 08:40 | So let's actually grab that from there.
| | 08:42 | If I scroll to the Exercise Files
and then scroll back down to 09_01, and
| | 08:50 | then look inside of the
hanselandpetal folder here, and inside of assets, I
| | 08:55 | can see the css folder.
| | 08:56 | I'm simply going to Copy this into my
assets folder for my Drupal 7 instance.
| | 09:06 | Next I want to scroll back up to the
Drupal 6 instance and take a look at the
| | 09:14 | hanselandpetal.info file.
| | 09:16 | I'm simply going to double-click on it.
| | 09:19 | I'm then going to scroll down to my
Drupal 7 instance, right-click on the
| | 09:23 | hanselandpetal theme folder and say New
>File and create a hanselandpetal.info
| | 09:32 | file for my Drupal 7 instance.
| | 09:36 | The name and the description can
come across without any changes.
| | 09:40 | So I'm simply going to
Copy those and Paste them.
| | 09:45 | Now, if I go back to the Drupal 6 instance,
the version and the engine I do not need.
| | 09:51 | However, the core I do, but the core
here is equal to 6.x. I'm going to Copy
| | 09:56 | this, Paste it in, and change the 6 to be 7.
| | 10:02 | We want to be able to use
this theme with Drupal 7.
| | 10:05 | I'm going to go and hit Save, and then
I'm going to Tab back over and take a
| | 10:10 | look and see what else is in here.
| | 10:11 | I'm going to actually copy the regions
and then we're actually going to change
| | 10:16 | some of the region names to better fit Drupal 7.
| | 10:20 | I'm going to Copy those and Paste them in.
| | 10:26 | For the sake of time, I'm actually
going to open up the Exercise 09_01 folder
| | 10:31 | and then open up the hanselandpetal.info file.
| | 10:34 | Within here I'm actually going to
highlight everything and Copy it and then
| | 10:37 | Paste it over my hanselandpetal.
info file for my Drupal 7 instance.
| | 10:43 | If we take a look at the new
metadata added from the completed
| | 10:47 | hanselandpetal.info, we can see
references to style sheets that have been moved
| | 10:52 | into the assets>css folder.
| | 10:55 | We can also see that left and right
sidebar have changed to Sidebar First and
| | 11:00 | Sidebar Second, as well as we've added
Help, Page Top, and Page Bottom regions.
| | 11:07 | The remaining regions are there,
they've just been moved around a little bit
| | 11:10 | to make more sense.
| | 11:12 | Now, if I Save this and I Tab over to my
Drupal instance and login, I should now
| | 11:22 | be able to navigate to the Appearance
interface and see my Hansel and Petal
| | 11:27 | theme in the Disabled Themes section.
| | 11:29 | I can now click on Enable and set
default and then close the Appearance
| | 11:35 | interface and see my themes start to take shape.
| | 11:41 | I can actually compare this with a
Hansel and Petal Drupal 6 theme and see that
| | 11:46 | I'm partially there for what I need to migrate.
| | 11:49 | Remember, some things have changed, like
the name for the navigational elements,
| | 11:54 | and I don't quite yet have the
content into the right regions.
| | 11:58 | So let's take a look at doing that now.
| | 12:01 | If I go back to my Drupal 7 instance,
click on Structure, and then Blocks, I can
| | 12:09 | now assign the content to the correct regions.
| | 12:12 | If I scroll down to the Help, I
want to make sure that System help is
| | 12:15 | assigned, and it is.
| | 12:17 | If I scroll up to Content, I do see that
the Main page content is assigned properly.
| | 12:25 | For the Sidebar First, I do not have
anything in there yet, which is why those
| | 12:30 | blocks aren't displaying.
| | 12:31 | So I need to scroll down and find
the data for Navigation, User login,
| | 12:39 | and Recent blog posts.
| | 12:44 | For Sidebar Second, I want to make sure
I put the Search form and the Syndicate
| | 12:51 | block into those regions.
| | 12:54 | For the Footer, Main menu, which is
currently there, and then for Footer Content
| | 13:01 | 1, Who's new, Who's online;
| | 13:04 | Footer Content 2, Ads;
| | 13:07 | and Footer Content 3,
Drupal News feed latest items.
| | 13:13 | With those in place, let me hit Save
blocks, close the Block interface and then
| | 13:19 | take a look at the home page.
| | 13:21 | We're not going to see much change
quite yet, because remember, we renamed some
| | 13:26 | of the regions and Drupal 7 has moved
some of the variables into their own
| | 13:31 | regions, and we're going to need
to take a look at addressing that.
| | 13:35 | After migrating the data and files
from the Hansel and Petal theme, modifying
| | 13:40 | the .info file to be Drupal 7 ready
and rearranging block content to display
| | 13:45 | properly in our new regions, you
begin to get a feel for how a theme
| | 13:49 | migration should be handled.
| | 13:51 | Next we will begin converting the page.
tpl to address the new HTML template and
| | 13:57 | how to output new regions and variables.
| | Collapse this transcript |
| Adding an HTML template and modifying page templates| 00:00 | Drupal 7 has added new templates and
has changed the template suggestions, all
| | 00:06 | of which we will discuss when we take
a look at how to convert the existing
| | 00:10 | Drupal 6 page.tpl templates.
| | 00:13 | We will also discuss what page
variables and Regions have been added and how to
| | 00:18 | migrate from Drupal 6 to Drupal 7.
| | 00:21 | Let's begin by browsing to
your editor and within the
| | 00:24 | hanselpetal6>sites>all>themes>
hanselandpetal theme, what I want to do is locate
| | 00:31 | the page-front page and page-node.tpl templates.
| | 00:38 | Let's go and begin with a front page.
| | 00:40 | So if I actually Copy this and Paste it into our
| | 00:45 | hanselpetal7>sites>all>themes>
hanselandpetal templates folder, which we still
| | 00:50 |
| | 00:52 | need to create, create that now, and
let's go ahead and open this and take a
| | 01:06 | look at exactly what the Drupal 6
version looks like and what we need to do in
| | 01:12 | order to get this to work properly in Drupal 7.
| | 01:16 | First of all, we know some of the page
variables have changed, as well as if we
| | 01:21 | scroll down we know that the page.tpl
no longer contains the HTML wrapper.
| | 01:27 | So let's tackle this first.
| | 01:29 | Let's scroll up to modules>system>html.
tpl.php and just Copy this and Paste it
| | 01:40 | into our templates folder.
| | 01:45 | Now that I have the Drupal 7 HTML
template controlling the wrapper, I can delete
| | 01:51 | it from my page-front.tpl.
php file. Let's do that now.
| | 01:58 | Highlight everything, including the
opening body element, scroll to the bottom,
| | 02:04 | and then delete the closing HTML
and body element, and then hit Save.
| | 02:11 | So that will take care of the HTML wrapper.
| | 02:14 | The other thing I need to take a
look at is the template suggestion name.
| | 02:19 | We know in Drupal 7 that it's no longer
page-, but instead it should be page--front.
| | 02:27 | So close it real quick and then let's
rename this, add the additional dash and hit OK.
| | 02:37 | Now that we have the HTML wrapper
taken care of, the template suggestion name
| | 02:42 | corrected, go ahead and open back up
the file, and then let's replace the
| | 02:47 | documentation here for the
variables with the correct version.
| | 02:51 | Scroll back up to our modules folder,
open up the page.tpl, and let's Copy
| | 02:58 | all the way down to the closing PHP
tag, Copy it, open our other page back
| | 03:05 | up, and replace it.
| | 03:10 | This way if we need to go back and
reference any of the new variables we're not
| | 03:13 | looking at old documentation.
| | 03:15 | Go ahead and Save that, and then let's
scroll down a little bit and take a look
| | 03:20 | at exactly what we have.
| | 03:22 | The first thing that I see that we need
to address has to do with the search_box.
| | 03:28 | And if I scroll down a little bit, one
thing that you need to be aware of is
| | 03:33 | that the search_box has actually been
moved into its own block and can no longer
| | 03:38 | be referenced the way that it
currently is inside of Drupal 7.
| | 03:44 | Instead, we need to replace this with a
snippet of code and a Drupal 7 function.
| | 03:51 | If we scroll up to our Exercise
folder and take a look at the 09_02>readme,
| | 04:02 | and then scroll down to the bottom I have
that snippet of code for us to copy and paste.
| | 04:07 | Highlight it, Copy it, go back to the
page--front and replace the search_box
| | 04:14 | section with that snippet of code.
| | 04:20 | Go ahead and Save your page
and let's take a look at this.
| | 04:23 | What this is saying is go ahead and
create a copy of the search block, put it
| | 04:30 | into this variable so that I can then
turn around and render it, and this is the
| | 04:35 | new way of actually being able to
include a search form inside of a template.
| | 04:40 | Then the next thing that we need to take a
look at has to do with the header region.
| | 04:46 | It's no longer a variable, but instead needs
to be rendered as part of the page variable.
| | 04:52 | So let's modify this so
that it prints out correctly.
| | 04:55 | We're going to replace the !empty with
the $page variable, and instead of open
| | 05:02 |
| | 05:03 | and closed parens, those are
actually going to be replaced with open and
| | 05:08 | closed square brackets.
| | 05:10 | Let's highlight the open and closed
header paren and delete it, and then add
| | 05:14 | square brackets and then single
quotations and the region name of header.
| | 05:19 | We then need to replace
the print statement as well.
| | 05:22 | We can do that by highlighting the
header variable, deleting it, and then typing
| | 05:27 | out the following, render($
page) ['header'], and save.
| | 05:36 | So now we successfully replace the
header variable to print the header region.
| | 05:43 | Next we need to take a look at the navigation.
| | 05:46 | When it comes to navigation, primary
links and secondary links no longer exist.
| | 05:51 | In fact, they've been replaced
with main menu and secondary menu.
| | 05:57 | For sake of typing, I'm
actually going to open up the completed
| | 06:00 | page-front.tpl.php file inside of the
Exercise folder and Copy and Paste in
| | 06:08 | the navigational elements that need to be
in place for Drupal 7 to output it correctly.
| | 06:14 | Open up the page--front.tpl.php,
scroll down to where you will find the
| | 06:23 | navigation section, and Copy the
whole containing div along with the logic.
| | 06:32 | Tab back to the page--front template
inside of your Drupal 7 instance, and
| | 06:38 | highlight the div navigational area for both
the primary and secondary links and replace it.
| | 06:48 | Now, what we've done here is
replaced them with a conditional logic.
| | 06:52 | So instead of saying, if not empty
primary links, we are saying if main menu
| | 06:56 | exists, then go ahead and print them out.
| | 07:00 | Now we need to take a look
at the left and right regions.
| | 07:06 | Remember, we have replaced the left
and right regions with Sidebar First
| | 07:12 | and Sidebar Second.
| | 07:14 | Let's go ahead and change the
conditional logic so that it reflects properly.
| | 07:28 | Then we need to render page sidebar_first.
| | 07:31 | So we need to print and then render
statement with open and close parens
| | 07:39 | followed by the page variable, square brackets.
| | 07:43 | We can Copy the beginning of the
conditional statement, scroll down to the
| | 07:56 | empty right region, and Paste that
in place, and then change this from
| | 08:02 | sidebar_first to sidebar_second.
| | 08:06 | We can also scroll back up and Copy the
print render statement, scroll back down
| | 08:13 | and replace the print right variable
with this as well, and change it from
| | 08:17 | sidebar_first to sidebar_second.
| | 08:20 | Hopefully you're starting to see a pattern here.
| | 08:23 | For sake of typing, I'm actually going
to open back up the page--front from the
| | 08:29 | Exercise Files, highlight everything,
Copy it, go back to my template, highlight
| | 08:38 | everything, and Paste.
| | 08:40 | I'm then going to Save this and we can
do a quick look to see what's changed.
| | 08:46 | Logo, site_name, and site_slogan have
all remained the same, the search_box has
| | 08:51 | been replaced with the module_invoke
to pull in the search block_view, page
| | 08:56 | header has been changed to render
correctly, navigational elements have been
| | 09:01 | changed to render correctly, sidebar_
first and sidebar_second have been changed
| | 09:05 | to render correctly.
| | 09:07 | And if we scroll down to the content
section, which was the only thing really
| | 09:10 | left, we have the introduction of title_
prefix and title_suffix, along with the
| | 09:15 | title, and then the rendering of the content
followed by messages tab, help, and feed_icons.
| | 09:24 | Now, if I Save this and then browse
back over to Firefox and then click on the
| | 09:30 | Performance tab and Clear all the
cache, and then close the Performance
| | 09:36 | interface, I should see my
theme start to come into picture.
| | 09:40 | If I actually compare this to the home
page on the hanselandpental6 theme, I
| | 09:47 | should start to see some similarities.
| | 09:49 | I still have a little bit here left to do.
| | 09:55 | So let's browse back over to our
editor and close the page--front template,
| | 10:01 | along with any other open tabs that
you may have, and let's concentrate now
| | 10:06 | on the page.tpl.php.
| | 10:10 | Once again for sake of time, since
hopefully you're seeing a pattern here
| | 10:14 | develop, I'm actually going to
scroll up to the top of the Exercise Files
| | 10:19 | and Copy the page.tpl and the page--node--6.
tpl and Paste those into my templates folder.
| | 10:35 | I'm then going to browse back over
to my Drupal instance, click on the
| | 10:39 | Performance tab, Clear all the cache,
close the Performance interface, and then
| | 10:46 | quickly browse to our other pages;
| | 10:50 | home, about us, services, and blog.
| | 10:57 | We have converted the previous
theme's page.tpl into the new html.tpl and
| | 11:03 | page.tpl templates, along with the
different template suggestion naming
| | 11:07 | conventions, modified the page
variables and regions, removed deprecated
| | 11:13 | variables, and added variables that have
been moved into their own blocks and regions.
| | 11:18 | Next, we will look at converting node
templates to work with our migration from
| | 11:23 | Drupal 6 to Drupal 7.
| | Collapse this transcript |
| Converting node templates and page variables| 00:00 | As we continue to convert Drupal 6 node
templates, we will take a look at what
| | 00:05 | is changed since Drupal 7, including
template suggestions, page variables,
| | 00:10 | the content array, and how to hide and
render individual fields and variables so
| | 00:15 | that we can control the exact
HTML output needed for theming.
| | 00:20 | If we compare our current version to our
Drupal 6 version, we can see that there
| | 00:25 | are a couple of different
things that we need to change.
| | 00:28 | First of all, the no display in the
middle actually has a heading that does not
| | 00:35 | have a background image.
| | 00:36 | Also if we scroll down and we take a
look at exactly how the Read more, Add new
| | 00:41 | comment is being displayed, the Drupal 6
version has a Shares this link and this
| | 00:47 | is something new in Drupal 7.
| | 00:49 | The way that the comments are rendered,
we no longer actually get to have a
| | 00:53 | combination of comments with the Add
new comment, instead the way that it's
| | 00:58 | rendered is actually with the Add new
comment and if I scroll down a little bit,
| | 01:03 | you'll actually see the comment
count alongside the Add new comment.
| | 01:07 | Those are all things that we
are going to need to address.
| | 01:10 | Go ahead and browse over
to your Editor, open up the
| | 01:15 | hanselpetal6>sites>all>themes>hanselandpetal
folder and let's take a look at the node.tpl.php.
| | 01:24 | What we want to do is actually look at
exactly what we need to change in here.
| | 01:27 | For instance, items like picture have
been changed to user picture and the page
| | 01:34 | title actually has a title prefix
and a title suffix to allow modules to
| | 01:39 | display content around it.
| | 01:42 | Submitted has actually been replaced
with display_submitted and if we actually
| | 01:47 | scroll down to content, remember
there's now a content array that allows you to
| | 01:52 | be able to display different node
items that are part of that array and those
| | 01:56 | variables can be hidden and
shown later within a template.
| | 02:01 | The other thing not so noticeable
is that clear-block has actually been
| | 02:04 | replaced with clear-fix.
| | 02:06 | So let's take a look at the best practices for
migrating this over to our Drupal 7 instance.
| | 02:12 | Scroll down to your
| | 02:13 | hanselpetal7>sites>all>themes>
hanselandpetal>templates folder.
| | 02:21 | What we wan to do is actually take a
copy of the Drupal 6 version and paste it
| | 02:27 | into our templates folder, lets do that now.
| | 02:40 | Now that we have that in there, let's go
and open up that version, let's compare
| | 02:44 | that to the default modules>node.
tpl template that Drupal 7 utilizes.
| | 02:56 | The first thing I want to do
is replace the documentation.
| | 02:58 | So I am going to highlight it,
including the opening div copy it, go to my
| | 03:09 | template for the Drupal 6 version
and replace the code in the window.
| | 03:14 | The next thing I want to do is
replace picture with user picture.
| | 03:24 | So once again copy and paste.
| | 03:32 | If we'll look at how the title is
being displayed, we notice that the title
| | 03:37 | prefix and title suffix is not part of this.
| | 03:40 | So let's go back over to our node.tpl
from our Drupal 7 version and simply copy
| | 03:46 | the section of code and replace our version.
| | 03:50 | Now let's take a look at the meta div.
| | 03:55 | Inside here I have $submitted and $terms.
| | 03:57 | If we take a look at what the
equivalent is in Drupal 7, we can see that if
| | 04:03 | display_submitted is the
new conditional statement.
| | 04:07 | So let's copy that and replace
the one in our templates folder.
| | 04:15 | Let's also take a look at terms.
| | 04:19 | If you notice we don't
actually see terms anymore.
| | 04:23 | The reason behind that is because
terms have actually been moved into the
| | 04:27 | content array and now display as links.
| | 04:31 | So let's go ahead and bypass that for a
second and then take a look at exactly
| | 04:35 | how the content is being displayed.
| | 04:37 | I am physically going to copy this div
and then go back to our instance, I am
| | 04:42 | going to remove terms, because remember
terms are no longer part of Drupal 7 and
| | 04:50 | then right above div class="content" I
am going to paste in the new way that
| | 04:56 | content is used inside of Drupal 7.
| | 04:59 | We can see that the class="content"
is the same for our Drupal 7 and Drupal
| | 05:04 | 6 instances, so I am going to simply
remove or delete this particular block of code.
| | 05:12 | The next thing we have is the share this link.
| | 05:16 | This still uses the node_url so
there's nothing to currently change here.
| | 05:21 | However when we get down to print links,
we no longer print the link's variable
| | 05:27 | since its part of the content variable array.
| | 05:30 | And if I flip back over to my Drupal's
7 version, I can copy and then replace
| | 05:37 | this print statement.
| | 05:41 | If I've done everything correctly I
should be able to the save this node.tpl,
| | 05:46 | browse back over to my Drupal instance,
click on the Performance tab and clear
| | 05:51 | all the cache and then
close the Performance interface.
| | 05:57 | I now see the share this link and the
Read more and Add new comment are also
| | 06:02 | being displayed properly with the node.
| | 06:05 | If I continue to scroll down the page I
can see that the layout is starting to
| | 06:09 | take shape exactly the way I wanted.
| | 06:11 | However when I get to a blog post
that's currently being displayed, I'm seeing
| | 06:16 | some information that I want to be able to hide.
| | 06:19 | Let's compare the blog post in our
Drupal 7 version to the Drupal 6.
| | 06:27 | From here all I simply see is the share
this link along with the Add new comment
| | 06:32 | or comment count and the admin's
blog for who it is that submitted this
| | 06:38 | particular blog post.
| | 06:40 | I compare that to my Drupal 7 version,
I'm seeing a little bit more information
| | 06:44 | than what I really need.
| | 06:46 | Let's actually browse back over to
our Editor, close the node.tpl and then
| | 06:52 |
| | 06:52 | actually scroll up and take a look
at the node-blog.tpl.php template from
| | 07:00 | our Drupal 6 instance.
| | 07:03 | I'm going to copy this and I am going
to paste it into my templates folder.
| | 07:09 | When I do, I also need to rename it,
because remember based off Temple
| | 07:13 | suggestions is no longer
node-blog, but node--blog.
| | 07:21 | Go ahead and rename it now and for
sake of time I'm actually getting going to
| | 07:31 | open up this note--blog.tpl.php that
I've copied in and then go up to my
| | 07:38 | Exercise Files, open up the 09_03
folder and open up this version.
| | 07:49 | I'm then going to copy
and replace and then Save.
| | 07:54 | Now one thing that I want you to take a
look at is all the code right smack in
| | 08:00 | front of you that has to
deal with the content array.
| | 08:04 | In order for me to get the Drupal 7
version to display properly, I had to
| | 08:10 | traverse the content array looking at
the links, then the blog and then the
| | 08:17 | links blog_username_blog, href simply
just to get the hyperlink for the blog
| | 08:24 | submitter, followed by the
rendering of the content links, blog links,
| | 08:30 | blog_username_blogs, title in order
for it to be able to say admin blog.
| | 08:37 | The short story here is for you to
specifically take a look at what the
| | 08:41 | content array holds.
| | 08:44 | You can do this by utilizing a tool
such as theme developer and traverse
| | 08:49 | through the content array to see all
the information that is now at your
| | 08:53 | disposal to be able to print out.
| | 08:56 | This functionality actually gives us
as a Drupal themer a lot more control of
| | 09:01 | the information and the fine-tuning
that you may need in order to display
| | 09:05 | content that you previously would
have had to do with some sort of advanced
| | 09:09 | theming functions or pre-process or
process functions in order to build out the
| | 09:14 | information into a variable
before you could actually print it.
| | 09:18 | If I actually save this and then browse
back over to my Drupal instance, click
| | 09:23 | on Performance and in Clear all cache
and then close the Performance window and
| | 09:31 | then scroll down, I can start to see
that and now for my blog post if I have a
| | 09:37 | comment it displays and if I do not, it
shows Add new comment and prior to where
| | 09:44 | we actually saw Add new comment and one
comment side by side, those are now gone
| | 09:49 | because I was able to pull
that information out properly.
| | 09:53 | If you take a look at the Exercise
Files, there are a couple more nodes that
| | 09:57 | need to be replaced.
| | 09:58 | I am going to actually going to let
you do that and then in the next video we
| | 10:03 | will take a look at exactly
how those look side-by-side.
| | 10:07 | So since we have now converted four
different type of node templates modified
| | 10:12 | the page variables and learned how
to hide and render individual content
| | 10:16 | variables to display the HTML exactly
how we need it for our theming needs.
| | 10:21 | We will next tackle block templates and the
conversion process for Drupal 6 to Drupal 7.
| | Collapse this transcript |
| Converting block templates and page variables| 00:00 | As we continue the process of
migrating from Drupal 6 to Drupal 7, we're
| | 00:05 | beginning to take a look at block templates.
| | 00:08 | However, for this particular design,
the only thing that's really changing is
| | 00:12 | the heading on the blocks from h2 to h3 to h4.
| | 00:17 | So we'll go ahead and take a look at
exactly what we need to do, what the
| | 00:21 | process of migration for this
particular section is very simple.
| | 00:25 | If we take a look at the Hansel &
Petal Drupal 6 version and then open up
| | 00:30 | Firebug and take a look at the left-
hand side blocks, we can see that for this
| | 00:36 | particular block for admin,
it hasn't heading of h4.
| | 00:41 | If I introspect the recent
blocks post, I see a heading of h2.
| | 00:46 | And then if I take a look finally at
the blocks on the right-hand side, I see
| | 00:51 | that they have a heading of h3, and
this is all based off of how the block
| | 00:55 | templates are working.
| | 00:57 | So let's actually browse over
to our editor and take a look.
| | 01:01 | The first thing I am actually
going to do is grab a hold of the
| | 01:03 | modules>block>block.tpl.
| | 01:07 | I am going to copy it and I
am going to paste it into our
| | 01:11 | sites>all>themes>
hanselandpetal>templates folder.
| | 01:17 | Right-click, paste and
then go ahead and open it.
| | 01:22 | If I scroll down and take a look, we
see that currently, the default is an h2
| | 01:27 | heading for any of the titles.
| | 01:30 | So as far as actually doing a migration
of this point, we are perfect for what
| | 01:34 | we actually have and there is no
real change that needs to take place.
| | 01:38 | But for the right-hand sidebar, if I
want to make sure that all the blocks that
| | 01:42 | are part of that region have a
different heading, I can simply make a copy of
| | 01:47 | this block and rename it based
off the template suggestions to
| | 01:50 | block--sidebar_second.tpl.
php. Let's do that now.
| | 01:58 | I am going to copy and paste the same
template back in and then give it the new
| | 02:06 | name based off that template suggestion.
| | 02:08 | So block--sidebar_second.tpl.php.
| | 02:20 | I am going to go ahead and click OK
and then open up that block, scroll down,
| | 02:27 | and change the h2 to be an h4.
| | 02:32 | Go ahead and save that template,
browse back over to our Drupal 7 instance,
| | 02:38 | close Firebug for a second and then click on
the Performance tab and clear all the cache.
| | 02:44 | Close the performance interface and
we're not going to see any real change
| | 02:48 | unless we actually take a
look at it through Firebug.
| | 02:50 | So let's open up Firebug and
inspect the Search element.
| | 02:55 | We can see that the title on here is a
title of h4 and if we scroll down and
| | 02:59 | take a look at the syndicate block,
we should also see an h4 and we do.
| | 03:04 | Go ahead and close Firebug, scroll back
up to the top and now if we start to do
| | 03:09 | a comparison once again between our
Hansel & Petal 7 site and our Hansel & Petal
| | 03:14 | 6 site, we should start to
see similarities between these.
| | 03:18 | The only thing that we really have left
is to clean up some of the CSS to make
| | 03:22 | sure that these themes completely match 100%.
| | 03:26 | So while the only thing that we
currently change was headings for the title, the
| | 03:30 | process of converting block
templates is not very complicated.
| | 03:34 | Let's move on to tackling the remaining
miscellaneous template conversions and
| | 03:38 | CSS cleanup in Drupal 7.
| | Collapse this transcript |
| Converting miscellaneous templates and cleaning up CSS| 00:00 | Now that we've migrated all of the
templates, the last thing to really do is
| | 00:04 | take a look at a side-by-side
comparison of the Drupal 6 and Drupal 7 sites and
| | 00:09 | see if there are any CSS changes that
need to be applied in order to get the two
| | 00:14 | versions to look alike.
| | 00:16 | The first thing I am taking a look at
here is the homepage on the Hansel &
| | 00:19 | Petal Drupal 7 version.
| | 00:22 | I can distinctly see a background
graphic being applied to the heading and then
| | 00:27 | if I tab over to the Hansel & Petal
Drupal 6 version, I don't see that.
| | 00:32 | So let's tab back over to the Hansel &
Petal Drupal 7 version and using Firebug
| | 00:37 | actually take a look at what's causing this.
| | 00:40 | If I click on the element and
inspect it, I can see that this is actually
| | 00:46 | a block system main.
| | 00:49 | So remember, with Drupal 7,
content was moved into its own region.
| | 00:54 | Because of this it became a block and
the styling from the migration says that
| | 00:59 | any block gets this background graphic.
| | 01:02 | Well, we need to modify this to remove
the background graphic for the specific ID.
| | 01:08 | So if I actually highlight the ID,
copy it and then browse back over to my
| | 01:14 | editor and scroll down to hanselpetal7>
sites>all>themes>hanselandpetal7>assets,
| | 01:23 | and then open up my CSS folder and go
to my style.css, I can scroll down to the
| | 01:29 | bottom of the page and add
a rule for these overrides.
| | 01:32 | First of all, I'll make a comment of
DRUPAL 7 OVERRIDES and then add a reference
| | 01:42 | to that particular ID.
| | 01:43 | Next, I want to say background: none.
| | 01:48 | I am going to save this, browse back over
to my Drupal 7 instance and hit Refresh.
| | 01:55 | I have now removed that background graphic.
| | 01:58 | The other thing I want to take a look
at is if I scroll down to the bottom of
| | 02:02 | the page, I can see that my footer
navigation is kind of hugging to the bottom
| | 02:08 | and if I compare it to the Drupal 6
version, I can see that I actually have a
| | 02:13 | little bit of space there.
| | 02:14 | So it's more evened out.
| | 02:16 | Go ahead and tap back over to Drupal
7 and then inspect this with Firebug.
| | 02:23 | I can see this it belongs to the block-
system-main-menu and if I select this
| | 02:28 | div, I can see that any block
gets a margin-bottom of 1em.
| | 02:35 | I need to override this.
| | 02:37 | So again, I'm going to click on the ID,
copy the name of the ID, tab back over
| | 02:43 | to my editor, and add another
override, this time for the ID of
| | 02:48 | block-system-main-menu.
| | 02:53 | I want to give this a margin-bottom of 0.
| | 02:57 | Go ahead and save this, tab back over
to my Drupal 7 instance and hit Refresh.
| | 03:03 | I now see the navigational element
pop back up and be more in line with
| | 03:08 | the Drupal 6 version.
| | 03:09 | There's only one other thing I want to take
a look at, and that is on the Services page.
| | 03:14 | For the Services page, it's actually
quite short and that's because with part of
| | 03:19 | the migration and even on the existing
Drupal 6 theme, they decided to hide the
| | 03:25 | sidebars, but not
actually expand the page content.
| | 03:29 | While it's not part of the Drupal 6
theme, I think it would make sense to
| | 03:33 | actually expand the content on the
page since there is no sidebar to display.
| | 03:38 | So let's actually use Firebug
and inspect this particular page.
| | 03:42 | If I scroll the top, I can see that it's
actually called page-node-6 and this is
| | 03:50 | the class name that's being
added for the specific note.
| | 03:54 | I can then click on the div with the
ID of Main and see where this particular
| | 03:59 | width of 390 pixels is being set.
| | 04:02 | Let's go ahead and widen that a little bit.
| | 04:05 | Tab back over to our editor, scroll
down and remember, this is a class, so we
| | 04:10 | are going to do a .page-node-6 #main.
| | 04:17 | The rule for this is going
to be width: 700 pixels.
| | 04:24 | Save that, tab back over to my Drupal
7 instance, close Firebug, and refresh.
| | 04:31 | So there we have it.
| | 04:32 | We've completed our migration from
Drupal 6 to Drupal 7 and I hope that you can
| | 04:37 | see that it is actually quite simple
if you do it on a step-by-step basis.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | I wanted to say thank you for choosing
lynda.com for learning the insights to
| | 00:04 | creating and customizing themes in Drupal 7.
| | 00:07 | While what we covered may seem to be a
lot of information, I guarantee it's only
| | 00:12 | the basics and that once you
familiarize yourself with all the tools and
| | 00:16 | techniques available to you as either a
designer or a developer, you'll come to
| | 00:21 | appreciate the power behind a great
CMS and framework that Drupal provides.
| | 00:26 | So what's next and where do I go from here?
| | 00:29 | I am glad you asked.
| | 00:31 | Theming is only limited by your
imagination and your PHP skills.
| | 00:36 | With topics such as advanced theming
that include manipulating the Drupal Core
| | 00:41 | and use of the template.php file to
hook and alter your way to output whatever
| | 00:47 | you tell Drupal to do.
| | 00:48 | Before I leave you, I wanted to point
out one more resource that you may find
| | 00:52 | advantageous to you when it
comes to theming and that is the
| | 00:55 | drupal.org/documentation/theme site.
| | 00:59 | This will provide you with a theming
guide that may cover topics or techniques
| | 01:05 | that weren't addressed in this series.
| | 01:08 | Until next time, happy Drupaling!
| | Collapse this transcript |
|
|
