IntroductionWelcome| 00:00 | (Music playing.)
| | 00:03 | Hi! I am Chris Charlton. Welcome to Drupal
| | 00:06 | Creating and Editing Custom Themes.
| | 00:08 | In this course, we will explore all of
the tools and techniques needed to improve
| | 00:12 | the design of a Drupal website by
building and implementing custom themes.
| | 00:17 | We will begin by building a basic
Drupal website with a default theme and
| | 00:21 | getting familiar with the tools
every Drupal theme designer needs.
| | 00:25 | I will go through how to control and
build on top of the standard themes
| | 00:28 | that come with Drupal 6.
| | 00:30 | Then we will create a custom theme for
Drupal by integrating graphics and web
| | 00:34 | technologies like CSS and HTML.
| | 00:37 | Finally, we will cover the specifics of
applying custom designs to various pages
| | 00:42 | and elements in Drupal,
known as Nodes and Blocks.
| | 00:45 | I have been teaching how to develop web
pages for almost a decade and manage one
| | 00:50 | of the largest Drupal user groups in the world.
| | 00:53 | From my experience, Drupal is the
most exciting web platform I have come
| | 00:56 | across in my career.
| | 00:58 | It is my favorite
solution for building websites.
| | 01:01 | So let's get started with Drupal themes.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium member of the
lynda.com Online Training Library, or if you
| | 00:05 | are watching this tutorial on a DVD-ROM,
you have access to the Exercise Files
| | 00:11 | used throughout this title.
| | 00:13 | The Exercise Files are organized by
chapter, starting with Chapter 02,
| | 00:18 | Getting Drupal Ready.
| | 00:19 | We will be building a Drupal theme,
piece by piece, throughout this course.
| | 00:24 | We have included a few items in the
Exercise Files that will help you if you
| | 00:28 | need to jump in somewhere
in the middle of the course.
| | 00:31 | Let's take a look at the Chapter 06 folder.
| | 00:34 | If you need to jump in at Chapter 06,
you will need to see the work in progress
| | 00:38 | Drupal site and theme as we
left it at the end of Chapter 05.
| | 00:43 | To set that up you will need these three files.
| | 00:47 | The Chapter 06 database compressed file
is a snapshot of the Drupal database as
| | 00:52 | we left it in Chapter 05.
| | 00:54 | To load up the database file, we will
need to import this file into a blank
| | 00:59 | database using a phpMyAdmin interface.
| | 01:02 | So I already have
phpMyAdmin loaded in my browser.
| | 01:06 | If you set up your Drupal site using
MAMP or WAMP, and you do not know how to
| | 01:10 | get to phpMyAdmin, check out Chapter
03, Installing Drupal in the Drupal
| | 01:15 | Essential Training Course on lynda.com.
| | 01:18 | So here we need to create a blank
database through phpMyAdmin, and I am going to
| | 01:22 | call this lynda_drupal_themes,
and I am going to click Create.
| | 01:27 | This will now create a blank database.
| | 01:29 | I can click the Import tab and then
browse for the database compressed file,
| | 01:34 | click Open, and then Go.
| | 01:37 | Then phpMyAdmin will go through that
database file and actually load up all the
| | 01:42 | database tables and data
required for the Drupal Exercise Files.
| | 01:47 | Before we leave phpMyAdmin, there's
one more thing we need to add, and that's
| | 01:51 | actually a database user.
| | 01:52 | So I am going to click on the Home screen
and then click Privileges, Add a new User.
| | 02:00 | And in the User name field, I am
going to name the new user 'drupaluser'.
| | 02:05 | We are going to make sure that it's set
for Local, Host, and I am actually going
| | 02:09 | to set No Password here, because we
don't need one for the local database.
| | 02:16 | We need to grant privileges to this new
database user, so we will actually click
| | 02:21 | Grant all privileges on wildcard
name for our local environment.
| | 02:26 | You wouldn't want to do this grant all
on, say, a web server, as that would be
| | 02:30 | potentially dangerous.
| | 02:32 | But since we are developing
locally, this will be fine.
| | 02:35 | Feel free to click Check All on the
Global privileges, and then click Go.
| | 02:40 | This will create a new database user,
called 'drupaluser', tied to all your local
| | 02:45 | databases, allowing Drupal to
communicate to the database server.
| | 02:49 | I already have this database user in
my local system, so I am not going to
| | 02:54 | click Go, but you should be able to
have a database set up with a database user
| | 02:59 | on your local machine.
| | 03:00 | I am going to minimize my phpMyAdmin,
and before I move onto the other Exercise
| | 03:06 | Files, I want to show you how to load
up the database using the Acquia Drupal
| | 03:10 | Control Panel for Mac or Windows.
| | 03:13 | If you didn't set up your site using
WAMP or MAMP and instead used the Acquia
| | 03:18 | Drupal Control Panel, you can actually
just click Manage my database to load
| | 03:22 | phpMyAdmin and follow the steps that I
just walked through, or you can actually
| | 03:28 | create a new site, in Acquia, using the
Import feature, and then actually choosing
| | 03:34 | a database dump file by clicking Browse,
and then going to the Exercise Files,
| | 03:39 | Chapter 06, and choosing
the compressed database.
| | 03:44 | I won't go through the import process
here, as I already have my site set up.
| | 03:48 | The Ch_6_start_lynda-drupal-themes
zip is our local Drupal site files with
| | 03:54 | our settings and files folder required for
content that appears in the various nodes.
| | 04:00 | So this file, I am actually going to
uncompress and copy into my Drupal sites
| | 04:05 | folder, and as we see that there would
be a default folder and possibly an all
| | 04:10 | folder, so I am going to actually just
Copy and Paste this zip file, and then I
| | 04:17 | am going to extract the
folder out of this zip file.
| | 04:21 | So we see that Windows
has created an extra folder.
| | 04:24 | We need to make sure that we only have
the lynda-drupal-themes folder inside
| | 04:29 | our sites all folder.
| | 04:31 | Since Windows created an extra folder
called Ch_6_start_lynda-drupal-themes,
| | 04:37 | we will have to pull out the lynda-
drupal-themes folder and place it in our
| | 04:42 | drupal sites folder.
| | 04:45 | So we can actually delete the extra
folder and the copied zip file, because they
| | 04:49 | are no longer needed.
| | 04:50 | In here, you are going to see the
settings file and all the uploaded content
| | 04:55 | needed for our Drupal site.
| | 04:57 | Going back to the Exercise Files,
Chapter 06 folder, we have one more file that
| | 05:02 | you will need to get started, and this
is the Ch_6_start_sites-all zip, which
| | 05:08 | is a copy of my local sites all
themes folder, containing the theme files
| | 05:13 | needed for Chapter 06.
| | 05:14 | So let me Copy this file.
| | 05:17 | I will Paste it into my drupal-6-sites folder.
| | 05:21 | I am going to extract the files, and
this time, I am actually going to extract it
| | 05:26 | into the sites folder.
| | 05:29 | And we see that now I have added an all
folder that has a themes folder inside.
| | 05:35 | And in my all, themes folder is the
hanselandpetal theme that we have been
| | 05:40 | building throughout Chapter 06.
| | 05:43 | So going back a couple of clicks, we no
longer need the zip file that I copied
| | 05:48 | out of the Exercise folder.
| | 05:49 | So now we have the all folder and the
lynda-drupal-themes folder that contains
| | 05:55 | our settings file for our drupal site.
| | 05:58 | It takes a bit to put these files in
place and recreate the database user, but
| | 06:02 | once you do, you can pick up at the start
of that chapter and follow along with me.
| | 06:07 | You will see that Chapters 04 and
05 do not have a sites all zip file.
| | 06:13 | That is because there are no
theme files created before Chapter 06.
| | 06:18 | You will also see that Chapters 02 and
03 don't have any of these files, because
| | 06:23 | Chapter 04 is the first chapter that
you will need to pick up from a partial
| | 06:27 | Drupal site that we built in a previous chapter.
| | 06:31 | In some of the chapters, you will see a
few additional files that are used for
| | 06:36 | various exercises we do within those chapters.
| | 06:39 | I will explain, in the associated
video, when you need those files.
| | 06:43 | The Design Mockup folder simply has a
Mockup image of our finished theme that we
| | 06:49 | will refer to, within the course.
| | 06:52 | Finally, there is a Completed
Theme folder in the Exercise Files.
| | 06:56 | The Completed Theme is included so that
you can compare the theme that you build
| | 07:01 | in this course to the
completed theme that I built.
| | 07:04 | If you are a Monthly subscriber or
Annual subscriber to Lynda.com, you
| | 07:08 | don't have access to the Exercise Files,
but you can follow along with your own assets.
| | 07:14 | Let's get started.
| | Collapse this transcript |
|
|
1. Drupal ThemesLearning about Drupal themes| 00:00 | Drupal is a free Social
Publishing Content Management System.
| | 00:04 | Some of the most popular sites
today that run Drupal are popsci.com
| | 00:09 | and whitehouse.gov.
| | 00:11 | Drupal is popular because of its
flexibility in features and front-end design.
| | 00:15 | While Drupal already comes with a
handful of themes out of the box, the real
| | 00:19 | power comes with a level of
customization available for any site or brand.
| | 00:24 | Before learning how to develop a
Custom Theme for Drupal, you will need to be
| | 00:27 | familiar with what's already out
there, and what makes a good theme.
| | 00:31 | I like to also showcase some themes that I like.
| | 00:34 | So the official listing of Themes
for Drupal is available on drupal.org.
| | 00:39 | You can click on the Themes page.
| | 00:42 | They are literally hundreds of Themes
available for Drupal through its official site.
| | 00:46 | In fact, if I click Last, you will
see that there is about over 50 pages
| | 00:50 | of themes available.
| | 00:52 | Themes are made up of XHTML,
CSS, and some basic PHP.
| | 00:56 | Themes can be flexible and have things
like Sidebars go away when there's no
| | 01:00 | content assigned to them.
| | 01:02 | On the web there's a lot of themes
available, and there's one site in
| | 01:05 | particular, themegarden.org, that allows
you to test-drive a bunch of the themes
| | 01:10 | available for Drupal.
| | 01:12 | Two themes that I am a fan of are the
Zen Theme, as this is the plain white
| | 01:16 | vanilla theme that allows me to build my CSS
on top of Zen Structure that Zen has laid out.
| | 01:22 | Another Theme that I am a big fan of is
Acquia Slate by the Top Notch Themes Group.
| | 01:28 | Acquia Slate is a free download and I
recommend you check out the other themes
| | 01:32 | also available by Top Notch,
because they really are Top Notch.
| | 01:36 | If I can click on the Preview link for
Slate, you can see that there's a lot
| | 01:41 | of flexibility, as the highlighted areas are
the regions that we can assign content to.
| | 01:47 | That's actually what
makes a good theme flexible.
| | 01:50 | You might want to take a minute to
browse through the Themes available on
| | 01:53 | drupal.org and see what other people
built, to give you some ideas when you
| | 01:58 | build your own Drupal Theme.
| | Collapse this transcript |
| Building sites today with Drupal| 00:00 | Working with Drupal is different from
building Static Websites as there are no
| | 00:04 | pages to upload with an FTP program.
| | 00:06 | Only Theme Files and Add-on modules get
traditionally uploaded, while Alt Text
| | 00:11 | and Imagery that make up a site's
content are uploaded through Drupal's own
| | 00:14 | web-based interface.
| | 00:16 | The ways that Drupal is similar to
static websites are that the Drupal uses HTML
| | 00:21 | and CSS for layouts and styling.
| | 00:23 | Navigation in Drupal, known as
menus, are built with HTML lists.
| | 00:28 | This is an Industry Standard
practice for Site Navigation today.
| | 00:32 | Usually a page design is broken down
into high level regions, like Header,
| | 00:37 | Footer, and Content.
| | 00:39 | These same regions appear in Drupal Themes.
| | 00:42 | If there are any areas of Drupal you
are not yet comfortable with, then I
| | 00:46 | recommend you check out the Drupal
Essential Training available on Lynda.com.
| | 00:51 | You may want to go through that course
before trying to build a Drupal Theme.
| | 00:55 | Probably the hardest part of
learning how to tackle Drupal Themes is its
| | 00:59 | terminology, like Page, Block, and Node.
| | 01:02 | Understanding these terms and
concepts in Drupal are essential to producing
| | 01:06 | a Drupal Theme.
| | Collapse this transcript |
| Required knowledge and software| 00:00 | For someone to produce a Drupal 6 Theme, a
basic knowledge of PHP, HTML, and CSS is required.
| | 00:08 | In this video, I will quickly review what
skills are needed to follow along in this course.
| | 00:13 | When building a Drupal Theme, a basic
knowledge of HTML is required because we
| | 00:16 | will be actually building
Templates that utilize HTML Markup.
| | 00:21 | If you are not familiar with HTML, I
highly recommend the Training available on
| | 00:24 | Lynda.com, titled XHTML
and HTML Essential Training.
| | 00:30 | CSS is also required when
building a Drupal Theme.
| | 00:33 | If you are not familiar or comfortable
with CSS, I also highly recommend that
| | 00:37 | you check out the Online Training
available on Lynda.com, and I personally
| | 00:41 | recommend a specific course,
titled CSS2 Essential Training.
| | 00:46 | I have actually viewed this course and it
was one of my great introductions into CSS.
| | 00:52 | PHP knowledge is also required, but
only a basic knowledge of PHP Variables.
| | 00:57 | If you are not familiar with PHP, or
you would just like to learn about PHP
| | 01:00 | Variables on its own, you can check
out the Essential Training, available on
| | 01:05 | Lynda.com, for PHP and MySQL.
| | 01:08 | To edit PHP, CSS, and HTML code,
we will need a Text Editor.
| | 01:13 | One commercial industry standard
option is Adobe Dreamweaver, which is
| | 01:17 | available on Windows and Mac.
| | 01:19 | Dreamweaver costs $399, so it is kind
of an expensive option for many people,
| | 01:25 | and since Drupal is free, I would
actually like to offer some alternatives to
| | 01:29 | Dreamweaver that are free themselves.
| | 01:32 | One option I would
recommend for free is TextWrangler.
| | 01:35 | But it's only available on Mac, but I
use it personally and it's actually a
| | 01:39 | really good quick editor.
| | 01:40 | I also use Eclipse, the PHP Developer
version, because I actually do some more
| | 01:47 | complex development with Drupal.
| | 01:49 | And I am recommending Eclipse, but I
am going to let you know that it's an
| | 01:52 | intimidating interface for newcomers.
| | 01:55 | Eclipse is also available on Windows and Mac.
| | 01:58 | Now that we know what skills we need
when producing a Drupal Theme, we will need
| | 02:02 | to get our text editors
ready to edit those files.
| | 02:04 | I will be using Dreamweaver on Windows,
and I have it installed and ready to go.
| | Collapse this transcript |
|
|
2. Getting Drupal ReadyInstalling Drupal 6 using Acquia| 00:00 | Before we can do any work
today, we need to install Drupal.
| | 00:04 | Installing Drupal is already covered in
depth in the Drupal Essential Training
| | 00:08 | course, which is also available on Lynda.com.
| | 00:12 | In Essential Training, Drupal was set
up using WAMP or MAMP, which works just
| | 00:16 | fine, but I will be installing Drupal
using the new Acquia Drupal Control Panel
| | 00:21 | for Windows, which is actually a very
new exciting thing, because now you don't
| | 00:26 | have to do any configurations to your
machine to get Drupal running locally.
| | 00:31 | You should know that using either method will
work just fine to follow along in this course.
| | 00:35 | So two things will be needed to be downloaded.
| | 00:39 | The first is Drupal 6, and
you can find that at drupal.org.
| | 00:44 | You can just click Download Drupal, and
then you will want to open that zip file.
| | 00:49 | The second item to download is
the Acquia Drupal Stack Installer.
| | 00:54 | This is the Control Panel I was
mentioning, and that's available at acquia.com,
| | 00:59 | in their Downloads section.
| | 01:01 | So when you visit Downloads, there
would be the Acquia Drupal Stack Installer
| | 01:05 | for Windows and Mac.
| | 01:07 | Choose your appropriate platform, click
Download Now, and then install that application.
| | 01:12 | I have already installed mine on Windows,
and here is what the Control Panel looks like.
| | 01:18 | Everything seems to running fine,
because we get the green lights for
| | 01:21 | both Apache and MySQL.
| | 01:23 | Essentially, Acquia Drupal's Control
Panel allows Drupal to be installed easily,
| | 01:30 | and includes all the necessary
pieces that are required to run Drupal.
| | 01:35 | So that's Apache, MySQL, and PHP, all
encompassed in this one application.
| | 01:40 | So to get Drupal 6 installed, I can
actually just click on the localhost, which
| | 01:46 | will list any of my multiple
sites that I install locally.
| | 01:50 | I want to click More, and by clicking
More I am brought to this list of sites.
| | 01:54 | I am going to click Import, because I
will be creating a new Drupal 6 site, not
| | 02:00 | using the Acquia version of Drupal.
| | 02:03 | So you can click Import if you already
have a Drupal site ready, or if you want
| | 02:07 | to install something that
you have been working on.
| | 02:10 | So I am actually going to Browse for my files.
| | 02:13 | Now, I have already put my drupal-6
folder inside my Sites folder, so I click My
| | 02:20 | Folder> drupal-6, and I will
actually create a new database.
| | 02:26 | If you already have a
database, you can import it now.
| | 02:29 | So this one I will call lynda_drupal_
themes, and I will actually place it at a
| | 02:37 | lynda-drupal-themes folder.
| | 02:40 | And as you can see, we get a preview at
the bottom of where that's actually going
| | 02:43 | to live on our local machine.
| | 02:45 | Notice I didn't add a .com or .net.
| | 02:48 | This is not necessary as it's only
going to run locally. Click Import.
| | 02:53 | It's now restarting the appropriate services.
| | 02:56 | Your browser's automatically open, and
we are now brought to the Installation
| | 02:59 | screen for Drupal 6.
| | 03:00 | So I am going to click Install Drupal.
| | 03:03 | So I am entering a site address that is
not going to really be used since it's
| | 03:10 | going to run only locally.
| | 03:12 | And I have to put in a Username and an E-
mail, plus a Password for my first user.
| | 03:19 | So I am just going to use
password as my Password.
| | 03:24 | Make sure that the Default time zone
settings are set, and we also want to make
| | 03:28 | sure that we Enable Clean URLs.
| | 03:30 | If you are not able to set these
settings, then you are missing an important
| | 03:35 | file called Htaccess.
| | 03:37 | So make sure that you have actually copied that over.
| | 03:39 | We will click Save and Continue.
| | 03:42 | Now, Drupal has finished the
installation, we can visit the site.
| | 03:46 | Now, since Drupal is installed,
we are logged in, we can now start
| | 03:49 | getting Drupal Themed.
| | 03:52 | Even though we use the Acquia Drupal
Stack Installer here, your MAMP or WAMP
| | 03:56 | setup would be just fine. All we need
is a Drupal 6, fresh installed, so we
| | 04:02 | can actually theme it.
| | Collapse this transcript |
| Configuring the appropriate modules for a Drupal site| 00:00 | Drupal will need content for us to
theme around, but before we can add any
| | 00:04 | content, we should make sure
Drupal is finished being set up.
| | 00:08 | This includes enabling any
modules our site will require.
| | 00:12 | So let's review which
modules need to be enabled and why.
| | 00:16 | So to get to the Modules Administration
screen, we actually need to go through
| | 00:19 | the Administer link, and then Modules,
which is here on the right column, and we
| | 00:25 | will now be presented
with a whole list of modules.
| | 00:28 | Now, remember these are only the
standard Drupal modules that come with Drupal
| | 00:33 | 6, nothing new has been added.
| | 00:36 | So the modules we will need are the
ones that revolve around content, so that
| | 00:41 | means the Aggregator module needs to be
Enabled, and this will be used for any
| | 00:46 | RSS feeds we would like
to consume within the site.
| | 00:49 | The Blog module will be turned on, because
the owners of the site wish to have a blog.
| | 00:55 | We will be theming that later.
| | 00:57 | The Comment module should be on,
especially when you are using blogs.
| | 01:01 | This will allow visitors of the site
to actually comment on the content.
| | 01:06 | The Menu module should be Enabled as well,
because we will actually be using the
| | 01:11 | primary navigation menu that Drupal
provides, so this module is needed.
| | 01:16 | I also want you to turn on the Path
module, because we want to actually supply
| | 01:20 | custom URLs to all our node types that
we will be saving throughout the title.
| | 01:27 | The Search module needs to be on as well,
because we are going to have a global
| | 01:31 | search box that will appear at the top header.
| | 01:34 | And the Upload module is the last
module that needs to be turned on.
| | 01:38 | This Upload module allows us to have
file attachments on any node, as we will
| | 01:42 | learn later, is how we will actually
be uploading photos for the content.
| | 01:48 | So click Save Configuration.
| | 01:50 | And once that's done and we see that
there is a success message, we can actually
| | 01:54 | now move on to building
the site and its content.
| | Collapse this transcript |
| Creating pages with standard node content types| 00:00 | Drupal's main content is saved as an
internal object, known to Drupal as a node.
| | 00:06 | Each piece of saved content
is saved as one of these nodes.
| | 00:10 | This means pages and even blog
posts are all essentially nodes.
| | 00:13 | We will need a few nodes in our database
to theme around, so I will prepare some
| | 00:18 | content nodes, both page and blog types.
| | 00:21 | Starting from my Administration screen,
we need to visit the Create content
| | 00:26 | screen, and that's available on the
left side of a standard Drupal site, in
| | 00:31 | the Navigation menu.
| | 00:32 | So there is a link, Create content, and
when you click there, you are presented
| | 00:36 | three options by default:
| | 00:38 | Blog entry, Page, and Story.
| | 00:41 | We will not be using
Story throughout the course.
| | 00:44 | If you do not see Blog entry, then you
have not enabled the Blog module and you
| | 00:48 | should do that before arriving at this screen.
| | 00:50 | I will start out by creating some blog posts.
| | 00:54 | So I click Blog entry and
now we need to add a Title.
| | 00:58 | So I say My first blog post. I say 'Hello World!'
| | 01:04 | 'This is my first flower blog post.' Looks good.
| | 01:09 | I am going to now make sure that my
published settings are set to Published.
| | 01:14 | That is correct, and now I click Save.
| | 01:16 | I am going to now create a second blog post,
so I will make this quick. 'Another blog post.'
| | 01:22 | 'Yay! More text.'
| | 01:29 | Published? Yes.
| | 01:30 | Save.
| | 01:31 | We will do one last one.
| | 01:41 | So just like the others, we make sure
that they are Published, and we click Save.
| | 01:44 | So now we have a few blog posts saved.
| | 01:47 | If at any time you forget what content
is actually saved into your system, you
| | 01:51 | can refer to the Content screen, which
is in the Drupal Administration, and that
| | 01:56 | is actually covered in the
Drupal Essential Training.
| | 01:59 | If at any time, after adding content, you
forget what content is in your system,
| | 02:05 | then you can go to the Content
Administration screen, and that's actually
| | 02:08 | covered in the Drupal Essential
Training course, also available on Lynda.com.
| | 02:13 | So now that my blog posts are set up,
we need a couple of pages that will be
| | 02:17 | critical to the site, so let's go and add those.
| | 02:19 | Going back to the Create content link, we
are now going to add some Page node types.
| | 02:24 | So click Page, and just like blog
posts they both require a Title, and will
| | 02:29 | probably have a Body.
| | 02:32 | So I am going to add two pages.
| | 02:34 | The first will be the About Us page.
| | 02:38 | This will be actually a little bit
different, because we are going to add some
| | 02:40 | menu settings to these pages.
| | 02:44 | So we are going to open Menu Settings.
| | 02:46 | The menu title will be about us.
| | 02:48 | We are going to leave all
the other settings as they are.
| | 02:51 | In the Body, I have some text in the
Exercise Files, so let's go get those.
| | 02:57 | In Exercise Files, Chap 02, there is some
text, so we are going to grab the about text.
| | 03:03 | We are going to Copy All, go back to
our Drupal site, and we are going to Paste
| | 03:08 | it into the Body area. Looks good.
| | 03:10 | We will go down.
| | 03:13 | We are going to now also expose the URL
path settings, and we are going to say
| | 03:18 | the URL for this node, for
this page, is going to be about.
| | 03:23 | Then we make sure that we Publish.
| | 03:25 | And this is a little bit different as
Promoted to the front page will not be
| | 03:28 | enabled for pages, only blog posts. Click Save.
| | 03:34 | And now we have an About Us page.
| | 03:36 | In fact, the Menu Settings that we
activated in creating this node now make an
| | 03:41 | About Us link up here in the Primary menu.
| | 03:45 | We will do this one more
time for our Services page.
| | 03:47 | Click Create content, click Page.
| | 03:50 | We will title this 'Services'.
| | 03:52 | We will also use the Menu Settings,
just like the About Us page, and this will
| | 03:57 | have a Title link of Services.
| | 04:01 | We also prepared you some text
for this page in the Ch 02 folder of
| | 04:06 | your Exercise Files.
| | 04:07 | So we are going to Copy, Paste. Looks good.
| | 04:13 | We will also provide a URL path setting.
| | 04:17 | Services will be the URL, and we make sure that
the node page will be Published. That's good.
| | 04:23 | Save. Now the node Services page has been created.
| | 04:27 | We see up in the top right, in the Primary
menu, both About Us and Services now appear.
| | 04:32 | We have created blog posts and page types.
| | 04:35 | These are the standard content
types that we will need for our site.
| | 04:39 | After setting up the blog posts and
pages, you should now be comfortable with
| | 04:43 | the concept of a node in Drupal and
the key types, which are Pages and Blogs.
| | Collapse this transcript |
| Creating custom node content types| 00:00 | If Page or Blog types are not good for
a specific content you like to write,
| | 00:05 | say for our flower shop, we can create a
custom content type in Drupal called flower.
| | 00:11 | This custom flower type would be used
for any product page on our flower site.
| | 00:16 | Creating custom content types
allows a site to break up its content.
| | 00:20 | And as we will see later in our
course, each content type can be
| | 00:24 | themed differently.
| | 00:25 | So to create a content type in Drupal,
we are going to actually start from the
| | 00:29 | Administer screen, and click Content types.
| | 00:32 | And as we see, the default content types
in Drupal are already set and listed, we
| | 00:36 | are going to go up and
Add a custom content type.
| | 00:39 | The Name is going to be Flower.
| | 00:42 | The Type will be flower, but
will only contain lowercase letters.
| | 00:47 | The Description, we will put
something simple, so we will say Flower types.
| | 00:51 | We will go down to the Workflow settings,
and we will open those, and make sure
| | 00:56 | that both Published and
Promoted to front page are selected.
| | 01:01 | Attachments also need to
be Enabled for Flower types.
| | 01:05 | This is going to actually help us
upload flower images to each node.
| | 01:10 | If you do not see the Attachments
option listed here, you need to enable the
| | 01:16 | Upload module for Drupal. Go down.
| | 01:20 | We can open the Comment settings and
make sure Read/Write are set, because we
| | 01:24 | would like site visitors to
actually comment on the flowers they find.
| | 01:28 | So closing this, closing Workflow.
| | 01:31 | We can now Save our Flower type, and we
see that now flower is listed with the
| | 01:36 | other content types that Drupal comes with.
| | 01:39 | So now that we have a Flower type set
up, we can actually add some flowers.
| | 01:44 | We will do that in the Create content
menu, as we saw with Blog and Page before.
| | 01:49 | We see now that there's a new option,
Flower, and it's listed in both the
| | 01:53 | Navigation menu and on the Create
content page. Either will work.
| | 01:57 | So we click Flower, and
now we can create a flower.
| | 02:01 | So our first flower will be
actually titled Star Gazer.
| | 02:07 | I have some text for the Body already
prepared in the Chapter 02 folder of
| | 02:11 | your Exercise Files.
| | 02:13 | So we are going to open this.
| | 02:16 | Select, Copy, Paste, and now we
have some content for our flower.
| | 02:25 | We are going to actually add a photo to
this flower through the File Attachments field.
| | 02:30 | We are going to click Browse, and we
are going to choose our pink flower.
| | 02:36 | We will click Attach, and we see Drupal
now has uploaded the file to this node.
| | 02:43 | We are going to deselect the List option,
because we don't want this file listed
| | 02:49 | at the bottom of the node, and we are
going to copy the path Drupal has prepared
| | 02:53 | for us that points to this image file.
| | 02:57 | The reason why is because we are going
to take this copied path and actually
| | 03:01 | paste it into an image tag that we
are going to now type into the Body area
| | 03:09 | of our flower node.
| | 03:10 | So I am going to paste the path to the image,
and this will be used for the Star Gazer flower.
| | 03:18 | Since we have added an image tag, which
is HTML code, into the Body area, we need
| | 03:23 | to make sure Drupal is
actually going to render this tag.
| | 03:26 | By doing so, we need to make sure
the Input formats are set up correctly.
| | 03:32 | Filtered HTML is a very good, safe
Input format that will actually make sure
| | 03:36 | that there is no malicious
code inputted in the Body area.
| | 03:40 | Full HTML is the same as Filtered, but
with some additional tags that it allows,
| | 03:46 | specifically, for us, the image tag.
| | 03:49 | So we need to make sure Full HTML is set,
our image tag and text is placed in the Body.
| | 03:57 | We want to give a custom URL for this,
so we will say flower/star-gazer.
| | 04:03 | The last options to check are that our flower
will be Published and Promoted to the front page.
| | 04:09 | This is what we want.
| | 04:10 | Just click Save, and we see that we now
have our first flower node. It has an image.
| | 04:17 | And just to let you know, this image was
already pre-sized before I uploaded it.
| | 04:23 | So Drupal will now
automatically resize it for you.
| | 04:26 | So this looks good.
| | 04:27 | We have one more flower we need to add.
| | 04:30 | So we will click Create content again,
and then click Flower, and we will call
| | 04:34 | this one Sunflowers.
| | 04:36 | We also have text for this node, so I
am going to highlight, Copy, then Paste
| | 04:44 | that text right into the Body.
| | 04:46 | Then we go down to File
Attachments, we are going to add an image.
| | 04:50 | Here is the sunflowers image, click Attach.
| | 04:54 | We see Drupal uploaded it correctly.
| | 04:56 | We are going to delist the site file.
| | 04:59 | We are going to then Copy the path to
this image file, which Drupal provides.
| | 05:05 | So Copy, and now we will Paste that
URL inside an image tag within our Body.
| | 05:13 | So I am going to Paste the path to that image.
| | 05:19 | We see that we have now
an image tag in our body.
| | 05:21 | So our Input format
needs to reflect that change.
| | 05:25 | So Full HTML is chosen.
| | 05:27 | A URL path will be set, so
flower/yellow will be the path.
| | 05:35 | And we are going to make sure that
our Publishing options are set to both
| | 05:38 | Published and Promoted to
front page. Looks good.
| | 05:42 | Let's click Save.
| | 05:43 | And now we have a second flower
at its custom URL, with an image.
| | 05:49 | Everything looks good.
| | 05:50 | So just so you know, in the Chapter 02
Exercise folder, there is an additional
| | 05:54 | flower photo and text, if you wanted to
add a third flower to the Drupal site.
| | 05:59 | So now I have shown you how to create
a custom content type called flower and
| | 06:04 | how to add a couple of flowers to the site.
| | 06:07 | You should be comfortable now with
content types and custom node types.
| | 06:12 | These custom content types will come
into play later when we are starting to
| | 06:15 | define custom templates for our theme.
| | Collapse this transcript |
| Adding RSS secondary content| 00:01 | Now that Drupal is set up with our main
content, known as Nodes, we can add some
| | 00:05 | secondary content to our flower shop site.
| | 00:08 | For this site, we will be subscribing
to an external RSS news feed, which will
| | 00:13 | show up in a sidebar next to our main content.
| | 00:16 | If you're unfamiliar with RSS, it's
a new technology that allows you to
| | 00:20 | subscribe to a website's content
without having to visit that page.
| | 00:25 | So, starting from our Administer
screen, we can actually go to the Feed
| | 00:29 | aggregator administration page.
| | 00:31 | So on Administer, find
the link, Feed aggregator.
| | 00:35 | If you do not see the Feed aggregator
link, that's because the aggregator module
| | 00:39 | has not been enabled yet on your site.
| | 00:42 | You need to do that
before we can add an RSS feed.
| | 00:45 | So, clicking on Feed aggregator, we are
now brought to the Feed aggregator page,
| | 00:50 | where we see that there are no
feeds added to our site, currently.
| | 00:54 | So, we are going to go up into
the tab area and click Add feed.
| | 00:59 | And we see to add a feed, we need to
supply both a title and a URL for the RSS feed.
| | 01:05 | For this site, we are going to
add the Drupal News RSS feed.
| | 01:09 | And we are going to get that,
actually, from the official Drupal webpage.
| | 01:14 | So, this is the official Drupal homepage,
drupal.org, and at the bottom of this
| | 01:18 | site is actually a little
icon known as an RSS icon.
| | 01:23 | We can right-click and copy the link
pointing to this RSS icon and we can come
| | 01:30 | back and actually paste
into the URL and click Save.
| | 01:36 | If you're unfamiliar, again, with RSS,
you will actually start to notice that
| | 01:40 | little RSS icon appears on many other sites.
| | 01:44 | And as you see, at the bottom of the
New York Times website, for example, they
| | 01:48 | also carry RSS feeds and they use the same icon.
| | 01:52 | So, you should be able to subscribe to
your favorite sites through their RSS feeds.
| | 01:57 | Okay, going back, we now can close these
extra tabs and going back to our Drupal
| | 02:04 | we see that the feed Drupal
News was successfully added.
| | 02:08 | So, let's check that.
| | 02:09 | We click on List in the Feed
aggregator screen and we see Drupal News
| | 02:14 | actually comes up listed.
| | 02:16 | But we notice that there are zero items here.
| | 02:18 | That's because the feed was never updated.
| | 02:21 | Now Drupal can auto update these feeds
on its own, but we need to tell Drupal to
| | 02:27 | update right now, because we
would like to see this content.
| | 02:31 | So, instead of waiting for Drupal, we
clicked update items and now we see that
| | 02:35 | there are 25 items listed in this feed.
| | 02:37 | Well, how can we be sure of that?
| | 02:39 | We can click the feed title from the screen.
| | 02:41 | I am going to open it in a new tab,
| | 02:44 | wisit the Feed aggregator screen, and now
we see that there is content that we do
| | 02:48 | not add by hand to our site.
| | 02:52 | This is all the RSS content
coming in from the Drupal News feed.
| | 02:57 | So, I am going to close this screen and
go back to the Feed aggregator screen.
| | 03:01 | So, not all Drupal sites will need or
use RSS feeds and as we will see it later,
| | 03:06 | these feed items will get themed
just like the rest of the site content.
| | Collapse this transcript |
| Finalizing site navigation| 00:00 | With our Drupal site setup with blog
and page content, we can now lock down
| | 00:04 | our site navigation.
| | 00:06 | We'll need to administer the Primary
menu to add and rearrange a couple of links
| | 00:11 | that don't appear there now.
| | 00:13 | The Primary menu is actually displayed
right now in the top right corner of this
| | 00:17 | default Drupal theme.
| | 00:19 | To administer that menu, we need to go
to the Administer screen and then Menus.
| | 00:25 | In here, we are going to effect the
Primary links menu and we see the about
| | 00:31 | us and services links appear there now,
just as they do in the menu of the top right.
| | 00:37 | These links were actually entered
into the menu automatically when we were
| | 00:41 | adding the page content.
| | 00:43 | We are missing two links
that need to appear here.
| | 00:47 | One is for the homepage
and one is for the blogs.
| | 00:50 | Even though we didn't create a homepage,
Drupal automatically adds a homepage,
| | 00:55 | which lists all the front page content.
| | 00:58 | So, we can actually just point right to that
front page and get a link added to our menu.
| | 01:03 | I am going to click Add item.
| | 01:06 | And the Path is going to be different
for the homepage than every other link
| | 01:09 | you are going to add in Drupal.
| | 01:11 | For the homepage we can use <front>.
| | 01:16 | This is a keyword for Drupal that it
understands to point to the homepage, no
| | 01:21 | matter what content that is.
| | 01:23 | For this menu, we are going to say
'home' and we are going to click Save.
| | 01:26 | You see that the Home link has been added.
| | 01:28 | We are going to add the final link,
which is blog and the path is actually going
| | 01:33 | to be blog itself along with the menu title.
| | 01:37 | If you were to add a path that was
incorrect, Drupal will let you know.
| | 01:41 | I am going to click Save and now we see
that our four menu items are all listed
| | 01:47 | as expected, but they
are not in the right order.
| | 01:49 | To fix this, Drupal allow us
to drag-and-drop any menu item.
| | 01:52 | So, we are going to have home at the
front, blog at the end, services up here
| | 01:58 | before about us, click Save
configuration and now the menu has been updated.
| | 02:03 | We see in the top right corner that that menu
is totally updated, even for the top header.
| | 02:10 | So, now that our content is loaded and
arranged in Drupal, we can move on to
| | 02:14 | learning how to theme all of this content.
| | Collapse this transcript |
|
|
3. Essential Tools and Modules For Theme CreationInstalling the Theme Developer module (aka Devel)| 00:01 | One of the best tools for Drupal building is
actually a Drupal module, known as the Devel.
| | 00:05 | The Devel module is actually a
suite of modules, or tools for developers
| | 00:10 | and theme builders.
| | 00:12 | The tool within this suite we plan to
use for theme building is known as the
| | 00:16 | Theme developer module, which helps
themers target any element on a Drupal page.
| | 00:22 | In this video, I will introduce the
Devel module suite and the Theme developer
| | 00:26 | module, which will be used at
certain points throughout this course.
| | 00:31 | So, since the Devel module suite is
something that doesn't come with Drupal, we
| | 00:35 | need to go download it from
the Drupal website, Drupal.org.
| | 00:39 | So, I've visited the Devel
page in another tab. The URL is
| | 00:43 | drupal.org/project/devel.
| | 00:48 | Again, this is a suite of modules,
so you only have one download and the
| | 00:53 | downloads are at the bottom of the Project page.
| | 00:58 | You will want to download the
Recommended version for your Drupal installation.
| | 01:03 | So since I'm running Drupal 6, I'll be
downloading and using only the Drupal 6
| | 01:07 | version of the Devel module.
| | 01:09 | So, go ahead and download this module
and Unzip the file, so we can actually
| | 01:15 | install this suite into our Drupal site.
| | 01:18 | So, I've downloaded the Devel module
and actually saved it on my Desktop.
| | 01:22 | This Devel folder needs to go into my
Drupal sites all modules folder. This is
| | 01:29 | where I install new modules for Drupal.
| | 01:32 | So, I'm going to open my Drupal folder
and as we see, this is a standard Drupal 6
| | 01:37 | site, so there's sites folder, we go
in there and then we will actually visit
| | 01:41 | the all folder and we see that there is
nothing in here for us to place our new
| | 01:46 | contributor module in.
| | 01:48 | So, we'll create a New folder called
'modules' and inside there, we'll actually
| | 01:55 | just drop in the devel module.
| | 01:58 | Remember, you'll only want to install
new modules within the sites/all/modules
| | 02:04 | folder, not within Drupal 6 itself.
| | 02:08 | So, now that this module folder has
been added, we can go back to our drupal
| | 02:12 | site, visit the modules administration
page, so we're going to click modules
| | 02:18 | from administer, we're going to
scroll down and we're going to look for the
| | 02:22 | Development modules.
| | 02:24 | Remember, the Devel module is
actually a suite of modules.
| | 02:28 | That's why you'll see these five modules
listed after putting in the Devel folder.
| | 02:33 | We are only going to use the Theme
developer module, but it does require that
| | 02:38 | the standard Devel module is enabled.
| | 02:41 | So, once those are both
checked, we can click OK.
| | 02:44 | And we'll save the configuration, which
has now enabled our Development modules.
| | 02:50 | We see a success screen and a new
little floating Themer info window appearing
| | 02:57 | in the bottom left corner.
| | 02:59 | We're going to come back to this in a second.
| | 03:01 | So, right now, I would actually want to
visit the Home page of our site built as
| | 03:06 | it is now, before I enable the Themer
Info window. The reason why is once this
| | 03:11 | is enabled, I can no longer
click around the site and browse.
| | 03:16 | The Themer Info window is actually
going to override every click that we do on
| | 03:21 | the page and provide us some contextual info.
| | 03:24 | Let's see that now.
| | 03:25 | So, we click to enable the Themer Info
window and we see now that there is this
| | 03:30 | floating panel that can be moved
anywhere on the screen and if we move our mouse
| | 03:35 | away from that floating panel, we
see now that we start to get some live
| | 03:39 | contextual highlighting of basically
any element our mouse is over. These red
| | 03:46 | contextual highlighted boxes are
provided by the Theme developer module.
| | 03:51 | This is very similar to a plug-in for
Firefox that web developers use, known as Firebug.
| | 03:58 | So, we can actually now click any
element, even the link and get some
| | 04:03 | updated information.
| | 04:05 | So, let's click the body.
| | 04:07 | Let's try the whole flower.
| | 04:09 | Let's try just the links and we see that all
that information in the pop-up gets changed.
| | 04:16 | So, what we want to do is actually
choosing element to target and this panel is
| | 04:21 | going to let us know what we're going
to be targeting within our Theme files.
| | 04:26 | So, we can see that there are some
functions called, some elements that are
| | 04:30 | involved with the data.
| | 04:33 | We won't dive too deeply into this
panel for this video, since we'll be using
| | 04:37 | this plug-in throughout the
entire process of building our theme.
| | 04:42 | So, since the Theme developer module
actually obstructs us from browsing our
| | 04:47 | own drupal site, since it's on, we need to
make sure we disable it, when we're not using it.
| | 04:52 | So, we actually will go down to the
bottom left corner, where it says Themer
| | 04:56 | info, and make sure that the checkbox
is unchecked and we see now that we no
| | 05:02 | longer get the contextual red highlighting
and we no longer have the floating dialog panel.
| | 05:08 | Even though we have disabled the Theme
developer panel, we have not actually
| | 05:13 | disabled the entire module.
| | 05:16 | Tools like the Devel module and its
Themer Development module should never be
| | 05:20 | left enabled on any public facing
website, because these modules use a lot of
| | 05:26 | computer memory, or RAM and can
result in negative performances.
| | 05:30 | So, let's go back to the
modules administration screen.
| | 05:33 | That's under in Administer > Modules
and let's disable the Theme developer
| | 05:40 | module and we cannot disable the parent
Devel module until Theme developer has
| | 05:47 | been fully disabled.
| | 05:49 | So, we will click Save
configuration with Theme developer unchecked.
| | 05:54 | We'll go back down and make sure that
Devel itself is also now unchecked, since
| | 06:01 | we can disable that.
| | 06:04 | After clicking Save configuration, we
just double check that those modules are
| | 06:08 | disabled and they are.
| | 06:10 | We can now continue building our drupal website.
| | 06:14 | Tools like the Devel module are great
for development but should never be left
| | 06:18 | enabled on any public facing site,
since modules like these use up a lot of RAM,
| | 06:23 | or computer memory and can result in
negative performances of your website.
| | Collapse this transcript |
| Ensuring cross-browser compatibility with conditional style sheets| 00:01 | There are bound to be moments where
browsers will render your site differently.
| | 00:04 | The most common culprit is
Microsoft's Internet Explorer, or IE as it's
| | 00:09 | more commonly known.
| | 00:11 | Internet Explorer has a history of
inconsistencies with each version released
| | 00:15 | and in this video, I'll show you how
Drupal themers are able to package what is
| | 00:20 | known as a conditional style sheet,
allowing our theme to deliver styles for IE
| | 00:26 | directly, on any version.
| | 00:28 | So, to pull off the conditional style
sheets, two things have to happen here.
| | 00:33 | One, we need to install a module
actually called conditional style sheets, this
| | 00:38 | is a free module available on Drupal.org.
| | 00:41 | This module utilizes conditional
style sheets that have been created by
| | 00:46 | Microsoft and you can view this
Microsoft page to learn more about them and even
| | 00:51 | find out more about the syntax that
we are going to be using in this video.
| | 00:55 | So, go ahead and download the
Drupal 6 version of the Conditional
| | 00:58 | Stylesheets module.
| | 01:00 | I have done so already and we
need to install this module into our
| | 01:05 | sites/all/modules folder, and if you do
not have this modules folder inside your
| | 01:10 | sites' all folder, you should create it now.
| | 01:14 | All extra modules that don't come
with Drupal, will go inside this module.
| | 01:18 | So I just dragged my conditional_styles
module into the folder and now I'm going
| | 01:22 | to minimize my Drupal folder, so that I
can go back to my browser and actually
| | 01:27 | activate this module.
| | 01:28 | So, we're going to go to the
Modules administration page, scroll down, find
| | 01:35 | the Conditional Stylesheets module,
click Enabled and then Save Configuration to
| | 01:40 | activate the module.
| | 01:41 | Good, the module is ready for us.
| | 01:44 | There is nothing to configure within
Drupal itself for this module, instead we
| | 01:50 | need to make a change to a theme.info
file that we'll be actually learning more
| | 01:55 | about in the next chapters.
| | 01:57 | There's nothing to actually configure
within the Drupal administration interface
| | 02:01 | for this module, instead we need to
edit our theme manifest file or our
| | 02:06 | theme.info file to take
advantage of this module's features.
| | 02:10 | So, let's actually go and open our
Exercise Files folder and in Chapter 3, there
| | 02:16 | is a folder there called Condition.
| | 02:18 | The Condition folder is actually a
Drupal 6 theme that we can install in our
| | 02:23 | Drupal site to see the
conditional style sheets feature being used.
| | 02:27 | So, I'm going to actually copy the
Condition folder and actually paste that
| | 02:33 | folder into my sites/all/themes folder.
| | 02:39 | If you do not have a themes folder in your
sites' all folder, go ahead and create it now.
| | 02:44 | So, pasting the condition theme inside my
sites' all themes folder, we should be ready to go.
| | 02:51 | Go inside the condition folder
and open the condition.info file.
| | 02:57 | In here, I've actually prepared two style
declarations that will go with this theme.
| | 03:03 | The first is called not-ie.CSS and
this will be loaded by every browser.
| | 03:09 | The second line, line 11, is actually a
conditional style sheet line that says
| | 03:16 | if the browser is IE 7 then go
ahead and load the for-ie.CSS file.
| | 03:25 | Since, I want to make sure that this IE
file is loaded for all Internet Explorer
| | 03:29 | versions, I'm going to remove
the 7 and I'm going to click Save.
| | 03:32 | So, I'm going to go back to my Drupal
administration screen and go into the
| | 03:36 | themes administration page, so I
can enable this new Condition theme.
| | 03:41 | So, we enable the theme by clicking
enabled and actually choosing it as our default.
| | 03:47 | Now, we'll click Save Configuration
and then we'll go to the Homepage of our
| | 03:52 | site and we see that this is not really
a pretty theme, but we're here just to
| | 03:57 | show you conditional
style sheets will be loaded.
| | 04:00 | So, let me edit this page and click View Source.
| | 04:04 | Now, we see the style sheets loaded
for this condition theme, not-ie.CSS and
| | 04:10 | we see the other code needed for the
conditional style sheets, automatically added by Drupal.
| | 04:16 | We see this code and it states that
if the browser is Internet Explorer,
| | 04:21 | any version, go ahead and load this
additional style sheet called condition for-ie.CSS.
| | 04:30 | Now what I'm going to do is I'm going
to disable the Conditional Stylesheets
| | 04:33 | module, so you can see what's going to
disappear when that module is not active.
| | 04:39 | We will go back to the Modules
administration, I'll disable the Conditional
| | 04:43 | Stylesheets module. Once this is done,
we'll go back to our Homepage, click
| | 04:48 | Refresh and now we'll actually view
the source again and we see that only the
| | 04:54 | not-ie.CSS file is now showing.
| | 04:57 | For the rest of this course, I'm
going to actually keep the Conditional
| | 05:00 | Stylesheets module enabled, just in case
we need to create some IE-only styles.
| | 05:07 | Using the Conditional Stylesheets
module is a proper method to adding any
| | 05:11 | Conditional Stylesheet without
having to do additional programming.
| | Collapse this transcript |
| Using Firefox extensions for site development| 00:00 | Throughout this course, I will be
using the web browser known as Firefox to
| | 00:04 | preview our Drupal site for two reasons.
| | 00:06 | One, Firefox is reliable when viewing
web pages that use CSS and two, there are
| | 00:12 | plug-ins available, known as extensions,
that enhance the browser, providing tools
| | 00:17 | and features that only a
web designer could love.
| | 00:20 | In this video, I will show you a
couple of Firefox extensions I use for
| | 00:24 | Drupal theme development.
| | 00:25 | So, since these extensions are for
Firefox and not Drupal directly, we have to
| | 00:31 | actually make sure Firefox is installed.
| | 00:34 | So, I already have Firefox 3 running,
and I want to show you the extensions I
| | 00:39 | use for Drupal theme development.
| | 00:41 | So the first Firefox extension I would
like to introduce to you is known as the
| | 00:45 | Web Developer Toolbar.
| | 00:47 | This is free for Firefox and I've
already installed it, so I'm going to enable
| | 00:52 | this toolbar by right-clicking in
Firefox and selecting Web Developer Toolbar.
| | 01:00 | We see, now, that I have a
whole new toolbar for Firefox.
| | 01:04 | This toolbar is very powerful and
provides features that work for CSS,
| | 01:09 | JavaScript, Cookies and many
other things that Drupal uses.
| | 01:14 | One of the best features is actually
to outline the block level elements of a
| | 01:19 | page, letting me see the page structure or
its blueprint, as some people like to call it.
| | 01:24 | So I'm going to disable this now by
unselecting Outline Block Level Elements,
| | 01:30 | and introduce the second popular
extension for Firefox that I use, known as Firebug.
| | 01:37 | Firebug is also free and is very
powerful for CSS and JavaScript developers.
| | 01:42 | I already have Firebug installed and
I can actually enable Firebug in the
| | 01:47 | bottom toolbar of Firefox by clicking on the
Firebug icon, and I can click again to close it.
| | 01:55 | Or I can right-click any element in
the page and say Inspect, which will then
| | 02:01 | bring up the Firebug dialog.
| | 02:03 | In the Firebug dialog, I can actually
see areas of a page get highlighted, as
| | 02:09 | with the blue box hovering over content,
where my mouse is hovering within the page markup.
| | 02:16 | I can click on any element. Any element on
the page can be highlighted with Firebug.
| | 02:22 | In addition to highlighting where that
element is, we can also modify that element.
| | 02:28 | So when I've clicked on the div and
it has an id of content, we can see in
| | 02:32 | the right pane of Firebug that there are
some associated Styles for this HTML element.
| | 02:39 | We can see the background image, we
could see all the padding, we can see its
| | 02:44 | size and we can even affect these values
and see them change live right on any page.
| | 02:50 | So, if I were to disable the styles,
we would start to see the page change.
| | 02:57 | Now, we could re-enable the
styles and see the page change back.
| | 03:03 | We can also change to these values,
like I was saying before, so let's try
| | 03:08 | changing the left dimension to say 400
pixels and now we see that the element on
| | 03:16 | the page has actually
moved 400 pixels to the right.
| | 03:20 | We can then change this back.
| | 03:23 | So, when developing Drupal themes,
you can definitely see with Firebug what
| | 03:27 | elements might need to be moved and
try them out before you're editing any
| | 03:31 | of your theme files.
| | 03:33 | Firebug is a great tool to use
when developing any type of website.
| | 03:37 | So last, I have a Firebug add-
on called Drupal For Firebug.
| | 03:43 | So this requires that Firefox is
installed with Firebug and this is an add-on
| | 03:48 | for Firebug, specifically for Drupal.
| | 03:51 | So, there is actually this add-on that
you put into Firebug and an associated
| | 03:55 | module for Drupal called Drupal For
Firebug that are both used together to
| | 04:00 | provide you some really nice
information that appears in the Firebug panel, but
| | 04:05 | specifically for your Drupal site.
| | 04:08 | So, I'm going to actually show you how to enable
and install this Drupal For Firebug plug-in.
| | 04:13 | The first piece that we need to
actually install is the Drupal for
| | 04:16 | Firebug add-on for Firebug.
| | 04:19 | So, we make sure that that's installed.
| | 04:21 | And I've already installed that on my machine.
| | 04:23 | The second piece is the module for
Drupal, known as Drupal For Firebug, which we
| | 04:29 | need to download and install ourselves.
| | 04:31 | So, I've already
downloaded the version 6 module.
| | 04:34 | The first step when, of course,
installing any Drupal module is to put the module
| | 04:38 | folder inside your sites/all/modules folder.
| | 04:42 | So, let's go and do that.
| | 04:43 | So, I'm going to minimize my
browser and we see that I have the
| | 04:46 | Drupalforfirebug folder ready.
| | 04:48 | I'm going to open my Drupal-6
installation and visit the sites/all/modules
| | 04:54 | folder and again, if you don't have
this folder here, you need to create
| | 04:58 | this module folder.
| | 05:00 | So, go inside modules and just the
same as the devel in our other video, we
| | 05:04 | bring in the Drupalforfirebug module.
| | 05:07 | Remember, that's in the sites/all/modules folder.
| | 05:11 | So, now that we've actually placed the
module inside our Drupal site, we need to
| | 05:16 | enable the module within Drupal.
| | 05:18 | So I've opened my web browser and
I'm going to go back to my Drupal site.
| | 05:23 | On the Administer screen, we're going
to go through and administer the modules.
| | 05:27 | So, click Modules and down at the
bottom, we should see a new section of modules,
| | 05:33 | known as Drupal for Firebug.
| | 05:36 | So we're going to actually enable
both of the modules that come with that
| | 05:40 | Drupal for Firebug suite.
| | 05:41 | And we're going to click Save configuration.
| | 05:45 | Now that the Drupal for Firebug
modules are enabled, we can use these
| | 05:49 | throughout our site and they actually
activate very simply, because they are
| | 05:53 | built into Firebug.
| | 05:54 | So, let's visit the Homepage, let's open
our Firebug console and now let's visit
| | 06:00 | the Drupal tab within Firebug.
| | 06:03 | We see that this homepage has some nodes,
so we can use the Nodes secondary tab
| | 06:10 | and the Drupal For Firebug plug-in to
actually see what nodes are loaded and
| | 06:15 | how they were loaded.
| | 06:16 | So, we see that we actually get
some information that we can inspect.
| | 06:21 | This is the actual node object,
this is the node data that Drupal sees,
| | 06:26 | before it is themed.
| | 06:28 | So, we see that every module on the
screen, on this page, is actually getting
| | 06:32 | inspected now by the Drupal For Firebug plug-in.
| | 06:36 | So, since Firebug and Firefox will be
used throughout this title, it is highly
| | 06:41 | recommended that you install them both.
| | 06:43 | You don't need to have the Web
Developer Toolbar or this Drupal For Firebug
| | 06:47 | add-on to follow along in our title.
| | 06:50 | If you already have Firefox, make sure
it's an up-to-date version and the same
| | 06:54 | for Firebug, if that's
already installed on your machine.
| | Collapse this transcript |
| Working with Dreamweaver| 00:01 | Many designers use
Dreamweaver as their primary Web Editor.
| | 00:04 | By default, Dreamweaver cannot render
Drupal theme files with their style sheets.
| | 00:09 | In this video, I will show you how
to set up Dreamweaver to work better
| | 00:12 | with Drupal themes.
| | 00:14 | So I'll be using Dreamweaver throughout
this course and I already have it open.
| | 00:20 | So this version of Dreamweaver is CS4
and what I'm going to show you is a nice
| | 00:25 | little feature that is available in
many versions of Dreamweaver, not just CS4.
| | 00:29 | What we're going to do is, essentially,
binds or link style sheets to Drupal
| | 00:34 | templates and, by default,
Dreamweaver cannot do this on its own.
| | 00:38 | It needs a little help from you, the user.
| | 00:40 | So I'll be opening up a theme
template file and we will be covering theme
| | 00:45 | template files throughout
the rest of this course.
| | 00:47 | So what I'm going to do is actually
grab one of the default themes, bluemarine,
| | 00:53 | and I'm going to open the page.tpl.php file.
| | 00:58 | Now, normally, this is what everyone sees
in Dreamweaver when they're in Code view,
| | 01:03 | and this is what everybody normally
sees in Dreamweaver's Design view, when
| | 01:07 | editing a Drupal theme template.
| | 01:10 | Not really much to see here, but there
are style sheets with every theme, so
| | 01:15 | let's get these actually linked together.
| | 01:17 | So what we're going to do here is
actually go over to the CSS Styles panel,
| | 01:22 | and in the Contextual menu on the right side,
we're going to click and choose Design-Time.
| | 01:28 | This now brings up a dialog window that
allows us to apply what's known as the
| | 01:33 | Design-Time Style Sheets.
| | 01:35 | This is a feature only for
Dreamweaver and is a very good feature for when
| | 01:39 | working with Drupal themes.
| | 01:41 | So Dreamweaver can actually have as
many style sheets as you want applied to a
| | 01:46 | template, but only rendered for Design view.
| | 01:50 | So let's go ahead and click Plus and
in the bluemarine folder, we'll actually
| | 01:55 | choose the style sheet used for the theme.
| | 01:58 | So that's style.css, we click OK.
| | 02:03 | We see style.css is now
associated as a Design-Time style sheet.
| | 02:07 | That's what we want, click OK.
| | 02:09 | And now we see a difference in the
plain white that we're used to with standard
| | 02:14 | Drupal theme templates.
| | 02:16 | In fact, if you go and look on the
CSS Styles panel, we now see every style
| | 02:22 | declared for that theme.
| | 02:24 | We can edit it as normal, just like
Dreamweaver people would expect, okay.
| | 02:31 | And we can now also look at the
elements on the page and even change their ID's
| | 02:38 | or Classes or maybe even apply your own.
| | 02:41 | A very important note about this Design-
Time Style Sheets feature in Dreamweaver
| | 02:45 | is that it will not add any markup
or code to your Drupal templates.
| | 02:51 | Dreamweaver itself will remember, in the
background, what templates are linked at
| | 02:56 | design time to what style sheets.
| | 02:58 | This is a very good feature since there
should be no style sheet markup in any
| | 03:04 | of the templates whatsoever.
| | 03:05 | While not every designer uses Dreamweaver,
| | 03:09 | it is a powerful tool on
its own for editing web pages.
| | 03:12 | When working with Drupal, Design-Time
Style Sheets is a hidden feature that
| | 03:16 | helps bridge the gap between
Drupal themes and Dreamweaver.
| | Collapse this transcript |
|
|
4. Theme AdministrationChoosing a default theme| 00:01 | Drupal sites can have more
than one theme installed.
| | 00:03 | When a Drupal site has more than one theme
enabled, we must choose one theme to be the default.
| | 00:09 | This video shows how to enable
multiple themes and change the default theme
| | 00:14 | for our Drupal site.
| | 00:15 | So I am going to go start from
the Administer screen in Drupal.
| | 00:18 | I am going to click on Themes, and
this is going to bring me to the Theme
| | 00:22 | Administration page.
| | 00:24 | This is where all the themes that are
installed in your Drupal site will be listed.
| | 00:28 | In fact, we see that there are six
themes, by default, that come with Drupal 6.
| | 00:33 | The standard default theme is known as
Garland, and we see that Garland is both
| | 00:38 | enabled and set as the default theme.
| | 00:41 | As you can notice from this quick, small
form that the Enabled column is filled
| | 00:47 | with checkboxes allowing us to
select multiple themes to be enabled.
| | 00:51 | But the Default column has radio
buttons, only allowing one theme to be the
| | 00:56 | default at any given time.
| | 00:59 | Some of things to point out here.
You need to make sure you click Save
| | 01:02 | configuration after choosing a
new enabled and default theme.
| | 01:06 | So let's see that right now.
| | 01:08 | I am going to change the theme to be
Bluemarine, so I am going to Enabled the
| | 01:12 | theme and change the Default.
| | 01:14 | I am going to go leave Garland checked.
| | 01:16 | I am going to come down
and click Save configuration.
| | 01:19 | We have now changed the default
theme, as you can see, to Bluemarine.
| | 01:24 | So let's visit our homepage to see how it looks.
| | 01:26 | It looks different.
| | 01:28 | Let's go back to Administer, let's
go to Themes, and now let's go back to
| | 01:36 | Garland by leaving both themes enabled,
yet choosing Garland to be the default.
| | 01:42 | We are going to click Save
configuration again, and now the default theme has
| | 01:46 | been changed to Garland.
| | 01:48 | You can enable as many themes as you
like in Drupal, but only one theme to be the
| | 01:53 | default that visitors see.
| | 01:55 | This administration screen is going to be
an important page throughout our course.
| | 01:59 | We will be coming back to the screen
when installing, or configuring any
| | 02:03 | new themes.
| | Collapse this transcript |
| Touring the core themes| 00:01 | After learning how to change the
default theme in Drupal, it would be good to
| | 00:05 | go through all of the default themes
that come with Drupal 6, otherwise known
| | 00:08 | as the Core Themes.
| | 00:10 | So to get to the themes, we need to
start from the Administration page.
| | 00:14 | So Administer>Themes and we see we
have the default six themes that come
| | 00:21 | with Drupal 6, and I am going to go through
and actually enable each one of these themes.
| | 00:27 | I am going to go click Save configuration,
so they save that to be Enabled,
| | 00:32 | and now I am going to go
actually start switching the themes,
| | 00:35 | so we could see each one in action.
| | 00:37 | So, the first one is Bluemarine.
| | 00:39 | So, I chose the Default radio button and
click Save configuration, and now we see
| | 00:45 | that Bluemarine has been taken
over as the default site theme.
| | 00:48 | So I am going to go open a new tab to
visit the homepage, so we can come back to
| | 00:54 | this theme administration screen easily.
| | 00:57 | So I click on my new tab and this is
the homepage, and if I visit the other
| | 01:01 | pages, we can kind of see how this site looks.
| | 01:05 | Now remember, the View and Edit tabs
only show for people who are logged in, and
| | 01:09 | have permission to edit a note.
| | 01:11 | So these will go away for normal users.
| | 01:13 | Let's see. Anything in the blogs?
| | 01:17 | Okay, it looks like blogs.
| | 01:19 | Let's go back now, and actually
switch the theme to Chameleon, and click
| | 01:26 | Save configuration.
| | 01:27 | Now we have this kind of nice all white theme.
| | 01:32 | We see that some of the stuff had changed,
like the positioning of the primary menu.
| | 01:36 | We also see that there is now a logo appearing.
| | 01:40 | We want to check out the other pages real
quick, so let's visit them in a new tab.
| | 01:44 | So here we see, actually, the Services
page node, loading in the Chameleon theme.
| | 01:50 | Here is the about us, here is
the blog, looks pretty good.
| | 01:53 | We've a couple other themes.
| | 01:56 | We'll switch over to, now,
Marvin, click Save configuration.
| | 02:01 | We will go over and open a new tab.
| | 02:04 | We see, already ,this is quite different.
| | 02:06 | In fact, it's actually a liquid-based layout.
| | 02:08 | The Chameleon theme looked
like it was a fixed-width layout.
| | 02:11 | We will see that difference
between multiple themes in this video.
| | 02:16 | We noticed that there are some
differences, like the headers have a box around them.
| | 02:19 | It looks quite different.
| | 02:23 | So let's close this and let's actually
look at the Minnelli theme, which looks
| | 02:28 | just like Garland in the previous screen shot.
| | 02:30 | So let's see what that's about.
| | 02:32 | So I enabled Minnelli as the default,
and it looks just like Garland, but with
| | 02:37 | one apparent difference.
| | 02:38 | Go to the Home. We see, now, that, actually,
this is a fixed-width version of Garland.
| | 02:44 | Okay, so let's look at the other pages
real fast, looks good, looks good. Okay.
| | 02:50 | Close, and we have one final theme to
go through here, which is Pushbutton.
| | 02:54 | Let's click OK, Save
configuration, and we see this is also a
| | 03:00 | liquid-based layout.
| | 03:02 | So let's go and view the homepage,
and see how our content looks.
| | 03:05 | It looks pretty good. Click services.
| | 03:09 | It looks fine, About us, blog.
| | 03:11 | It's got some orange and some blue.
| | 03:16 | Well we've gone through all the
themes, but Garland is probably the most
| | 03:20 | reliable out of all the default themes.
| | 03:24 | You can pretty much expect Minnelli as
just as reliable, because, technically,
| | 03:27 | Minnelli is what's known as a sub-theme,
or a theme based on a parent theme, and
| | 03:34 | its parent theme is actually Garland.
| | 03:36 | One important difference that Garland
and Minnelli have over all the other
| | 03:41 | themes is that these are the only two
default themes in Drupal 6 that do not use
| | 03:47 | HTML tables for their layout.
| | 03:50 | In fact, these are tableless and
all the other themes are tabled.
| | 03:55 | One big difference, too, is this theme
Chameleon is actually a pure PHP-based theme.
| | 04:05 | So there are no templates that power Chameleon.
| | 04:09 | So programmers actually can reference
Chameleon to see how they can code a
| | 04:13 | theme with just purely PHP, but that's
not what we are doing in our title, we
| | 04:19 | are actually be going through
and building themes with templates.
| | 04:23 | And we are not going to be basing any
of our templates off any of these themes
| | 04:28 | that do provide templates, and before we
are done here, I don't plan to leave all
| | 04:33 | of these themes enabled, I
only want Garland enabled.
| | 04:36 | So let's actually deselect each of
the other themes, from being Enabled.
| | 04:42 | I do not recommend deleting any of the
Core Drupal themes, but if you're going
| | 04:46 | to take things into your own hands
and choose to delete some of the default
| | 04:50 | themes then be sure to never ever
delete Garland or Minnelli, as these themes
| | 04:56 | power both Drupal's
installation and update screens.
| | 05:00 | You're asking for trouble when
deleting anything in Drupal's Core.
| | 05:05 | Even though some of these themes look
great, they aren't the best way to learn
| | 05:09 | how to build a Drupal theme, unfortunately.
| | 05:11 | Figure, these themes are all
legacy and should be treated as such.
| | 05:15 | Throughout the rest of this course, we
will be building a sub-theme built on top
| | 05:19 | of Garland, and a custom theme not
built on any of these themes at all.
| | Collapse this transcript |
| Configuring global theme features and post settings| 00:01 | In Drupal, themes have features.
| | 00:03 | These theme features allow designers
to toggle elements a theme can control,
| | 00:07 | like if the site logo is shown or not.
| | 00:10 | In addition to features, Drupal themes
share global display settings that allow
| | 00:15 | you to set which node types would have
author info appearing in them, which is
| | 00:20 | perfect for blog posts, but
not pages or our flower products.
| | 00:24 | Let's see what features and post
settings are available in Drupal 6, and how
| | 00:28 | they affect all themes.
| | 00:30 | So to configure the global theme
settings for our Drupal site, we need to visit
| | 00:34 | the Themes Administration page.
| | 00:36 | So from the Administer screen, we click
Themes and there is actually a tab up
| | 00:42 | here at the top that says Configure.
| | 00:45 | Now this Configure link is different
from the configure links that appear next
| | 00:50 | to each theme that is only enabled.
| | 00:51 | We are not going to go here. We are
going to, actually, click up in this tab, next
| | 00:56 | to List, and this brings us to
the Global Settings page for themes.
| | 01:02 | Now this page will actually
affect all themes across our site.
| | 01:06 | Right now we only have Garland, but we
can still set these settings now, and
| | 01:11 | have our custom themes
pick up these settings later.
| | 01:15 | So the first side that I'll introduce
to you is the Toggle display side, these
| | 01:19 | are the theme features I was mentioning,
and we can do things like toggle off
| | 01:26 | the Logo, toggle off even
things like Primary links.
| | 01:30 | The Primary links, remember, are our main
menu navigation up at top, and the logo
| | 01:35 | appears in the top left corner of Garland.
| | 01:38 | So with the Logo now off and
the Primary links also off,
| | 01:41 | let's click Save
configuration, and see what happens.
| | 01:45 | Now we see that Drupal has respected
our feature settings, and has removed the
| | 01:50 | logo and the primary menu.
| | 01:53 | Let's bring those back, Logo and Primary
links, Save configuration and now they are back.
| | 02:01 | There is one feature, before we leave
this box, that I want to make sure is
| | 02:04 | enabled, and that's the Search box.
| | 02:08 | We are going to use this in
our custom theme later on.
| | 02:11 | So make sure it's enabled.
| | 02:14 | Now coming to the right side of this
administration screen, we see the Display
| | 02:17 | post information, and in here is
actually a list of every content type, or node
| | 02:24 | type that is actually installed into our site.
| | 02:27 | So we see that default Drupal content
types: Blog, Page and Story and any of our
| | 02:33 | custom types, which, right now, we have as Flower.
| | 02:36 | This Display post information, as it
outlines in this help text, is actually
| | 02:40 | where you can deactivate, or remove
the author name, and info details of the
| | 02:47 | post, when they are viewed.
| | 02:49 | So let's actually make sure that Pages do
not have the author info, nor our flowers.
| | 02:56 | So I am going to go to, actually, before I
click Save configuration, I am going to
| | 03:00 | go open the Homepage in the new tab.
So we can see right now, we actually get
| | 03:05 | the author details at the top of every
Flower post, and of course, as expected, at
| | 03:13 | the top of every blog post.
| | 03:15 | We do not want this on the flowers,
but we do want this on the blogs.
| | 03:21 | So let's go back to the Themes
Administration screen, make sure we are in Global
| | 03:25 | settings, and we are going to
uncheck Flower and Page and click Save.
| | 03:33 | So now that our configuration
options have been saved, let's go refresh
| | 03:36 | our Homepage tab and see how the flowers
will now no longer carry the author details.
| | 03:43 | Click refresh and now Drupal has
removed the author info from the flower types,
| | 03:50 | but, as expected, not from our blog types.
| | 03:53 | We can even check our services page,
and see that it no longer also has the
| | 03:58 | author info, nor the about us
page, and that's what we want.
| | 04:02 | So closing this tab, going back, we can
now see that any content type that we
| | 04:07 | create, or is added by a module that we
install, would actually appear here, and
| | 04:12 | we should come back to this screen
anytime we've created a content type or
| | 04:16 | install the module that provides a new
type to make sure that we set which ones
| | 04:21 | would actually have posts
information and which one should not.
| | 04:24 | These standard features available to all
Drupal 6 Themes are good enough for most users.
| | 04:30 | Theme features are neat but are limited to
the defaults that you see here in Drupal.
| | 04:35 | If you're wondering if a custom theme
can have its own custom features, this is
| | 04:39 | possible, but it requires a lot of
complex PHP programming, and should be left
| | 04:44 | in the realm of developers.
| | Collapse this transcript |
| Adding a logo and shortcut icon (favicon)| 00:01 | One of the simplest ways to customize a
Drupal site through its theme layer is
| | 00:05 | to change the logos.
| | 00:07 | In this video, I will be showing how
to change both the logo and the favicon
| | 00:11 | that usually appears at
the top of a web browser.
| | 00:14 | So to change the logo and favicon in
Drupal, we need to visit the Global
| | 00:19 | settings screen, under the
Theme Administration page.
| | 00:22 | To do that, we will start from the
Administer screen and click on Themes.
| | 00:26 | Now that we are at the Themes
administration screen, we will click on the tab
| | 00:31 | Configure to reach the Global settings page.
| | 00:35 | In here is where we can
actually add the logo and favicon.
| | 00:38 | If you are unfamiliar with what a
favicon is, they are also known as shortcut
| | 00:43 | icons and they appear at the very top,
usually, of your browser, next to the
| | 00:48 | address of the site you are viewing.
| | 00:50 | We see there is a small Drupal logo
used on the site, but an even smaller
| | 00:55 | version of the logo used as the favicon.
| | 00:57 | We are going to replace both of these graphics.
| | 01:01 | So let's go down to the bottom of the
Global settings page, and we see these two
| | 01:06 | areas that allow us to upload a
graphic file for the logo and down here, a
| | 01:11 | little form that allows us to upload a favicon.
| | 01:14 | For this demonstration, I am going to
be using the same graphic file for both
| | 01:18 | the logo and the shortcut icon.
| | 01:20 | So to change a logo, let's click
Browse, and we are going to pull in the
| | 01:25 | hp_logo graphic file you see here,
which is actually a logo for the Hansel and
| | 01:33 | Petal Flower website theme that we are going to
be building throughout the rest of this course.
| | 01:38 | So this is where this file comes from.
| | 01:40 | So we are going to click OK and then
for the shortcut icon, we are going to
| | 01:44 | click Browse as well, and
choose the same graphic, click OK.
| | 01:49 | Now, when we click Save Configuration,
you are going to notice that the logo and
| | 01:54 | the favicon have both been changed.
| | 01:56 | So if you look in the top-left corner,
we see that the logo is now the custom
| | 02:00 | logo graphic we uploaded, and if you look
real closely, the favicon has changed as well.
| | 02:08 | A favicon should be designed at
either 16X16 pixels, or 32X32.
| | 02:15 | As you can tell, this graphic is
nowhere formatted to be that size, so it
| | 02:21 | doesn't look good as a favicon.
| | 02:22 | I am sure when you do your own custom
logos, you can create a good one for the
| | 02:28 | browser's favicon tab.
| | 02:30 | So after uploading these,
where does Drupal save these files?
| | 02:33 | Well, let me show you.
| | 02:35 | So I am going to open my Drupal folder.
| | 02:37 | I am going to go into the sites folder,
and then my lynda-drupal-themes folder,
| | 02:42 | which is this Drupal site we are building,
and in there, there is a files folder
| | 02:47 | where all the files have
been uploaded for our content.
| | 02:51 | In here, we can see that there
are two new files, logo and favicon.
| | 02:58 | These files are actually
the ones we just uploaded.
| | 03:01 | Drupal had renamed them to
be logo.png and favicon.png.
| | 03:07 | This is where Drupal is now calling
these graphic files for our theme.
| | 03:11 | So I am going to minimize my Drupal
folder and before I go, I want to actually
| | 03:17 | revert back the logo and
favicon to the standard Drupal logo.
| | 03:22 | So let's scroll back down in the Global
settings page, and we are going to check
| | 03:27 | this box that says Use the default logo
and we will check the box, also, that says
| | 03:33 | Use the default shortcut icon.
| | 03:35 | We will leave the values in for
our custom logo and custom favicon.
| | 03:40 | Those will be just fine and as long as
this check box each are enabled, it will
| | 03:45 | override what this path is.
| | 03:48 | So let's click Save configuration and
you see now both the logo and favicon
| | 03:54 | have reverted back.
| | 03:56 | For people who like the default
theme in Drupal, changing the logo is the
| | 04:00 | easiest way to customize the look of a
Drupal site without adding or editing
| | 04:05 | any code.
| | Collapse this transcript |
| Setting the administration theme| 00:01 | Earlier, we learned that Drupal
can have more than one theme enabled.
| | 00:04 | A great use of this feature is when a
site would like to have one theme for
| | 00:08 | visitors, and one theme
for its site administrators.
| | 00:11 | In this video, I will show how to
select an administration theme that only
| | 00:15 | site admins will get to see, while
everyone else will continue to see the
| | 00:19 | default site theme.
| | 00:21 | So to set the Drupal administration
theme, we're going to be visiting a new
| | 00:25 | screen that we have not seen
yet in this course, and that's the
| | 00:28 | Administration Theme page.
| | 00:31 | So starting from the Administer screen,
we're going to click on Administration
| | 00:35 | theme, which is its own link, and
when we come to this page, we see two
| | 00:40 | elements that we can set.
| | 00:41 | The first is our choice of which
theme will be the administration theme.
| | 00:46 | So for this demo, let's choose
Garland, and the option to view the
| | 00:51 | Administration theme while editing
content. I want to use this option as well.
| | 00:56 | So check the box and click Save configuration.
| | 00:59 | Now, nothing has changed for us yet, because
Garland is actually also our site default name.
| | 01:07 | So now that we're changed the
Administration theme, we can safely go choose
| | 01:11 | another theme that everyone
else will be able to view.
| | 01:14 | To do that, we must go back to the
Administer screen, so click Administer, then
| | 01:20 | click Themes and now it will let
you choose a new default site theme.
| | 01:25 | So we're going to leave Garland enabled.
| | 01:28 | So we're going to choose a theme that
is different from Garland and one of the
| | 01:31 | best choices for this demo will be Marvin.
| | 01:34 | So we select Marvin to be
enabled and to be the default theme.
| | 01:40 | Remember, leave Garland checked as enabled,
go down and click Save configuration.
| | 01:46 | And as we see, nothing has changed, but
Drupal has set a message for us saying
| | 01:52 | that the Administration theme is set to Garland.
| | 01:54 | So this page remains unchanged.
| | 01:57 | We will need to visit the homepage to see
the Marvin theme being used for our front end.
| | 02:04 | Now, if we go back, and just to prove
it, I refresh my Administration screen,
| | 02:09 | we're still in Garland. I go back.
| | 02:12 | Refresh the homepage. It's Marvin.
| | 02:15 | So, let's click around and we see that
Marvin is coming up for everything.
| | 02:19 | But if we were to click the
Administer link, we're back in Garland.
| | 02:23 | So going back to the content, I want to
show you now, when you edit a node, so
| | 02:28 | I'm logged in and I get to
see the tabs View and Edit.
| | 02:33 | When I Edit this node, I'm now taken
back to Garland, because I chose the
| | 02:37 | option to use the
Administration theme while editing content.
| | 02:41 | So I'm not going to edit anything here.
I am going to go back, click View and we
| | 02:45 | see Marvin and this will be the last
time we probably will get to use Marvin
| | 02:51 | because everything we do
from now on will be custom.
| | 02:54 | So let's close this screen and now
let's set our Garland theme back to be the
| | 03:00 | default theme and let's disable Marvin,
because we won't need it any more.
| | 03:04 | So go down, click Save configuration.
| | 03:08 | A very important note
about Administration themes.
| | 03:10 | Before you install any new theme, you
should definitely set the Administration
| | 03:15 | theme first to a Drupal
core theme, like Garland.
| | 03:19 | The reason being, if you install a new
theme without setting an Admin theme, you
| | 03:24 | could potentially lock yourself out by accident.
| | 03:27 | This happens when the new theme
does not have a particular feature or
| | 03:31 | region expected by Drupal.
| | 03:33 | By setting the Administration theme
first, you avoid that scenario of getting
| | 03:38 | locked out of your own website.
| | 03:41 | Administration themes are not limited
to the themes that come in Drupal core,
| | 03:45 | and while any theme can be an Admin
theme, I do recommend, strongly, that leaving
| | 03:50 | Garland as the Administration theme
is your best bet, since it's the most
| | 03:55 | reliable theme for Administration screens.
| | Collapse this transcript |
| Installing a new theme| 00:01 | By now, I'm sure you're familiar
with the core themes in Drupal 6.
| | 00:05 | I think it's time we install a new Drupal theme.
| | 00:08 | In this video, I will download a
reliable theme from the Internet, and install
| | 00:12 | it in our Drupal site.
| | 00:13 | So to do that, I actually
need to download the theme first.
| | 00:17 | So I am going to go visit drupal.org,
the official website for Drupal, and I am
| | 00:22 | going to go click on the Themes section, and
now, I am presented with a bunch of themes.
| | 00:26 | But I only want to filter by Drupal 06.
| | 00:27 | So I am going to click to 6.x filter.
| | 00:30 | And now I could see a list
of only Drupal 06 themes.
| | 00:33 | I am going to go scroll down, and I am
actually going to download one of my new
| | 00:37 | favorite themes, called Acquia Slate.
| | 00:39 | This is a new dark theme developed
by the TopNotchThemes group, who do
| | 00:45 | excellent Drupal themes.
| | 00:47 | So go ahead and click to download
the Drupal 6.x version of this theme.
| | 00:51 | I've already downloaded it.
| | 00:52 | So let's go and learn
how to install those files.
| | 00:54 | I am going to minimize my web browser,
and, as you could see, the acquia_slate
| | 00:59 | theme folder is on my Desktop.
| | 01:02 | I need to put this into my
sites/all themes folder of drupal-6.
| | 01:06 | So let me open my drupal-6 folder,
and of course, I am going to go into the
| | 01:11 | sites/all, and since we don't have the
themes folder here, I am going to go create one.
| | 01:20 | So remember, we are in sites/all/themes
and this is actually where we would be
| | 01:26 | installing any new themes for Drupal.
| | 01:29 | So I am going to go drag in my acquia_
slate theme, minimize my folder and now I
| | 01:34 | am going to go back to my web browser.
| | 01:36 | But before I enable the new theme,
we need to make sure that we have the
| | 01:40 | administration theme set.
| | 01:43 | So in the Administer screen, I am
going to go scroll down and click
| | 01:46 | Administration theme, and we see
that I still have it set the Garland.
| | 01:50 | That's what I want.
| | 01:51 | So go back to Administer, and now
let's visit the Themes page. We should now
| | 01:56 | see the new theme, Acquia Slate, listed with
all the other core themes that come with Drupal.
| | 02:01 | We are going to enable this theme,
and even set it as the default.
| | 02:05 | We are going to leave Garland
enabled, and click Save configuration.
| | 02:11 | So now we have not seen anything changed on
our side because we're still in the admin screen.
| | 02:16 | So now let's click over to the home
page in a new tab, and we see our site has
| | 02:22 | totally changed it's theme
using the Acquia Slate theme.
| | 02:26 | Our primary navigation still exists, and
the left sidebar renders our navigation
| | 02:32 | block, just as expected.
| | 02:34 | The site title is picked up,
all our content is also themed.
| | 02:38 | In fact, let's view one
of the inner content pages.
| | 02:42 | Remember, we are logged in, so
that's why we get the View and Edit tabs.
| | 02:46 | But we see that this is
actually a very nice theme.
| | 02:49 | Closing this Content page, let's
visit the About Us page. It looks good.
| | 02:54 | Now, let's go back to the Administer
screen, and of course, we are back to the
| | 02:59 | Garland theme, because the
Administration screen was set to Garland.
| | 03:04 | Now, before we go, even though I like
the Acquia Slate theme, I am going to
| | 03:09 | actually disable it because we want
to create our own custom theme for this
| | 03:14 | flower shop we are building.
| | 03:16 | So let's go back to the
themes administration screen.
| | 03:19 | Let's disable Acquia Slate and
choose Garland again as the default theme.
| | 03:25 | Click Save configuration, double
check by visiting the home page, and we
| | 03:30 | are back to Garland.
| | 03:32 | So even though Drupal has hundreds of
themes available, I would advise you
| | 03:36 | to not download and run any theme without
putting it through a little bit of testing first.
| | 03:41 | A good Drupal theme should render
well across multiple browsers, and be
| | 03:45 | regularly maintained.
| | Collapse this transcript |
| Positioning blocks in theme regions| 00:01 | When a theme is enabled in Drupal, the
secondary content, known as blocks, can be
| | 00:05 | arranged differently for
each theme that is enabled.
| | 00:08 | In this video, I will show you the
basics of setting how blocks should appear,
| | 00:12 | when more than one theme
is enabled on a Drupal site.
| | 00:16 | So to get to the block's administration
screen, we actually need to go through
| | 00:20 | the Administer screen.
| | 00:21 | So I am going to go click on Blocks,
and now I want to show you that this is
| | 00:26 | going to only configure the blocks for the
default theme, which is Garland, in this case.
| | 00:34 | I would rather show you how to
administer the blocks when more than one theme is
| | 00:39 | enabled, because basic block's
administration is actually already covered in the
| | 00:44 | Drupal Essential Training
Course, also on lynda.com.
| | 00:47 | So let's go back to the Administer
screen by clicking Administer in the
| | 00:50 | Navigation menu, and enabling a second theme.
| | 00:55 | So let's go to the Themes
administration and let's turn on Marvin, and set it
| | 01:01 | as our default theme.
| | 01:04 | Click Save configuration, and if
you've been following along in this chapter,
| | 01:09 | you will remember that our
administration theme has been set to Garland.
| | 01:14 | So we will only be able to see the
Marvin theme, when we visit the content
| | 01:19 | pages, and not any of the
administration screens we are on, currently.
| | 01:23 | So now that we have more than one theme
enabled, we can set the blocks per theme.
| | 01:28 | Let's click Administer, and
now let's go back to the Blocks
| | 01:31 | administration screen.
| | 01:32 | We see that Drupal has actually changed
to be the Marvin theme. Now, why is that?
| | 01:38 | Because this is an administration
screen, so shouldn't it show Garland?
| | 01:43 | Well, that's not the case when
administering blocks and their positions,
| | 01:48 | because Drupal needs to show you where those
blocks are going to appear within that theme.
| | 01:55 | So on the Blocks administration screen,
this is the one page, in the admin, that
| | 02:00 | will actually use the default
theme that is not set as the admin theme.
| | 02:05 | So I want to point out, at the top,
near the tabs, List and Add Block are now
| | 02:10 | the list of themes that are enabled.
| | 02:13 | So if we had more than two themes enabled,
the other themes would also list next
| | 02:18 | to Marvin and Garland.
| | 02:20 | So we're making sure we are on Marvin,
as we can see with the current page being
| | 02:24 | rendered, and the secondary
tab being chosen as Marvin.
| | 02:28 | We can now go down and actually position
the blocks in whichever region we would like.
| | 02:35 | Unfortunately, Marvin is a pretty
limiting theme, since it only has a Left and
| | 02:40 | Right Sidebar, but this will work for our demo.
| | 02:43 | Let's add the Drupal News feed latest
items block to the right sidebar, and we
| | 02:49 | did that by dragging the
block into the region name.
| | 02:54 | Let's also add the search form. But
this time, instead of dragging the block,
| | 02:59 | I am going just choose the region through
the drop-down menu, next to the block name.
| | 03:04 | I am going to go add the Who's
online block, by dragging it in.
| | 03:10 | And now we have got a few blocks that
will appear on the left side and a few
| | 03:13 | blocks that appear on the
right side for the Marvin theme.
| | 03:17 | Let's click Save blocks, and now we
see the new blocks have appeared in the
| | 03:21 | right sidebar for the Marvin theme, as expected.
| | 03:25 | When we go to click on Garland, now, we
see that the Right sidebar does not have
| | 03:32 | any of the blocks that we
applied towards the Marvin theme.
| | 03:36 | Rightfully so, because each theme would
have its own regions, and can have its
| | 03:41 | own block placement in those regions.
| | 03:44 | So for fun, let's add a couple
regions to the Right sidebar of Garland.
| | 03:49 | So I am going to add the Syndicate block,
the Who's new and then the Who's online.
| | 03:56 | So if I scroll up, we see Left sidebar
has a couple blocks, right sidebar has a
| | 04:00 | couple blocks, and we see that we can
put some blocks in other regions, but we
| | 04:05 | don't need to do that in this demo.
| | 04:07 | Go down, click Save blocks and now we
see that we have a few blocks showing up
| | 04:12 | in the Right sidebar of Garland, and if
we click back to Marvin, we saw the ones
| | 04:17 | that we administered for Marvin,
which are these right side blocks.
| | 04:21 | Now, let's go and click around the website.
| | 04:23 | So I am going to go open a new tab to
the homepage, and remember, the content is
| | 04:28 | being viewed in the Marvin theme.
| | 04:30 | So we see our right side blocks.
| | 04:32 | If we were to click Administer, this
would show the administration screen, which
| | 04:37 | we have configured to have
some right side blocks now.
| | 04:40 | Let's go back to the Blocks
administration screen, and let's actually remove the
| | 04:46 | right sidebar blocks we just added to Garland.
| | 04:49 | So choose the none region in the
dropdown menu for each block that you
| | 04:54 | positioned in the right sidebar for
Garland, and when we are done choosing none,
| | 05:00 | we have to go down and click Save blocks.
| | 05:03 | Now, we've brought Garland back to
what it was, before we added those blocks.
| | 05:07 | Instead of me repositioning the blocks
in Marvin, I am going just now disable
| | 05:13 | the Marvin theme, because
we don't need it anymore.
| | 05:16 | So we go back to Themes, disable Marvin,
reset Garland as the default, click
| | 05:24 | Save configuration and now we
are back to where we started.
| | 05:29 | Since I want to have Marvin disabled,
because I don't need it for the rest of
| | 05:33 | this course, it's good to know that
if you were to come back and re-enable
| | 05:38 | Marvin, that Drupal will remember what
blocks you positioned, where, for Marvin.
| | 05:44 | This is a nice feature of Drupal, as it
does not forget where the blocks were.
| | 05:48 | We will be revisiting the Blocks
administration screen when it's time to
| | 05:53 | position blocks for our custom flower theme.
| | Collapse this transcript |
| Setting user theme permissions| 00:00 | As we saw earlier in the chapter,
Drupal can have more than one theme enabled
| | 00:04 | on a site, but only administrator was able
to choose the overall theme for the site.
| | 00:09 | A nice feature for users is the ability to
be given permission to choose their own theme.
| | 00:15 | In this video, I will enable two themes
and create a new generic user and show
| | 00:20 | how that new user can have
their own theme chosen for the site.
| | 00:24 | Now, before we actually can give the user
permission, we need to actually create a user.
| | 00:28 | So let's do that real quick,
through the Drupal Administration screen.
| | 00:33 | We're going to click Users, then
we're going to click Add user.
| | 00:36 | We're going to create a new user,
called user2, and the E-mail address could
| | 00:42 | actually be something fake, so
we'll say chris@local and the password,
| | 00:48 | we'll just use 'user'.
| | 00:51 | So we'll make sure that the user
is Active, click Create a new account.
| | 00:55 | Now the new account has
been created for the user2.
| | 00:58 | We can then go back to the
administration screen, and actually enable more than
| | 01:04 | one theme in the Themes
administration, because we will then give the user
| | 01:09 | permission to choose one of these themes.
| | 01:12 | So we'll enable Marvin, click Save.
| | 01:16 | So before I give the new user
permissions to choose their own theme, let me show
| | 01:20 | you what the user will see right now.
| | 01:22 | So instead of logging out in my Firefox
browser, I'm going to actually minimize
| | 01:27 | Firefox and open a different browser.
| | 01:29 | So I'm going to open Internet Explorer,
and we're going to log in to the local site.
| | 01:42 | So let's copy our URL, minimize Firefox,
and now we're going to paste the URL
| | 01:49 | into our other theme.
| | 01:51 | Instead of visiting the Administration
screen, which the copied URL will take us
| | 01:57 | to, I'm going to actually trim down
the URL to just visit the homepage.
| | 02:03 | We're going to log in
with the user2 credentials.
| | 02:08 | So my Username is user2 and the Password I
gave that user is just user. So click Log in.
| | 02:14 | I don't want to store the password this
time, and we see that Navigation is much
| | 02:19 | different than our administrator.
| | 02:21 | So we're going to click My account, and
now we're going to click Edit, and this
| | 02:24 | is actually where the user
can edit their own profile.
| | 02:27 | So right now, we do not see any options to
choose our own theme. Let's change that.
| | 02:32 | I'm going to minimize Internet Explorer.
| | 02:33 | I'm going to open my Firefox, where I'm
logged in as an admin, and we're going
| | 02:40 | to now go to the Administer screen
and we're going to choose Permissions.
| | 02:47 | This is where you can actually set all the
user permissions for any feature of Drupal.
| | 02:52 | Permissions, for Drupal, are actually
covered in detail in the Drupal Essential
| | 02:56 | Training course, also available on lynda.com.
| | 02:59 | So we're going to scroll down to the
System section and we see that there is a
| | 03:04 | permission here, Select different theme.
| | 03:07 | We're going to enable this
permission to the Authenticated users only.
| | 03:12 | So now we click Save Permissions,
permissions have been saved, let's now
| | 03:17 | minimize Firefox, and reopen Internet Explorer.
| | 03:20 | I'm going to now refresh this
Edit Profile page for the user2.
| | 03:26 | We now see that the user is given options in
their profile page to choose their own theme.
| | 03:33 | So let's have this user choose the
selected theme for Marvin, click Save, and
| | 03:39 | now we see user2 has now chosen their own
theme and they're viewing the site in Marvin now.
| | 03:46 | Since they are not a site
administrator, they would not end up seeing the
| | 03:49 | Garland theme again until we revoke their
privileges, or change the theme on them entirely.
| | 03:56 | So now I can actually log out, and
you will see that the logged out user
| | 04:02 | is viewing Garland.
| | 04:04 | This is because we only gave
permission to choose a custom theme to
| | 04:09 | authenticated users, or people
who have an account to log in with.
| | 04:13 | Now going back to Firefox, where we're
logged in as an admin, I actually now
| | 04:19 | want to disable the second theme,
because we won't need it throughout the
| | 04:24 | rest of this course.
| | 04:25 | So I'm going to go back to Administer,
I'm going to click on Themes, we're going
| | 04:31 | to disable Marvin and
leave Garland as the default.
| | 04:35 | We're going to click Save configuration.
| | 04:38 | Now you may have noticed, I did not
remove the permission of setting your own
| | 04:42 | theme under the Permission screen.
| | 04:44 | This wasn't necessary since we don't
have more than one theme enabled right now.
| | 04:49 | If you would like to remove that
permission, you could do so on your own.
| | 04:53 | Letting users choose their own theme
is nice, but isn't always necessary.
| | 04:57 | If your users need this functionality,
it is built into Drupal and does not need
| | 05:01 | any complex setup, as you've seen, to
provide them with the ability to choose
| | 05:05 | their own theme on a site.
| | Collapse this transcript |
|
|
5. Modifying Existing ThemesUsing the Color module to change color schemes| 00:00 | Drupal 6 offers simple theme
customization features without any code required.
| | 00:06 | Changing the default colors for
the Garland theme is easy and quick.
| | 00:11 | In this video, I will explain how
the color module is used to modify a
| | 00:15 | default theme's colors.
| | 00:17 | So to alter Garland's colors, we need
to visit the Theme Administration page.
| | 00:23 | So starting from the Administer screen,
we click Themes, and we'll actually, now,
| | 00:29 | click on the configure link, right
next to Garland, so not the tab at the top,
| | 00:36 | but the link in the same row as the theme.
| | 00:39 | So we click configure and now we're
brought to the Garland configuration screen.
| | 00:44 | If you notice at the top, we have the Global
settings tab that we visited in a previous video.
| | 00:51 | Now we're in the Garland
tab, under those settings.
| | 00:55 | So we'll actually scroll down just a
little bit, and as you can see, there's
| | 01:00 | something pretty magical right here,
which is an implementation of the color
| | 01:04 | module for the Garland theme.
| | 01:06 | Drupal 6 ships with a core module called Color.
| | 01:11 | The Color module is available in
Drupal's core for modules and themes to take
| | 01:17 | advantage of, to provide things like a
color wheel and manipulation to CSS and
| | 01:23 | graphics from the colors chosen.
| | 01:26 | Now, I want to point out that these
colors that we see here are actually all
| | 01:32 | defined in the theme.
| | 01:35 | We can change these colors.
| | 01:37 | As you see, there's a live preview
update below, and even though I'm not
| | 01:43 | producing a very pretty color change,
I don't have to depend on my own
| | 01:49 | designer skills to choose colors,
because we have actually a whole set of
| | 01:54 | color schemes available.
| | 01:56 | So let's look at the Mercury theme.
| | 01:58 | This is a nice, soft gray.
| | 02:02 | Another one of my favorites is Ash,
which is a nice dark theme, or we can get
| | 02:07 | pretty bright and go with something
like Pink Plastic. So let's do that.
| | 02:12 | Let's pick pink.
| | 02:14 | So this color scheme already
predefines the colors and enters them in for us.
| | 02:19 | We can now scroll down and
click Save configuration.
| | 02:25 | This site has now changed from its
standard blue to the Pink Plastic color scheme.
| | 02:30 | So let's visit a couple of pages.
| | 02:32 | Let's go to the Home page in a new tab.
| | 02:35 | We're pink all over.
| | 02:37 | Let's see, services, blog, and it's all pink.
| | 02:43 | One thing about this is there are some
files Drupal creates, and you're notified
| | 02:49 | every time you change the colors.
| | 02:51 | Let's now visit this files folder
that Drupal has actually entered all
| | 02:56 | these graphics into.
| | 02:58 | So we're going to go to our Drupal-6
installation folder, we're going to open
| | 03:04 | sites, our lynda site, and
go into the files folder.
| | 03:09 | In here, we see a new folder added called 'color'.
| | 03:13 | We go into color and we see that there
is this kind of special key given to the
| | 03:19 | folder name, prefixed by the garland
theme and suffixed by a random key that is
| | 03:27 | given at the time of creation.
| | 03:28 | Let's go inside there, and now we
could see all these graphics that were
| | 03:34 | actually changed to pink.
| | 03:37 | We also can edit the style sheets and
view them to see that the colors, pink,
| | 03:43 | have actually replaced every instance of blue.
| | 03:46 | So Drupal did all this magic work for us.
| | 03:48 | We're going to go back to the files folder.
| | 03:52 | We're going to minimize our Drupal
install site and while this Pink Plastic is
| | 03:58 | kind of poppy, I think it'd be good if
we go back to the default garland colors.
| | 04:03 | Now, it would actually be really hard
for me to remember what the colors were by
| | 04:09 | heart, and thankfully, there's
actually the default color scheme called Blue
| | 04:14 | Lagoon, which is what
Garland is actually built from.
| | 04:18 | So we can choose this default color
scheme and click Save again to then generate
| | 04:25 | the blue colors in files all over again.
| | 04:29 | Garland and Minnelli, which is a
subtheme of Garland, are the only default
| | 04:34 | themes in Drupal 6 that
take use of the color module.
| | 04:38 | Technically, any custom theme
could utilize the color module as well,
| | 04:43 | for whatever reason.
| | 04:45 | But this requires some heavy PHP
programming, and we will not be covering
| | 04:49 | that in this course.
| | 04:50 | If you don't want to get into creating
a theme, changing the colors is an easy
| | 04:55 | way to customize Drupal's default
theme to create something unique.
| | Collapse this transcript |
| Preparing to build a sub-theme| 00:00 | When you have a theme you like,
but it needs some customization
| | 00:03 | that cannot be done through
the Drupal admin interface,
| | 00:06 | you can build a new theme on
top of the theme you already like.
| | 00:10 | This is known as creating a subtheme,
which means it will be built on top of an
| | 00:16 | exiting theme, we
affectionately call a parent theme.
| | 00:20 | Producing a subtheme is the preferred
method over duplicating or hacking other themes.
| | 00:26 | In this video, I will explain
the basics of subthemes in Drupal.
| | 00:31 | If you've been following along in the
previous chapters, we've already actually
| | 00:34 | been introduced to a couple of subthemes.
| | 00:37 | Let's see who they are.
| | 00:38 | Starting from the Drupal Administer
screen, click on Themes, scroll down.
| | 00:46 | Two themes here, Marvin and
Minnelli, are actually legitimate subthemes.
| | 00:51 | Marvin is a subtheme of Chameleon, while
Minnelli is actually a subtheme of Garland.
| | 00:59 | Any theme could be subthemed in Drupal.
| | 01:02 | Subthemes are created and
installed like every other theme.
| | 01:06 | Let's see what makes a subtheme tick.
| | 01:08 | So I'm going to open up my drupal-6
folder, I'm going to visit the themes folder
| | 01:15 | and I'm going to garland, then minnelli.
| | 01:18 | I'm going to open up the minnelli.info
file and I'm going to show you what
| | 01:26 | actually defines Minnelli
as a subtheme to Garland.
| | 01:30 | This minnelli.info file is actually
the theme declaration for Minnelli, so it
| | 01:37 | has all the properties that Drupal is
expecting to reside in the theme info
| | 01:42 | file, so it can understand what is the
theme, and what parts make up the theme.
| | 01:47 | So a quick review, we see the name
Minnelli, description, which is a long
| | 01:52 | sentence, version, which we'll come
back to later, core, which equals 6.x. So
| | 01:59 | that means, this theme
will only work for Drupal 6.
| | 02:04 | We see, here, a very important
line, base theme = garland.
| | 02:09 | This is something that we're going to
include in the next movie, into our own
| | 02:13 | subtheme, since we'll be
basing ours on Garland as well.
| | 02:18 | So before I go on to the other stuff
below the base theme property, let me show
| | 02:23 | you where you can actually see a whole list of
all the properties available to a theme.info file.
| | 02:29 | So I'm going to visit the Drupal website,
and in the Theme guide, for Drupal 6,
| | 02:37 | there is a page that actually defines
all the properties and explains them, so
| | 02:42 | you can actually go through and choose
the properties that make sense for your
| | 02:46 | theme info file, and go ahead and
copy-paste, and then edit as necessary.
| | 02:51 | So let's actually just do a quick review.
| | 02:54 | We see name, description, version, core,
engine, base theme, just like we saw in
| | 03:04 | the Minnelli.info file.
| | 03:06 | If you scroll down little more, we actually
see descriptions and examples for each property.
| | 03:12 | We'll be coming back to this page when we're
building our own theme.info file, in the next movie.
| | 03:17 | So I'm going to go back to my Minnelli.info
file, in my Dreamweaver, to show you a
| | 03:23 | couple of points that you
need to know about subthemes.
| | 03:26 | The first is if you notice on line
7 of minnelli.info, there is a style
| | 03:32 | sheets declaration.
| | 03:33 | We'll be actually doing this
ourselves in one of the next videos.
| | 03:37 | We see that minnelli.css is used here.
| | 03:41 | Well, let's go actually enable
Minnelli real quick in our Drupal site.
| | 03:46 | So, going back to the Theme
administration page, I'm going to enable Minnelli
| | 03:52 | and choose it as the default.
| | 03:54 | I'm going to leave Garland
enabled, and that's fine.
| | 03:57 | I'm going to click Save configuration, and
now that Minnelli is used for the homepage,
| | 04:02 | let's visit the homepage and let's
view the source now of the screen.
| | 04:08 | So let's go through and see how Drupal
has actually assembled the style sheets
| | 04:13 | for both the parent and subtheme.
| | 04:15 | Now remember, the parent theme is
Garland and the subtheme is Minnelli.
| | 04:20 | We can see here, in the list of CSS
declarations, that there are actually a couple
| | 04:26 | of style sheets for Garland.
| | 04:28 | We see that themes/garland/style.css is
being loaded and later garland/print.css
| | 04:38 | is also pulled in, and right after the
style sheet for Garland and before the
| | 04:45 | print sheet is actually
minnelli.css being loaded.
| | 04:50 | So, as you could see, the parent theme
gets its styles loaded first, and then the
| | 04:56 | subtheme gets its styles loaded right after.
| | 05:00 | This is because CSS provides the
capability to alter styles in a cascade, and
| | 05:07 | that's exactly what the
subtheme does to its parent theme.
| | 05:11 | So I'm going to close this source file.
| | 05:13 | I'm going to actually close my preview
of the homepage and reactivate Garland as
| | 05:21 | our default theme, before we go.
| | 05:23 | So going back to the Themes
administration page, I'm going to choose Garland as
| | 05:28 | the default, and I'm going to disable Minnelli.
| | 05:31 | I'm going to click Save configuration, and
now we've gone back to just pure Garland.
| | 05:37 | One final thing I want to point out
about subthemes is if you notice, Minnelli
| | 05:42 | is inside the Garland
folder, within Drupal core.
| | 05:47 | Despite what you see here in the Drupal
core, a subtheme should usually reside
| | 05:52 | in its own folder, separate from their
parent theme, unless the two themes, like
| | 05:57 | Garland and Minnelli, are
meant to be packaged together.
| | 06:02 | When building subthemes based on a
theme, say, downloaded from the Internet,
| | 06:07 | your subtheme is dependent on that parent theme.
| | 06:11 | So what happens is when the parent
theme needs to be updated or changed, and if
| | 06:17 | you had duplicated that theme instead of
creating a proper subtheme, you have to
| | 06:21 | go and apply all those changes
to every instance of the theme.
| | 06:27 | Instead, the proper way is to create
a subtheme based on a parent theme.
| | 06:33 | When any changes need to happen in
either theme, they can do so without
| | 06:38 | affecting any of the other themes.
| | 06:41 | So let's say your parent theme needs a fix.
| | 06:45 | Well, you could fix the parent theme,
and then every subtheme after that would
| | 06:50 | actually get the fix
automatically applied upon refresh.
| | 06:55 | Imagine, if instead, you chose to
duplicate a theme, you would be stuck updating
| | 07:00 | every copy of that theme,
and that is not the Drupal way.
| | 07:05 | Subthemes are good and should be always
your first choice over duplicating any
| | 07:10 | existing theme in Drupal.
| | Collapse this transcript |
| Building a sub-theme: Creating the .info file| 00:00 | So after seeing what makes a subtheme
tick, we can now actually go off and make
| | 00:06 | our own subtheme for Drupal.
| | 00:08 | So let's do that now.
| | 00:10 | Remember, we're going to actually
need to create a theme folder, and the
| | 00:15 | theme.info file, like how we saw
in the previous movie with Minnelli.
| | 00:20 | So, let's make our folder and file from scratch.
| | 00:23 | So, I'm going to actually minimize my Drupal.
| | 00:27 | I'm going to open up my Drupal-6 folder.
| | 00:30 | I'm going to go into sites/all/themes.
| | 00:37 | If you have not created this folder, themes,
yet in your sites/all folder, please do so now.
| | 00:43 | The sites/all/themes folder is where
all of our themes are going to be actually
| | 00:48 | placed for Drupal to pick up.
| | 00:51 | If you want something to reference,
I actually have already created the
| | 00:55 | subtheme, and those files are in the
chapter 5 folder of the exercise files.
| | 01:00 | The subtheme we're going to
create is called subgarland.
| | 01:03 | So, let me give you a little
taste of what's inside that folder.
| | 01:06 | We'll be creating these few
files over the next few movies.
| | 01:11 | In this video, we'll be
creating the subgarland.info file.
| | 01:15 | So, let me minimize this.
| | 01:18 | So, if you ever want to compare what
you've built to what I've completed, you
| | 01:22 | could do so by looking at the exercise files.
| | 01:25 | So ,let's go back to our sites/all/themes folder.
| | 01:29 | We'll actually, now, create our
own subtheme folder in here.
| | 01:32 | So, let's go ahead and create a new
blank folder and name it subgarland, because
| | 01:38 | that's the name of our theme, and
let's go inside this subgarland folder.
| | 01:42 | In here is where we'll create those theme
files that you saw in the exercise folder.
| | 01:48 | So the one we're creating, in this
movie, is the theme.info file, which is the
| | 01:54 | most important theme file, as it's
required for every theme, and Drupal will not
| | 02:00 | recognize any theme
folders without that file in it.
| | 02:03 | So I'm going to use Dreamweaver.
You could use any text editor.
| | 02:06 | I'm going to say File > New, and I'm going
to actually just choose a simple text file.
| | 02:14 | The first thing I want to do is
actually save and name this file.
| | 02:18 | So File > Save As, I'm going to
save this .info file inside my
| | 02:23 | drupal-6/sites/all/themes/subgarland folder.
| | 02:29 | This is going to be
named 'subgarland.info'. Save.
| | 02:36 | If we look in the subgarland folder of
our sites/all/themes, we see that the
| | 02:42 | subgarland.info file is
saved in the proper place.
| | 02:45 | So let's minimize these files.
| | 02:48 | Let's start adding the text properties
needed for Drupal to understand what this
| | 02:53 | theme is actually called and made of.
| | 02:56 | Let's go back to that page
that I showed you on Drupal.org.
| | 03:02 | So I have a tab ready and this is the page
that defines the structure of a .info file.
| | 03:07 | So this is the reference sheet you're
going to want to take with you when you're
| | 03:11 | building any new .info file.
| | 03:13 | So remember, a .info file is plain
text with some basic properties, and each
| | 03:19 | property would be saved on a different line.
| | 03:23 | So the properties we're going to
be using for our subtheme, known as
| | 03:27 | subgarland, is going to be name,
description, version, core, engine, base
| | 03:36 | theme, and then style sheets.
| | 03:39 | So there's a few of these, and instead
of typing it by hand, we should probably
| | 03:43 | just copy them, right out of this page,
and paste them into our theme.info file.
| | 03:49 | So the first property, which is
required, is name, so I'm going to go back to
| | 03:53 | Dreamweaver after copying that property,
I'm going to paste, and let's edit this
| | 03:58 | to say Sub-Garland, new line, and then save.
| | 04:05 | Go back to the reference page and let's
pull description, copy, go back to the
| | 04:13 | text editor and paste.
| | 04:15 | Let's update this description to
say 'A custom subtheme for Garland'.
| | 04:21 | That looks good, new line and save.
| | 04:26 | Go back to the reference page.
| | 04:28 | Let's now get version copied, and
let's paste that into our text editor.
| | 04:36 | Now, version is the version of the
theme, not the version of Drupal that the
| | 04:42 | theme will be running on.
| | 04:44 | So this version number, it
could be anything you want.
| | 04:47 | In fact, we're going to
stick with the version 1.0.
| | 04:50 | If you ever change this theme, you can
update the version, as you want to, to be
| | 04:55 | say 1.1 or even 2.0.
| | 05:00 | For this video, let's leave it at 1.0.
Create a new line and save again.
| | 05:06 | Go back to Drupal's reference of theme.info
files, and the last few properties
| | 05:13 | we need are core, so let's copy that, paste.
| | 05:18 | Remember, core actually refers to the
Drupal version that the theme will be running on.
| | 05:24 | Remember, only a Drupal 6
theme could run in Drupal 6.
| | 05:29 | So core is for Drupal and
version is for the theme itself.
| | 05:34 | So don't confuse the two.
| | 05:36 | Make a new line, click Save,
go back to the reference.
| | 05:41 | Let's grab engine, which equals phptemplate,
and we're going to leave that value the same.
| | 05:48 | So Paste, create a new line and save.
| | 05:51 | Let's go back to the
reference and now we need base theme.
| | 05:56 | So let's grab base theme,
copy that and paste that into our
| | 06:01 | subgarland.info file.
| | 06:03 | I personally like to separate the
base theme line from all the other
| | 06:07 | properties up on top.
| | 06:08 | Now this is just me, but this is not
required, so you can actually remove any of
| | 06:14 | the white space you see between each line.
| | 06:17 | Base theme for us is going to equal
garland, as that is the theme ID name
| | 06:23 | for the Garland theme.
| | 06:25 | If we were going to base our subtheme
on a different theme than Garland, you
| | 06:29 | would have to look at that theme's
.info file name and then take the file name
| | 06:35 | and use that as the base theme value.
| | 06:38 | So, if we instead, wanted to maybe use
pushbutton as the base theme, we would use
| | 06:45 | the word 'pushbutton'.
| | 06:46 | Instead, we're going to use garland,
of course, create a new line and save.
| | 06:52 | So, now we've actually created the
standard properties a theme.info file
| | 06:58 | requires to be picked up by Drupal.
| | 07:01 | So let's go and actually try enabling
this subtheme and let's see what happens.
| | 07:06 | So I'm going to go back to my Drupal.
| | 07:07 | I'll minimize my text editor, and
starting from the Administer screen, we're
| | 07:13 | going to click on Themes.
| | 07:15 | If you scroll down, you should now see
Sub-Garland actually appear with the rest
| | 07:19 | of Drupal core themes.
| | 07:21 | If you do not see Sub-Garland here, that
means you did not actually complete the
| | 07:28 | file name correctly or you messed
up one of the properties somewhere.
| | 07:33 | So make sure that that text is correct.
| | 07:35 | You could refer back to my exercise
files of chapter 5 to see what might be
| | 07:40 | different between your theme.info file and mine.
| | 07:44 | So we're going to enable Sub-
Garland and choose it as the default.
| | 07:49 | Click Save configuration, and we see
Drupal has given us a message, saying
| | 07:55 | the administration theme is still set to
garland, but the front end, it will be subgarland.
| | 08:02 | So that's good, but let's go see
what subgarland looks like right now.
| | 08:06 | I'm going to open the homepage in the new tab.
| | 08:09 | We're going to visit it.
| | 08:11 | As we see here, this does not look like Garland.
| | 08:16 | In the next video, we're going to
actually be adding a style sheet, which is a
| | 08:20 | required property for a
subtheme to start picking up styles.
| | 08:26 | There is an issue here, where the
subtheme needs at least one CSS file declared
| | 08:32 | before it could pick up the
other parent theme styles.
| | 08:36 | So right now, the subtheme is rendering
without any custom style sheets, or any
| | 08:42 | of the parent's style sheets.
| | 08:44 | We'll actually need to fix this
by adding one custom style sheet.
| | 08:48 | So let's do that in the next video.
| | Collapse this transcript |
| Building a sub-theme: Adding custom styles (CSS)| 00:00 | So, picking up from our last movie, we've
already created the subthemes.info file
| | 00:06 | which lets Drupal know
that the sub-theme exists.
| | 00:09 | But as we saw in the last movie, we
still needed to add our own custom style
| | 00:14 | sheet, so it could be picked up
along with all the parent style sheets.
| | 00:19 | So I'm going to edit the theme.info
file to add a style sheet property.
| | 00:24 | So first, let's actually go ahead and
see what that property will look like.
| | 00:29 | So going back to the Structure of the
.info file webpage in the Drupal theme
| | 00:35 | handbook, we're going to now go down to
the property for styles and that's style sheets.
| | 00:43 | So, let's copy this property.
| | 00:46 | Let's go back our text editor.
| | 00:48 | Remember, I'm using Dreamweaver and
we'll now paste in this declaration line
| | 00:54 | into our theme.info file.
| | 00:57 | So if you've been following all along
from the last movie, we've been building
| | 01:00 | this subgarland.info file.
| | 01:03 | This version of the file is actually
not in your Exercise Files folder because
| | 01:08 | that's the completed version of the sub-theme.
| | 01:10 | So you can go back and refer to
that file if you want to see what the
| | 01:15 | differences between your
version is from the complete version.
| | 01:19 | So I've pasted the line of text that
declares a style sheet for our sub-theme.
| | 01:25 | We need to edit this to actually
reflect our own style sheet file.
| | 01:30 | So let's go and look at the sub-
theme that's completed, in the Exercise
| | 01:36 | Files folder in Ch 05, in subgarland and we
see that I've actually named the file 'custom.css'.
| | 01:46 | So I'm going to minimize this folder
and I'm actually going to edit the .info
| | 01:50 | file to say custom.css for
the style sheets declaration.
| | 01:55 | Make sure you create a new line and click Save.
| | 02:00 | Let's go back and refresh
Drupal to see what happens.
| | 02:05 | So I'm going to the tab that is
the homepage of our Drupal site.
| | 02:09 | Now I'm going to click Refresh, and
you're going to see that nothing will change
| | 02:14 | and this is because Drupal has
its own internal cache for themes.
| | 02:20 | So we need to flush the cache, and by
doing that, we will then see all the new
| | 02:26 | changes in our Theme folder.
| | 02:28 | So to do that, we need to go back to
our Drupal theme administration page and
| | 02:33 | actually just refresh the
theme administration page.
| | 02:38 | Very simple, and it is a little
bit of a nuisance, but it's for
| | 02:41 | performance reasons in Drupal.
| | 02:43 | So let's go back to the homepage,
now that we've refreshed the theme
| | 02:47 | administration page and
essentially cleared the theme cache.
| | 02:51 | We can now refresh and we see, now, that
there are styles applied all over this page.
| | 02:59 | Let's view the source and
see what Drupal is now doing.
| | 03:02 | I'm going to right-click, View Page
Source, and I'm going to on a call out the
| | 03:07 | garland styles first.
| | 03:09 | So we see that there is
garland/style.css and garland/print.css, but where is
| | 03:17 | our custom.css file?
| | 03:20 | We declared it in the theme info file, but
we did not create a file for Drupal to
| | 03:26 | actually pick up and load.
| | 03:27 | Drupal is very smart and actually will
recognize that the file is missing and it
| | 03:32 | will not output any markup
that will point to a broken file.
| | 03:37 | So let's go and actually create an
empty custom.css file for Drupal to pickup.
| | 03:42 | I'm going to go and close the
source file that we see here.
| | 03:47 | Going back to my text editor, look
at the file name that we wanted to be
| | 03:52 | declared, custom.css.
| | 03:55 | Now I'm going to say File > New, and
I'm going to actually create a new Blank
| | 03:59 | CSS file and I'm going to save this as
custom.css and make sure that it gets
| | 04:09 | saved in my sites/all/themes/
subgarland folder. Click Save.
| | 04:15 | Now I'm going to view the folder just to
make sure. I see the custom.css files now there.
| | 04:23 | Let's go back to Drupal, let's
refresh and see if Drupal picked it up.
| | 04:29 | So I refreshed the homepage. Remember,
this is running our subgarland theme.
| | 04:33 | I'm going to view the Page Source,
and now if we look, we can see that the
| | 04:38 | garland style sheet style.css is there,
and then of course garland print style
| | 04:44 | sheet, and in between, we
notice there is a new style sheet.
| | 04:49 | And this is our subgarland/custom.css file.
| | 04:54 | And again, Drupal noticed that there was
an actual file there, so it made all the
| | 05:00 | markup necessary to bring
this file in as a style sheet.
| | 05:04 | And just as it's expected, it actually
provides this style sheet listed after
| | 05:09 | its parent style sheet and that's
using the cascade feature of CSS.
| | 05:15 | I want to point out one more thing
about style sheets and sub-themes.
| | 05:20 | I named my subgarland style sheet custom.css.
| | 05:26 | I could've named it style.css,
similar to how the parent theme is set up.
| | 05:32 | But when you use the same style
sheet name as a parent theme, Drupal will
| | 05:38 | actually notice that both the parent
and sub-theme style sheets have the same
| | 05:42 | name and assumes you want to
actually totally override the parent theme.
| | 05:48 | So if we named subgarland's style sheet
style.css, garland would actually not
| | 05:55 | be allowed to render its style.css at all.
| | 06:00 | Since we want to actually build on top
of garland's style sheets, so that's why
| | 06:05 | I named our subgarland style sheet
custom.css and not style.css, because I want
| | 06:12 | both style sheets to load.
| | 06:16 | Let's go and try adding a custom style
that we can actually see help change the
| | 06:23 | front end of our Drupal site.
| | 06:25 | So I'm going to go back to my
Dreamweaver, I'm going to add a new style here,
| | 06:30 | custom.css, and I'm going to say for the
body, let's actually change the color of
| | 06:38 | all the text to be red.
| | 06:41 | Now I'm not going to keep this.
| | 06:42 | I just want to see if this is
actually going to change for us.
| | 06:47 | So I'm showing you a quick simple change
by adding just a single declaration for
| | 06:54 | body color inside the custom.css file.
| | 06:58 | And of course, since our sub-theme
style sheet gets loaded after the parent
| | 07:03 | theme, our body color takes priority.
| | 07:07 | So now I'm going to remove that style
because really, the red doesn't work for us.
| | 07:12 | So let's delete these styles and leave
this file empty, so for the next video,
| | 07:17 | we can actually add a new custom style
for a new theme region, we're going to
| | 07:23 | the sub-theme.
| | Collapse this transcript |
| Building a sub-theme: Adding custom theme regions| 00:00 | All Drupal sites have blocks and these blocks
get positioned in what are known as regions.
| | 00:06 | The regions most people are familiar
with are the left and right sidebars
| | 00:10 | that appear in Garland.
| | 00:12 | In this video, I will show you how to
add an extra region to our sub-theme by
| | 00:17 | editing only a couple files.
| | 00:19 | So since we are building a sub-theme,
based on the Garland theme, we would
| | 00:24 | actually need to make sure that we
know what regions are already defined in
| | 00:28 | Garland. That could be done in
two different ways one ways.
| | 00:32 | One way is we can check the Blocks
Administration screen, so I will open that in a new tab.
| | 00:38 | Go to the Blocks page and we could
see the list of regions that pop up for
| | 00:45 | Sub-Garland, because Sub-
Garland is a sub-theme to garland.
| | 00:50 | So we are picking up the regions
that are already defined there.
| | 00:55 | We see that there is a Left and
Right sidebar, there is the Content area,
| | 00:59 | a Header and Footer.
| | 01:01 | So we will need to duplicate these
regions in our own theme.info file, so we
| | 01:07 | can add one new one.
| | 01:09 | So let's go and do that now.
| | 01:10 | So I am going to close the Blocks
Administration screen. Now, I want to refer
| | 01:15 | back to the Drupal Theme Guide for Drupal 6,
| | 01:19 | the page known as Structure of the .info file.
| | 01:23 | This is a whole reference sheet of all
the properties that can be entered into
| | 01:28 | a theme.info file.
| | 01:30 | We have been using this page for the
last couple movies and we are going to use
| | 01:33 | it again for this movie, so we can
learn what the region syntax is.
| | 01:38 | So I am going to scroll down and we
see that there is the Regions property
| | 01:41 | listed here, we can click this and it
will take us down to the list of regions.
| | 01:48 | This is the format that Drupal will
expect to see what regions your theme
| | 01:54 | defines within the theme.info file.
| | 01:57 | There is a certain format. The word
'regions' is used and then there is these
| | 02:02 | brackets, within the
brackets are the region IDs.
| | 02:07 | These region IDs are important and
should only be lowercased, should not contain
| | 02:12 | any special characters or spaces.
| | 02:14 | The name of the region ID, which is full
standard text, could be whatever you need it to be.
| | 02:21 | It could the mix case and as you see
for Left and Right sidebar, there is a
| | 02:26 | space in the name, which is totally valid.
| | 02:28 | We are going to duplicate this set of
regions and create one new custom region.
| | 02:34 | Now Garland has these five regions defined.
| | 02:38 | Let me show you garland's .info file and
let's see if it declares any regions in
| | 02:44 | that file, which should be expected.
| | 02:47 | So, I am going to actually go to my
Drupal folder, themes, garland and we are
| | 02:54 | only visiting this folder to
view the garland.info file.
| | 02:58 | So I have just opened garland.info in
my Text Editor, which is Dreamweaver, and
| | 03:03 | I am looking for that regions
syntax, but I don't see it here.
| | 03:07 | And the reason is if you don't declare
any regions at all, Drupal will assume
| | 03:14 | that you actually want to use the
standard five that are listed here: Left,
| | 03:20 | Right, Content, Header and Footer.
| | 03:22 | Well, for Garland, that is the case, but
our sub-theme, we want one extra region.
| | 03:29 | We cannot define just one region in our
sub-theme because then Drupal will then
| | 03:35 | assume that you actually only
want one single region in your theme.
| | 03:41 | So we will copy the regions code, take
that in to our Text Editor and we are
| | 03:46 | going to paste it into the subgarland.info file.
| | 03:50 | So I can close the garland.info
because we are not using it anymore.
| | 03:55 | So now I am going to actually paste
in the region syntax for our theme.
| | 04:00 | So these default five regions are now in our
.info file, but we want to add one extra one.
| | 04:07 | So let's actually duplicate the content
line for regions and come up with a new
| | 04:14 | region called content_top.
| | 04:18 | So for the region ID, I am going to
add an underscore, but for the name, I am
| | 04:23 | going to use a space.
| | 04:25 | You need to make sure that
every region ID is unique.
| | 04:29 | That's why we're adding _top because
otherwise we would just be confusing Drupal
| | 04:35 | by trying to define two content regions.
| | 04:38 | So let's make sure we have each one on
their own line, click Save and now we
| | 04:44 | can actually start to add the code that
Drupal is going to expect to appear in this region.
| | 04:52 | And where does that code go?
| | 04:54 | Well, in the next chapter we are
going to be diving into more things like
| | 04:58 | the Page Templates.
| | 05:00 | So since we're basing our sub-theme on
Garland, which comes with Drupal 6, we need
| | 05:06 | to visit that theme folder for Garland
and actually pull out its Page Template,
| | 05:11 | because that's where the regions
markup code is actually defined.
| | 05:16 | So let's go get that file.
| | 05:17 | I am going to go back and
visit my garland folder. That's in
| | 05:21 | drupal/themes/garland. Now, I am going to
look for a page.tpl.php file and here it is.
| | 05:31 | So let's actually copy this file over
to our subgarland folder. We are just
| | 05:36 | going to, literally, duplicate it.
| | 05:39 | We are not going to rename it
because it needs to stay page.tpl.php.
| | 05:45 | I am going to actually open this
file in Dreamweaver, in my Text Editor.
| | 05:51 | I am going to flip to Code view and
now we are going to look for the content
| | 05:57 | region, because we are going to
actually add Content Top right above that.
| | 06:02 | So I did a quick search for the region ID
of content and it brought me to line 76.
| | 06:10 | In here, I am going to actually add a
whole new div with an ID called Content
| | 06:16 | Top and I'm going to duplicate the
syntax used to actually enter in the dynamic
| | 06:23 | code for that region.
| | 06:25 | You'll see what I'm
talking about in just a second.
| | 06:27 | So what I want to do is I actually
want to duplicate lines 75 through 77 of
| | 06:34 | this Page template file.
| | 06:36 | So I am going to Copy, I am going to
create some space above that tag, I am
| | 06:43 | going to Paste and I am going to fix up
this code real fast and we are going to
| | 06:49 | give it an ID of content-top.
| | 06:55 | Remember, the region id that I declared
in the subgarland.info file is formatted
| | 07:03 | content_top, because that's going to
end up turning into a PHP variable, so we
| | 07:09 | can't use a hyphen there.
| | 07:11 | But for CSS, we do want to use a hyphen
and we are going to declare this style
| | 07:16 | a little bit later.
| | 07:17 | We are going to keep the class style
and we need to change the PHP variable
| | 07:22 | that is listed here, to be content_top.
| | 07:26 | I don't want to leave this code just
like this because, in Drupal, you can
| | 07:30 | actually have a whole region be
collapsed and disappear from the page when there
| | 07:37 | are no blocks assigned to it.
| | 07:39 | We want to follow that same convention
and to do that, we have to grab just a
| | 07:44 | little bit of extra PHP and
wrap it around each of these divs.
| | 07:50 | So I am going to actually copy
line 89, which is a php if statement.
| | 07:55 | So it says php if, and this one says
right, so I'm going to copy this and I'm
| | 08:02 | going to paste it above the
declaration of my content-top div.
| | 08:06 | I am going to copy the content_top PHP
variable and replace the text that says
| | 08:14 | right with my proper content_top variable.
| | 08:17 | We need the endif for this statement
because once you start an if statement in
| | 08:23 | PHP, you have to finish it.
| | 08:25 | So we will copy right here, line 94. I
will paste it up on line 80, and now, this
| | 08:33 | is a valid if statement, or conditional
logic statement in PHP and it's saying if
| | 08:40 | there is content within content_top,
then go ahead and place all this markup in
| | 08:47 | the page. Otherwise, don't
have it show anywhere at all.
| | 08:51 | I am going to Save this page template file.
| | 08:54 | I am going to now go back to my Drupal site.
| | 08:59 | So we click the tab and now I need to
refresh the themes page, so Drupal can
| | 09:07 | actually catch on that we did a change.
| | 09:10 | So I click List or I can click Refresh.
| | 09:14 | Another safe way to make sure that
Drupal will pick up your changes is to make
| | 09:20 | sure your theme is selected as the
Default and Enabled and clicking Save
| | 09:24 | configuration again.
| | 09:26 | This is almost in a way kind
of like telling Drupal, Hey!
| | 09:30 | Go and check all the theme folders again
for me real quick and Drupal will do that.
| | 09:35 | We need Drupal to do this so it
recognizes that a new file was actually added
| | 09:40 | and a new region was
declared within our theme folder.
| | 09:45 | So let's actually go ahead and now see
how our new region gets displayed in Drupal.
| | 09:51 | The first area I want to point you
to is the Blocks Administration page.
| | 09:56 | So visiting the Blocks
Administration page, we should now see the first
| | 10:00 | preview of Content Top, up here,
because the Blocks Administration page
| | 10:06 | creates these kind of preview divs,
so you can see where your blocks are
| | 10:12 | going to appear in those regions.
| | 10:14 | So we see, now, I have whole new region
here, called Content Top, and in fact, you
| | 10:20 | can even see it listed, right here, where
I've highlighted, and we can actually now
| | 10:25 | place blocks right into this region.
| | 10:27 | So let's do that, now.
| | 10:28 | I am going to add the Who's online
block to our new Content Top region.
| | 10:36 | So I chose Content Top, the block
looks like it's going to go there.
| | 10:40 | So we click Save blocks and now we see
that the Content Top region has our Who's
| | 10:47 | online block placed. This is excellent.
| | 10:50 | Let's actually, really quick, flip over
to the Garland blocks and we see this
| | 10:56 | region is only appearing
content top for our sub-theme.
| | 11:01 | Go back to Sub-Garland and
we see that that's the case.
| | 11:05 | Remember, a new region must be
declared in both the theme.info file and the
| | 11:11 | page.tpl.php template.
| | 11:15 | We built a new custom region on top of
the standard five regions that Drupal
| | 11:20 | assumes is in every theme.
| | 11:23 | We made sure we added all five
of the regions in our .info file.
| | 11:29 | We made sure that we declared our
new region along with the standard five
| | 11:35 | because Drupal would assume that if we
only put in one region declaration that
| | 11:40 | our theme only had one
region and that's not the case.
| | 11:43 | There is no limit on how many
regions can appear in a theme.
| | 11:47 | To many people, flexibility in the theme
usually comes from the amount of regions available.
| | 11:53 | The more regions that appear in a
theme, the more places that you can
| | 11:57 | position blocks into.
| | 11:59 | Defining additional regions in sub-
themes really helps to show how building on
| | 12:03 | top of an existing theme is always a good idea.
| | Collapse this transcript |
|
|
6. Creating New ThemesExploring a theme folder| 00:00 | Drupal themes are packaged
inside what's known as a theme folder.
| | 00:04 | Making sure you name this folder
and its files correctly are key to a
| | 00:08 | theme working properly.
| | 00:10 | In this video, you will learn what folders and
files should be expected within a theme folder.
| | 00:15 | So the Theme folder I have in
front of us is actually a fake theme.
| | 00:20 | All these files are empty but what's
inside of them is not important as how they
| | 00:25 | are named is the key
piece that you need to learn.
| | 00:29 | A theme folder name should not have
any special characters except underscores
| | 00:34 | and it should be usually lowercased and
as you see up in my address bar that's
| | 00:39 | what I've done for this theme_folder.
| | 00:41 | A theme folder name should not
have the same name as say a module.
| | 00:46 | So you do not want to have a theme
named comment because there is a comment
| | 00:51 | module built into Drupal.
| | 00:54 | Inside a theme folder the first
file that is looked at by Drupal is
| | 00:59 | the theme.info file.
| | 01:01 | So right here this file I have named my_
theme.info, which is a legitimate file
| | 01:09 | name and you would make sure
that your folder is named the same.
| | 01:14 | Now I have them named
differently the only example purposes.
| | 01:19 | Now Drupal will actually pick up this
theme info file and it will register the
| | 01:24 | theme internally and
allow you to enable a theme.
| | 01:28 | Without this info file
there is technically no theme.
| | 01:32 | The next two important files are our CSS files.
| | 01:35 | Here we see I have style.css and print.css.
| | 01:40 | Print.css will only load for printers
while style.css is used by our web browsers.
| | 01:47 | The next set of important files are
usually images and the images go in a
| | 01:51 | folder called usually images- makes sense- and
these images are usually used by our style sheets.
| | 01:59 | The next set of files I want
to introduce are the templates.
| | 02:03 | So here I have three templates I am
highlighting, Page, Block and Node.
| | 02:10 | These are all covered in their own
chapters and they're very important as they
| | 02:14 | each define the markup for
their own designated area.
| | 02:18 | There are a few small files here, which
are the favicon for the theme, the logo
| | 02:24 | for the theme and the screenshot for the theme.
| | 02:27 | These are optional but they're quite common.
| | 02:30 | The other two files that I
want to show you are template.php
| | 02:35 | and theme-settings.php.
| | 02:38 | These two files will not be built in
this course, but I want you to know about
| | 02:42 | them because they appear quite often in
themes that you might download from the Internet.
| | 02:47 | The template.php file has
some PHP logic that the theme uses.
| | 02:53 | This is not a template this
is literally a PHP logic file.
| | 02:58 | The same goes for the theme-settings.php file.
| | 03:01 | This is something much more advanced and
usually programmers develop these files.
| | 03:07 | Keeping a theme folder organized is
important because it is very easy for a theme
| | 03:12 | folder to get bloated when working
with a lot of theme files like multiple
| | 03:16 | templates and style sheets.
| | Collapse this transcript |
| Setting up a theme .info file| 00:01 | For Drupal to recognize a theme exists,
a declaration file is required, known
| | 00:06 | as a theme.info file.
| | 00:08 | Like we saw in the previous chapter,
a theme.info contains all the details about
| | 00:13 | the theme, like the theme name,
its version and style sheets.
| | 00:17 | In this video, I'll be preparing the
.info file for our custom flower shop theme.
| | 00:23 | So to get started, I don't actually
need to do anything in Drupal, the
| | 00:27 | Administration, but I need to set up
some folders and files in the Drupal site.
| | 00:32 | So let me minimize my browser.
I am going to open up my drupal-6 folder.
| | 00:37 | I am going to go into the sites/all/themes folder.
| | 00:41 | If you don't have a themes folder
inside your sites/all folder, go ahead and
| | 00:45 | create it now, because this is
where all our themes will go inside.
| | 00:49 | So we'll actually now create a new theme folder.
| | 00:53 | So this is actually going to be called
hanselandpetal, which is the name of our flower shop.
| | 01:01 | And we are going to actually go inside
of this folder, and in here is where we
| | 01:07 | are going to create all our custom theme files.
| | 01:09 | So the first file we need to
create always is the theme.info file.
| | 01:14 | Now, this is a simple text file, and
I am going to show you a webpage that
| | 01:18 | actually outlines the details of
this .info file used for themes.
| | 01:24 | So this is the page in
the drupal-6 Theming Guide.
| | 01:27 | This page covers all the
details of a theme.info file's syntax.
| | 01:31 | It's very simple, and we actually
covered a bit in the previous chapter, but
| | 01:36 | if you're just joining us, then I need
to just tell you that we are going to
| | 01:39 | be using these properties listed here on
this page, not all of them, but most of them.
| | 01:45 | And we'll be actually using a lot of
the stuff that you see in the descriptions
| | 01:50 | that are below the list
of properties on this page.
| | 01:53 | So let's go to our text editor.
| | 01:55 | I'm using Dreamweaver, and let's
start a new file that's text, and
| | 02:01 | we should start by saving it.
| | 02:03 | So let's go File > Save As and let's
choose our Drupal sites/all/themes folder
| | 02:11 | and to get inside our hanselandpetal
theme folder, and we are going to actually
| | 02:15 | name this .info file, hanselandpetal.info.
| | 02:20 | So now let's just validate that
Dreamweaver wrote this file in the right place.
| | 02:27 | And now that we have this theme.info
file ready for us to start editing, we can
| | 02:31 | start placing the theme properties
that we need for our custom theme.
| | 02:36 | So to get us going a little faster,
I am going to actually copy some syntax
| | 02:40 | that's already prepared in
the Exercise Files in Chapter 6.
| | 02:43 | So I am going to visit my Exercise Files,
Chapter 6, and if you don't have the
| | 02:49 | Exercise Files, you can pause the
video after I've pasted the code in,
| | 02:53 | to actually copy it on your own screen.
| | 02:55 | So I am going to open the
exercise version of hanselandpetal.info.
| | 03:00 | I am going to copy this code.
| | 03:02 | I am going to close this sample file.
| | 03:04 | Now, I am going to paste and just to
give you a quick review, we have the theme
| | 03:09 | name, the description, the version
number of the theme itself, the required
| | 03:16 | Drupal version known as core, the
engine, a screenshot and all of the regions
| | 03:22 | that are defined for our theme.
| | 03:24 | We covered regions in the previous
chapter and we will be going into detail in
| | 03:29 | the next chapter as well.
| | 03:31 | So I am actually going to save this file, but
we are not going to enable the theme just yet.
| | 03:37 | Because if we did so now, we would
have one big blank white page, because
| | 03:42 | there's no styles declared for this theme yet.
| | 03:44 | We will be actually
doing that in the next movie.
| | 03:48 | So what we've created here
is the theme manifest file.
| | 03:51 | This is a required file for Drupal to
actually recognize that you have a theme
| | 03:56 | that it should pick up.
| | 03:58 | Without this file, Drupal can
never know about your theme.
| | 04:02 | So this is always going to be the first
file you create when developing a new theme.
| | Collapse this transcript |
| Adding styles (CSS) to a theme| 00:01 | Each theme has style sheets
that get applied to every page.
| | 00:04 | The way style sheets are added to
Drupal is different from how you normally
| | 00:08 | add CSS to HTML pages.
| | 00:11 | In this video, I will be showing you
how to add a custom style sheet to Drupal,
| | 00:15 | which will then allow us to enable our
new theme and see how it renders so far.
| | 00:20 | So the first thing we need to do is
actually create a style sheet and we are
| | 00:24 | going to do that in our favorite text editor.
| | 00:26 | For me, that's Dreamweaver.
| | 00:28 | So I'll actually say File > New.
| | 00:31 | I am going to choose CSS and I am
going to actually just save this file first
| | 00:37 | before we add anything to it.
| | 00:39 | So I am going to click File > Save As
and I am going to make sure I'm saving
| | 00:43 | this file inside my drupal, sites/all/
themes/hanselandpetal folder, because this
| | 00:50 | is the folder of our theme, so this
file is going to be called style.css and
| | 00:56 | we are going to click Save.
| | 00:56 | Now, let's make sure that
Dreamweaver put it in the right place.
| | 01:00 | We see that it's definitely in our sites/
all/themes/hanselandpetal folder. Good!
| | 01:06 | So minimize the folder, and now I
have some styles already prepared in the
| | 01:11 | Exercise folder of Chapter 6, so we
don't have to sit through and actually type
| | 01:16 | all these styles out.
| | 01:17 | Let me go get that file.
| | 01:19 | So in the Exercise Files,
Chapter 6, there is a style.css file.
| | 01:25 | So let's go ahead and open that.
| | 01:26 | So you can find this CSS file
in your Exercise Files folder.
| | 01:31 | You'll need to copy and paste the
contents of this file completely into the new
| | 01:35 | style.css file that we
just created for our theme.
| | 01:39 | If you're not a premium member of
lynda.com, you do not have access to
| | 01:43 | the Exercise Files.
| | 01:45 | Since this file is essential to
completing this project, we have included it as
| | 01:50 | a free exercise file.
| | 01:51 | You can download this file from the course page.
| | 01:55 | So let's copy everything, so we
Select All > Copy, go to the style.css file
| | 02:02 | that's in our theme folder, and we
are going to paste, and let's Save.
| | 02:08 | And now that this file is prepared,
we can go back to our hanselandpetal.info
| | 02:13 | theme file and actually declare this
style sheet within this .info file.
| | 02:18 | So we are going to go to the
bottom and create a new line.
| | 02:22 | I am going to pull out my .info file
reference sheet from the Theming Guide on drupal.org.
| | 02:28 | This page shows all the possible
properties a theme.info file can have.
| | 02:34 | And we used this throughout the
previous videos. This time we are going to
| | 02:38 | use the style sheet property to actually
declare our style.css to be a part of our theme.
| | 02:44 | Scrolling down to the stylesheets
property, we see that there's some code that
| | 02:49 | I am going to copy, go back to my
theme.info file, I am going to paste and I am
| | 02:57 | going to edit this line to reflect
our own style sheet, which is style.css.
| | 03:01 | I am going to create a new
line and I am going to click Save.
| | 03:05 | So now that we have the style sheet
declared in our theme info file and we've
| | 03:09 | actually prepared the style sheet
file, we can go back to Drupal's
| | 03:12 | Administration screen and
actually enable our theme.
| | 03:16 | We are missing quite a few parts, so
it's going to look a lot different than
| | 03:20 | what the final theme looks like.
| | 03:22 | But we'll be building the rest of
the theme throughout this course.
| | 03:26 | So before we go back to Drupal to enable
our custom theme, there's one more file
| | 03:31 | that I've actually declared
in my hanselandpetal.info file.
| | 03:36 | This file is a screenshot graphic.
| | 03:39 | So line 7 that I've highlighted here
says that the screenshot.png file will be
| | 03:45 | loaded for this theme
within our Administration area.
| | 03:49 | I would like to make that happen, so I'm going
to copy from my Chapter 6 Exercise Files folder,
| | 03:56 | the screenshot.png file into my theme folder.
| | 04:01 | So I am going to copy that over and I
am going to minimize the Exercise Files.
| | 04:04 | I am going to minimize now the theme
files and we can go to Drupal, enable our
| | 04:09 | theme and see how it renders so far.
| | 04:12 | So I am going to go back to
Drupal and we already have our Theme
| | 04:15 | administration page loaded here.
| | 04:17 | Let's click Refresh, so Drupal can
pick up the new changes to our theme.
| | 04:21 | We are going to scroll down and we see
that we have our Hansel and Petal theme
| | 04:26 | showing up here, also with
the screenshot. Looks good.
| | 04:30 | Let's enable this theme by clicking Enabled
and actually choosing it as a Default theme.
| | 04:35 | Now, before we click Save configuration
at the bottom, I want to remind you that
| | 04:39 | we already set the Administration
theme to Garland in a previous video.
| | 04:44 | Whenever you create a new theme or
you download a theme, always set your
| | 04:49 | administration theme to something like
Garland first, so you can safely get back
| | 04:54 | into your site if you accidentally lock
yourself out, because your new theme was
| | 04:58 | missing something important.
| | 05:00 | I am going to click Save
configuration and Drupal has notified us that the
| | 05:03 | Administration theme is garland while
our front-end theme is hanselandpetal.
| | 05:07 | That's what we want.
| | 05:09 | Now, let's preview what this looks like.
| | 05:11 | So I am going to open a new tab to the homepage.
| | 05:14 | I am going to view it and while this
doesn't look pretty, it's definitely the
| | 05:18 | start of our own theme.
| | 05:20 | We see a lot of the styles have been applied.
| | 05:23 | We can scroll down and we see
most of the original design appears.
| | 05:28 | Throughout the rest of the course,
we'll be building the other pieces that are
| | 05:31 | missing to get this theme to look right.
| | 05:34 | One more point about style sheets in Drupal.
| | 05:37 | Let me go back to my Dreamweaver and I want
to actually go back to the style.css file.
| | 05:43 | There is a common technique to load
multiple style sheets known as the @import.
| | 05:50 | Well, Drupal recommends that you do
not use @import in your style sheets, but
| | 05:56 | instead declare every style sheet
in your .info file for your theme.
| | 06:03 | The reason Drupal would prefer you
to actually declare every style sheet
| | 06:07 | separately in the theme.info file is
because it will take all your style sheets
| | 06:12 | later at the end and we can compress
them so your site can actually run very
| | 06:17 | fast by not having to load a
bunch of different style sheets.
| | 06:22 | If you use @import, Drupal does not know
about these other style sheets and then
| | 06:27 | cannot compress them together.
| | 06:29 | So this is a performance thing
and is totally optional, but it's
| | 06:33 | highly recommended.
| | 06:35 | One final point about styles. If you
are actually creating a theme that has a
| | 06:39 | lot of style sheets, you can put all the
styles into a subfolder like maybe CSS or styles.
| | 06:48 | Whatever you name that folder,
be sure to come back to your .info file
| | 06:52 | and update the path.
| | 06:55 | Since we only have a couple of style
sheets in this theme, I don't need to put
| | 06:59 | them in a subfolder on their own.
| | 07:01 | With our main style sheet now being
rendered, we can move on to adding the other
| | 07:05 | style sheets that usually
accompany a Drupal theme.
| | Collapse this transcript |
| Including a style sheet for right to left readers| 00:01 | Some cultures do not read content from left
to right but instead they read right to left.
| | 00:06 | Built into Drupal's Theme layer is
the ability to include a right to left
| | 00:10 | style sheet very easily.
| | 00:12 | In this video, I will show you how to add a
right to left style sheet in your own themes.
| | 00:17 | So there are no files that we really
need to edit, like we just did in the
| | 00:22 | previous video, to create a
right to left style sheet.
| | 00:25 | In fact, we do not need to declare a right to
left style sheet within our theme .info file.
| | 00:31 | Instead Drupal is going to look for a
certain naming convention with every style
| | 00:37 | sheet in your theme to find the
right to left version of the style sheet.
| | 00:41 | So let me show you how that's done.
| | 00:43 | I'm going to visit to my theme folder.
| | 00:46 | So I'm in the hanselandpetal folder
that's inside of site/all/themes, and to
| | 00:51 | produce a right to left style sheet,
we need to just duplicate the style sheet
| | 00:56 | that we wish to have available to right
to left people and append to the file name -rtl.
| | 01:04 | So any style sheet you have in your
theme, if you create a duplicate of it,
| | 01:09 | change its filename to end in -rtl,
Drupal will automatically pick that up later
| | 01:15 | when somebody comes to your site viewing
your theme in a browser that is reading
| | 01:20 | content from right to left.
| | 01:23 | Since I will not be including this right
to left style sheet in my own theme here,
| | 01:27 | I'm going to actually remove it before we go.
| | 01:30 | Well, not every site is designed for
right to left readers in mind, Drupal's
| | 01:35 | easy solution to support right to left
in themes is a great move for a site to
| | 01:40 | have a global audience.
| | Collapse this transcript |
| Creating a print style sheet| 00:01 | Built into CSS is the ability to
have separate styles for different media
| | 00:05 | types like printers.
| | 00:07 | Drupal supports all media types in CSS.
| | 00:10 | In this video, I will show you how to
include a print style sheet with your Drupal theme.
| | 00:14 | So to add a print style sheet to our
Drupal theme, we need to first actually go
| | 00:20 | to our theme.info file.
| | 00:23 | In here is where we're going to
declare our print style sheet.
| | 00:26 | And the line of code is actually very
similar to line 18 that declares our
| | 00:31 | standard style sheet.
| | 00:33 | Let me show you the syntax that we're
going to use for the print style sheet.
| | 00:37 | So I'm going to duplicate this line
of code and I'm going to change the all
| | 00:43 | media type property to print.
| | 00:45 | I'm also going to change the
style sheet to be print.css.
| | 00:50 | Now, I'm going to Save this file.
| | 00:52 | Let's create this print style sheet real quick.
| | 00:56 | File > New > CSS and I'm going to Save
this file inside my themes folder, which
| | 01:03 | is in sites/all/themes/hanselandpetal.
| | 01:03 | This is of course being called print.css.
| | 01:11 | Let's double check that Dreamweaver
put in the right place and so it did.
| | 01:15 | I'm going to minimize this folder and
I have a couple of styles already prepared
| | 01:20 | for me in the Exercise Folder of Chapter 6.
| | 01:23 | So I'm going to open my prepared
print style sheet already and as you can see
| | 01:28 | it's very small, so I'm going
to Select All, Copy and Paste into my
| | 01:35 | theme's style sheet.
| | 01:36 | I am going to click Save and
I'm going to close the example sheet.
| | 01:40 | If you do not have the exercise files
for this course, you can actually pause
| | 01:44 | the video right now and copy these
lines of CSS for your print style sheet.
| | 01:50 | So now that I have my print style
sheet file ready and my theme.info file
| | 01:55 | updated, we need to let Drupal know
that there has been a change to our theme.
| | 01:59 | And we do that by refreshing the Themes
administration page to clear the theme
| | 02:04 | cache within Drupal.
| | 02:06 | Let's go and actually visit the homepage
again and remember this is in progress,
| | 02:11 | so the site doesn't look
like the final design yet.
| | 02:14 | I'm going to Refresh this homepage and
we're going to now view the source of
| | 02:18 | this page and we're going to see that
the two style sheets declared in our theme
| | 02:24 | are outputted in the head code of the page.
| | 02:27 | We see that the all style sheet is our
style.css and we see a new media type for print,
| | 02:33 | which points to our print.css
file and that's exactly what we want.
| | 02:39 | So let's get a preview by doing Print
Preview within the browser and see how
| | 02:44 | it's going to look when it's printed.
| | 02:46 | As you can see, it looks a lot
different than the screen version.
| | 02:51 | In fact, it looks different on purpose
because our print style sheet removes all
| | 02:57 | the background colors that
would end up wasting somebody's ink.
| | 03:01 | So we change it to be just white and
the front text, we try to make that black.
| | 03:06 | A lot of people print web pages, so it
is a good idea to include a print style
| | 03:12 | sheet with your themes, but it's not required.
| | 03:15 | I recommend providing a print style
sheet that changes your site to have a white
| | 03:19 | background with black text, reducing the
amount of ink needed to print any page.
| | 03:25 | This will provide a better
experience both on and off the web.
| | Collapse this transcript |
| Adding JavaScript to a theme| 00:00 | If your Drupal theme needs to include
JavaScript files for whatever reason,
| | 00:05 | you will need to declare each
script within your theme.info file.
| | 00:09 | In this video, I will show you the proper way
of how to add JavaScript files to a Drupal theme.
| | 00:13 | The graphic designer that designed the
flower shop theme has requested that we
| | 00:18 | utilize a couple of free scripts found
on the web that will help make sure that
| | 00:23 | columns end up the same
height in a certain region.
| | 00:27 | Since Drupal 6 comes with the
JavaScript Library known as jQuery, these scripts
| | 00:33 | are actually jQuery plug-ins.
| | 00:35 | Let me show you the scripts that
we will be using in this video.
| | 00:38 | The first is this Equal Heights script.
| | 00:41 | And the second script is a Pixel-to-EM
Conversion script that the other Equal
| | 00:46 | Heights script actually requires.
| | 00:49 | So we will be downloading both of
these scripts into our themes folder.
| | 00:54 | So let's scroll down.
| | 00:56 | Let's find the code we will be saving.
| | 00:58 | So here is the jQuery
plug-in called Equal Heights.
| | 01:02 | So I am copying the code, and I will be
actually declaring a new file in my Text Editor.
| | 01:09 | Remember these will be JavaScript files.
| | 01:11 | So I am starting with a blank
JavaScript file, and I am going to paste in the
| | 01:17 | Equal Heights script.
| | 01:18 | Now I am going to save this file into
my theme folder, which will be in my
| | 01:24 | Drupal site, sites/all/themes/hanselandpetal.
| | 01:34 | And for JavaScript files, I like to
keep them in their own separate folder
| | 01:38 | within my theme folder.
| | 01:40 | So let's create a new folder, call it
js for JavaScript, and let's name this
| | 01:45 | file equalheights.js.
| | 01:50 | Let's make sure Dreamweaver
put it in the right folder.
| | 01:53 | We see our hanselandpetal theme
folder now has a js folder, and in there is
| | 01:58 | an equalheights file. Good.
| | 02:01 | Let's go get the second script.
| | 02:03 | The second script, we don't
actually copy out of the blog post, but
| | 02:06 | instead download it.
| | 02:07 | So let's grab this file by right
clicking, Save As, and saving this file into
| | 02:13 | the same folder as our new
equalheights.js file. Good.
| | 02:20 | So now, let's actually create one more
blank JavaScript file, and this is going
| | 02:24 | to be the glue for our theme to
utilize those scripts we just downloaded.
| | 02:29 | I am going to type this code by
hand, so you can follow along.
| | 02:33 | So this is some jQuery code that will
actually run when the page is ready to load,
| | 02:40 | and this script will actually be
targeting a new region we will be adding
| | 02:45 | later called footer-content.
| | 02:51 | So I am going to fix the formatting very quick,
and I am going to save this file as ready.js.
| | 02:58 | I am going to save it with the other two
script files in our theme folder. Good.
| | 03:02 | So now let me close the JavaScript
files we have created, and let's see how
| | 03:07 | we actually add these now to our theme
manifest file, otherwise known as our theme.info file.
| | 03:14 | So now there is a certain syntax we
need to enter into our theme.info file that
| | 03:19 | declares JavaScript files.
| | 03:20 | I am going to open my web browser, and
I am going to visit a page on drupal.org,
| | 03:26 | which defines all the structure
properties for a theme.info file.
| | 03:31 | We have been referring to
this link in the last few movies.
| | 03:35 | So let's scroll down and
let's find the scripts property.
| | 03:39 | We see here it's a simple line.
| | 03:41 | I am going to highlight. Copy.
| | 03:44 | Go back to my Text Editor, and I will
paste this line into my theme.info file.
| | 03:51 | Now, obviously our JavaScript files are
named differently, so let's edit this line.
| | 03:55 | So the first one we have is js/equalheights.js.
| | 04:04 | The js/ is actually the JavaScript
directory we created in our theme folder.
| | 04:10 | The second script is actually called pxToEm.
| | 04:16 | Let me actually copy the file
name, so it's easier to paste.
| | 04:20 | And there is a third script line we
need to add, which is the JavaScript
| | 04:25 | we coded by hand, known as ready.js.
| | 04:29 | So I am going to click Save on this
theme.info file, and now we have our three
| | 04:35 | JavaScripts actually declared for our theme.
| | 04:39 | We can go back now to our Drupal site,
and of course, because there is a
| | 04:44 | big change now in our theme manifest file,
we need to let Drupal know about that change.
| | 04:50 | We do that by refreshing the Themes
Administration page, and now if go back to
| | 04:57 | our Homepage tab, we can Refresh and
check the View Source to now see our three
| | 05:04 | JavaScript files load as expected.
| | 05:08 | Here is our equalheights.js, here is
the pxToEm.js, and here is the ready.js.
| | 05:15 | Now, right now there is no noticeable
change on our homepage by adding these
| | 05:20 | JavaScript files because we
are still developing the theme.
| | 05:24 | Near the end, when the theme is almost
complete, we would be able to see these
| | 05:29 | JavaScript files in action.
| | 05:32 | So now that we have our JavaScript files
loading with our theme, we can actually
| | 05:36 | now start to move on to the final
pieces that are needed, like templates.
| | 05:41 | If you would like to learn more about
jQuery or JavaScript, you can view the
| | 05:45 | Essential Training titles for both on lynda.com.
| | Collapse this transcript |
| Adding graphics and images to a theme| 00:01 | Since our Drupal theme will inevitably
have graphics included with our CSS,
| | 00:05 | we should prepare our theme
to be ready for these images.
| | 00:08 | So let's get started.
| | 00:10 | Since themes are strictly for
presentation in Drupal, we only want to include
| | 00:14 | the graphics that make up our theme,
which is essentially anything that is going
| | 00:19 | to be part of the design and look of
the site, not any of the content imagery
| | 00:24 | that you might see in say nodes or blocks.
| | 00:27 | So let's actually prepare an
images folder, because Drupal themes can
| | 00:32 | utilize subfolders.
| | 00:35 | So jumping into our theme folder,
and remember our theme is called hanselandpetal,
| | 00:39 | located in the sites/all/themes folder,
| | 00:44 | we create a new subfolder called images.
| | 00:48 | We can place all our
theme images in this folder.
| | 00:52 | In fact, I have a bunch of files
already ready that are included with the
| | 00:56 | exercise files for Chapter 6.
| | 00:57 | So I want to go in here and I'm
actually going to copy all of these images into
| | 01:04 | our theme, and we can go back to
Drupal and refresh our homepage.
| | 01:12 | So I'm going to open the homepage
in a new tab and let's visit it.
| | 01:16 | Now, our site is starting
to really come together.
| | 01:19 | We see a lot of imagery that was not
there before, and the reason these images
| | 01:23 | now show is because our CSS already
had these images declared, but the files
| | 01:29 | just were not there.
| | 01:30 | There are some things to fix, but remember,
we're not done building this Drupal thing.
| | 01:35 | One thing to point out about images is
you can actually have subfolders inside
| | 01:40 | an images folder, as you see necessary.
| | 01:44 | Outside of the images folder, there
will be a couple of graphics that usually
| | 01:48 | appear in themes, like the logo,
the screenshot and the fav icon.
| | 01:55 | These are totally optional, but you can have
them in either the images folder or outside of it.
| | 02:01 | Whenever you actually want to declare
a screenshot to be inside the images
| | 02:06 | folder, you'll need to make
sure that you put the images path.
| | 02:10 | But since we don't have our screenshot
in the images folder, that's not what we
| | 02:14 | need for this theme.
| | 02:16 | When working with images in CSS, as
I'll show in the style.css file, you do not
| | 02:22 | want to make absolute paths to the
imagery. You want to use relative paths only.
| | 02:29 | So as we see here on line 7,
this background image for the body is
| | 02:33 | calling images/bg.png.
| | 02:37 | If you were to create an absolute path,
which is a full URL, and the theme is
| | 02:44 | moved or ported to another site, then
the URL to the image is bound to break.
| | 02:51 | By having images only a relative path,
we now are making the Drupal theme
| | 02:56 | much more portable.
| | 02:58 | Separating theme graphics from the
rest of the site is a wonderful feature of
| | 03:02 | Drupal for both maintenance
reasons and just plain web design sanity.
| | Collapse this transcript |
| Understanding theme templates (tpl.php)| 00:01 | Up to this point, we have repaired our
theme info file, custom style sheets and
| | 00:05 | graphics. The remaining pieces for
our flower shop theme are templates.
| | 00:10 | In this video, I will go over which
set of templates we will be building over
| | 00:14 | the next few chapters.
| | 00:16 | The three main Drupal templates everyone
needs to learn are Page, Node and Block.
| | 00:23 | Every Drupal page is made up of various
templates, all merged together like a puzzle.
| | 00:28 | We have the nodes and blocks that appear
in regions surrounded by the Page template.
| | 00:34 | Page templates get the HTML, head and
body tags, while only node templates and
| | 00:40 | blocks get content and
layout tags like div and span.
| | 00:44 | Page templates have a lot of
HTML markup and PHP variables.
| | 00:48 | The markup in PHP code in these
templates can be moved around anywhere to
| | 00:52 | customize the markup and its layout.
| | 00:55 | No templates are used to
control the content area's markup.
| | 00:59 | Each node bases its markup of
a standard node template file.
| | 01:04 | Node templates do not contain
head or body tags since those are the
| | 01:07 | responsibility of page templates.
| | 01:10 | Instead, node templates provide
tags like div, and span, and sometimes
| | 01:15 | heading tags like H1 or H2.
| | 01:17 | Node templates also utilize
PHP variables for the content.
| | 01:22 | Block templates control the markup
for all the secondary content, usually
| | 01:27 | known as sidebar content.
| | 01:29 | Blocks can be stacked in any theme
region and have a standard template that's
| | 01:33 | used for every block on the page.
| | 01:35 | Block templates are similar to no
templates, in that they do not also contain
| | 01:39 | any of the HTML, head or body tags, but
only layout and content tags like div,
| | 01:46 | and span, or headings.
| | 01:49 | Block templates also utilize
PHP variables for their content.
| | 01:53 | A theme can have many templates or none at all.
| | 01:56 | Let's look at our design and see how
that fits into the template scheme.
| | 02:01 | So we see the flower shop design,
and we can see immediately that the
| | 02:06 | highlighted page is the entire page
template, because, of course, this is the
| | 02:11 | shell of the site, since it would be
containing the HTML, head and body tags and
| | 02:16 | of course,all the theme regions.
| | 02:19 | In the main content region,
will appear the nodes.
| | 02:23 | The default homepage of Drupal
renders multiple nodes on a screen.
| | 02:27 | This would mean that the node
template would be used for each node that
| | 02:32 | appears on the screen.
| | 02:33 | In this design example, we're only
looking at a single node on the page.
| | 02:37 | So the main content region only is
going to use a single node template.
| | 02:42 | The secondary content or blocks, as
they're known, will appear in the sidebars
| | 02:48 | and in our custom footer region, and
Drupal will use the same standard block
| | 02:54 | template for all of these blocks that
appear on the page, unless we define some
| | 02:59 | custom templates like we'll
be doing in a later chapter.
| | 03:03 | Throughout the rest of this course,
we will be covering each set of theme
| | 03:07 | templates in more detail while assembling them.
| | 03:10 | The key to customizing Drupal's front
end is being comfortable with the theme
| | 03:14 | templates as they are the
heart of every Drupal page.
| | Collapse this transcript |
| Understanding template variables| 00:01 | As mentioned earlier, Drupal theme
templates are composed mostly of HTML, mixed
| | 00:05 | together with some basic PHP variables.
| | 00:09 | Knowing what list of variables are
available per template is very important for
| | 00:13 | a designer to know, because that is a
whole list of elements that you can design
| | 00:18 | in your theme templates.
| | 00:19 | A lot of the variables are
not even used by most themes.
| | 00:23 | This is a little bit unfortunate,
because I think there's a lot of items that
| | 00:27 | people are missing in their design,
because they just probably don't know
| | 00:31 | they're available to each template.
| | 00:34 | There are two places we can find out the
list of PHP variables available per template.
| | 00:40 | The first place is the official Drupal
API website available at api.drupal.org.
| | 00:47 | In here, we can actually do a quick
search for any template we wish to look up,
| | 00:52 | and we can find the list of
variables in that reference document.
| | 00:56 | So I want to look up page.tpl.php.
| | 01:00 | Now the API site has just returned some results,
in fact, multiple results for page.tpl.php.
| | 01:08 | We want to only look at the ones available
in the modules folder within Drupal core.
| | 01:13 | So this bottom link is the
one we're going to click on.
| | 01:16 | Now we see the list of variables
available to just the page templates.
| | 01:21 | So we see some good variables in here
like is_front, and you'll notice PHP
| | 01:27 | variables are always prefixed with the $ sign.
| | 01:30 | This is how PHP knows what
is a variable and what is not.
| | 01:34 | So going back to this example, is_front
is a Boolean variable, which contains a
| | 01:40 | value of either True or False.
| | 01:43 | When this is True, that means the
current page we're viewing is the front page,
| | 01:48 | otherwise it would be valued at False.
| | 01:51 | The other place I want to show you
where you can find these template variables
| | 01:54 | are is actually in the template itself.
| | 01:58 | So since we know where these
templates reside, we can actually open them up
| | 02:03 | in our text editor.
| | 02:04 | So, then we go File > Open
and I'm going to hunt for the
| | 02:09 | modules/system/page.tpl.php
file within drupal-6 core.
| | 02:17 | So let's open that file and if we
read the comments here at the very top,
| | 02:22 | we see it is actually a whole list of
all the variables available to this page
| | 02:27 | template, and actually all page templates.
| | 02:30 | So in here, look again.
| | 02:32 | There is the is_front variable.
| | 02:34 | So you can reference each template or
you can reference the API website for
| | 02:40 | Drupal to find these lists of variables.
| | 02:43 | Templates and their variables are
the first major hurdle in understanding
| | 02:47 | Drupal theme design.
| | 02:49 | Designers should be comfortable with
how these pages are built from Drupal, so
| | 02:53 | they can affect the
theme layer anyway they wish.
| | Collapse this transcript |
|
|
7. Page TemplatesUnderstanding page templates| 00:00 | The first set of Drupal theme templates
we'll be covering are the Page templates.
| | 00:04 | Every page Drupal renders uses a page template.
| | 00:08 | In this video, we will review what
makes a page template file so important.
| | 00:12 | So the standard page template Drupal
uses is a file called page.tpl.php.
| | 00:19 | Now you don't have to create this file
from scratch as the common Drupal theme
| | 00:24 | workflow is you locate the standard
templates in Drupal core, you duplicate them
| | 00:30 | in your theme, and then modify it as needed.
| | 00:33 | So let me show you where the
standard page.tpl.php file lies.
| | 00:38 | I'm going to open my drupal-6 folder,
and we won't be visiting the themes
| | 00:43 | folder. We will actually be
going inside the modules folder.
| | 00:48 | Inside the modules folder,
there is a system folder.
| | 00:53 | We see there is a page.tpl.php file.
| | 00:57 | In Windows Vista, it's automatically
hiding the file extension, so don't be
| | 01:02 | tricked by what Windows is showing on
the screen. The file is actually .tpl.php.
| | 01:09 | So let's actually look at
this file in Dreamweaver.
| | 01:12 | I'm going to edit with Dreamweaver, but
we won't be saving this file or changing it.
| | 01:17 | I just want to show you
what's inside of a page template.
| | 01:21 | In the next video, we would actually be
duplicating the page template into our
| | 01:25 | own theme and editing it.
| | 01:28 | So let's see what makes up a page template.
| | 01:30 | First off, as mentioned earlier,
there are a bunch of template variables.
| | 01:35 | All of these variables are usually specific
to the single template that they appear in.
| | 01:40 | So a couple of these, I want to just
highlight, because we're going to see them
| | 01:44 | inside of our markup.
| | 01:45 | There will be the CSS variable.
| | 01:49 | There is going to be the body_classes
variable and, of course, definitely, the
| | 01:56 | site_name and logo variables.
| | 01:59 | A couple of key ones that our flower
shop will end up using later is the
| | 02:03 | search_box variable, and we get to
the regions that are very important,
| | 02:09 | because this is where all our content
ends up being injected into, which is
| | 02:13 | left, content and right.
| | 02:17 | So let's scroll down to the actual
markup used by the Drupal page template.
| | 02:22 | So we see past the comments around line 78,
we see the standard markup for an HTML page.
| | 02:31 | We see tons of PHP variables
sprinkled throughout this page.
| | 02:37 | So we see here a couple of the
variables that I've mentioned above, which are
| | 02:41 | body_classes, logo, and site_name.
| | 02:45 | Around many of these
variables are actual HTML markup.
| | 02:50 | So this page is literally the standard
page that will be used for every Drupal
| | 02:57 | page of your site, because we would
need the HTML header code and of course
| | 03:03 | we need a body tag.
| | 03:06 | What the PHP variables do here is actually
replace this PHP line with actual content.
| | 03:15 | Don't confuse the content right now
with the node content, because styles,
| | 03:21 | scripts and all the other headings are
sometimes considered part of the content.
| | 03:29 | Normally, an HTML page would have meta
tags in the head, but that's not the case
| | 03:34 | with a Drupal page template.
| | 03:36 | Instead, Drupal only requires a PHP
variable to print on the page known as head
| | 03:42 | and all the things like meta tags will
automatically be compiled into this one
| | 03:48 | variable known as head and placed on this line.
| | 03:53 | That is why there is a styles and scripts
variable in this template within the HTML head tag.
| | 03:59 | This is for all our style sheets and
all the JavaScript needed for our website.
| | 04:06 | We would not declare any styles or
scripts in this file, because Drupal will
| | 04:10 | actually grab that information from our
theme.info file and place that code here
| | 04:16 | automatically for us.
| | 04:18 | So let's move past the body tag and
get into the actual markup of the page.
| | 04:23 | So we see we have a standard div tag
with an ID known as page, and it actually
| | 04:28 | has a header div inside of it.
| | 04:31 | In here, we break down the logo,
the site-name, anything we need.
| | 04:36 | Actually, the site-name is wrapped in an h1 tag.
| | 04:39 | This is actually good semantics for a website.
| | 04:42 | So scrolling past the header div,
we see there is the search box, which our
| | 04:49 | theme will be using
later on for the flower shop.
| | 04:52 | If we go down a little further,
we get to an area called container, which
| | 04:57 | holds the navigation div.
| | 04:59 | Now the navigation div is where the
primary menu and the secondary menu appear.
| | 05:05 | So here is the markup for both
the primary and the secondary menus.
| | 05:11 | Scrolling past the navigation header,
we get now to one of the most popular regions,
| | 05:17 | which is the left sidebar.
| | 05:19 | So we see here that there is some logic that
wraps the markup used for the sidebar left.
| | 05:26 | This logic is PHP code and it's very
simple code, but you need to understand
| | 05:32 | what it's saying here.
| | 05:33 | So it actually is defining that if
there is no empty content within this left
| | 05:41 | template variable, then go ahead
and spit out the markup to the page.
| | 05:48 | So we see this print function call
for left will actually enter the content here,
| | 05:54 | but only when we
satisfy this conditional logic.
| | 05:58 | This is actually how Drupal and PHP
pull out an entire region when there are no
| | 06:05 | blocks or content to render there.
| | 06:07 | That's how you magically go from a two-
column layout to a three-column layout in Drupal.
| | 06:14 | Now one of the most important
regions is the content region and that is
| | 06:19 | surrounded by a div with an ID of content.
| | 06:22 | In here we have the print content
variable, and this content variable is
| | 06:28 | actually where the main primary
content goes, which is your node templates.
| | 06:34 | So your node content would end up going
through the node template, and then be
| | 06:38 | prepared and then fully
injected into this line.
| | 06:42 | So if we go past this, we'll see that
there is a right bar just like the left
| | 06:47 | and of course, the footer_
message and the footer region.
| | 06:51 | At the very bottom of the page is
probably one of the most important regions to
| | 06:56 | Drupal and not our content,
known as the closure region.
| | 07:00 | A closure region is required at
the bottom of every page template.
| | 07:05 | This region is used by Drupal and
modules to render any unseen content at the
| | 07:10 | very bottom of each page.
| | 07:12 | You do not need to declare this region
in your theme info file, but Drupal does
| | 07:17 | expect it to appear in every page template.
| | 07:21 | Common scripts like web analytics
require their own JavaScript code to appear
| | 07:26 | at the bottom of a page, so
they can track users for you.
| | 07:30 | This is a key reason why the closure
region exists, to facilitate needs like this.
| | 07:36 | What we will be doing for our page
template is taking this code and modifying it
| | 07:42 | by adding regions or
changing some of the markup.
| | 07:46 | Drupal is not limited to a single-page template.
| | 07:49 | Custom page templates can be created for
the front page or the site maintenance page.
| | 07:55 | Each of these templates can change the
entire layout and all of these templates
| | 08:00 | are actually covered in this chapter.
| | Collapse this transcript |
| Creating a template to theme every page (page.tpl.php)| 00:00 | The first important template to learn is the
page template, otherwise known as page.tpl.php.
| | 00:08 | This is the template used for
every page that Drupal renders.
| | 00:11 | It is a very important template as it
lays the page structure and has all the
| | 00:16 | placeholders for the
content areas, known as regions.
| | 00:20 | In this video, I'll be copying the page
template file from Drupal core into our
| | 00:25 | theme folder and
modifying it for our flower site.
| | 00:29 | So, the page.tpl.php file is actually
located in Drupal's modules/system folder.
| | 00:40 | Here it is page.tpl.php.
| | 00:43 | Now don't be fooled by Windows Vista,
because this template file is not .tpl.
| | 00:49 | It is actually .tpl.php.
| | 00:52 | We just don't see the full file extension.
| | 00:55 | You want to actually right-click,
copy this file, go to your theme folder
| | 01:01 | hanselandpetal in sites/all/themes/
hanselandpetal, and actually paste this file.
| | 01:09 | Let's go ahead and open this file in
Dreamweaver or your favorite text editor
| | 01:14 | and we'll be actually modifying this file.
| | 01:16 | So, the first thing we should
actually edit since this will be our modified
| | 01:20 | version is to remove the line of code
that says who originally authored this
| | 01:25 | template in Drupal core. So, delete line-2.
| | 01:28 | Now, let's go down to around line 120.
| | 01:35 | Here is actually the end area of the header div.
| | 01:39 | The first edit we would want to make
in our version of this page template file
| | 01:44 | is to move the navigation div, which
holds the primary and secondary links.
| | 01:51 | We want to move that navigation div
from the container div into the header div.
| | 01:59 | Let's go to our site as it is
now to see what I'm talking about.
| | 02:03 | So, I'm going to open a new tab to the
homepage and we're going to inspect this
| | 02:09 | page with Firebug, which
is an extension for Firefox.
| | 02:14 | I'm going to quickly highlight the
navigation area as it's being rendered in the
| | 02:19 | standard page template right now.
| | 02:21 | As we see this is not where the
navigation area was originally designed to be
| | 02:25 | but instead of in the brown band area.
| | 02:28 | Well, the reason for this is the standard
page template that is being picked up by
| | 02:34 | Drupal core has its navigation div
highlighted here inside the container div,
| | 02:40 | and like I was saying before, we want
to move this div into the header div and
| | 02:46 | outside of the container div.
| | 02:48 | So let's go and do that now in our text editor.
| | 02:51 | So, I'm going close Firebug for now,
open my text editor, Dreamweaver, and
| | 02:56 | I'm actually going to scroll down and
highlight lines 127 to 139 and in Dreamweaver,
| | 03:05 | I'm able to actually just drag-and-
move where I want the code to be.
| | 03:10 | If you can't drag your code, you'll
need to cut-and-paste the navigation
| | 03:15 | div into this new area.
| | 03:17 | So, I'm going now click Save, go back
to my Drupal theme administration page,
| | 03:23 | and we need to flush the theme cache,
so we'll click Refresh and we'll go back
| | 03:28 | to the tab that has our homepage and
we'll then refresh that page as well.
| | 03:33 | So, we see no change.
| | 03:35 | That means Drupal didn't
pick up our new page template.
| | 03:38 | So, let's go back to the theme
administration and let's click Save
| | 03:42 | configuration. This will kind of
push Drupal to make sure that it does
| | 03:46 | register our changes.
| | 03:48 | Let's go back to the
homepage tab and click Refresh.
| | 03:52 | Now we see that a big change has happened.
| | 03:55 | Let's inspect this markup with Firebug
and we now see that the navigation div is
| | 04:01 | properly inside the header div
as our designer expected it to be.
| | 04:07 | There is one more addition we need to
make to this page template file right now.
| | 04:10 | So, I'm going to close Firebug and I'm
actually going to pull some code I've
| | 04:15 | already prepared in the Chapter 07 folder.
| | 04:19 | This code is in a text file
called new_page_regions.txt.
| | 04:26 | So, I'm going to edit this file in Dreamweaver.
| | 04:29 | You will need to copy and paste
the content of this text file into
| | 04:34 | your page.tpl.php file.
| | 04:38 | If you are not a premimium member of
lynda.com, you do not have access to
| | 04:42 | the Exercise Files.
| | 04:44 | Since this file is essential to
completing this project, we've included it as
| | 04:48 | a free exercise file.
| | 04:50 | You can download this file from the
course page. And as you see it's some PHP code.
| | 04:56 | Well this PHP code defines
new regions for our page template.
| | 05:03 | We've already defined these
regions in our theme.info file.
| | 05:07 | So, let me show you that now.
| | 05:08 | So, I'm opening hanselandpetal.info and
these are the three regions I'm talking about,
| | 05:14 | Footer Content 1, 2 and 3.
| | 05:18 | So, I'm going to go back to the text
file. I'm going to select all. Copy.
| | 05:24 | I'm going to go our page template file.
| | 05:26 | Now I'm going to scroll near the bottom
and right after the line 170, which is
| | 05:34 | the end of the container div,
| | 05:36 | and right before the footer wrapper div,
I'm going to add a couple of new extra
| | 05:40 | lines and then I'm going
to paste the new code in.
| | 05:44 | I'm going to add a little white
space and this is the new code that will
| | 05:49 | actually output the markup for
the new regions that were defined.
| | 05:53 | Remember, these are the region ids
that we declared in the .info file.
| | 05:58 | So going back to the page template, our
code looks good, I want to save, and now
| | 06:03 | we want to go back to our Drupal site
and we can just click Refresh because
| | 06:09 | Drupal already knows about this page
template, so any changes that we've done
| | 06:13 | inside of it will be picked up easily.
| | 06:15 | So, I click Refresh and now we scroll down
to the bottom to see our new regions added.
| | 06:21 | In fact here's the three regions.
| | 06:24 | So they make three new columns inside
this brown area near the footer and the
| | 06:28 | blocks that actually have been
placed there earlier now show up.
| | 06:32 | We also see that the columns have
equal heights and that's a result of the
| | 06:38 | JavaScript files we added
in the previous chapter.
| | 06:42 | Every theme usually gets its own
page template as it is responsible for
| | 06:46 | arranging a site's page structure.
| | 06:49 | Any other page template covered in this
chapter will be derived from this template.
| | Collapse this transcript |
| Creating a template to theme just the front page (page-front.tpl.php)| 00:00 | As mentioned before, a Drupal theme
can have a special page template just
| | 00:04 | for the front homepage.
| | 00:06 | In this video, I will introduce the
custom page front template for Drupal themes.
| | 00:12 | The front page template is derived from
the standard page template we've already
| | 00:16 | created in our theme.
| | 00:18 | The only difference here is the file
name will be page-front and of course any
| | 00:23 | edits we wish to make inside the file.
| | 00:25 | So let's prepare this file now.
| | 00:28 | I'm going to open my theme
folder hanselandpetal that's inside my
| | 00:32 | sites/all/themes folder and we
already have the page.tpl.php file.
| | 00:39 | So I'm just going to actually copy-and-paste.
| | 00:45 | So we'll rename this new
copy to page-front.tpl.php.
| | 00:55 | So let's actually edit this in Dreamweaver.
| | 00:58 | So it's exactly the same as our page.tpl.php.
| | 01:04 | What I would like to do to the front
template is actually remove the new footer
| | 01:09 | regions that we added.
| | 01:11 | The reason being the homepage has a lot
of text that you scroll down through and
| | 01:17 | the bottom area is hardly ever seen.
| | 01:20 | So this region makes much better sense to
appear on the other inner pages of the website.
| | 01:26 | So let's go back to Dreamweaver.
| | 01:28 | Let's scroll down in page-front to the
new footer content regions that are on
| | 01:35 | lines 172 to lines 195.
| | 01:39 | We're just simply going to delete
these regions and save our file.
| | 01:43 | So let's go back to Drupal and we need
to actually let Drupal know that there's
| | 01:48 | been a change in our theme folder.
| | 01:51 | So the first way we do that is we
actually refresh the theme page, go back to
| | 01:57 | our theme, and since we have a new
front page template, we'll be refreshing the
| | 02:03 | homepage of our Drupal theme site.
| | 02:06 | We see now with the refresh that
those regions have disappeared.
| | 02:11 | Let's click on one of the inner pages
and let's scroll down and we now see that
| | 02:17 | the regions are respected for every
other page that is not the front page.
| | 02:23 | We see the regions there and if we
go back to Home, let's scroll down and
| | 02:27 | those regions are gone.
| | 02:29 | One additional change I would like to see
is the reduction of the double search box.
| | 02:37 | I like the search box up in the
header for the homepage but I don't want it
| | 02:41 | on every other page.
| | 02:43 | So I won't be editing the page front
template, but I'll be going back to the
| | 02:48 | standard page template and looking
for the search box variable and that's
| | 02:54 | actually up in around line 113.
| | 02:55 | I'm going to delete this set of code.
| | 03:00 | I'm going to save page template and now
I'm going to go back to our Drupal site
| | 03:05 | and I'm going to refresh the homepage.
| | 03:08 | We don't see a change here because this
search block needs a configuration set
| | 03:13 | in the blocks administration screen, so
it doesn't show up on the homepage, but
| | 03:18 | if we visit any of the inner pages
now, we see that the header disappears
| | 03:23 | because the code for the global
search box in the header is now only in our
| | 03:28 | page-front template.
| | 03:31 | Let's quickly set up to search box
to only show up on the inner pages.
| | 03:36 | I'm going to do that
through the Blocks administration.
| | 03:38 | So I'm going to go back to my Drupal
administration screen, I'm going to open Blocks,
| | 03:42 | I'm going to scroll down, I'm
going to find the Search form block, and
| | 03:47 | I'm going to click Configure.
| | 03:50 | In here, we go down and I'm going to
click Show on every page except the
| | 03:55 | listed pages and the listed page that we
don't want this block to show is the front page.
| | 04:00 | I'm going to click Save blocks, go back
to our drupal-themes site, I'm going to
| | 04:06 | click Refresh and of course the search
box should stay on this page since we're
| | 04:12 | on the Services page.
| | 04:14 | Let's go back to the home and now
we see the search block does not appear in
| | 04:19 | the sidebar for the homepage but we
do get the global search up on top.
| | 04:24 | Having a custom front page template
could be a great way to set your theme apart
| | 04:29 | from other Drupal themes
that do not use this feature.
| | Collapse this transcript |
| Creating a template to theme individual pages (page-node-nid.tpl.php)| 00:00 | Up to this point we've seen how every
page relies on the standard page template
| | 00:04 | and how the front page
can have its own template.
| | 00:08 | Now it's time to show you how to
create a page template for a specific node
| | 00:13 | different from the rest of the site.
| | 00:15 | So for this exercise, we actually
will be going through and picking one of
| | 00:19 | the nodes already saved in the site and
targeting it to have a specific page template.
| | 00:26 | Now what we're doing here is we're not
creating anything with the node templates
| | 00:30 | yet as that's in the next chapter.
| | 00:32 | For this video, we're actually just
altering the surrounding page template that
| | 00:38 | would be used on a specific node's page.
| | 00:42 | So let's actually load up a node
that is a page type, and I'm going to
| | 00:48 | choose this Services node.
| | 00:50 | There is a naming convention needed for
this template, which is very similar to
| | 00:55 | the other two page
templates we've already created.
| | 00:59 | The naming convention for this
template is page-node- and then the node id.
| | 01:08 | We need to get the node id through the
Drupal Administration interface, so we
| | 01:12 | can actually copy that id and then
use it in the templates filename.
| | 01:16 | To do that we can click Edit on the node
we wish to target and reference the URL
| | 01:24 | because the id of the
node is actually in the URL.
| | 01:28 | So we see that this node's id is id number 5.
| | 01:32 | So we're going to go to our theme
folder and we're going to actually copy and
| | 01:39 | paste our standard page template file
and rename it page-node-5 because that's
| | 01:52 | the node id of the services page.
| | 01:55 | So now let's edit this file in
Dreamweaver and since it's like all the other
| | 02:00 | standard page templates we've been
building so far, we can just scroll down and
| | 02:05 | edit the area we wish to remove or add.
| | 02:09 | For this page, I wish to have the
sidebars not appear at all and while this
| | 02:16 | might be a scary proposition for this
single page, we can always get to the
| | 02:20 | sidebars in any of the other pages, since the
template will only be used on this node page.
| | 02:28 | So let's go back to our text editor,
we're going to go through and find the left
| | 02:34 | and right sidebars and remove them.
| | 02:37 | So I've just removed the left sidebar
and I'm now removing the right sidebar.
| | 02:43 | We're going to save this page-node-5
template, we're going to minimize our text editor,
| | 02:49 | and we're going to go back to
our theme administration page, we're going
| | 02:54 | to click Refresh, so Drupal updates its
information about your theme. Then we go
| | 03:00 | back to our Services node page,
and we're going to click Refresh.
| | 03:06 | Now we see that the sidebars have been
removed, but only for this page, because
| | 03:12 | if we click around we see that the
sidebars appear properly all across the rest
| | 03:18 | of the site except for this one node page.
| | 03:22 | This template does not modify how
the content of the node is displayed as
| | 03:26 | that is done through the node templates,
which are covered in the next chapter of course.
| | 03:30 | I do not recommend making separate page
templates for every node in your site,
| | 03:36 | but when a big change is needed for a single
node page then this template is what you should use.
| | Collapse this transcript |
| Creating a template for "site offline" maintenance pages| 00:00 | When a Drupal site is offline, also
known as maintenance mode, then none of the
| | 00:05 | site's content appears except a simple custom
message usually saying the site is offline.
| | 00:11 | By default this page renders
with the blue Drupal screen.
| | 00:14 | But we can control how this
page looks within our theme.
| | 00:18 | In this video, I will show you how to
configure a Drupal site to use a custom
| | 00:22 | maintenance page template.
| | 00:24 | So, before we make the maintenance page
template, I want to show you a reference
| | 00:28 | URL that is in the Drupal theme guide.
| | 00:31 | This is all the information you need
to know about custom maintenance pages.
| | 00:36 | In this video, we'll be creating a
standard maintenance page template.
| | 00:40 | So, going back to our Drupal site,
we need to actually open up the Site
| | 00:46 | Maintenance Administration screen.
| | 00:49 | And that's in the Administer > Site maintenance.
| | 00:53 | On this page, we can put our site into
offline mode, locking everybody out who
| | 00:58 | is not an administrator.
| | 01:01 | Here is the custom message that's
going to appear for the site offline page.
| | 01:06 | Before we turn our site offline, let's
go and view the site in another browser
| | 01:11 | that's already locked out.
| | 01:12 | I'll be using Internet Explorer for that.
| | 01:15 | So, I have Internet Explorer ready and
as we could see everything is rendering
| | 01:20 | as expected and if we turn the site
into offline mode now, we are going to
| | 01:25 | see a big difference.
| | 01:27 | So, let's go back to my Firefox. I am
going to turn the site into offline mode.
| | 01:32 | Click Save configuration.
| | 01:34 | Now, I am going to go back to Internet
Explorer and I'll click Refresh on the
| | 01:38 | Homepage of our flower shop.
| | 01:40 | Now we see a maintenance page
that looks nothing like our site.
| | 01:45 | Imagine if you had to turn the
site offline to do an update and your
| | 01:50 | customers came back and kept seeing
this blue page, they might think they're
| | 01:54 | actually at the wrong site.
| | 01:56 | We don't want that to happen to
our customers of the flower shop.
| | 02:01 | So, let's create a custom maintenance
page, so it can look just like every other
| | 02:05 | page that we have in our theme.
| | 02:07 | A maintenance page is a little bit more
complex than the other page templates in
| | 02:12 | how it's actually set up because we
require two files to be edited here.
| | 02:18 | The first is the maintenance page template.
| | 02:20 | Let's create that first.
| | 02:22 | So, I am going to minimize Internet Explorer.
| | 02:23 | I am going to open my
hanselandpetal theme folder.
| | 02:28 | And just like the other page
templates, we are going to duplicate
| | 02:33 | page.tpl.php and rename it.
| | 02:37 | So, let's copy and paste and rename
this file to be maintenance-page.tpl.php.
| | 02:53 | And we can edit this file in
Dreamweaver, but right now that's not necessary.
| | 02:58 | Instead, we need to edit the one file
that controls the settings for our site.
| | 03:05 | And the reason why is because Drupal
needs to know and have the theme that will
| | 03:11 | be the maintenance theme hardcoded,
because it can't depend on the database to
| | 03:16 | let it know what theme is active,
since the site is in offline mode.
| | 03:20 | So now that I setup this template file, I am
going to open my settings.php file for my site.
| | 03:28 | And that's located for me in my drupal/
sites/lynda-drupal-themes folder and here
| | 03:34 | is the settings PHP file.
| | 03:36 | I am going to show the properties of
this file and point out that this file is
| | 03:41 | always marked as Read-only.
| | 03:43 | For this exercise, we have to
uncheck this and make this file writable.
| | 03:50 | If you're following along on a Mac,
changing the files permissions is done
| | 03:54 | differently than it is on Windows.
| | 03:55 | Let me show you how to do that on Mac.
| | 03:58 | So, I am going to visit my
drupal/sites/lynda-themes-folder.
| | 03:59 | And I am going to right-
click on my settings.php file.
| | 04:07 | If you don't have a right-click
button, you will use Ctrl+Click.
| | 04:11 | Choose Get info and we'll have to
actually adjust the window to show the little
| | 04:17 | lock in the bottom-right
corner of this file info window.
| | 04:21 | So we'll click the lock, we will type
in our administrator Password to unlock
| | 04:26 | this window and we'll change the
Read only setting to Read & Write.
| | 04:31 | Then you can click the lock back.
| | 04:34 | Close the Info window and continue.
| | 04:36 | I am going to open this in Dreamweaver
and then we need to scroll down to find
| | 04:42 | the configuration array and uncomment a
few lines and then edit one of them to
| | 04:48 | actually mark our theme
as the maintenance theme.
| | 04:51 | So, I will do that here.
| | 04:53 | The first line in my settings file is
the conf = array line, so to uncomment
| | 05:00 | this line, you want to remove
the hash mark that's in the front.
| | 05:04 | The other line we need to uncomment is
the maintenance_theme line that is below
| | 05:10 | the conf array line.
| | 05:12 | And actually right here we see minnelli has
been set as the default maintenance theme.
| | 05:18 | If we go back to Internet Explorer, we can
confirm that by looking at the blue page.
| | 05:23 | So, minimizing Internet Explorer, we
go back to our text editor and there's
| | 05:27 | one more line that's important and we
need to uncomment and that is the end of
| | 05:32 | the array declaration.
| | 05:34 | So, you make sure that you
uncomment this line that has a closing
| | 05:39 | parenthesis and a semicolon.
| | 05:43 | Now, we go back up to the maintenance_
theme line in our settings file and change
| | 05:48 | this minnelli value to our theme ID.
| | 05:52 | If you don't remember what our
theme ID is, you can go back to the
| | 05:56 | hanselandpetal them that we've been building
and get the theme ID from the .info file name.
| | 06:02 | So, it's hanselandpetal, so let's copy
this name, go back to our settings.php
| | 06:09 | file and paste in our theme ID.
| | 06:13 | We are going to now save this file.
| | 06:15 | We are going to go back to our site
folder to turn on Read-only again.
| | 06:21 | So, I am going to choose Read-only only, OK.
| | 06:25 | Now, I am going to go back to Internet
Explorer where we see the blue page we don't want.
| | 06:30 | Now, I am going to click Refresh.
| | 06:33 | I click Refresh and now we see our
hanselandpetal theme up here for the
| | 06:38 | site offline mode.
| | 06:40 | Before we go, I want to make sure that
my site is not left in offline mode.
| | 06:44 | So, let's go back to our theme
administration in the other browser and let's
| | 06:49 | click Online, Save configuration.
| | 06:52 | We can now go back to our Internet
Explorer, refresh and we should see our site
| | 06:57 | in online mode again.
| | 06:58 | Since creating a maintenance template
takes a little bit of customization of the
| | 07:03 | actual Drupal site, this might be a
little bit of a scary proposition for some.
| | 07:08 | So, I ask that you be
careful when you are testing this.
| | 07:12 | By adding a maintenance page template,
we can still present a custom look and
| | 07:16 | feel to our site's experience even
when the site is in offline mode.
| | Collapse this transcript |
|
|
8. Node Content TemplatesUnderstanding node templates| 00:00 | Node templates define how primary
content should be wrapped in markup.
| | 00:04 | In this video, we will review what
variables are available to every node template.
| | 00:09 | So, the node template is similar to
the page template in that it's already
| | 00:13 | provided in Drupal core and our site
is already using it, but we want our own
| | 00:19 | custom version of that template
to reside in our theme folder.
| | 00:23 | So let's go grab a copy of the node
base template, which is available in
| | 00:28 | Drupal's modules/node folder
and the file is node.tpl.php.
| | 00:36 | So, let's copy this file, we'll
minimize the drupal folder and go back to
| | 00:41 | our theme hanselandpetal located in
sites/all/themes and we'll paste the
| | 00:48 | node template file here.
| | 00:50 | Now that we have our copy of this node
template file, let's go ahead and edit
| | 00:54 | it in our text editor.
| | 00:56 | Just like all the other templates before,
we need to remove the information of
| | 01:02 | who authored this template for Drupal,
because we are going to be modifying this,
| | 01:06 | so we don't need
that information up there.
| | 01:10 | Just like the other templates we've
seen before, there are some variables that
| | 01:14 | we can use throughout this whole template.
| | 01:16 | Of course, these variables cannot
actually exist outside of this template.
| | 01:21 | These variables are only for the node templates.
| | 01:25 | So, we see things like title and content.
| | 01:28 | These are used for actually the
node title and the body content.
| | 01:33 | Let's see where these variables exist
within the code of the node template.
| | 01:37 | We see here that actually on line 56
wrapped in a heading tag that the node
| | 01:44 | title is printed and we also see on
line 70 that this is where the node
| | 01:50 | content body will go.
| | 01:52 | Let's see where those
actually render now on our site.
| | 01:56 | So, going back to our hanselandpetal site,
we see the Homepage has a few nodes here.
| | 02:03 | We see some blog nodes and some flower nodes.
| | 02:07 | The title of the node appears at the top and
the content appears right under the title itself.
| | 02:15 | If we were to visit a single node
page, say service, we also see the same
| | 02:21 | outline, which is title on top
and the content on the bottom.
| | 02:26 | Going back to the Homepage, we want to
actually create our own custom version
| | 02:32 | of this node template, so we have a different
look than what is already printed on the page.
| | 02:39 | It's a good idea to review what
template variables are available during the
| | 02:42 | design phase of a site.
| | 02:44 | Going back to the node template in our
text editor, I would like to bring up a
| | 02:49 | couple of points here.
| | 02:50 | First, you'll notice that a node
template does not have any site shell markup,
| | 02:55 | which is like the HTML tag,
the head tag or the body tag.
| | 03:01 | As we mentioned earlier, the node
template is only for the content area.
| | 03:06 | That's why the node template starts with
a div tag and ends with just a div tag.
| | 03:13 | There are no other required tags
to go into this template unless they
| | 03:17 | are content or layout.
| | 03:19 | One more point, line 51 of this
template actually shows that there are CSS
| | 03:25 | classes and ids applied
dynamically to each node template.
| | 03:30 | We see that the id of this div
will be called node- node id.
| | 03:38 | So, if our node id is node id five,
when this template is used for that fifth node,
| | 03:45 | the id would be node-five.
| | 03:49 | We see that there are some CSS classes
here and class node is used with addition
| | 03:55 | to a couple of optional classes that
Drupal will put in when necessary, like
| | 04:01 | node-unpublished and sticky.
| | 04:04 | These have predefined styles in Drupal
core, so you don't have to come up with
| | 04:09 | these styles on your own
unless you would like to.
| | 04:13 | It is a good idea to review what
template variables are available during the
| | 04:17 | design phase, since the site can
actually incorporate more elements than the
| | 04:22 | standard template provides.
| | Collapse this transcript |
| Creating a template to theme every node (node.tpl.php)| 00:00 | In this video we're going to edit our
new node template that's inside our Theme
| | 00:04 | folder, we're going to add some
markup and a PHP variable available to node
| | 00:09 | templates that is currently not there.
| | 00:12 | So, let's edit our node.tpl.php file
and we'll actually scroll to the variable
| | 00:20 | list that says node_url.
| | 00:24 | This is the variable that I
want to use in my custom template.
| | 00:28 | What I plan to create is a little
link that will actually point to this
| | 00:33 | node directly that people can use to take and
share with other people known as a Share link.
| | 00:39 | So, what I want to do here is
actually add right under the content div,
| | 00:46 | around line 73, I'm going to add an
HTML link and the href is going to equal
| | 00:55 | the php variable node_url.
| | 01:00 | Remember you have to have the print in
front of URL for Drupal to know that it's
| | 01:05 | going to actually print
out the value to the screen.
| | 01:08 | So, let's close this </a> tag for the
link text we're going to say "share this."
| | 01:15 | Let's click Save and we need to go to
our Drupal theme administration page
| | 01:21 | to refresh the theme cache, so we could pick up
our new node template within our Theme folder.
| | 01:27 | Now let's go back to our hanselandpetal
Homepage and let's click Refresh to see
| | 01:33 | our changes in the node templates take effect.
| | 01:36 | Now, we have a very simple 'share this'
link, pointing directly to the node.
| | 01:42 | This actually will appear now in
every single node on the website.
| | 01:48 | So, let's scroll up and let's look at
the services page and at the bottom,
| | 01:53 | there's a share link and of course, at the
bottom of the about us page is also a share link.
| | 01:59 | While the flowers and blog posts make
sense to share, these two inner pages
| | 02:05 | about us and services,
do not make sense to share.
| | 02:09 | So, in the next movie, we will create a
node template for page types that do not
| | 02:14 | have the share link.
| | Collapse this transcript |
| Creating a template to theme custom node types (node-type.tpl.php)| 00:00 | Each node type in Drupal can have
their own modified node templates.
| | 00:04 | With our base node template file
prepared, we can make derivatives of this
| | 00:08 | template for each content type our site has.
| | 00:11 | In this video, we will duplicate the
base node template for each content type in
| | 00:16 | our Flower site, allowing each node
type to get a custom look and feel.
| | 00:20 | So, as you might have guessed, there
is a naming convention involved with
| | 00:25 | duplicating a base node template
for each content type and that naming
| | 00:30 | convention is actually node-type.tpl.php.
| | 00:36 | But we need to find out how we get the type,
so we can actually create the file names.
| | 00:41 | And to do that let's go to our Drupal
website and in the Administration section
| | 00:46 | let's go to Administer > Content types
and here we see a column called Type and
| | 00:54 | this is the machine ID as it's
known in Drupal for each Content type.
| | 01:00 | So if we're to create a node template
for blog, we would end up making a file
| | 01:06 | called node-blog.tpl.php and for
flower, we would make a file named
| | 01:15 | node-flower.tpl.php.
| | 01:19 | So, let's actually do that now.
| | 01:20 | I'm going to minimize my browser and
open up my hanselandpetal theme, which is
| | 01:27 | in the sites/all/themes folder.
| | 01:30 | Now, I'm actually going to copy
and paste the node template file.
| | 01:35 | Now, I'm going to rename that copy to
node-blog.tpl.php and let's make another
| | 01:44 | copy for our flowers and rename this
file to node-flower and let's make one
| | 01:54 | final node type template
for just the page types.
| | 01:58 | So, let's copy the node template and
paste and then we'll rename this copy
| | 02:04 | to node-page.tpl.php.
| | 02:10 | So, now that we have our node type
templates, let's go ahead select these and
| | 02:16 | edit them in our text editor.
| | 02:19 | I'm using Dreamweaver, and as I
mentioned in the previous video, the page types
| | 02:25 | end up getting a share link that we
added to all the node types through the
| | 02:30 | standard node template file.
| | 02:33 | Let me show you that link now.
| | 02:34 | So, I'm clicking the services.
I scroll down and there is a 'share this' link.
| | 02:39 | Well, we don't want this 'share this' link
to appear on the node page templates, so
| | 02:45 | let's edit that file to remove the line of
code that actually declares the share this link.
| | 02:52 | In my node page template, the line
that I wish to remove is line 73.
| | 02:57 | So, I want to delete this line and some extra
white space and now I'm going to click Save.
| | 03:03 | For the flower node template, I
actually want to add the word flower in the
| | 03:08 | front of every title that comes out,
because these are product pages for the
| | 03:12 | website, so I would like these to be
a little bit different in that way.
| | 03:16 | So, I'm going to actually hardcode the
word Flower with a colon and a space,
| | 03:23 | in front of the printed title.
| | 03:25 | So, now that we have these different
node type templates, we can actually now
| | 03:29 | go back to Drupal, and go to the Themes
administration screen under Administer
| | 03:36 | > Themes and since we loaded this page,
Drupal should have already cleared the theme cache.
| | 03:43 | If you were already on this page, be
sure to click Refresh so Drupal can look
| | 03:48 | inside the hanselandpetal folder to
find the new template we just created.
| | 03:53 | Let's go back to our hanselandpetal pages.
| | 03:57 | Since, I'm already on the services page,
I'm going to just click Refresh and we
| | 04:02 | see now the 'share this' code is no
longer appearing on the services page.
| | 04:08 | The same should be for the about us
page type and we don't see a share this link.
| | 04:14 | But if we go to the Homepage, we now
see that the Flower node types have a
| | 04:20 | prefix in the title that we entered
into the Flower template and the share this link,
| | 04:25 | of course, still appears because
that is inside all the other templates
| | 04:30 | that we created as well.
| | 04:32 | Each template should follow the same
structure as the base node template, using a
| | 04:37 | heading tag for a title and
div tags to wrap the content.
| | 04:42 | One point to know about node templates
is you cannot currently have a node type
| | 04:48 | template like blog, flower, or page
without its parent template node.tpl.php
| | 04:56 | being in your theme.
| | 04:57 | This is a current limitation of
Drupal and might change in the future.
| | 05:01 | Creating templates for each node type
allows designers to customize the look for
| | 05:06 | every piece of content in their Drupal site.
| | Collapse this transcript |
| Discovering node templates using the theme developer module| 00:00 | Early in the chapter, we figured out
what are node templates should be named
| | 00:03 | using the Drupal administration.
| | 00:05 | Now I will show you how to use the
Theme developer module to expose what node
| | 00:09 | templates can be made for our theme.
| | 00:11 | So I'm going to head back over to the
Drupal administration screen and I'm going
| | 00:15 | to click on Modules.
| | 00:16 | Now I'm going to enable the Theme
developer module and the Devel module, since
| | 00:22 | the Theme developer
module needs it also enabled.
| | 00:24 | I'm going to scroll down,
click Save Configuration.
| | 00:27 | Now I'm going to go back to my Drupal
homepage and I'm going to click Refresh,
| | 00:32 | so we can get the Themer info button
appearing at the bottom-left corner.
| | 00:36 | I'm going to check the Themer info and
then we see now we have a floating dialog
| | 00:42 | window that we can now use to highlight
an area that is on the Drupal page, say
| | 00:49 | this node, and get some information about it.
| | 00:52 | In fact, since we're building node
templates right now, we can actually click
| | 00:56 | on these nodes and use this tool to see
what candidate template files can be created.
| | 01:02 | So of course, we already have a node
template file and we see here that this
| | 01:07 | tool recommends a node-flower template.
| | 01:10 | We already created that template in the
previous movie, but now we see that we
| | 01:14 | could use this tool to actually click
around our Drupal site and discover what
| | 01:19 | templates we could be creating for our theme.
| | 01:22 | We will be using the Theme developer
module throughout the rest of this course
| | 01:26 | to help us to discover what
templates our theme can provide.
| | Collapse this transcript |
|
|
9. Block TemplatesUnderstanding block templates| 00:00 | Blocks are the third important set of
templates we'll be modifying for our
| | 00:04 | custom flower theme.
| | 00:05 | Block template variables are a bit
different from both the node and page
| | 00:09 | template variables we
covered in previous chapters.
| | 00:12 | In this video, I will show you how
block templates are structured and how their
| | 00:15 | variables are different
from what we've learned before.
| | 00:17 | So let's go and look at the standard block
template that is already provided in Drupal core.
| | 00:23 | So we'll open the drupal-6 folder and
we're going to look at the block template
| | 00:28 | file that's available in
the modules/system folder.
| | 00:32 | The file name is block.tpl.php.
| | 00:36 | So let's view this in our text editor.
| | 00:40 | We see that there is actually not too
much code in this template and we see that
| | 00:44 | there are variables available to us for
block templates just like we've seen in
| | 00:48 | node and page templates.
| | 00:49 | Let me point out a couple of the
important variables that we're going to see in
| | 00:54 | a block template and actually how
they're formatted differently from other
| | 00:57 | variables that we've been seeing so far.
| | 00:59 | First is the Block Title.
| | 01:02 | This variable is actually block->
subject and we see that there is actually
| | 01:08 | this kind of little almost arrow
character that is in the middle between
| | 01:12 | the words block and subject.
| | 01:14 | You need to be sure that you copy the
whole variable name starting from the
| | 01:19 | dollar sign all the way to the end
of the name when you're copying these.
| | 01:23 | Because if you leave off any characters,
then that's actually going to be an
| | 01:26 | invalid variable and you won't
see your text printed to the screen.
| | 01:30 | The second important variable for
block templates is the content variable.
| | 01:35 | So we see that block-> content is
actually going to be printing out the
| | 01:39 | body content of a block.
| | 01:41 | Now let's see where that happens in
our Hansel and Petal site as it is now.
| | 01:45 | So here's our flower shop.
| | 01:48 | We see that there is the title or the
subject of each block that's rendered and
| | 01:53 | we also see that there is the
content area rendering for each block.
| | 01:57 | So let's go back to the block template.
| | 02:00 | Now let's look at the markup that's
involved here and we see just like in nodes,
| | 02:04 | the templates for blocks
start with a <div> tag.
| | 02:08 | The ID of a block is provided by
Drupal and we'll learn more about that in
| | 02:13 | one of the next videos.
| | 02:15 | We also see that every block gets a CSS
class of block plus a dynamic class that
| | 02:22 | is actually covered by modules.
| | 02:23 | That will be also covering
in one of the next videos.
| | 02:27 | So here is the code that actually
outputs the markup for the block subject
| | 02:32 | or title of the block.
| | 02:34 | We see that the conditional logic in
PHP here is stating on line 30, that if
| | 02:40 | the block has a subject then Drupal
needs to print out this heading tag along
| | 02:45 | with the subject text.
| | 02:48 | And then of course, with the
beginning of an IF statement is the end of the
| | 02:51 | IF statement, line 32.
| | 02:54 | This means that the
subject is optional for blocks.
| | 02:59 | What is not optional for
blocks is the content markup.
| | 03:03 | So we see that there is a div with a
class of content and then we see that
| | 03:07 | Drupal prints the blocks content.
| | 03:11 | We can hit this content with CSS,
just like we can hit the class of the
| | 03:16 | entire block with CSS.
| | 03:19 | Throughout this chapter, we'll be
seeing the block variables used in all
| | 03:23 | our block templates.
| | 03:24 | So be mindful of how these variables
are formatted differently from other
| | 03:28 | template variables that
were covered in the course.
| | Collapse this transcript |
| Creating a template to theme every block (block.tpl.php)| 00:00 | In Drupal, we know that secondary
content appear in what are known as blocks,
| | 00:05 | located in the left and right
sidebar as we see on the screen.
| | 00:09 | In this video, I will show how to
include a block template that will be used for
| | 00:13 | every block in our theme.
| | 00:14 | So I'm going to minimize Drupal and I
want to open up the Drupal folder and
| | 00:20 | I need to locate and copy the block
template out of Drupal core, to include it
| | 00:24 | in our Theme folder.
| | 00:26 | So the block template is in modules/
system, and the file name is block.tpl.php.
| | 00:36 | We're going to copy this file,
minimize the Drupal folder, go to our
| | 00:41 | hanselandpetal theme located inside of
the sites/all/themes, and we're going to
| | 00:46 | paste the block template.
| | 00:49 | Let's go ahead and modify this file.
| | 00:53 | Since we are now going to include this
block template into our own theme,
| | 00:57 | the first thing we need to do is always
remove the previous author's information,
| | 01:02 | since our theme now has its own
version of the block template.
| | 01:06 | Scrolling down, we see that the markup
for a block is very minimal. In fact,
| | 01:10 | just one heading tag and
one div tag for the content.
| | 01:14 | I want to add a new class to the
heading that's going to appear on
| | 01:18 | every standard block.
| | 01:19 | I want to click on line 31 and inside the
h2 tag, I want to add a new class of title.
| | 01:27 | Now, I can actually create a
specific CSS class called title for h2 tags.
| | 01:35 | So now that we've modified this template,
we can actually go back to our Drupal page.
| | 01:39 | We need to refresh
the theme cache of Drupal.
| | 01:43 | By doing that, we can visit
the Themes Administration screen.
| | 01:46 | If you're already here, just go ahead
and click Refresh on the screen to let
| | 01:50 | Drupal know that you've made a
change to one of your themes.
| | 01:54 | Going back to the homepage tab that
we already have for our flower shop,
| | 01:58 | I want to show you that right now,
before I refresh the page, that the current
| | 02:03 | titles for blocks, this h2 tag I
have highlighted here, does not have the
| | 02:07 | title attribute yet.
| | 02:09 | I'm going to now click Refresh and I'm
going to inspect that title again and
| | 02:14 | we see now that our custom class of
title is appearing on this block's heading.
| | 02:19 | Let's check the other block and we see
that the same is happening there as well.
| | 02:26 | Block templates are the easiest to
learn, since they have the least amount of
| | 02:29 | code to read and modify.
| | 02:31 | Every block template we create in this chapter and
for our theme will be based off of this template.
| | Collapse this transcript |
| Creating a template to theme an individual block (block-module-delta.tpl.php)| 00:00 | We know that each block uses a
standard block template, but I'm sure you're
| | 00:04 | wondering if individual blocks can
have their own templates as well.
| | 00:07 | When CSS alone cannot customize the look
of a block for you, creating a specific
| | 00:12 | block template is the next
logical step when theming Drupal.
| | 00:16 | In this video, I will create a new
template that will control the look of a
| | 00:20 | specific block on our page.
| | 00:22 | In fact, the block I wish to customize
does not yet exist in our Drupal site.
| | 00:27 | I want to create a new Advertisers
block that appears in one of the new footer
| | 00:31 | regions that we have in our page template.
| | 00:34 | So I'm going to click on one of the
flower product pages and scroll down to show
| | 00:38 | you the region I like the
advertisement to appear in.
| | 00:40 | I want the Ad block to appear in
the center footer region, showing the
| | 00:44 | Drupal icon right now.
| | 00:46 | So I need to create this block and its
content before we can customize a template for it.
| | 00:51 | So let's go back to the Drupal
Administration screen and let's upload the
| | 00:56 | advertisement into a node, and then
we'll call that Ad graphic inside of a block.
| | 01:02 | To do that, we need to create content,
and I'm just going to actually create a
| | 01:07 | page for this advertisement.
| | 01:09 | So I'm just going to call this node Ads,
and I'm going to shrink the body text area,
| | 01:15 | so I can get to the File attachments
form. I'm going to browse for my
| | 01:20 | advertisement graphic that is inside
the Exercise Files folder of chapter 9.
| | 01:26 | If you do not have the exercise files,
you can upload any graphic that you wish
| | 01:30 | to use as an advertisement.
| | 01:31 | So let me go to my Desktop >
Exercise Files. In Chapter 9, there is a
| | 01:37 | graphic called gotdrupal.
| | 01:39 | Let's upload this graphic by clicking Attach.
| | 01:43 | We can leave it listed, because this
page is not going to actually be viewed by
| | 01:47 | anybody else except for
the system administrators.
| | 01:51 | I do want to copy the link to the
graphic, because I'll be using this inside
| | 01:56 | of the block content.
| | 01:57 | So I'm going to click Save and now
we're looking at the page we just created.
| | 02:04 | You may be wondering, how do we go
from the administration theme to our
| | 02:08 | hanselandpetal theme?
| | 02:09 | Well, we technically created a new
node and now we're viewing that node.
| | 02:14 | So, of course Drupal is going to
use our front end theme and not the
| | 02:17 | administration theme.
| | 02:19 | Once we click Edit or click on
Administer, we will be taken back to the
| | 02:24 | administration theme known as Garland.
| | 02:27 | So now that we have our advertisement
graphic uploaded into a node, we can
| | 02:31 | now copy the link to the graphic, and then
create a new block using that graphic content.
| | 02:37 | So I'm going to go back to the
administration screen, I want to click on Blocks,
| | 02:42 | now I'm going to add block, and I want
to create an image tag inside the block
| | 02:49 | body using the source URL of the advertisement.
| | 02:55 | Now we only need, of course,
the relative path for this image.
| | 03:00 | I need to shrink the Block body text
area, open the Input format field and
| | 03:07 | choose Full HTML, so that
this block renders the image tag.
| | 03:12 | We have to give a block description first,
so we'll put Ads and for title, we're
| | 03:16 | going to put in the keyword of none for
Drupal to not output any title for these
| | 03:21 | advertisement blocks.
| | 03:22 | I want to scroll down and we're going
to just click Save block, and now we have
| | 03:27 | an Ads block that we can
position inside footer content too.
| | 03:32 | So the Ads block will appear in here.
| | 03:35 | Click Save blocks, and now if we
scroll down, we can get a preview of that Ad.
| | 03:40 | Remember the graphic was saved in the
node and we took the URL of the graphic
| | 03:46 | uploaded into our Drupal site and use
that as the body content of this block.
| | 03:51 | So, now that we have this custom block
uploaded, let's customize it so we can
| | 03:56 | show people that what they're
looking at is a true advertisement.
| | 04:00 | To do this, I would actually want to
create a specific template that will target
| | 04:05 | just this one block.
| | 04:06 | Let's actually visit the
homepage of our hanselandpetal site.
| | 04:12 | I want to click on the
flowers page and scroll down.
| | 04:15 | I came to this page because I didn't
need any the block's administration
| | 04:18 | highlights getting in the way of
what we're going to try to do next.
| | 04:22 | What we need to do is open up the
Theme Developer module, so we can click on
| | 04:28 | this advertisement and reveal what block
template we should be creating in our Drupal theme.
| | 04:35 | So since I don't have the Theme
Developer module enabled, I need to go turn that
| | 04:39 | on and come back to this page.
| | 04:41 | So I'm going to open in another
tab the Administration window.
| | 04:45 | We're going to click on Modules, go
down to the Theme developer module, click
| | 04:51 | Enabled, and also we'll enable the
Devel module, since that's required as well.
| | 04:56 | Click Save configuration, and now we
can go back to our Sunflower page,
| | 05:01 | click Refresh, and we now get the Themer info option.
| | 05:05 | We'll click this to enable the window and
we'll click on the block for our advertisement.
| | 05:12 | We now see that there's some contextual
information that this pop-up is revealing.
| | 05:16 | It's providing some
candidate template files for us.
| | 05:20 | So we can create a block template
file or any of these other templates for
| | 05:25 | blocks that it's recommending
to target this specific block.
| | 05:31 | So the first thing we can create is a
block-block-1 template, and that would
| | 05:37 | actually target this one
specific block, so let's do that.
| | 05:40 | So I want to actually go down to my
theme folder and we need to duplicate
| | 05:46 | this block template.
| | 05:47 | So let's click Copy, and Paste, and
now we need to give the file name of
| | 05:54 | this block template the same matching
filename recommended by the Theme developer module.
| | 06:00 | So let's edit the file name and we'll
change it to be block-block-1.tpl.php.
| | 06:11 | Let's go ahead and edit this template
with our text editor and make the change
| | 06:16 | that we want to appear on just this one block.
| | 06:20 | So what I would like to add is a class
to the list already there for blocks,
| | 06:27 | a class of Ads, and I want to add a
new heading tag right above where the
| | 06:33 | subject would appear.
| | 06:34 | This heading would be using an h6 tag,
and I want it to say ADVERTISEMENT.
| | 06:40 | We're going to close the tag and
since I don't want the title of the block to
| | 06:46 | appear when it's using this Ad
block template, I'm going to remove that
| | 06:50 | subject line code just in case somebody
accidentally gives a false title to an advertisement.
| | 06:56 | So, I'm going to click Save on this template.
| | 07:00 | We're going to go back to Drupal.
| | 07:01 | So we're going to go back to the
Drupal Administration screen and click on
| | 07:06 | Themes, so when the Themes
Administration screen loads, it would actually update
| | 07:10 | Drupal's internal cache about what
templates are in our theme folder.
| | 07:15 | So now let's go back to our Sunflower
site, let's disable the Themer module and
| | 07:21 | let's refresh the page.
| | 07:23 | We see that something moved and in fact,
if I highlight, the word ADVERTISEMENT
| | 07:28 | is there just as expected.
| | 07:30 | But the text is so dark we
can't see it on the brown background.
| | 07:35 | So let's add a new style in our style.
css file, inside our hanselandpetal theme.
| | 07:42 | We're going to open style.css and
we're going to scroll down to the bottom
| | 07:47 | and add a new style.
| | 07:49 | So this will be ads h6 to get the
heading tag in there, and we're going to give
| | 07:55 | this a color of white.
| | 08:02 | We're going to click Save on style.css.
| | 08:05 | We're going to minimize our text
editor and now we'll click Refresh.
| | 08:09 | Now we see that our ADVERTISEMENT line
appears above the Ad block, just as expected.
| | 08:16 | Technically, there's no problem with
creating a template for each block and
| | 08:20 | any block you don't customize will
still get the standard block template,
| | 08:24 | which is just fine.
| | Collapse this transcript |
| Creating a template to theme all blocks from a single module (block-module.tpl.php)| 00:00 | Drupal themes can contain templates
for all blocks or individual blocks.
| | 00:05 | Another feature of Drupal templates is
the ability to theme all blocks that come
| | 00:10 | from a single module.
| | 00:12 | For example in Drupal core, the
user module provides four blocks:
| | 00:16 | the navigation and user login blocks,
which are here on the left sidebar, and
| | 00:22 | the who's online and who's new blocks
we have in this footer content 1 region.
| | 00:28 | In this video, I will show how to affect
all these blocks from a single template.
| | 00:34 | Instead of repeating templates for each
block that belong to the same module,
| | 00:38 | we can actually just duplicate the
standard block template and rename it,
| | 00:43 | so we would actually affect all the
blocks from a specific module.
| | 00:48 | We can use the Theme developer module to
get a preview of what this block should
| | 00:52 | be named, so let's go and do that.
| | 00:54 | I'm going to open up my Firefox, I'm
going to visit my Hansel and Petal site and
| | 00:59 | I'm going to activate my Theme developer module.
| | 01:02 | Now I'm going to go ahead and
click on this navigation module.
| | 01:07 | We see here that there is the
candidate template files, block template,
| | 01:12 | block-left which we'll
learn about in the next movie.
| | 01:15 | Then we have block-user template and
block-user-1 template, both being able to
| | 01:21 | affect the navigation block,
since it comes from the user module.
| | 01:25 | Now we want to affect all the blocks
that come from the User module, so we won't
| | 01:30 | use the one with the -1 in the file name,
but instead just block-user.tpl.php.
| | 01:38 | This block template will affect
all the blocks in the user module.
| | 01:43 | Let's go to our theme folder and let's
copy the block.tpl.php file and paste it.
| | 01:52 | We want to rename this file to block-user.tpl
.php and open this file in our text editor.
| | 02:02 | So since this block is just like all
the other blocks, we could do a couple of
| | 02:07 | things here that are different.
| | 02:09 | One of the changes, I would like to make
to all the user blocks is to change the
| | 02:14 | heading tag used for the block title.
| | 02:17 | For the user blocks, I just want to
change the <h2> tag to an <h4> tag.
| | 02:22 | Let's see that change now
take place in our Drupal site.
| | 02:25 | So I'm going to minimize my text
editor, I'm going to go back to the Drupal
| | 02:30 | theme administration screen, I'm going
to click Refresh, so Drupal updates its
| | 02:35 | information about our theme folder,
recognizing the new block template.
| | 02:39 | I'm going to go back to my Sunflowers screen
and I'm going to click Refresh on this page.
| | 02:45 | Now we can actually inspect with
Firebug, the headings for the user blocks.
| | 02:52 | Now we see that in the navigation
block, an <h4> tag is used for the title.
| | 02:57 | It's styled the same because our
style.css file has multiple styles for
| | 03:03 | different heading sizes.
| | 03:05 | Let's scroll down to the bottom and look
at the who's new and who's online headers.
| | 03:10 | We now see that the who's new title is
also an <h4> tag and we can assume that
| | 03:15 | the who's online is also the same and it is.
| | 03:19 | Notice the heading is a different size
from the other blocks because we're only
| | 03:23 | affecting the blocks that
come out of the user module.
| | 03:26 | By now there should be a pattern
forming in your head about how Drupal looks
| | 03:30 | for theme templates.
| | 03:32 | When taking this info and applying
it to your own work, remember, most
| | 03:36 | third-party modules can be themed
through these same template schemes.
| | Collapse this transcript |
| Creating a template to theme all blocks in a certain region (block-region.tpl.php)| 00:00 | Drupal blocks in any theme region can
receive their own template, which would be
| | 00:04 | used over a standard block template.
| | 00:08 | For example, the right sidebar blocks
could have a different heading tag over
| | 00:11 | any of the other blocks
that appear in other regions.
| | 00:14 | In this video, I will create a block
template that will only affect the blocks
| | 00:19 | that appear in a single region.
| | 00:21 | In this case, we will be
modifying blocks in the right sidebar.
| | 00:25 | So to figure out what the naming
convention will be for this special block
| | 00:29 | template that affects only the
right sidebar region, we'll turn on our
| | 00:34 | Theme developer module.
| | 00:35 | If you don't have this module enabled,
be sure to turn it on inside your Drupal
| | 00:40 | administration Modules page.
| | 00:42 | Since I have my Theme developer module
already enabled, I'm just going to turn
| | 00:46 | it on by clicking Themer info.
| | 00:49 | We see this dialog come up and now I'm
going to click right on one of the blocks
| | 00:54 | that appear in the right sidebar region.
| | 00:56 | So now I'm going to look at the
candidate template files listed in the Theme
| | 01:00 | developer module window.
| | 01:01 | We're going to look for the block
template that is named after the region, in
| | 01:07 | this case, region right.
| | 01:10 | So we see that there is a
template that it recommends called
| | 01:13 | block-right.tpl.php.
| | 01:18 | This is the file we're going to want to
create from our standard block template.
| | 01:22 | So let's go ahead and minimize our browser.
| | 01:25 | And let's look at our theme
folder, hanselandpetal, that's
| | 01:27 | inside sites/all/themes.
| | 01:28 | And we're going to copy the standard
block template and paste this copy to
| | 01:36 | rename this block-right.tpl.php.
| | 01:43 | Now that we have our file,
let's edit it in our text editor.
| | 01:46 | So now let's scroll down and let's
edit the heading tag used for the
| | 01:51 | right sidebar blocks.
| | 01:54 | Instead of an <h2> tag, I'm
choosing to use an <h3> tag.
| | 01:57 | I'm going to minimize Dreamweaver.
| | 01:59 | I'm going to go back to Drupal and go into
the Themes administration page and click Refresh.
| | 02:06 | This refresh now updates the internal
theme cache in Drupal and lets Drupal go
| | 02:11 | through our theme folder to find a new template.
| | 02:15 | Let's go back to the
Sunflowers page and click Refresh.
| | 02:20 | Now we didn't notice the difference,
but if we actually inspect this tag,
| | 02:25 | we can see we're now using an <h3> tag instead of
the <h2> tag for all the other standard blocks.
| | 02:32 | The reason why we didn't see the
styles change is because the style sheet
| | 02:36 | actually has styles declared for
<h2> , <h3>, and <h4> tags, so all of
| | 02:42 | those would have worked.
| | 02:43 | If I look at this second block in the
sidebar region, we can also confirm that
| | 02:48 | this block, which comes from a
totally different core module, has the same
| | 02:53 | heading tag because it lies in
the same region as the search block.
| | 02:58 | All the blocks that we would then put
inside the right sidebar are going to get
| | 03:03 | this new <h3> tag for their title.
| | 03:05 | Again, if CSS alone cannot accomplish
your customization to a block or set of blocks,
| | 03:11 | then creating these
additional block templates makes sense.
| | Collapse this transcript |
|
|
10. Other TemplatesExploring the comments template (comment.tpl.php)| 00:00 | Drupal's origin is in social publishing.
| | 00:03 | That's why there are many community
related features built-in, like the
| | 00:07 | ability to leave comments.
| | 00:09 | Site visitors can leave
comments on content you post in Drupal.
| | 00:14 | In this video we will create a
modified template to control the display of
| | 00:18 | comments across our flower site.
| | 00:20 | So I will actually need to create a
few comments first before we can edit
| | 00:25 | the template for them.
| | 00:27 | So let me actually go down and click
Add a new comment on one of the flower
| | 00:31 | posts we have called Sunflower.
| | 00:34 | So the subject line I am going to go say
I like this flower, and for the Comment
| | 00:41 | I am going to go say, Great site!
| | 00:43 | I am going to go click Preview.
| | 00:46 | That's what the comments are going
to look like right now. That's good.
| | 00:49 | And I am going to go click Save to
actually save the comment to the node.
| | 00:55 | As we see now, there is a new
comment on this flower post.
| | 00:57 | Now, I am going to create
another comment right after that.
| | 01:01 | And this one will be a little bit different.
| | 01:02 | And it will say I like orange more than yellow.
| | 01:08 | My flower is pretty.
| | 01:12 | Your flower is just yellow.
| | 01:15 | So of course we have to Preview.
This is what it will look like now.
| | 01:18 | We click Save on this comment, and now
we have two comments that we can go and
| | 01:23 | modify their template, and we will
see a change when we refresh this page.
| | 01:28 | So the first step in this workflow is
to actually get the comment template out
| | 01:32 | of the drupal-6 core folder.
| | 01:35 | This is available in the
modules comment folder, and the file
| | 01:40 | is comment.tpl.php.
| | 01:45 | So we are going to actually want to
copy this file, minimize my Drupal folder.
| | 01:50 | Let's go to our hanselandpetal theme
in sites/all/themes and we are going to
| | 01:54 | paste this comment
template into our theme folder.
| | 01:58 | Now let's edit this file, and of course
like all the other templates, the first
| | 02:02 | thing we do when we are modifying a
template from core is we will remove the
| | 02:07 | previous author's information. Click Save.
| | 02:10 | And just like the previous templates we
learned about, there are some variables
| | 02:14 | available to this template.
| | 02:15 | I am going to scroll down, and I actually
want to make a small change to this template.
| | 02:21 | I am going to go back to my Drupal site.
| | 02:24 | I actually want to move where
the Submitted by date is located.
| | 02:28 | I would like this to be above the Subject line.
| | 02:32 | So I am going to go back to my text
editor, and I am actually going to look for
| | 02:36 | the submitted code, and that's lines 38
to 40 in the standard comment template.
| | 02:42 | I am going to go actually drag and move
this code to be right before the heading
| | 02:48 | tag, and the title variable.
| | 02:49 | I am going to remove my extra white
space and I am going to click Save.
| | 02:53 | I am going to go now minimize
Dreamweaver, and go back to my Themes
| | 02:58 | Administration screen to refresh it,
so Drupal can then pick up the changes
| | 03:03 | in my theme folder.
| | 03:04 | So now that Drupal should recognize I
have a custom comment template, I am going
| | 03:09 | to go back to my
Sunflower page and click Refresh.
| | 03:13 | It looks like Drupal did not pick up
my changes, so let's actually go back to
| | 03:17 | the Theme Administration page and we
will go down, click Save configuration.
| | 03:22 | And this happens sometimes when Drupal
just doesn't update its theme cache properly.
| | 03:27 | So by clicking Save configuration on
our Theme Administration page we now
| | 03:32 | guarantee that Drupal has gone through all
the theme files and cataloged what's new.
| | 03:36 | So let's go back to our sunflower page.
| | 03:39 | Let's click Refresh and now we see
that our submitted line actually appears
| | 03:44 | before our subject line from our comments.
| | 03:48 | Now, I actually want to show you one
more thing, because comments,
| | 03:52 | their templates are similar to node templates,
in that a comment on a flower node
| | 03:58 | type can have a different
template from all the other node types.
| | 04:02 | In fact, the naming convention is
very similar to the node type template we
| | 04:06 | learned about in one of the preview chapters.
| | 04:09 | Let me go activate my Theme Developer
module, so we can see what I am talking about.
| | 04:14 | So I am going to enable the Theme
Developer module, along with the Devel module,
| | 04:20 | click Save configuration in my Module
screen, and now that we know that the
| | 04:24 | Theme Developer module is on, I am
going to go back and refresh my sunflower's page,
| | 04:28 | and enable the Themer info window.
| | 04:31 | I am going to go click on one of the
comments, and we are going to see that the
| | 04:35 | candidate template files could be
named either comment.tpl.php or
| | 04:42 | comment-flower.tpl.php.
| | 04:47 | So if we would have maybe left
comments on a blog type, this template
| | 04:51 | recommendation would be comment-blog.tpl.php.
| | 04:57 | Since I only need one template for
my comments across my entire site,
| | 05:01 | I will leave this as is.
| | 05:03 | If you are building a site where
comments will not be allowed, then you do not
| | 05:07 | need to include this template in your theme.
| | 05:10 | But if you plan to release your theme
to the public, then I highly suggest
| | 05:14 | you consider providing this template as other
sites may have comments enabled for their content.
| | Collapse this transcript |
| Exploring other core modules and their templates (other tpl.php files)| 00:00 | The last few chapters have detailed the
common templates used by all Drupal themes.
| | 00:06 | Drupal core has even more templates
available to you, so you can include them
| | 00:09 | in your own themes.
| | 00:11 | In this video I will show you where to
reference this list of templates, so you
| | 00:15 | can create even better Drupal themes.
| | 00:18 | So the list of templates is
available on www.drupal.org.
| | 00:21 | So I am going to go to my tab for the
core templates and suggestions page.
| | 00:26 | This is a reference sheet that has all the
Drupal templates available in Drupal core.
| | 00:32 | There is even a cheat sheet PDF you
can download and view on your machine.
| | 00:37 | So scrolling down we can see that there
is an alphabetical list of every module
| | 00:42 | that comes with Drupal, and the
associating templates available for you to
| | 00:48 | reference, and even
incorporate into your own themes.
| | 00:52 | We see modules like the Aggregator
module located in the Drupal modules/
| | 00:57 | aggregator folder, have
actually five templates you could use.
| | 01:02 | We learned already about the Block
template, we learned about the Comment
| | 01:06 | template, and of course the Node template.
| | 01:09 | You can see that there's quite a few
templates here, and if you notice a
| | 01:13 | pattern, they always end in .tpl.php.
| | 01:18 | So any third party module you might be
adding to your Drupal site, you will want
| | 01:22 | to check inside the module folder to
see if there's any template files that you
| | 01:27 | can duplicate and
incorporate into your own theme.
| | 01:31 | And if we scroll down even a little
further, we get to what are known as the
| | 01:34 | template suggestions list.
| | 01:36 | Now, we have already covered quite a
few of these, like the multiple block
| | 01:40 | templates, and the multiple node templates.
| | 01:44 | All of these template suggestions are
ones that everybody should follow, because
| | 01:48 | they actually allow you to get to the
area of Drupal you would like to customize
| | 01:54 | and create your own markup for.
| | 01:56 | Now, our completed theme for this
course does not use all these templates,
| | 02:01 | just the main basic ones that we covered
in the last few chapters, but there's
| | 02:05 | nothing stopping you from getting
these templates and incorporating them into
| | 02:10 | the theme that we have been
building throughout this course.
| | Collapse this transcript |
|
|
11. Troubleshooting and Finishing UpRemoving unnecessary modules| 00:00 | Early in this title, I introduced some
useful modules for Drupal Theme development.
| | 00:06 | Now that we're done building the
flower shop theme, I need to disable those
| | 00:09 | development modules.
| | 00:11 | This should happen before any
performance tuning takes place.
| | 00:14 | This video makes sure all my Drupal
development modules are disabled properly,
| | 00:19 | so our flower site can run
without any development baggage.
| | 00:23 | So since I'm starting from the Themes
administration page, I need to actually
| | 00:28 | load up the Modules administration page.
| | 00:31 | I could do that quickly on the left
side navigation by clicking Modules.
| | 00:35 | Now I'm going to open this in a new tab
and scrolling down to any of the modules
| | 00:40 | listed under Development.
| | 00:42 | So I've got a quite a few here.
| | 00:44 | So I'm going to first disable the
Theme developer module and the Drupal
| | 00:48 | for Firebug module.
| | 00:49 | These modules need to be disabled
first, before we can disable any of the
| | 00:54 | dependent modules that they require.
| | 00:57 | So let's click Save Configuration and
we're going to scroll back down again and
| | 01:02 | now you should see that you can
disable the Devel module and the Drupal for
| | 01:06 | Firebug Preprocessor module.
| | 01:08 | So let's go and click Save configuration.
| | 01:12 | And now that all our Development
modules are actually disabled, we can move
| | 01:17 | on to publishing the site and turning on
any performance settings that will be needed.
| | 01:23 | All development modules that you build
your site with should be disabled or
| | 01:28 | uninstalled entirely
before you publish a site live.
| | 01:31 | They're not needed to run the site and
actually can hurt the performance of the site.
| | 01:36 | So again, now that our development
modules are disabled, we can move on to
| | 01:40 | tuning the site for peak performance.
| | Collapse this transcript |
| Optimizing site performance| 00:00 | Drupal has some good
performance features out of the box.
| | 00:04 | A great feature of Drupal is the
ability to compress CSS files used across the site
| | 00:08 | into single style sheets,
resulting in faster page loads.
| | 00:12 | In this video, I will enable CSS
compression and show how that affects our site.
| | 00:18 | So before I turn on the Performance
Settings, I want to on a show you what
| | 00:21 | Drupal is actually outputting right
now, before compression is turned on.
| | 00:26 | So if I View Source on my Sunflowers
page, we see that there are actually quite
| | 00:31 | a few module style sheets as they come
from the modules folder, and we have a
| | 00:36 | couple style sheets ourselves for our theme.
| | 00:40 | Now, what I want to do is turn on
compression for CSS and what we'll see is all
| | 00:45 | the module style sheets will
compress themselves into one style sheet.
| | 00:49 | Well, our theme will also be changed
into a single compressed style sheet, making
| | 00:55 | it a little bit smaller and pages load faster.
| | 00:59 | And will see our style sheet for our
theme will also be compressed, resulting
| | 01:03 | in little bit more faster page loads than what
we get out of the box without compression on.
| | 01:09 | So I'm going to close the source file.
| | 01:11 | Now I'm going to go back to my
Drupal administration screen.
| | 01:15 | Starting from the Administer screen, I'm
going to scroll down and click on Performance.
| | 01:20 | Now, we're not going to review
any of the caching stuff up on top.
| | 01:24 | I want to go down to the
Bandwidth optimization section.
| | 01:27 | I want to turn on the Optimize CSS
files option and we can even turn on the
| | 01:33 | Optimize JavaScript files option as
well because we have a few JavaScript files
| | 01:38 | that we include in our theme and
we can get those compressed as well.
| | 01:41 | Now that I have these two
options enabled, I'm going to click
| | 01:44 | Save configuration.
| | 01:45 | If we go back to our Sunflower page
and click Refresh and now if we view the
| | 01:51 | source of this page, we see that the
style sheets have been dramatically
| | 01:55 | compressed down to one long special
style sheet that Drupal has created for us.
| | 02:02 | We also see the same has happened to the
JavaScript files that are provided in our theme.
| | 02:08 | Simple performance options, like
enabling CSS and JS compression, can do wonders
| | 02:13 | in speed for small and large sites.
| | Collapse this transcript |
| Streamlining site files for launch| 00:00 | Not every file needs to be
uploaded with Drupal for deployment.
| | 00:05 | In this video, I'll show you what files
can be either deleted or ignored during
| | 00:10 | Drupal's deployment.
| | 00:11 | So I am going to minimize my web
browser, because we are going to only be
| | 00:14 | dealing with the Drupal files in this video.
| | 00:16 | All the folders we see here in Drupal
have to be uploaded along with every
| | 00:21 | PHP file we see listed.
| | 00:24 | There are also just a couple extra
files that need to go up as well.
| | 00:29 | robots.txt and .htaccess, which is
actually normally a hidden file on
| | 00:36 | most operating systems.
| | 00:38 | So if you do not see a .htaccess file
on your machine, maybe your FTP program
| | 00:44 | can see it and if not, you need to
install some sort of utility that will let
| | 00:49 | you actually see that file
so you can upload it properly.
| | 00:53 | All the other text files that I'm now
highlighting do not need to be uploaded
| | 00:58 | and can actually be
ignored when deploying Drupal.
| | 01:02 | Do not delete any core
modules or any core themes.
| | 01:06 | By removing these unnecessary text files,
we reduce the footprint of Drupal just
| | 01:10 | a little bit, and actually eliminate
any surface risk of being spotted by
| | 01:15 | malicious people who are trying to
hunt down Drupal sites to try to exploit a
| | 01:20 | bug that maybe some have.
| | 01:22 | Only upload what is needed, always.
| | Collapse this transcript |
| Troubleshooting when a white screen appears instead of Drupal| 00:01 | While using Drupal, you may
run into a blank white screen.
| | 00:04 | This can happen during
installation or after enabling a new module.
| | 00:08 | In this video, I want to take a look
at that issue that happens most often
| | 00:12 | on Mac OS X when using MAMP with Drupal,
which is why we are looking at a Mac screen here.
| | 00:18 | So by default, MAMP actually uses only a
few megabytes of memory allocated to PHP.
| | 00:25 | This can cause problems for Drupal as
the minimum requirements for Drupal are
| | 00:28 | usually higher than what
MAMP ships with by default.
| | 00:33 | If you are using MAMP PRO instead of
the regular MAMP, you can check out
| | 00:37 | this blog post that covers how to do what
we're do in this video but from MAMP PRO instead.
| | 00:43 | Since I am using just basic MAMP,
I've already set up the database and I am
| | 00:48 | going to start the
installation process for Drupal now.
| | 00:51 | I've not made any changes to MAMP yet,
as we are going to see what happens
| | 00:55 | during the installation with the default
settings in MAMP, and then we'll go and
| | 00:59 | fix the MAMP settings to
get past the white screen.
| | 01:03 | So I've already entered my
information here for my local MAMP Drupal site.
| | 01:07 | I am going to click Save and
continue and we see that Drupal is starting
| | 01:13 | the installation, we are going to fill out
the required info and click Save and continue.
| | 01:22 | And now we ended up with a blank
white screen instead of the blue Drupal
| | 01:26 | confirmation page that we expected to see.
| | 01:30 | This is a problem built into MAMP and
actually might happen on your own web
| | 01:33 | server if PHP does not have
enough memory to run Drupal.
| | 01:38 | So to fix this, I actually need to go into
my MAMP folder and tweak the php.ini file.
| | 01:44 | So I am going to go into Applications,
MAMP, and inside the conf folder,
| | 01:51 | I'll visit the php5 and edit the php.ini file.
| | 01:57 | I am going to use TextEdit and what we need
to find here is the PHP max memory setting.
| | 02:04 | So I am going to scroll down and you
can actually do a find on the page for the
| | 02:09 | setting memory_limit and we see
here that 8 MB is the default value.
| | 02:17 | I am going to bump this up to 128 since
this is my local machine and I plan to
| | 02:21 | do some development.
| | 02:22 | We are going to File > Save and then
we will quit our text editor, go back to
| | 02:28 | MAMP, and we need to restart the MAMP
Servers, so we do that by clicking Stop
| | 02:33 | Servers and then Start Servers
once MAMP is ready for us to do so.
| | 02:38 | Now that we've turned back on the MAMP
servers, we can minimize MAMP, go back
| | 02:43 | to our Drupal installation, click Refresh,
and Drupal now can complete its installation.
| | 02:52 | MAMP and MAMP PRO, both seem to have
this issue, but not the Acquia Drupal Mac
| | 02:57 | Installer we used throughout this course.
| | 03:00 | I'm not saying one is better than the other.
| | 03:02 | Just the default settings for MAMP
are not optimal for Drupal, so a small
| | 03:06 | tweak was necessary.
| | 03:08 | Knowing Drupal's minimum requirements is
important when installing it anywhere, even locally.
| | Collapse this transcript |
| Touring Drupal community groups| 00:01 | Since I've been involved with the
Drupal community, the number one question I have
| | 00:05 | has been, where do I go for help?
| | 00:08 | Drupal has many areas that you can
actually reach out to the Drupal community
| | 00:12 | and ask for help directly.
| | 00:15 | The best place is the Groups website,
which is available at groups.drupal.org,
| | 00:21 | because this is a whole site dedicated
to geographical and online groups that
| | 00:28 | basically huddle around certain topics.
| | 00:31 | The key group in here for theme development
is actually a group called Theme development.
| | 00:37 | These groups are free to join,
and are very informative.
| | 00:41 | If you have a general question to the
community and think one of these groups
| | 00:44 | can help you, then I definitely
recommend you joining the free website and
| | 00:49 | joining the groups that make sense for you.
| | 00:51 | Let me show you the group that I manage,
which is the Los Angeles Drupal user group.
| | 00:57 | You can actually join a regional
group near your area and there's groups
| | 01:01 | all over the world.
| | 01:03 | Join your local group, join an online
group, like the Theme development group,
| | 01:08 | and start joining the Drupal conversation.
| | 01:10 | Keeping connected to the community is
one of the key strategies for Drupal,
| | 01:15 | because that's been one
of its largest strengths.
| | 01:18 | So join one of these standard
channels and keep up with the community.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:01 | Thank you for joining me for Drupal:
Creating and Editing Custom Themes.
| | 00:05 | I hope your Drupal theme comes out great, and
maybe I'll get to see it online in the future.
| | Collapse this transcript |
|
|
