IntroductionWelcome| 00:04 | Hi! I am Tom Geller, and this is
Drupal Gardens Essential Training.
| | 00:08 | Drupal Gardens is a hosted version of
the content management system Drupal,
| | 00:12 | which runs about a quarter
million sites on the web.
| | 00:15 | Drupal Gardens simplifies Drupal by
taking care of some of its more tedious
| | 00:18 | tasks, such as installing
and maintaining the software.
| | 00:22 | Drupal Gardens also has some features
you won't find in standard Drupal, such as
| | 00:26 | the revolutionary Theme Builder,
which lets you create gorgeous graphical
| | 00:29 | interfaces for your Drupal sites
with a simple point-and-click tool.
| | 00:34 | Like other hosted content management
services such as WordPress and LiveJournal,
| | 00:38 | you can build sites on Drupal Gardens for free
| | 00:41 | if you let them run ads on your
sites. To get rid of the ads and have more
| | 00:45 | storage space and
bandwidth, you pay a monthly fee.
| | 00:49 | This course takes you through the
whole process of building a site.
| | 00:52 | We'll focus especially hard on making
the site look the way you want it with
| | 00:55 | Drupal Gardens' Theme Builder.
| | 00:57 | But we'll also show you how to fill it
with writing, images, and media files,
| | 01:01 | how to manage site members in case you
decide to make it a membership-driven
| | 01:04 | site, and how to take the site you created
here, and move it to any web host you want.
| | 01:10 | I've been excited about Drupal Gardens
since it went into beta in February of 2010.
| | 01:15 | I believe that Drupal Gardens makes
Drupal's benefits accessible to a whole new
| | 01:19 | group of people who don't want to
deal with system administration.
| | 01:23 | But it's also useful for experienced
Drupal managers, both for its Theme Builder
| | 01:27 | and as a prototyping tool.
| | 01:29 | So if you're looking to get your
hands on the professional-level tools that
| | 01:32 | Drupal offers, this
course will help you get there.
| | 01:35 | Let's get started with
Drupal Gardens Essential Training.
| | Collapse this transcript |
| Previewing the finished project| 00:00 | Before we get started, I want to give you a
sense of what we're going to finish up with.
| | 00:05 | That will give you some inspiration to
keep you going, and also point out some
| | 00:08 | things that you can do with
Drupal Gardens as you go along.
| | 00:12 | Through this course, we're going to
design a site that encourages people to
| | 00:16 | visit California and go on some tour packages.
| | 00:20 | We have our own custom design here,
which has a graphic up here and a faded
| | 00:23 | graphic down here, as well
as our own custom logo here.
| | 00:27 | As you might guess, these links go to
different parts of the site, including
| | 00:30 | some that are dynamic.
| | 00:32 | So instead of being just a single page
with one piece of information, it's a
| | 00:35 | list of blog posts and a
list of news items and so forth.
| | 00:40 | This list down here shows a
collection of all of the tours that we're
| | 00:43 | offering, including those
translations that we've done of tour descriptions
| | 00:46 | such as this one in Esperanto.
| | 00:48 | When we go to that, we can in fact
switch between the English and the Esperanto
| | 00:53 | version very easily just with a click.
| | 00:55 | Again, this is all done with
Drupal Gardens very easily.
| | 00:59 | We allow people to provide feedback to
us both through this little link here
| | 01:03 | and through the Contact link here.
| | 01:06 | Finally, we provide picture galleries,
so people get an idea of what exactly
| | 01:10 | they're going to be seeing.
| | 01:12 | Those galleries not only have pictures,
but also movies which come from YouTube.
| | 01:16 | So, that's our site.
| | 01:18 | We're going to be going through and
putting in each one of these pieces as we
| | 01:21 | go through the course.
| | 01:23 | It may seem like a lot now, but as we
take it piece by piece, you'll find it a
| | 01:27 | very simple process.
| | Collapse this transcript |
| What's new in the late 2011 update?| 00:00 | Acquia, the company that runs
Drupal Gardens, is extremely active in the
| | 00:04 | Drupal community, and it's always tweaking
the Drupal Gardens software to make it better.
| | 00:09 | That's good for you, but it also means
that the interface and features change
| | 00:12 | quite a bit over time.
| | 00:14 | So some of the things you see in
this course won't look quite the same as
| | 00:17 | what's on your screen.
| | 00:18 | We re-recorded the most important parts
in late 2011, but we left alone those
| | 00:23 | differences that are mostly just
cosmetic, or where the difference wouldn't
| | 00:27 | essentially change how you'd build your website.
| | 00:29 | For example, what used to be called
Articles is now called News Items;
| | 00:33 | I thought you'd be able to
figure such things out as they go by.
| | 00:37 | This video mentions a few of those
small changes that just might throw you if
| | 00:41 | you're not expecting them.
| | 00:42 | One of the first things you'll notice
occurs when you create a piece of content.
| | 00:46 | I'll do that by going up to Add
content and adding a basic page.
| | 00:51 | I'll put in a title of Test and a body of Test.
| | 00:57 | We'll be deleting this page anyway.
| | 01:00 | When I scroll down to the bottom, this
button previously said Save, and there was
| | 01:04 | a different arrangement of these other buttons.
| | 01:07 | Now we can publish it or save it as a draft.
| | 01:10 | The difference between the two is when
I publish it it's actually going up as
| | 01:14 | published, and saving as draft creates
the node, but as an unpublished node.
| | 01:19 | I'll click Publish so
you can see the difference.
| | 01:24 | Now if I go back and edit that node,
I scroll to the bottom, and you'll see
| | 01:29 | there's now an Unpublish
button and a Save button.
| | 01:32 | It reflects the fact that
this is now a published node.
| | 01:35 | For us though, I am just going to delete it.
| | 01:42 | Another place you'll notice some differences
is when you create your site's name and slogan.
| | 01:47 | You can see that by going into
Configuration and Site information.
| | 01:54 | Here we have some instructions on how to
hide the site name and also the site slogan.
| | 02:00 | Previously there were
check boxes here to do that,
| | 02:03 | but there was an architectural
change so that each of these pieces is now
| | 02:06 | actually part of a block.
| | 02:08 | I can show you that by going
up to Structure and Blocks.
| | 02:14 | As I go down all the way to the bottom,
since I have these disabled, you see
| | 02:18 | Main site logo, and around here there
is also a Site slogan, right down there.
| | 02:23 | You'll hear more about the function of
blocks in the video "Working with blocks."
| | 02:28 | Going on, the Theme Builder is still
one of the most important parts of Drupal
| | 02:32 | Gardens, and it has gotten even
better since we first created this course.
| | 02:36 | To see it, we close out our
overlay and then click Appearance.
| | 02:45 | The first change is quite obvious.
| | 02:47 | It used to be that these Themes
link was the first tab that you saw,
| | 02:51 | but the folks at Acquia realized
that usually when people used the Theme
| | 02:54 | Builder, the first thing they did was
they went around and styled different
| | 02:57 | parts of their page, so they made that
the first tab, and it's the default one
| | 03:01 | you go to when you first open the Theme Builder.
| | 03:04 | Another difference, which we don't see
right now, occurs when you turn on the
| | 03:07 | Font Management module.
| | 03:09 | A new link shows up here,
Configure Professional Fonts.
| | 03:13 | If you want to learn more about that, see
the video "Using fonts from outside sources."
| | 03:18 | The Themes tab itself has
also changed quite a bit.
| | 03:21 | It used to be that you saw a list of
pre-made themes here, but now you see the
| | 03:25 | custom themes first.
| | 03:26 | If you want to choose a pre-made theme, you
click Choose a new theme, and there you go.
| | 03:32 | To get back to the list, simply click Cancel.
| | 03:34 | The way you select a theme
is slightly different as well.
| | 03:37 | When you hover over a theme, you
have Publish, Duplicate, and Delete.
| | 03:41 | These should be obvious, and I'm sure
that as you work through Drupal Gardens
| | 03:44 | sites, you'll figure out exactly how they work.
| | 03:47 | The last thing in the Theme Builder is
something really neat in this Advanced tab.
| | 03:52 | It used to be that you simply had
Custom CSS, you entered it in, and it
| | 03:56 | worked, and that was great.
| | 03:58 | Now you actually have a history of the
CSS that you've changed, and if you want
| | 04:02 | to, you can hide different parts of
it and see how that affects your site.
| | 04:06 | For example, we just turned off all of
the header images--very cool and very
| | 04:16 | useful for figuring out which CSS
directives are changing which parts of your site.
| | 04:21 | Finally, there have been some changes
in subscription levels and the options
| | 04:25 | that affect some
overriding qualities of your site.
| | 04:27 | You'll notice this most when you look
at the list of all the sites you control.
| | 04:31 | To demonstrate this, I am going to
switch to another one of my accounts where I
| | 04:35 | have sites under a
variety of subscription levels.
| | 04:39 | You see this list by clicking My sites.
| | 04:43 | And as you can see, there are
several different subscription plans.
| | 04:47 | Depending on which subscription plan a
particular site is on, that changes the
| | 04:51 | options that are available here.
| | 04:52 | For example, my Professional site,
I can only duplicate or export it,
| | 04:56 | whereas with my Gratis subscription,
I can also delete it or transfer
| | 05:00 | ownership to somebody else.
| | 05:03 | That covers the high points, but as I
said, there are a lot more little tiny
| | 05:07 | changes that I didn't discuss.
| | 05:09 | Some of them only change the interface
by a little amount, but they actually
| | 05:13 | represent quite a lot of
work by the folks at Acquia.
| | 05:16 | If you want to follow all of the
changes, go to drupalgardens.com/blog.
| | 05:21 | As you scroll through here, you'll see
all of the things that they're constantly
| | 05:25 | adding to make Drupal Gardens better and better.
| | Collapse this transcript |
| What is Drupal?| 00:00 | So, before you start with Drupal Gardens,
you might be wondering, why should I
| | 00:04 | use it rather than WordPress or any of
the other dozens of hosted CMS programs?
| | 00:09 | This video will look at both Drupal's
advantages and disadvantages to help you
| | 00:13 | figure out whether Drupal
Gardens is your best option.
| | 00:17 | To start with, let's talk a bit about
the software Drupal Gardens is based on.
| | 00:21 | Drupal was created in 2000 by the
Belgian Computer Science student Dries
| | 00:24 | Buytaert to help him and his
college buddies share information.
| | 00:28 | People kept asking for more features,
and he couldn't keep up with the demand by
| | 00:31 | himself, so he released the software,
renamed, Drupal as free software under the
| | 00:36 | GNU Public License in 2001.
| | 00:38 | A technology site named
kerneltrap.org was the first site outside of Mr.
| | 00:43 | Buytaert's university to use it.
| | 00:45 | From there, the word spread.
| | 00:47 | As a matter of fact, KernelTrap is still
using Drupal to this day, ten years later.
| | 00:51 | It now runs many high-profile sites,
including the United States Government--
| | 00:56 | for example, at commerce.gov--the
Canadian Rail Service at viarail.ca and many
| | 01:03 | others, including quite a
few artists on Sony Music.
| | 01:07 | A good place to see who
is using Drupal is on Mr.
| | 01:09 | Buytaert's own web site at
buytaert.net/tag/drupal-sites.
| | 01:15 | Here you see quite a few,
and he keeps adding them.
| | 01:18 | Every week there is a new one, pretty much.
| | 01:21 | I want to reiterate that this
software is completely free.
| | 01:25 | You can download it from drupal.org,
and install it as often as you like.
| | 01:28 | And you want be alone; Drupal gets
about 300,000 downloads every week.
| | 01:34 | Well, that's the history.
| | 01:36 | But how does Drupal work?
| | 01:38 | Well, I'll show you.
| | 01:39 | I'm using the original version, often
called core Drupal, that I've already
| | 01:43 | installed on my computer.
| | 01:45 | This isn't exactly what's used in Drupal
Gardens, as I'll explain in the video
| | 01:49 | "What is Drupal Gardens?."
| | 01:50 | But core Drupal and Drupal
Gardens are very, very similar.
| | 01:54 | Learning one will help you
do what you want in the other.
| | 01:57 | If you want to learn core Drupal
better, watch my series from lynda.com,
| | 02:01 | "Drupal Essential Training."
| | 02:02 | I'll show you how to do
something very simple in Drupal.
| | 02:06 | This is core Drupal, once again.
| | 02:08 | I'm going to add some front-page content.
| | 02:10 | Right now, there is nothing.
| | 02:11 | There is just this basic default page that
comes when you first install the software.
| | 02:16 | To do so, I'll click on Add
content, and I'll also a Basic page.
| | 02:21 | Just say "Hello, world!"
| | 02:23 | In the body, "Hello again, world!"
| | 02:28 | Go down to the bottom, publish
it on the front page, and save.
| | 02:33 | Now when we go to our front page, there it is.
| | 02:37 | Besides being able to change content
into Drupal, you can also change the way
| | 02:40 | the site looks by going up to Appearance
and scrolling down and taking a look
| | 02:45 | at all of the other different
ones that are available with Drupal.
| | 02:48 | In addition, there are quite a few
other appearances available on drupal.org.
| | 02:52 | These are called Themes.
| | 02:54 | In Drupal Gardens, you can change from
one theme to another, but then you can
| | 02:57 | also modify themes quite a lot.
| | 02:59 | You'll see how to do
that later on in the course.
| | 03:02 | By the same token, you can download
and extend Drupal by using modules, which
| | 03:07 | you download from Drubal.org.
| | 03:10 | That's one difference between
core Drupal and Drupal Gardens.
| | 03:13 | On Drupal Gardens, you have only the
modules that they allow you to use.
| | 03:17 | On Drupal, you can extend it quite a bit.
| | 03:19 | A similarity between core Drupal and
Drupal Gardens is that both excel at
| | 03:23 | mixing up static content--
| | 03:25 | that is, like that page we just created,
which says the same thing no matter when
| | 03:29 | you visit it--and dynamic content,
which is things like latest content and who
| | 03:35 | is online right now and so forth.
| | 03:37 | I can show you that by going to
Structure > Blocks, and then down toward the
| | 03:42 | bottom we have quite a few choices here:
Recent content, Recent comments, and we
| | 03:46 | can make those appear on the
page in a variety of locations.
| | 03:49 | Finally, Drupal is a multi-user system,
so you can build a true online community.
| | 03:55 | In both core Drupal and Drupal Gardens,
you do that by going up to People, and
| | 04:00 | then you have a list of all
the people who are available.
| | 04:03 | It works a little bit differently in
Drupal Gardens than it does in core Drupal,
| | 04:06 | as I'll show you later in the course.
| | 04:08 | Additionally, you can separate people
according to their roles, so that some have
| | 04:12 | more permission on your site than others.
| | 04:15 | That's really useful, because let's
say that you've built your site, and it's
| | 04:18 | too big for you to handle by yourself.
You could, for example, create a role
| | 04:23 | that lets somebody else add content or
manage users while you handle some of the
| | 04:27 | more technical aspects of the site.
| | 04:29 | If you go up to People and then click
on Permissions and scroll down, you can
| | 04:32 | see all of the different
permissions that you can change.
| | 04:35 | Again, we'll discuss this
more later on in this course.
| | 04:38 | I know that was a whirlwind tour,
| | 04:40 | but I hope it gave you a sense of how
vast your web-creation abilities become
| | 04:44 | when you use Drupal--whether that's
core Drupal or Drupal Gardens--and how
| | 04:48 | different they are from other
systems you might be used to.
| | 04:52 | I didn't talk about how Drupal
interacts with your web server or database
| | 04:55 | server, any of those other system-level
things, because you never have to mess
| | 04:59 | with any of that with Drupal Gardens.
| | 05:02 | The video "What is Drupal Gardens?"
will tell you more about the differences
| | 05:05 | between it and core Drupal.
| | Collapse this transcript |
| What is Drupal Gardens?| 00:00 | The video "What is Drupal?" gave
you a quick tour of core Drupal.
| | 00:04 | That is the standard version that
you can download for free from the
| | 00:07 | drupal.org web site.
| | 00:09 | You can learn how to use core Drupal
by watching my course "Drupal Essential
| | 00:12 | Training," which is also on lynda.com.
| | 00:15 | This video tells you how Drupal
Gardens differs from core Drupal.
| | 00:19 | In some ways, it's an overview of the
entire rest of this course, especially if
| | 00:22 | you already know Drupal.
| | 00:24 | Basically, Drupal Gardens is core
Drupal, but with a few changes that make it
| | 00:28 | easier to use and more flexible.
| | 00:30 | Most importantly, it's completely
hosted and maintained by the company that
| | 00:34 | created it, which is named Acquia.
| | 00:37 | As a result, you don't have to install
or maintain any part of it, and I can
| | 00:41 | tell you from tech support mail I get
that hosting is a big part that stops a
| | 00:45 | lot of people from having their Drupal sites.
| | 00:48 | To sign up for Drupal Gardens,
you go to drupalgardens.com.
| | 00:52 | I'm already on Drupal
Gardens and have signed in.
| | 00:55 | You can poke around and see exactly what
comes with Drupal Gardens, read some of
| | 00:59 | their marketing material, and so forth.
And then down at the bottom, it gives you a
| | 01:04 | little bit more information about
pricing and features and so forth.
| | 01:08 | The most important thing to know about
this is that their basic level, which is
| | 01:11 | known as Super Drupal, is free.
| | 01:13 | It's completely free.
| | 01:14 | The only thing about this basic level
is that it will show ads on your site.
| | 01:19 | If you want to stop that from happening,
you have to upgrade to Superer Drupal
| | 01:23 | or Superest Drupal, and then they have
another level if you want to have an even
| | 01:26 | bigger site, called Most Superest Drupal.
| | 01:29 | These prices, of course, will vary.
| | 01:30 | So I recommend that you come back to
this page when you're ready to get started
| | 01:34 | and see what the current pricing is.
| | 01:35 | I do want to mention before going on
that Acquia isn't the only company that
| | 01:41 | fully hosts and maintain Drupal.
| | 01:43 | There is another one called Buzzr,
which you can go to it Buzzr.com.
| | 01:49 | That's their biggest competitor,
and it's put together by another large Drupal
| | 01:53 | company named Lullabot.
| | 01:55 | If you're interested in hosting Drupal,
I recommend you check out both Drupal
| | 01:58 | Gardens and Buzzr. But we're just
going to talk about Drupal Gardens.
| | 02:02 | While it makes Drupal a lot easier, it
has some limitations on what you can do.
| | 02:07 | The biggest two are that you
can't import an existing site.
| | 02:12 | If you've already built a Drupal site
somewhere else, you'll how to completely
| | 02:15 | rebuild it again on Drupal Gardens.
| | 02:18 | Drupal Gardens is best for those
sites that you're just starting at with
| | 02:21 | from the beginning.
| | 02:22 | The second limitation is that you
can't add any modules or custom programming
| | 02:26 | or ready-made themes to your Drupal Gardens site.
| | 02:29 | You have to use what they give you.
| | 02:31 | Now having said that, what they
give you is really quite impressive.
| | 02:35 | I'll show you that by going
to a site that I just created,
| | 02:38 | lynda.drupalgardens.com, and again
I'm logged in as the administrator,
| | 02:42 | so I have certain abilities that an
ordinary visitor to the site wouldn't have.
| | 02:47 | We have here the Theme Builder, and
of course you could change themes.
| | 02:52 | This one is called Campaign.
| | 02:53 | I'm switching it over to the Minima theme.
| | 02:55 | Then once you're there, you can actually
change the styles that you see in front of you.
| | 02:59 | So let's change this, for example,
and make it a much bigger headline at the top.
| | 03:03 | There we go.
| | 03:04 | You can create and modify themes
within Drupal Gardens' own interface using
| | 03:09 | what they called a Theme Builder,
and that's what you see here. But the
| | 03:12 | hundreds of themes that are
available from drupal.org and private vendors,
| | 03:16 | they're all off-limits.
| | 03:17 | You will learn about the Theme Builder
in several videos later in this course,
| | 03:21 | starting with "Understanding the Theme Builder."
| | 03:24 | Now this Theme Builder is really amazing.
| | 03:26 | I should mention that if you are using
core Drupal there is a module that's very
| | 03:30 | similar to this. It's called
Sweaver at drupal.org/project/sweaver.
| | 03:37 | Another limitation of Drupal Gardens is,
just as with themes, you can't bring any
| | 03:41 | contributed modules or custom
programming that you're using Drupal Gardens site.
| | 03:46 | A list of such contributed modules
is at drupal.org/project/modules.
| | 03:51 | Again, you can use those on core
Drupal, but not Drupal Gardens.
| | 03:55 | The last big limitation of Drupal
Gardens is that you don't have direct access
| | 03:58 | to the server, except through
Drupal Gardens' own interface.
| | 04:02 | So you can't do such geeky things as
increased PHP's memory allocation or set a
| | 04:06 | custom HT access file.
| | 04:08 | Well, some techies will decry this
loss of control, Drupal Gardens isn't
| | 04:12 | really intended for them.
| | 04:14 | It's for people who'd rather
never have to deal with such details.
| | 04:18 | Now having said that, there are a few geeky
things you can do through Drupal Gardens.
| | 04:23 | First, you can host several sites
from one Drupal Gardens account.
| | 04:27 | It's set up as what they called a
multisite system, and to see that you go up
| | 04:31 | to My sites here, and it shows you a list
of all the sites that you have control over.
| | 04:37 | You'll learn more about this
multisite system in the video "Getting Started
| | 04:41 | with Drupal Gardens."
| | 04:43 | The second geeky thing you can do is you can
make the site accessible through a custom domain.
| | 04:47 | You might have noticed that the domain
up here is drupalgardens.com, and if you
| | 04:51 | go to anyone of your sites, it's
the site name .drupalgardens.com,
| | 04:56 | lynda.drupalgardens.com, or whatever.
| | 04:59 | You can change that into
such-and-such.com, whatever your domain is, pretty easily,
| | 05:03 | although that feature is only available
for paid accounts on Drupal Gardens, and
| | 05:07 | to do that, once again, you go back to My
sites and click Manage Domains. That will
| | 05:13 | give you instructions on how that works.
| | 05:16 | I'll show you more about that in
the video "Adding Custom Domains."
| | 05:19 | Now I mentioned earlier that you
can't import an existing Drupal site
| | 05:24 | into Drupal Gardens.
| | 05:25 | However, you can export sites that you
created in Drupal Gardens and then host
| | 05:30 | them anywhere you like.
| | 05:32 | To do that you go back to My sites,
and over here the More button next to
| | 05:37 | whatever domain you want to
handle tells you how to export it.
| | 05:41 | I'll show you how to do that in
the video "Exporting Your Sites."
| | 05:46 | That covers Drupal Gardens' high
points, but the best way to understand it
| | 05:50 | is, well, to use it.
| | 05:51 | The video about getting started with
Drupal Gardens will help you sign up and
| | 05:55 | create your first site.
| | Collapse this transcript |
| Getting started with Drupal Gardens| 00:01 | One thing I love about Drupal
Gardens is how easy it is to get started.
| | 00:05 | If you went through my Drupal
essential training course, you know how much
| | 00:08 | trouble it can be to get core
Drupal installed and running.
| | 00:11 | In that course, I didn't talk much
about how to work your Internet hosting
| | 00:14 | provider because every one is different.
| | 00:17 | It would have simply been impossible
to cover all the variations among them.
| | 00:20 | With Drupal Gardens, you
simply don't have to worry about it.
| | 00:25 | Let's walk through the
process of getting signed up.
| | 00:27 | I'm on the Drupal Gardens site here, at
drupalgardens.com, and I'm not logged in.
| | 00:32 | I am going to create a new account by
clicking here at Create a free site.
| | 00:36 | The site I'm going to create is called
explorecalifornia.drupalgardens.com, and
| | 00:45 | it checks to make sure that it is available.
| | 00:47 | My username will also be explorecalifornia.
| | 00:50 | Of course, you enter your
password and your e-mail address.
| | 00:59 | Down at the bottom, you have to type
in the word that you see here. That's to
| | 01:02 | prevent automated systems from signing
up for account after account over and
| | 01:06 | over again, and then sending spam
through it or creating spam sites.
| | 01:14 | If you've got it right, it will show
a check, and then just click Continue.
| | 01:19 | The next screen that you see is some of the
options that you have to start your Drupal site.
| | 01:25 | You can change several at
once by using this dropdown menu.
| | 01:28 | There is a Campaign template, Product,
Blog, and then a custom template.
| | 01:33 | In addition, once you've chosen one of
these templates, you can turn on or off
| | 01:37 | different features. And as you hover
your pointer above any of these features,
| | 01:40 | it tells you a little bit
more about what the feature is.
| | 01:43 | I'm going to leave it on
exactly as it is, Campaign template.
| | 01:48 | Scroll down to the bottom
here and say Create site.
| | 01:53 | This will take a few moments for
Drupal Gardens to set up your site, and the
| | 02:00 | site has been created.
| | 02:02 | It's now real and live.
| | 02:04 | Anyone on the Internet can access
this site immediately by going to
| | 02:07 | explorecalifornia.drupalgardens.com,
as you see in the address bar up here.
| | 02:13 | However, if you scroll down,
you'll notice this text here:
| | 02:15 | "Check your e-mail to complete registration."
| | 02:20 | In short, if you create a site
but then don't confirm your e-mail address
| | 02:23 | within ten days, Drupal Gardens will
delete your entire account, including all
| | 02:28 | the sites you created.
| | 02:29 | That sounds like a pain, but it's a
necessary precaution to prevent spambots and
| | 02:34 | malicious users from just signing up
site after site with fake e-mail addresses.
| | 02:39 | If I go to this e-mail account that I
created, we could see the e-mails that I
| | 02:44 | received as a result of setting
up that account and that site.
| | 02:47 | There are three e-mails here, and when
you get yours, of course, you should look
| | 02:50 | through them. Basically, they are to
say that you've now signed up for Drupal
| | 02:53 | Gardens, and you've now created this site.
| | 02:56 | In order to verify, I have to go to
this Please verify and click on the
| | 02:59 | link that it sent me.
| | 03:02 | Once I've done that, my site is up and
running, and it's here in my Site manager list.
| | 03:07 | I'm going to go back to my
site now by clicking on that link,
| | 03:12 | explorecalifornia.drupalgardens.com.
| | 03:15 | You might notice a difference
between the site now and a moment ago.
| | 03:19 | I'll go back to the screen we were just on.
| | 03:21 | We have this little tooltip up here
when we first create the site, and you can
| | 03:26 | go up to this Help button and get
more help from the Drupal Gardens site.
| | 03:29 | I'm just going to close it out, and in
fact, I'll close out this window entirely
| | 03:33 | and go back to this other screen.
| | 03:37 | That's actually all you
need to do to get started.
| | 03:39 | You've now created a site, and since you
confirmed your e-mail address, that site
| | 03:43 | isn't going to go away.
| | 03:44 | I know the site is full of fake
information, like these fake blog posts and
| | 03:48 | headlines and so forth, but I'll show
you how to change that throughout the rest
| | 03:52 | of the course, particularly in the
videos about creating and managing content.
| | 03:57 | But I do want to show you just one more thing.
| | 03:59 | In another video in this course about
what Drupal Gardens is, I mentioned that
| | 04:03 | it's a multisite system, and that you can
create as many sites as you want from one account.
| | 04:08 | That's actually quite easy to do.
| | 04:09 | What you do is you go up to My sites here,
and that brings you to a list of sites.
| | 04:15 | Then just click on Create a
new site. Type in a name.
| | 04:19 | I'm going to say this is
explorecalifornia2 and click Continue.
| | 04:27 | You then go back to the screen that
you saw earlier where you can choose a
| | 04:30 | template, turn features on and off, and so forth.
| | 04:33 | While we're here, I just want to
show you one or two other features.
| | 04:35 | One is when you choose a different
template, for example, Product template,
| | 04:39 | some of these switches turn on and off.
| | 04:42 | Go to Blog template. Many of them
turn off because blogs are simpler than
| | 04:45 | campaigns or product sites and so forth.
| | 04:48 | It's sort of a set of themes and
features and other bits of content that would
| | 04:54 | be appropriate for that kind of site.
But once again, once you're in there, you
| | 04:57 | can customize it entirely
to your own preferences.
| | 05:01 | I think Drupal Gardens really
underlines something about Drupal's maturity.
| | 05:05 | One of the reasons that Drupal, in
general, has lagged so far behind
| | 05:08 | WordPress among casual site builders
is that WordPress is so much easier to
| | 05:13 | set up than core Drupal.
| | 05:15 | Now, I've set up as a WordPress site
or two, and it's really not easier than
| | 05:19 | setting up a site on Drupal Gardens. Oh!
| | 05:21 | You have a few more choices, such as
for the template and features, but the
| | 05:24 | sign-up procedure is basically the same,
and after you get started, as you'll
| | 05:30 | see, Drupal Gardens lets you do much,
much more than WordPress ever could.
| | Collapse this transcript |
| Getting help| 00:00 | As easy as Drupal Gardens is,
sometimes you'll run into problems.
| | 00:04 | There are essentially four ways to get help.
| | 00:06 | The first is in Drupal Gardens itself,
the second through Drupal Gardens
| | 00:10 | documentation, the third in Drupal
Gardens forums where people talk to each
| | 00:15 | other directly, and finally,
elsewhere on the Internet.
| | 00:18 | This video tours each of
these four venues briefly.
| | 00:21 | First, let's talk about how to get
help from within Drupal Gardens itself.
| | 00:25 | I'm already logged in as explorecalifornia.
| | 00:28 | I'll go to My sites, and then
I click on the site I created.
| | 00:34 | Once there, I'm just going to
go to any administrative page,
| | 00:37 | let's say Modules right up here.
| | 00:40 | As you scroll down this page, you see
a list of all of the different features
| | 00:44 | that are turned on in this
site, and next to many of them,
| | 00:46 | you see this link, Help.
| | 00:48 | If we click on that, we get more information
about that specific feature of Drupal Gardens.
| | 00:55 | These context-sensitive Help links
are part of Drupal 7 generally, not
| | 00:59 | just Drupal Gardens.
| | 01:01 | And normally, there is a link next to
this Reports link up here that reads Help.
| | 01:06 | Acquia has taken that link away, but you
can still get to it by going to /admin/help.
| | 01:12 | What you do is you go to
the end of your URL here at
| | 01:15 | explorecalifornia.drupalgardens.com/
admin/help, and there is a directory of all
| | 01:21 | of those help pages.
| | 01:24 | The second way to get help
from Drupal Gardens is from Drupal
| | 01:26 | Gardens' documentation.
| | 01:28 | You can get all of it when you're logged
in and most of it when you're not logged in.
| | 01:33 | Here is what it looks
like when you're logged in.
| | 01:36 | You go to this Help link at the top
of the screen, and you see this menu of
| | 01:39 | different ways that you can get help.
| | 01:41 | There is a lot of stuff here.
| | 01:43 | The Getting started guide is a great one
when you're just starting to set up a site.
| | 01:47 | There are also videos, some very short
videos showing you how to do specific
| | 01:50 | things, and then there are these other areas,
which I'll talk about a little bit more later.
| | 01:55 | To show you what this page looks
like when you're not logged into Drupal
| | 01:58 | Gardens, I'm going to switch to another
browser that I've set up, Google Chrome.
| | 02:03 | And here you notice it doesn't have the
Help link up here at the top. But if you
| | 02:07 | scroll down to the bottom of the page,
there is this Help link down here, which
| | 02:12 | gives you a lot of the same information.
| | 02:15 | It does, however, lack a few things
that you can only get when logged in, the
| | 02:19 | most important of which is the Forums.
| | 02:23 | And speaking of those forums, let's
just take a quick look at what's there.
| | 02:27 | Down here, you see quite a few Support
areas, and you could also see how many
| | 02:31 | posts there are in each one of them,
and how long ago they have been tended.
| | 02:34 | And as you can see, this one was tended just
a second ago, this one about 25 minutes ago.
| | 02:39 | The people at Drupal Gardens really do
watch these, and they help out a lot.
| | 02:43 | So let's go into How to questions,
just click on any one, and you can see.
| | 02:47 | It's quite an active conversation.
| | 02:53 | Finally, there are several places where
you can get general Drupal help online.
| | 02:56 | Now, because this is Drupal Gardens
and not core Drupal, not everything they
| | 03:01 | suggest is going to be
relevant, but some of it will.
| | 03:04 | To get there, go to drupal.org and
then click on Community & Support.
| | 03:12 | Down here, there are a
lot of ways of getting help.
| | 03:15 | There are, of course, forums on the
drupal.org site, very much like the
| | 03:18 | Drupal Gardens site.
| | 03:19 | There is also a way to chat
live and get help that way.
| | 03:22 | If you'd like more information about this,
see my Drupal Essential Training course.
| | 03:28 | In short, there is really a lot of
help out there for Drupal Gardens.
| | 03:31 | Partly that's because it was
designed to help people with no previous
| | 03:34 | web-building experience at all,
get their site up and online quickly.
| | 03:39 | Acquia managed to do that in two ways.
| | 03:41 | First, they made the software simpler,
but they also streamlined the Help
| | 03:44 | documentation quite a bit and their
forums are, to be quite honest, a lot easier
| | 03:49 | to navigate than those on the drupal.org site.
| | 03:52 | Drupal Gardens other users, in my
experience, have been very quick to help out, and
| | 03:56 | where they can't, Acquia's own
staff will jump in and help you out.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are premium member of the
lynda.com Online Training Library, or if you are
| | 00:05 | watching this tutorial on a DVD-ROM,
you have access to the exercise files used
| | 00:09 | throughout this title.
| | 00:11 | Once you have the folder of exercise
files, open it, and you will see that
| | 00:14 | it's arranged by video.
| | 00:16 | In these individual folders
are graphics and text files.
| | 00:21 | In this course, unlike in some others, we only
include the content that goes into the site;
| | 00:25 | we don't include backups of the entire site,
since you are working with a hosted solution.
| | 00:31 | If you don't have access to the
exercise files, you can follow along from
| | 00:34 | scratch or use your own assets.
| | 00:37 | Let's gets started.
| | Collapse this transcript |
|
|
1. Getting Around Drupal GardensUsing the administrative overlay| 00:01 | I want to very briefly talk about
something that was introduced recently to
| | 00:04 | Drupal, called the Administrative overlay.
| | 00:07 | If you use self-hosted core Drupal
version 6 or earlier, it will throw you for a
| | 00:12 | loop the first few times
you see it in Drupal Gardens.
| | 00:15 | Even if you haven't used an earlier
version of Drupal, I can still give you some
| | 00:18 | tips to make it work more the way that you want.
| | 00:21 | It's very easy to see how it works.
| | 00:23 | Just go to any administrative page--
| | 00:25 | in this case, I will go to Configuration--
and you see it pops up this window in
| | 00:29 | front of what was behind it.
| | 00:32 | You can then move around this window
and go from here to any other of the
| | 00:35 | administrative pages,
and again the page remains behind it.
| | 00:39 | To get out of the Administrative
overlay, you just click on this little X up
| | 00:42 | here in the right corner.
| | 00:44 | Inside anyone of these pages,
besides having links, there could be
| | 00:48 | additional controls.
| | 00:49 | For example, if I go to
Structure and menus, we see these tabs.
| | 00:53 | So you see that the Administrative
overlay is a complete page in and of itself,
| | 00:58 | and it navigates just like any
other window in your web browser.
| | 01:03 | And that's really all there is to the
Administrative overlay, but if you don't
| | 01:06 | like it, I would like to show
you two ways to turn it off.
| | 01:09 | The first one is good for
turning it off temporarily.
| | 01:12 | If you look up at the URL, you
see the way that the overlay works.
| | 01:17 | The way this URL works is that we have
the page that's underneath it here at the
| | 01:21 | beginning followed by the number
sign and then the overlay itself--
| | 01:26 | the path to the overlay page,
that is: admin/structure, et cetera.
| | 01:30 | If you want to show that overlay page,
just remove everything between your
| | 01:34 | domain name--that is, explorecalifornia.
drupalgardens.com in this case--and the
| | 01:39 | beginning of that admin path, put
a slash in it, and just hit Return.
| | 01:44 | That gives you the page
without anything behind it.
| | 01:47 | There is one thing to notice when you
do this, however, which is that as you go
| | 01:51 | to other administrative pages,
it will stay non-overlay;
| | 01:56 | that is, the overlay won't pop back up.
| | 01:58 | Now if you want to go from this mode
back to the overlay mode, the best way I
| | 02:02 | found to do that is to first go Home
and then go back to any overlay page.
| | 02:07 | Let's say you want to turn
off this overlay page entirely.
| | 02:12 | Well, in Drupal 7 core Drupal, you are
able to do that by going to Modules, and
| | 02:17 | scrolling down, and there is
actually a module called Overlay.
| | 02:20 | That's not in Drupal Garden, so you have
to do something a little bit different.
| | 02:23 | What you do is you go up to
Configuration, scroll down to User Interface, and
| | 02:29 | you see this link, Administration
theme and overlay. Click on that, and then
| | 02:33 | you can turn off the overlay both
for creating content and for the
| | 02:37 | administration pages.
| | 02:38 | There is not really that much to
say about the Administrative overlay.
| | 02:41 | Most people like it; some people don't.
| | 02:44 | Fortunately, there are a few
ways to turn it off if you'd like to.
| | 02:47 | You can either do that, once again, by
manipulating the URLs or by changing the
| | 02:51 | overlay settings, as I've just showed you.
| | Collapse this transcript |
| Using the dashboard, toolbar, and shortcut bar| 00:00 | When you are logged in to a Drupal
Gardens site as a user with certain
| | 00:03 | privileges, you see two bars at
the top of the screen with links to
| | 00:07 | administrative and content-creation tools.
| | 00:10 | These are the toolbar--
| | 00:11 | that's the black area up here--and the
shortcut bar, the gray area right here.
| | 00:16 | The toolbar doesn't change.
| | 00:18 | It's the main way that you access all
of Drupal Gardens' administrative options.
| | 00:22 | But you can change the shortcut bar
for one click access to any page on your
| | 00:26 | site, and I will show you how to do that.
| | 00:28 | First, let's talk a little
bit more about the toolbar.
| | 00:30 | I don't really have to say much about it
because we have been using it up until now.
| | 00:34 | You click on links, it throws up the
overlay, and then you go from there to do
| | 00:38 | whatever administrative
thing that you would want to do.
| | 00:41 | One thing that's not obvious, if you
are only working in your site as an
| | 00:44 | administrator, is that not
everybody can see that toolbar.
| | 00:47 | I am going to switch over to Google Chrome
where I have my site up but I am not logged in,
| | 00:52 | and you can see there is no
toolbar or shortcut bar up at the top.
| | 00:55 | Well, let's go back and keep working with it.
| | 00:58 | You learned how to adjust permissions
to show or hide that toolbar to different
| | 01:02 | users in the videos about managing users.
| | 01:04 | Now let's talk about what's on the
right-hand side of this toolbar, which we
| | 01:08 | haven't touched yet.
| | 01:09 | The first thing is your
User account. I click that.
| | 01:13 | I come to a page that shows my profile.
| | 01:15 | We will talk more about that again in
the section on managing users, but I do
| | 01:19 | want to point out this
shortcuts link right here.
| | 01:22 | We will come back to that in just a
minute after I talk about the shortcuts
| | 01:25 | because you can assign different groups
of shortcuts to different users so each
| | 01:30 | user sees a different thing
in this gray area up here.
| | 01:34 | But let's talk about what's in
that shortcut bar by default.
| | 01:37 | Since we are logged in as the main
administrator for this page, we see not only
| | 01:41 | Add content and Find
content, but also the Site manager.
| | 01:45 | Clicking that is basically the same as
clicking the My sites link up here in the toolbar.
| | 01:51 | It takes you to a list of all
of the sites that you manage.
| | 01:54 | You can add or remove items to that
shortcut bar in two different ways.
| | 01:58 | The first method is quite simple.
| | 02:00 | You go to any administrative page,
such as Modules and you see this little
| | 02:05 | plus next to the title.
| | 02:07 | When you hover your cursor over it,
you see Add to Default shortcuts.
| | 02:10 | I will go ahead and do that, and a
second later we see Modules right up there.
| | 02:15 | And as you might guess, no matter
where I am in the site now, when I click on
| | 02:18 | Modules, it takes me back to that page.
| | 02:20 | Once I am on that page, it's easy to
remove that shortcut because the plus
| | 02:25 | is turned to a minus.
| | 02:26 | Just click it again, click Delete, yes
I do want to do that, and it's gone.
| | 02:33 | The other way to add shortcut
bar items is by editing the list of
| | 02:36 | shortcuts manually.
| | 02:38 | That's actually the more flexible way
since it works on any page, even those
| | 02:42 | that don't have the little Plus sign on them.
| | 02:44 | To demonstrate that, I am going
to go to just a page on my site.
| | 02:48 | Go back Home, and then let's scroll
down and go to the sample article here.
| | 02:53 | Now I notice my URL is the domain
name followed by /content/sample-article.
| | 02:59 | I am going to copy that and
then go to Edit shortcuts.
| | 03:04 | Then on that page, I see at the top
is an Add shortcut link. I click that. Very simple.
| | 03:11 | I can add name to that. I will say "Sample
article," and then for the path, I will paste it in.
| | 03:16 | Now you will notice that it ends with a
slash here so I don't have to add it again here.
| | 03:21 | Delete that so we don't have two
slashes and click Save. And there it is.
| | 03:26 | Now just as before, when we click on
that, from anywhere in the site, we will go
| | 03:30 | to that sample article.
| | 03:33 | And just to keep things clean, I am going
to go back to Edit shortcuts and delete it.
| | 03:37 | And of course, I have to confirm my
deletion, and as before, it's gone.
| | 03:42 | So far so good.
| | 03:43 | Now things get a little tricky.
| | 03:45 | We have been editing a single shortcut bar.
| | 03:48 | Every user with permission to see
the toolbar will see the same one.
| | 03:52 | You can actually create as
many shortcuts bars as you want.
| | 03:56 | Now you might be asking,
why do I want to do that?
| | 03:58 | Well, let's say that you have people
on your team performing different tasks.
| | 04:02 | You can give each group its own shortcut bar.
| | 04:06 | So let's say you have a news editor.
| | 04:07 | That person could have a
shortcut bar that says post articles.
| | 04:11 | Well a community manager's shortcut bar
says edit members and other things that
| | 04:15 | will help out with managing the community.
| | 04:18 | To add additional shortcut bars, we go
up to Configuration, then scroll down to
| | 04:24 | User Interface and click Shortcuts.
| | 04:26 | Now we can add other
shortcut sets, just as I described.
| | 04:30 | I won't go into the details here because
I do in my course "Drupal 7 New Features,"
| | 04:35 | which is also on lynda.com.
| | 04:37 | Before going, I want to mention one big
difference between Drupal Gardens and core Drupal 7.
| | 04:41 | If we go up to Modules and scroll down,
there is no toolbar module in Drupal
| | 04:49 | Gardens as there is in core Drupal.
| | 04:51 | Acquia probably took that out
because they would get too many support
| | 04:55 | messages from people who turned it off
and then couldn't access any of there
| | 04:58 | administration pages.
| | 05:00 | However, you can turn off the shortcut bar.
| | 05:02 | It has its own module right here,
and you would turn that off, as usual, by
| | 05:06 | un-checking it, scrolling to the
bottom, and clicking Save configuration.
| | 05:13 | I am going to leave it as it is.
| | 05:14 | If you want to turn it off temporarily,
that's very easy. Just click this little
| | 05:18 | arrow up here, and that hides that shortcut bar.
| | 05:22 | Finally, the toolbar is not the only
way to display administrative links.
| | 05:26 | You can also enable the management
block, which contains all of those links.
| | 05:31 | You will learn how to do that in a
video later on in this course about
| | 05:34 | understanding menus.
| | Collapse this transcript |
| Touring the newly created site| 00:00 | So, you've created your first site by
following the video about getting started
| | 00:05 | with Drupal Gardens.
| | 00:06 | Now we are going to take a
look at what exactly you have.
| | 00:10 | The site includes some menu links at
the top, some sample content so you have a
| | 00:14 | sense of how it all fits together, and
some dynamic areas such as these blocks
| | 00:18 | showing comments and blog posts
that are automatically created.
| | 00:22 | For now, we'll leave all the sample
content in place because it'll be useful for
| | 00:26 | later demonstrations. But don't
worry; we will get rid of it all soon.
| | 00:31 | If you're itching to just jump ahead
and trash it all right away, watch the
| | 00:34 | video about creating and managing content.
| | 00:38 | What we see here right now though is
the site's content as it appears when you
| | 00:42 | create a site using the
Campaign template, as we did.
| | 00:45 | If you use the different template, you
will see some very different options, but
| | 00:49 | most of it is at least similar.
| | 00:51 | One thing the Campaign template gives
us is the seven links at the top of the
| | 00:54 | page in what's called the Main Menu area.
| | 00:57 | Only the About and Contact
pages lead to static content.
| | 01:02 | The other five are dynamic.
| | 01:04 | The Blog is automatically created as a
collection of all of your blog posts, much
| | 01:08 | like what you see in
WordPress and other blogging sites.
| | 01:11 | You will learn more about how to control
these in the video about creating blogs.
| | 01:17 | The News section is
actually something called a view.
| | 01:20 | You will learn about views in the
video about creating dynamic pages
| | 01:24 | using simple views.
| | 01:26 | A view is essentially a collection of
nodes that you've created, a node being an
| | 01:30 | essential content unit in Drupal.
| | 01:33 | So here we have one node, sample article, First
news item, and so forth as you go down the page.
| | 01:40 | The next link is Forum.
| | 01:42 | The Forum is a place for your sites'
members to interact with each other.
| | 01:46 | When we created this site, you had a
choice of whether to include a forum or
| | 01:49 | not, and you'll learn how to further
configure it in the videos later on about
| | 01:53 | starting discussion forums.
| | 01:55 | The Contact link leads to this web form,
which you'll learn how to control in
| | 02:00 | the video about setting up Contact forms.
| | 02:02 | Through this page, anybody visiting
your site, if you give them permission,
| | 02:06 | can send you e-mails.
| | 02:08 | Finally, we have Galleries, which
you'll learn how to set up in a video about
| | 02:12 | creating image in YouTube video galleries.
| | 02:14 | Well, that takes care of the main menu.
| | 02:16 | Let's take a quick survey of the rest of
the other content on the site's front page.
| | 02:21 | We go back there by clicking on
the Home, and we actually see two
| | 02:25 | different kinds of content.
| | 02:27 | I used the word "node" earlier.
| | 02:29 | That's the basic unit of content in Drupal.
| | 02:32 | You can see a node in its
natural form by clicking on its title.
| | 02:37 | Now we see not only the
node, but also an Edit link.
| | 02:40 | This is how you create content in
Drupal, and again we'll talk about this more
| | 02:44 | later on in the course.
| | 02:46 | Going back to the front page, you will
notice a different kind of content, which
| | 02:51 | are these blocks on the side of the page.
| | 02:53 | These are what is called dynamic content.
| | 02:56 | You don't create them directly--that
is, I didn't type in sample comment
| | 02:59 | created one day and one hour ago;
instead, I simply created the comment, or in
| | 03:04 | this case Drupal Gardens created it,
and this Comments block keeps track of
| | 03:08 | what was last created.
| | 03:09 | You'll learn more about those in
the video about working with blocks.
| | 03:14 | But let's get back to nodes.
| | 03:15 | I've showed you how to
see a node and then edit it.
| | 03:18 | You can see a list of all nodes on your
site by clicking on this Content link up
| | 03:22 | here, and that brings you to this page.
| | 03:26 | This is all of the stuff that
came with your site automatically.
| | 03:29 | It's what I would call "junk content"
that you later replace with your own stuff.
| | 03:33 | Well, that pretty much tells you what you have.
| | 03:37 | The next step is to start
configuring it the way that you want it.
| | 03:40 | The two most important videos in this
respect are about configuring the site,
| | 03:44 | which shows you how to give it your own
name and basic design, and creating and
| | 03:48 | managing content, which lets you un-
publish or delete all of the sample text and
| | 03:52 | then replace it with your own.
| | Collapse this transcript |
| Configuring the site| 00:00 | Now that you have seen what Drupal
Gardens sets up for you by default, we can
| | 00:04 | start to make it more like what you want.
| | 00:07 | The three things that you have to change are
| | 00:09 | the site's identification information--
for example, this explorecalifornia here--
| | 00:14 | the information on the site that
identifies you as the company or creator of the
| | 00:18 | site, and then if you like, the site's design.
| | 00:22 | We will only go through these steps
very quickly and without much explanation;
| | 00:26 | the rest of the course
will give you more details.
| | 00:28 | To start, we'll change the
identification information.
| | 00:31 | To do that, go up to
Configuration and then to Site information.
| | 00:37 | There are two areas here to change.
| | 00:39 | The first one is the Site Name.
| | 00:40 | I am going to just change it so that
it has proper capitalization, "Explore
| | 00:45 | California," and I will leave that showing.
| | 00:48 | The second part is the site Slogan, which
you might remember showed up just below
| | 00:52 | the title on the front page.
| | 00:53 | I am going to remove it by un-checking this
box, but then I will also delete the text here.
| | 00:59 | This is important to do if you really
want to get rid of all semblance of the
| | 01:02 | slogan, because it sometimes shows up
in your browser's title bar if you don't
| | 01:06 | remove it from both places.
| | 01:08 | Press Delete, scroll to the
bottom, and click Save configuration.
| | 01:16 | There. Now when we go back to the front
page, we see that the site looks as we
| | 01:20 | want it, with Explore California up here.
| | 01:22 | Now, I want to start changing the
things that identify us as a company.
| | 01:26 | There is a few things to change.
First of all, on the About page, Drupal Gardens
| | 01:32 | throws in the sample map and explains
how you can change it. But right now, it's
| | 01:37 | on a place in Belgium.
| | 01:39 | So what we're going to do is change
it according to their instructions.
| | 01:42 | First, we will go to view it in Google maps.
| | 01:45 | I am just right-clicking and opening it up
in a new tab and then changing the address.
| | 01:50 | I am going to change that to 6410 Via
Real, Carpinteria, CA. There we are.
| | 02:02 | Now we take a link off of this page by
clicking the Link button over here, and
| | 02:07 | copying the HTML here in the second area.
| | 02:11 | Then go back to our site and click Edit.
| | 02:14 | Now this section gets a little bit
tricky because the instructions they give you
| | 02:18 | are not quite complete.
| | 02:20 | You can't simply delete this
and paste in what you just copied.
| | 02:23 | You have to go to HTML and then do it.
| | 02:27 | So I highlight the whole thing and delete it.
| | 02:30 | And then Ctrl+V to paste it in, leave it
on Full HTML, scroll to the bottom, and save.
| | 02:39 | Give the page a chance to
reload, and there it is.
| | 02:42 | We now have our map with
the address that we want.
| | 02:46 | We can further modify this by, for
example, putting in our own address in plain
| | 02:51 | text at the bottom of it, as it had before.
| | 02:54 | So we could say "Contact us at:
| | 02:57 | 6410 Via Real, Carpinteria, CA
93013," and go to the bottom and Save.
| | 03:13 | There. Now our About page tells a
little bit more about us instead of some
| | 03:16 | company out in Belgium.
| | 03:18 | I want to make another change to this page.
| | 03:21 | If you scroll down to the bottom of
the page, you'll see there are links for
| | 03:24 | Facebook and Twitter, as well
as this site in an RSS Feed.
| | 03:29 | If you go to those Facebook and
Twitter pages, right now those actually go to
| | 03:32 | Drupal Gardens pages,
and we want to change that.
| | 03:35 | To do so go up to Configuration and scroll
down to Web Services and Site follow links.
| | 03:43 | Then I will replace the Facebook
and Twitter accounts with my own.
| | 03:47 | So, I'm going to go my own Twitter page.
| | 03:49 | In this case, I'm actually
going to use the lynda.com page.
| | 03:52 | I copy it, go back to my site, and
paste it in the appropriate place.
| | 03:57 | And then do the same
thing, of course, for Facebook.
| | 04:04 | Scroll to the bottom of the page and Submit.
| | 04:07 | So that's two of our three things.
| | 04:09 | The third thing you remember is
to change the site's appearance.
| | 04:12 | Again, I will just show you this very
quickly, but we won't actually change the
| | 04:16 | sample site's look and feel until the
video later in this course about switching
| | 04:19 | and saving your themes.
| | 04:21 | To do so, however, click the
Appearance link at the top of the screen. That
| | 04:29 | brings up the Theme Builder.
| | 04:30 | This is a very powerful tool about
which you learn a lot more in this course.
| | 04:34 | But the simplest thing that you can do
is by clicking on any other theme that
| | 04:38 | you see here right in the opening screen.
| | 04:40 | I clicked on Broadway, give it a
moment, and you see the whole site in a
| | 04:46 | completely different look.
| | 04:48 | Now, if I actually wanted to use that,
I would click Publish, but instead I
| | 04:50 | am just going to say close out of this,
and it will return me to the Campaign theme.
| | 04:57 | Now we didn't make very many changes in
this video, but you have quite a bit of
| | 05:01 | knowledge at this point
to make the site your own.
| | 05:03 | Since most of what visitors see in your
site is the content, however, the next
| | 05:08 | video is also very important.
| | 05:10 | That video is about creating
and managing content on your site.
| | Collapse this transcript |
|
|
2. ContentCreating and managing content| 00:00 | We are still looking at our site as we
first launched it, with just a few tweaks
| | 00:04 | that we did in the video
about configuring the site.
| | 00:06 | There is still a lot of sample content.
| | 00:09 | Now it's a time to get rid of all that
and replace it with some of our own stuff.
| | 00:12 | Along the way, I'll show you, also, how
to add raw HTML code and put images into
| | 00:17 | the content, and also how to make page summaries.
| | 00:20 | Now we won't have time to look at
all the different ways you can affect
| | 00:23 | content in Drupal Gardens.
| | 00:24 | I'll just show you the most important
parts. But remember, Drupal Garden is built
| | 00:29 | on Drupal, and this is one area that's
almost exactly the same between the two.
| | 00:34 | So if you want to learn more, just
watch relevant selections from my lynda.com
| | 00:37 | course, "Drupal Essential Training."
| | 00:40 | First, let's go to a page that will be
seeing a lot of once you get your site
| | 00:43 | going, the Content page.
| | 00:45 | To get there, just go up
here, and click Content.
| | 00:48 | Each line on this page is an individual piece
of content, known as a node in Drupal jargon.
| | 00:54 | Nodes are defined by their content
type, which you see here in this column.
| | 00:58 | We'll talk a more about content types
in the video about content types, but for
| | 01:01 | now, those don't matter.
| | 01:03 | You will manage them all pretty much the
same way, no matter what the content type is.
| | 01:08 | Also in each line of this page is the
author of that particular node, and if
| | 01:12 | you click on that, you'll go that
user's profile, whether or not the node is
| | 01:16 | published, when it was last updated,
and links to directly edit or delete the node.
| | 01:21 | Although a particular node might appear
in different ways throughout the site,
| | 01:25 | they all have a basic form, which you
can see by clicking on their names.
| | 01:29 | I'll show you the node
| | 01:30 | This is a sample article,
which is a News item type.
| | 01:35 | Once we are there, we can click on Edit
to actually change what's in that node.
| | 01:39 | There are few different things to see here.
| | 01:42 | The Title and Body are common to all nodes.
| | 01:45 | Some of them also have Tags, which you
might know from, for example, WordPress
| | 01:49 | and other web sites.
| | 01:51 | We'll talk more about
tags later on in this course.
| | 01:55 | Part of the Body field is this little
pop-up which tells you the different text
| | 01:59 | formats that are available.
| | 02:01 | Safe HTML prevents other people from
changing the node in a way that could be
| | 02:05 | damaging to your site.
| | 02:07 | You could, however, allow for more
HTML tags by changing it to Full HTML or
| | 02:12 | forbid all HTML tags by
changing it to Plain text.
| | 02:15 | Down at the bottom of the page, we
have what are called vertical tabs.
| | 02:20 | Clicking on each one of these
brings up a different set of controls.
| | 02:23 | We will talk about these other tabs
later on in the course, but for right now,
| | 02:28 | I am just going to look at Publishing
options, which is, generally speaking, the
| | 02:31 | most important one.
| | 02:32 | Here you can change whether or not a
node is published--that is, whether it shows
| | 02:36 | up on the site to anybody
except for administrators.
| | 02:39 | You can also make it either promoted to the
front page, or remove it from the front page.
| | 02:44 | Finally, you can make it sticky at top of lists.
| | 02:47 | Now I know that doesn't make much
sense for right now, but I'll give you an
| | 02:49 | example of what that actually means.
| | 02:52 | I'll do that by closing out this content-
creation form and go into our front page.
| | 02:57 | As we scroll down, we see this
article here, This is a sample article.
| | 03:02 | Now that's the one we were just editing.
| | 03:03 | If we click to go back there and edit it
again, we see that its both promoted to
| | 03:10 | the front page and published,
but it's not sticky at top of lists.
| | 03:14 | If there had been multiple nodes there
and this one was the only one sticky
| | 03:18 | at the top of lists,
| | 03:20 | it wouldn't matter how
recent those other nodes were.
| | 03:22 | This one would always show up at the top.
| | 03:24 | I am going to close out this overlay
because I want to show you one other thing
| | 03:28 | about nodes, particularly that shows up
when they are collected on a page with
| | 03:32 | other nodes--for example, on the
front page, or on the News or Blog pages.
| | 03:39 | As I bring my cursor down over this news
item, you'll notice this little widget pop up.
| | 03:43 | That's a direct access widget, which
lets you either edit or delete the node
| | 03:47 | directly from that page. It's very handy.
| | 03:51 | But let's get back to the Content page
and start removing some of that extra
| | 03:54 | stuff we don't want.
| | 03:55 | I am going to remove everything from
this site except for that About us page
| | 03:59 | that we changed a little
bit earlier in this course.
| | 04:02 | To do so, I am going to select
everything by checking this box, and then
| | 04:07 | unselect that one. As you can guess,
| | 04:09 | you can select these
individually or unselect them.
| | 04:12 | I'll then go up to Unpublish selected content.
| | 04:15 | I just want to mention something:
| | 04:17 | you have the options both to unpublish
and delete content. Unless you are certain
| | 04:22 | that you absolutely
don't want that content back,
| | 04:25 | I recommend you always unpublish.
| | 04:27 | All that that does is it removes it
from everybody else's view, but then if you
| | 04:30 | want to bring it back later, you can.
| | 04:32 | I'll then click Update, and it's done.
| | 04:36 | You'll notice that this status has been
changed to "not published" for all that we
| | 04:40 | had checked earlier.
| | 04:41 | Now if go to the front page, scroll down
a little bit, we see that no front page
| | 04:47 | content has been created yet.
| | 04:49 | So let's go ahead and do that.
| | 04:50 | I have created some text that you will
find in your exercise files, which you
| | 04:54 | received if you are a premium member of
lynda.com or received this course on a disc.
| | 04:59 | I have them right here on my Desktop,
| | 05:00 | so I'll open up exercise files
and createcontent, and then frontpage.
| | 05:05 | I am going to copy all of this text and
then return to my site. Click Add new content.
| | 05:13 | You can either do that here, or more commonly,
you'll do that up here in the shortcut bar.
| | 05:18 | Now I am going to make that a basic page.
| | 05:21 | These are all different content types,
again, which we will describe later on in
| | 05:25 | the course. But for now,
we just want a basic page.
| | 05:28 | I'll paste in the information that I copied.
| | 05:31 | I'll put the title up here in the Title
field, get rid of the little extra cruft
| | 05:37 | here, scroll down to the bottom,
and remember, we want it on the front page, so
| | 05:41 | under Publishing options, it's go
Promoted to front page, and Save.
| | 05:46 | Now when we go back to our front
page, scroll down a bit, there it is.
| | 05:51 | We now have a homepage.
| | 05:53 | I am going to create one more, just to
show you a few features we didn't want to
| | 05:57 | put on the homepage--which in Drupal,
by the way, is called the front page.
| | 06:00 | I'll do it on another page,
which we will called mission.
| | 06:04 | The text is from the example file
called mission.text, and I am also going to
| | 06:07 | add a graphic, which is mission.jpeg.
| | 06:10 | Again, I go up to Add content and Basic page.
| | 06:14 | I go back to my sample files, open up
mission, copy it, and paste it, get rid of
| | 06:27 | the extra bits here, put the title up here.
| | 06:34 | We could publish this just the way
it is, but I want to add that graphic,
| | 06:38 | so I am going to click
down here and click Add media.
| | 06:40 | I will navigate back to
that graphic file that I have,
| | 06:44 | go up to the Desktop, go to Exercise Files,
createcontent, and mission, and Upload.
| | 06:54 | You then have a few options such as
what the description should be, and how
| | 06:58 | large you would like that graphic to be.
| | 06:59 | I just change the Description,
"Beautiful California beaches," and submit, and
| | 07:09 | there is our graphic.
| | 07:10 | I will put a little bit of space
between the text and the graphic, and here, of
| | 07:15 | course, you could style this however you like.
| | 07:17 | We could add a little bit of italicization.
| | 07:20 | All of this works very much
like a word-processing program.
| | 07:23 | You can bold the things, and so on.
| | 07:27 | The last thing I am going to do is I
am going to change one of these vertical
| | 07:30 | tab's setting so that we have menu
link that goes directly to this.
| | 07:33 | We will do that in the menu setting
tab and click Provide a menu link.
| | 07:37 | The main menu item is just going to be
called Mission, and the Description
| | 07:41 | will be "What makes us different,"
and that goes into the Main menu.
| | 07:46 | Then I'll just go down and save.
| | 07:48 | Now, when we go around our site, you'll
notice we have this extra button up here,
| | 07:53 | Mission. Click on it, and it
takes us directly to that page.
| | 07:57 | You'll learn more about menus in
the video about understanding menus.
| | 08:01 | Now what I just showed you here only
took a minute, but it's actually quite a
| | 08:05 | big deal in core Drupal.
| | 08:07 | Drupal Gardens, it's easy;
core Drupal, it's hard.
| | 08:10 | That's one more way that Drupal
Gardens is easier then core Drupal.
| | 08:13 | I want to go just a little bit further.
| | 08:15 | What if you know HMTL and wanted to do
that's not possible using the style text editor?
| | 08:20 | Well, that's not so hard.
| | 08:22 | We'll click Edit
and change from WYSIWYG to HTML.
| | 08:27 | Here, you can make any
sorts of HTML changes you like.
| | 08:30 | When you do so, however, you may need to
change this from Safe HTML to Full HTML
| | 08:35 | if you find that it's not
showing up the way that you want.
| | 08:37 | There is one other thing I want to show you
which will save you from a lot of heartbreak.
| | 08:42 | Down here this Revision information,
right now when you change a node, you are
| | 08:47 | not saving any old copies of the node,
but you can, by simply clicking Revision
| | 08:51 | information and Create new revision,
and say "Added a bit of text" or any other
| | 08:58 | sort of description that you would like to add.
| | 09:00 | Then when you say Save, you can now revert to
an old version if that's what you want to do.
| | 09:06 | You see this Revisions tab right here.
| | 09:08 | When you click it, you can go back to
the old version before you made the change.
| | 09:12 | There is one last thing that I
want to mention, and that's summaries.
| | 09:17 | To do that, I am going to go back
to our Content page, and let's just
| | 09:22 | republish a blog post,
| | 09:23 | let's say the sample blog post.
| | 09:25 | I am going to mess with this blog
post a little bit, and then I'll
| | 09:27 | unpublished it again.
| | 09:28 | So first, I will publish it
and then go back in and edit it.
| | 09:33 | Now you'll notice at the
beginning we have this Edit summary.
| | 09:37 | In order to demonstrate that, I am first
going to take this text, and I am going
| | 09:41 | to copy it and paste it a whole bunch of times.
| | 09:44 | Now, if we were to promote this to the
front page, as I'll do down here, we
| | 09:51 | really don't want to have that much
information showing up on the front page,
| | 09:55 | even though it's important information
to have perhaps elsewhere in the site.
| | 09:59 | As we scroll down, we see,
this is the beginning of it.
| | 10:02 | Drupal knows to show only a little bit
of the text, but you can control how much
| | 10:06 | of that text actually shows.
| | 10:07 | Let's say we only want to
have this first sentence showing.
| | 10:10 | Let's go back and edit it, and we will
edit the summary, and then only select
| | 10:16 | that first sentence, like so,
copy it, bring it up, and paste.
| | 10:22 | Scroll down and again I make a
revision and say "Changed summary," and Save.
| | 10:31 | Now when we go back to our front page,
we see it only shows that first paragraph.
| | 10:36 | Once again, I am just going to go in and
unpublish that again because we don't
| | 10:40 | really need that garbage stuff on
our site. Unpublish and Update.
| | 10:44 | There. You have just learned an
often a lot about creating and managing
| | 10:48 | content in one video.
| | 10:50 | Now that you know all this stuff, you
could actually stop the series and just
| | 10:53 | go ahead and create your site.
| | 10:54 | You could fill your site with all of
your pictures and text that you need.
| | 10:58 | In fact, we are getting pretty close to
the limits of simple competing CMSes like
| | 11:02 | WordPress, but if your aims
are more ambitious, keep watching;
| | 11:07 | there is lot that Drupal Gardens can do.
| | Collapse this transcript |
| Creating and managing content types| 00:00 | As we discussed in the video
"Creating and Managing content," Drupal stores
| | 00:04 | all content as nodes.
| | 00:07 | News items and blog post are simply
different kinds of nodes, and these are
| | 00:11 | called content types.
| | 00:14 | Three things set content
types apart from each other.
| | 00:17 | First and most obviously, is their identity--
| | 00:20 | that is, all news items are
categorized as news items.
| | 00:24 | The shared identities that nodes have
within a content type means that they can
| | 00:27 | be gathered together using views.
| | 00:29 | You will learn more about that in the
video later in this course about creating
| | 00:33 | dynamic pages with simple views.
| | 00:36 | The second thing that sets one
content type apart from another is how they
| | 00:39 | collect and hold different
bits of information, called fields.
| | 00:43 | So a content type called customer
might have a field for phone numbers, for
| | 00:47 | example, and another
field for contact preferences.
| | 00:51 | Then when you create a node of that
customer content type, you have place to put
| | 00:55 | those little bites of information.
| | 00:57 | Lastly, content types vary in
how they display that information.
| | 01:02 | This video will show you how to create
a content type, add fields to it, and
| | 01:06 | change the way they are displayed.
| | 01:08 | The campaign template that we are
using in this Drupal Gardens site comes
| | 01:12 | with six of those content types
already built in, and I'll show you how to
| | 01:15 | create another one.
| | 01:16 | But first, let's take a look
at those six content types.
| | 01:20 | To do so, we go to Structure and Content types.
| | 01:24 | Each one of these lines is a different
content type, and their name should look
| | 01:28 | familiar to you from when you
create content in a previous video.
| | 01:31 | Next to each content type's name are
four links to edit and delete the content
| | 01:36 | types, and then manage the fields that are
in them, and manage the display of those fields.
| | 01:41 | Very quickly, I am just going to show you
one of those content types, Basic page.
| | 01:46 | If we click on manage fields, we see
that it only has two: Title and Body.
| | 01:51 | If we click Add content and then a
node of that Basic page content type, you
| | 01:57 | see Title and Body, and that's all,
and that pretty much gives an overview of
| | 02:01 | how content types relate to nodes.
| | 02:05 | What we are going to do now is go
back and create our own content type.
| | 02:09 | Since this site is about exploring
California, I am going to create one called "Tour."
| | 02:14 | I do that by clicking Add content
type then typing in the name, "Tour."
| | 02:19 | You can also add a description.
| | 02:21 | Now this only shows up when somebody
creates a node of that content type.
| | 02:25 | It doesn't actually appear
before ordinary users of the site.
| | 02:28 | I am going just to add something
here so it's clear to somebody who wants
| | 02:32 | to create a Tour node.
| | 02:33 | I'll say, "A tour package we offer."
| | 02:39 | Down at the bottom of the page, we
have quite a few options underneath
| | 02:42 | these vertical tabs.
| | 02:43 | I am not going to go through all of them.
| | 02:46 | The most important one
is the Publishing options.
| | 02:49 | In this case, I don't want each node of the
Tour content type promoted to the front page,
| | 02:54 | so I am going to turn that off.
| | 02:56 | I do, however, want it to create a new
revision each time we create a tour.
| | 03:00 | That way if somebody edits it, I can go
back and see what exactly they edited.
| | 03:05 | Another thing I am going to
change is I want to turn off comments.
| | 03:08 | I don't want people
actually commenting on our tours,
| | 03:10 | so I'll change the Comment
setting from Open to Hidden.
| | 03:13 | If you would like to learn more about
these vertical tabs, watch my course on
| | 03:17 | lynda.com "Drupal Essential Training,"
where I go into them in greater detail.
| | 03:22 | But for right now I am just going to
go down to the bottom of the page and
| | 03:25 | say Save content type.
| | 03:27 | That brings us back to our page of
content types, and if you scroll down, you'll
| | 03:30 | see, there it is: Tour.
| | 03:32 | We can actually add content to that Tour
content type right now by just going up
| | 03:36 | to the Add content and Tour,
but I am going to add a few fields.
| | 03:40 | I am going to add three of them, specifically.
| | 03:42 | One will show how many days the tour is.
| | 03:45 | The second will be how much the tour costs,
| | 03:47 | its price. And the third will be an
image, so the people can get a sense of
| | 03:51 | exactly what they are paying for.
| | 03:53 | To do that I'll go down to
Tour and click manage fields.
| | 03:57 | By default, content type have two fields
in them, just like you saw on Basic page:
| | 04:01 | Title and Body.
| | 04:03 | I am going to add a new one,
which will be called "Length."
| | 04:08 | I add the label there,
and then I add the name of the filed.
| | 04:11 | Now this has to be all
lowercase or numbers or underscores.
| | 04:15 | This is what the computer itself understands.
| | 04:18 | So it will be length,
| | 04:19 | lowercase. And then I have
choice of what type of field.
| | 04:23 | In this case, I want people
to say 1, 2 or 3 days, not 6.57.
| | 04:29 | So I make it an integer.
| | 04:30 | These other field types have
different options attached to them.
| | 04:33 | The best way to understand them is to
just start playing around with them: add
| | 04:37 | fields to content types, see what
options you get, and learn how they work. But
| | 04:41 | for now, we'll just stick with Integer.
| | 04:43 | We only have one option for how to
enter integers, which is text field, and so we
| | 04:48 | add that, and just click Save.
| | 04:50 | We now get two screens of settings.
| | 04:53 | The first one is how that field
will appear in every content type.
| | 04:56 | Once you have added a field, you see, it
doesn't only have to be in the Tour content type;
| | 05:01 | we could then add the same kind of field
to the basic page or blog post or whatever.
| | 05:06 | In this case, there are no special
fields settings to appear in all content
| | 05:09 | types, so I'll just say Save, and that
just bring us to our page for the Length
| | 05:14 | field only in the Tour content type,
and here you have a lot more options.
| | 05:19 | I am going to make this required.
| | 05:22 | I'll add a little Help text here, "How many
days is this tour," and I'll add a suffix.
| | 05:31 | Now I want to say it's 1
day or 2 days or 3 days.
| | 05:34 | If I were to just type "days" here, it
would always say 1 days instead of just 1 day.
| | 05:39 | Fortunately, Drupal Gardens
allows you to add a conditional to it.
| | 05:44 | So day, pipe--that little vertical line--
days tells it if you want it to be 1,
| | 05:50 | it's day and multiple is days.
| | 05:53 | All of that just described here.
| | 05:54 | Now I know this is getting into a
little bit of detail, more detail than
| | 05:58 | perhaps you would need for every one of
the fields you enter, but this is just
| | 06:01 | to show you some of the many options that
Drupal Garden offers you when you create a field.
| | 06:07 | If you have any problems, the first
thing to do is look at the Help text
| | 06:09 | directly underneath the field, and you
will usually find that it takes care of
| | 06:13 | whatever it is you need to figure out.
| | 06:15 | Scroll down and click Save Settings.
| | 06:18 | There is our Length field.
| | 06:19 | I am going to quickly add the other two.
| | 06:21 | The first one is Price.
| | 06:22 | That will also be an integer, a
number of dollars, and save it. Continue on.
| | 06:31 | I'll also make that required. And as a
prefix, I'll add a Dollar sign. Good.
| | 06:38 | Finally, I'll add a different kind
of field, a photo of what the tour is
| | 06:42 | going to look like.
| | 06:43 | So Photo is in Label, and photo is the name.
| | 06:46 | Field type in this case is going to be Image.
| | 06:49 | We only have the choice of Image, and save.
| | 06:51 | Now here we get a setting that will apply to
the Image field everywhere that it is used.
| | 06:58 | It's a default image; what will
appear if people don't add there own?
| | 07:02 | I am going to use one of the files from
our exercise files, which you received if
| | 07:06 | you are a premium lynda.com
subscriber, or you got this course on a disc.
| | 07:10 | I click Browse, navigate to it, in
this case its in our exercise files, and
| | 07:15 | default-tour-pick, Open and Upload. Great!
| | 07:19 | Once that little animation is done,
that means that file is uploaded.
| | 07:22 | So I Save field settings, continue on,
and I am not going to change any of the
| | 07:28 | options here, and say Save settings.
| | 07:33 | We now have our Tour content
type with these three custom fields.
| | 07:37 | The last thing I'll do is I
will put them into an order I want.
| | 07:40 | I want the Length and Price to be above
the Body and the photo to be below it.
| | 07:44 | I will move those into there places
by dragging on this little compass-like
| | 07:48 | icon, scroll to the bottom of the
page, and click Save. There we go.
| | 07:53 | Now we are ready to start creating Tour content.
| | 07:56 | To do that, you already know how:
just go up to Add content and Tour.
| | 08:01 | Now you can see that this is different
from Basic page because you have this
| | 08:05 | Length and Price, and down at the
bottom, Photo, just as what you expected.
| | 08:09 | I will fill this with a
little bit of sample content.
| | 08:12 | I call it "Big Sur Retreat," the Length
will be 3 days, the Price will be $350,
| | 08:20 | and for the Body I get that from the
text that came with the exercise files.
| | 08:24 | I have that here on my Desktop.
| | 08:27 | Just copy it, paste it back into our
site, and I'll add my photo, again from
| | 08:34 | our exercise files. Upload,
and save. There we go.
| | 08:41 | We have created this node, and it
has, just as we expected, a photo, a
| | 08:45 | length, and a price.
| | 08:46 | There are a few things that I
want to change on this node, however.
| | 08:50 | One is I don't think we need the "Photo" above
the photo, since obviously that's what it is.
| | 08:54 | The other thing is up toward the top here,
| | 08:57 | we have the Submitted by and
the person's name and date.
| | 09:00 | We don't really need that information either.
| | 09:03 | We can change both of those
by editing the content type.
| | 09:06 | To do so, once again, we go to Structure
and then Content types and down to Tour.
| | 09:12 | Now the Photo is a field, so we
would change that by managing either the
| | 09:16 | field or its display.
| | 09:18 | As it happens, the way that you
change a label is by managing its display.
| | 09:22 | I click there and go to
the Photo field right here.
| | 09:25 | The Label instead of appearing above,
will just be hidden. Scroll down and save.
| | 09:31 | The other part to change, which is
whether or not the author and date information
| | 09:34 | appears, is part of the content type in general.
| | 09:37 | So we go back and edit
the content type as a whole.
| | 09:40 | As we scroll down, we see this
option here, Display settings.
| | 09:44 | I'll just go into there and uncheck
Display author and date information,
| | 09:48 | and Save content type.
| | 09:50 | One thing about changing a content
type is it changes all of the existing
| | 09:54 | nodes when you change, for example,
how images are displayed or whether
| | 09:57 | labels are displayed.
| | 09:59 | That's actually a good thing because
it makes your whole site stay consistent.
| | 10:03 | Let's close out this overlay and
see if it works. The page reloads.
| | 10:07 | There. That author and date information is gone,
and as we scroll down, the word "Photo" is gone.
| | 10:13 | So everything is great.
| | 10:14 | Now you saw how to modify a content
type that you created, but you can also use
| | 10:18 | these techniques to modify those built-
in content types, such as Blog or Basic
| | 10:23 | page, and there is lot more you
can do with the display options.
| | 10:26 | I didn't even show you half of it.
| | 10:28 | If you are curious about that, check out
my Drupal Essential Training course as
| | 10:32 | well, which is also on lynda.com.
| | Collapse this transcript |
| Embedding YouTube videos and other media| 00:00 | One of the greatest things that's
happened on the web in the last ten years is
| | 00:03 | the growth of the mashup, where
information from two or more sites combines to
| | 00:08 | make something that's bigger
than the sum of all of them.
| | 00:10 | The result of this movement has been
a proliferation of sites that provide
| | 00:13 | information in the format that's
ready for you to use on your web site.
| | 00:17 | YouTube videos and Google maps
are pretty good examples of that.
| | 00:21 | This video will show you how to add
YouTube videos in a very simple way, and
| | 00:25 | then Google maps and other information in a
slightly more complex way. But don't worry;
| | 00:29 | it is easy once you get the hang of it.
| | 00:32 | First, we'll go for the easy
one--that is, adding YouTube videos.
| | 00:36 | To get started, click
Add content and Basic page.
| | 00:40 | I'm going to call this
"Explore California video podcast #1."
| | 00:47 | In the Body area, click Add
media, and then go up to the top.
| | 00:52 | Now you've seen this window before when
we added some media that was already on
| | 00:55 | your own computer. But there is
this other link, Embed image/video.
| | 00:59 | Click that and then paste the URL
for the video that you want to add.
| | 01:04 | Now, I've already chosen one here in YouTube.
| | 01:07 | So I'll copy that, bring it back here,
and paste it into my site, and click Submit.
| | 01:14 | Scroll to the bottom and click Save. That's it.
| | 01:18 | It's now part of your site, and you can watch
it just as if you're watching it on YouTube.
| | 01:21 | (Music playing.)
Like so!
| | 01:23 | All right, so that was the easy way
to get YouTube videos into your site.
| | 01:29 | Now for the Google maps. Once again, we'll
go up to Add content and add a basic page.
| | 01:35 | This one I'll call "Golden Gate Bridge."
| | 01:40 | Now, I've chosen this map already on
Google maps, and I think I'll make this a
| | 01:44 | little bit fancier by actually showing
the street view of what it looks like as
| | 01:48 | you go across the bridge.
| | 01:49 | That looks pretty good. Yeah, there we go.
| | 01:52 | To get that map, you click Link and
then this Paste HTML to embed in web site.
| | 01:57 | Click it and copy it and
then go back to your site.
| | 02:01 | Now you might think that you'd able to
just paste it in here, and it would show that.
| | 02:05 | However, it won't actually work,
and I'll show you why a couple of times.
| | 02:10 | Go down and save and what you
actually get is a lot of code.
| | 02:14 | The reason for that, as you'll see when
I click Edit, is that Drupal Gardens was
| | 02:18 | accepting you to enter WYSIWYG code, so
it takes everything that you put in, and
| | 02:22 | it says okay, I'm going to split this
out maybe with a little bit bold styling,
| | 02:25 | and italic styling, but basically,
it's going to spit everything back out.
| | 02:29 | What you have to do instead is go
to HTML and then paste it in there.
| | 02:33 | Now, you might think that this would
work if we just paste it in in HTML, but
| | 02:38 | actually it doesn't.
| | 02:40 | The reason is we have this
Safe HTML filter up here.
| | 02:44 | If we leave it on that, Drupal Gardens
takes it and says okay, I don't think
| | 02:47 | that I want all of these
tags to be allowed on the site.
| | 02:51 | What you have to do instead is go to
Full HTML and paste it in, then scroll to
| | 02:56 | the bottom, and click Save.
| | 02:58 | Now, we see the map exactly as we had it before.
| | 03:01 | So we made it work, but there
is a bit of a problem with that.
| | 03:05 | The Full HTML text format, which lets
people insert whatever HTML they like,
| | 03:10 | presents a big problem.
| | 03:12 | The thing is that since they can add
any tags they want, they might add some
| | 03:16 | damaging tags if they have
access to edit that node.
| | 03:20 | I talk more about this problem in the
video later on in this course about best
| | 03:24 | practices for online clubs.
| | 03:25 | So please do watch that video before
you start allowing your sites' members to
| | 03:29 | embed stuff in this way or use the
Full HTML text format in any way.
| | 03:34 | So we were able to get Google maps and
YouTube videos in, but I want to mention
| | 03:38 | that this technique doesn't end there.
| | 03:41 | When I was making this video, I did a
Google search for "online embeddable games"
| | 03:45 | and was just amazed at the variety out there.
| | 03:47 | In fact, you could create a site that
does nothing but collect your favorite
| | 03:51 | games and have a sort of
personal time-waster site.
| | 03:55 | But you know, I think embeddable content
like this works best with a light touch.
| | 03:59 | A Google map here, a video there--
these enhance your content without
| | 04:03 | overwhelming your visitors.
| | Collapse this transcript |
| Subscribing to RSS feeds| 00:00 | The easiest way to get interesting
information on your site is, well, to get
| | 00:04 | someone else to create it.
| | 00:06 | Fortunately, that's pretty
easy in the modern web world.
| | 00:09 | If you find a blog or other collection
of content you like, chances are you can
| | 00:13 | subscribe to it through
what's called an RSS feed.
| | 00:16 | This video shows you how to take
those feeds and put them on your site.
| | 00:20 | The way that's done in Drupal
is through the Aggregator module.
| | 00:24 | To get there, click on the Modules
button at the top, and then you actually have
| | 00:28 | to turn on the module by
clicking in this check box here.
| | 00:31 | Scroll down to the bottom of
the page and save configuration.
| | 00:37 | So we've prepared our Drupal Gardens
site to receive that RSS information.
| | 00:41 | Now, we have to go out and find some to include.
| | 00:43 | Then I'll open a new tab and search
in Google for "California RSS," and I'll
| | 00:50 | choose this second one right here.
| | 00:53 | This actually went to a page which
collects all kinds of California information,
| | 00:57 | in this case travel
information within California.
| | 01:00 | I look around for something that looks this.
| | 01:02 | This is the RSS icon.
| | 01:04 | When I click it, it gives me the
page in a format that Drupal Gardens can
| | 01:08 | understand--what's called an RSS feed.
| | 01:10 | Now from here, I'll copy the
URL and then go back to my site.
| | 01:15 | Now I have to get that
into my Drupal Gardens site.
| | 01:18 | The way you do that is under
Configuration and Feed aggregator, which is down
| | 01:23 | here under Web Services.
| | 01:26 | There are two kinds of things that
you can add to the Feed aggregator:
| | 01:29 | a category and a feed.
| | 01:31 | I'm going to start with feeds, and then
later we'll categorize things that are
| | 01:34 | coming in from our feeds.
| | 01:36 | To add a feed, you either click
this link here or this one down here;
| | 01:39 | they both do the same thing.
| | 01:42 | For the title, I'll call this
"California news from Feedzilla," which is the name
| | 01:48 | of the site I got it from.
| | 01:50 | I'll then paste in the URL that I
grabbed from that other site, and the other
| | 01:54 | things I'll just leave alone
for now, and click Save. Great!
| | 01:58 | It's been added. Now you'll notice it comes back and
asks if you want to add another feed, which
| | 02:02 | we won't do right now.
| | 02:04 | Now let's see what items
were actually in that feed.
| | 02:07 | To do so, click List. But what you'll
notice is no items have been brought in yet.
| | 02:11 | In order to update it, you either
have to wait for the update interval to
| | 02:15 | happen or update them manually.
| | 02:18 | To see what that update interval is,
I'm going to go in and take a look at the
| | 02:22 | settings for that feed.
| | 02:25 | So we would have to wait
for an entire hour to see it;
| | 02:28 | instead, I'm going to go back and manually
update it by clicking update items over here.
| | 02:35 | Very good! We have 20 new items from that feed.
| | 02:38 | In order to see those items, it's very easy:
| | 02:40 | we just click on this link. And these
are all those news items, all of them
| | 02:45 | having to do with California travel news.
| | 02:48 | Now one thing to notice is although you
brought this information into your site,
| | 02:52 | no new nodes were created.
| | 02:54 | If you click on any of these titles, it
actually takes you to the external site
| | 02:59 | that has the information, like so.
| | 03:02 | I'll just go back to our site.
| | 03:05 | So we found a feed of information,
and we've added it to our site.
| | 03:10 | Well, what exactly can we do with it?
| | 03:12 | We now have a page that shows items
from that feed, and if you want to, you
| | 03:15 | could create a simple link up here in the
main menu or something that goes to this page.
| | 03:19 | You'll learn how to do that
in the videos about menus.
| | 03:22 | There is another way that you can use this
feed, however: by adding it into a block.
| | 03:26 | We'll talk a lot more about blocks
later in the course, but I'll very quickly
| | 03:29 | show you how to use that.
| | 03:31 | To do that, go up to
Structure and down to Blocks.
| | 03:35 | Now when you create a feed, it also
creates a block, which you can place in
| | 03:40 | different areas on the page.
| | 03:41 | I'll scroll down to the bottom to see
our inactive blocks, down here under
| | 03:46 | Disabled, and there is the one we just got:
| | 03:48 | California news from
Feedzilla feed latest items.
| | 03:51 | I'm going to move that up higher in the page.
| | 03:54 | Now I happen to know where all of
these regions are, and you'll learn more
| | 03:57 | about where they are when you
see the videos about blocks.
| | 04:00 | I'm just going to put this one into the
right-hand sidebar, known as Sidebar B,
| | 04:05 | scroll down, and save.
| | 04:07 | Now when I go to my front page, scroll down,
and there are some of those news items.
| | 04:14 | It's a great way to bring information
into your site, and again, I didn't have
| | 04:17 | to write any of this.
| | 04:18 | All I had to do is find
the feed and bring it in.
| | 04:21 | One other thing that happens when
you bring a block into the page is it
| | 04:25 | adds this More link.
| | 04:27 | That's another way to see
that page that we saw earlier.
| | 04:30 | Now at the top, you'll notice a couple
of tabs that you as the administrator can
| | 04:34 | see, but that other people can't.
The first one is the Configure tab, which gives
| | 04:38 | you an opportunity to change some of
the feed information that you entered when
| | 04:42 | you created the feed.
| | 04:43 | The other one is the Categorize tab,
which I'll talk about in the next video.
| | Collapse this transcript |
| Categorizing RSS feeds| 00:00 | In the previous video, I showed you how
to subscribe to RSS feeds on other sites.
| | 00:05 | In this one, I'll show you how to
categorize those feed items that you receive,
| | 00:10 | to give visitors easier ways to
get the information that they want.
| | 00:15 | As you scroll down through this page,
you'll notice that these news feed items,
| | 00:19 | they are all about California,
but they have different focuses.
| | 00:24 | Some might be about nature, some might
be about celebrities, some might be about
| | 00:28 | travel, and so forth.
| | 00:30 | So what we're going to do is we're going
to create some categories that will let
| | 00:33 | us categorize these individual feed
items and then look at pages to only see
| | 00:37 | celebrity news or travel news or nature news.
| | 00:40 | To do that, we go up to Configuration,
and once again, down to Feed aggregator
| | 00:45 | under Web Services, and now,
we can start adding categories.
| | 00:49 | I'm going to add four categories:
| | 00:52 | it will be Nature, Shopping,
Travel, and Celebrities.
| | 01:04 | You can add descriptions as well, which
will give additional information, but
| | 01:08 | I'll just do that simply for right now, and save.
| | 01:10 | Now let's go back to our front page,
go back down to that block that we
| | 01:15 | have, and click More.
| | 01:17 | Once again, that takes us
to our page of feed items.
| | 01:20 | Now when we click Categorize, we're able to
add these items into any of those categories.
| | 01:26 | So Kelly Slater, that sounds
like a celebrity piece of news.
| | 01:30 | Let's see, Watershed cleanup, that sounds
like nature, Natural Beauty also sounds
| | 01:34 | like nature, and so forth.
| | 01:36 | We could go then down to the
bottom and save our categories.
| | 01:40 | Now when we look at that page, by clicking
the View tab, we see those tags that we added.
| | 01:46 | See, we have categories Nature
under here, Celebrity under here.
| | 01:49 | You might remember that we added two
items to nature, so when we click on the
| | 01:52 | Nature tag, we see those two items only,
| | 01:56 | a very good way to take in this
information from other sites and make it more
| | 02:01 | useful on your own site.
| | 02:02 | You're actually adding value
to somebody else's information.
| | 02:05 | But there is an easier way to
categorize feed items if you expect to add the
| | 02:09 | same tag to every item
that comes through the feed.
| | 02:12 | To demonstrate that, I'm
going to add one more feed.
| | 02:15 | I'm going to search Google one
more time for "California RSS."
| | 02:19 | This time I'm going to go to the first
link, which is the State of California
| | 02:23 | information, and go down to the
department of parks. There it is:
| | 02:31 | California State Parks.
| | 02:32 | Click on the RSS icon and copy that URL.
| | 02:36 | Once again, we go back to our site, go to
Configuration > Feed aggregator, and Add feed.
| | 02:44 | The title will be California
Department of Parks, and there is our URL.
| | 02:53 | Now this time because it's the
Department of Parks, I expect them all to be in
| | 02:56 | the Nature category.
| | 02:58 | So I'll just add Nature and save.
| | 03:02 | Now I'll go back to my list and
quickly update those items. Good!
| | 03:05 | 12 items. Let's take a look at them.
| | 03:08 | Here they are, and you see
each one has that Nature category.
| | 03:12 | If we click it, we go back to that
earlier page that mixes in nature items from
| | 03:16 | both of the feeds we created.
| | 03:18 | I'm sure you can see right now
how much power there is in this.
| | 03:21 | There is one other nice thing that
Drupal Gardens gives when we start
| | 03:24 | categorizing news feed items.
| | 03:26 | The same way that we were able to enable
a block showing only those items from a
| | 03:31 | certain feed, if we go to Structure,
and Blocks, we also get blocks showing us
| | 03:37 | just the category, the Nature category.
| | 03:39 | So again, we can move that into any of
the areas that are available on our page
| | 03:43 | and just have a Nature section on our page.
| | 03:45 | Finally, we can see all of our news
items by going up to the URL and choosing
| | 03:51 | Aggregator, and that's everything
that's come in from both of those feeds.
| | 03:56 | So you can see that you get a lot of content
onto your site really quickly with RSS feeds.
| | 04:01 | In fact, some sites are built
entirely around RSS feeds with very little
| | 04:06 | original content, or you can
mix it up a bit if you like.
| | 04:09 | That's actually what I did with one of my
first sites, savemyhomebook.com. I created this.
| | 04:15 | It was actually my first Drupal site when
I wanted to promote a book I wrote in 2008.
| | 04:20 | I wrote a few blog posts down here,
but then, really, the book became out of date,
| | 04:24 | and I wanted to keep the site alive
for people who really wanted to get
| | 04:28 | information about foreclosure.
| | 04:29 | So I have these areas here on the side
that are simply pulling in information
| | 04:33 | about foreclosure from various different sites.
| | 04:36 | So the site remains useful to people,
even though the original purpose of the
| | 04:40 | site is not as important as it used to be.
| | 04:43 | Finally, I would like to point out the
opportunity that RSS publishing provides
| | 04:48 | in the other direction.
| | 04:49 | Just as you're subscribing to feeds, other web
master might want to subscribe to your content.
| | 04:55 | To learn more about that, see the
video later in this course about
| | 04:58 | publishing RSS feeds.
| | Collapse this transcript |
| Managing tags and taxonomies| 00:00 | In the video about creating and managing
content types, we talked a little about
| | 00:04 | the differences in Drupal Gardens
between, say, a news item and a blog entry.
| | 00:09 | In this video, you'll learn how to
give nodes a different kind of identity
| | 00:13 | through what's called tags.
| | 00:16 | You could say that a content type
defines a node's format--that is, it says if
| | 00:19 | the node has certain fields, and they
are displayed in this way, and so on.
| | 00:23 | But tags define a node's content.
| | 00:26 | The best way to explain it is with an example.
| | 00:29 | For our site, we're listing different
California tours using the tour content
| | 00:33 | type we defined earlier, which has the
length of the tour and the price and the
| | 00:37 | picture of the tour.
| | 00:38 | But let's say that we want to group
those tours by theme so that people who like
| | 00:42 | to backpack can find all the walking tours.
| | 00:45 | That's what tags are good for.
| | 00:47 | To get started, I first have to
decide what my categories are going to be.
| | 00:51 | For that, we create something
called a vocabulary that describes what
| | 00:55 | we're categorizing.
| | 00:57 | Then we'll fill it with our options,
which are called terms, and you can see this
| | 01:01 | by going up to Structure,
scroll down to Taxonomy.
| | 01:06 | Drupal Gardens comes with two
vocabularies already in place:
| | 01:10 | Tags is a general vocabulary that's
used throughout the site, and Forums which
| | 01:14 | Drupal Gardens uses internally to set
up discussion boards. And you'll find out
| | 01:18 | more about that in the video
about starting discussion forums.
| | 01:21 | We're going to add a different
vocabulary, which will be called Type of tour.
| | 01:28 | We could add a description if we like,
but I'm just going to leave it alone and click Save.
| | 01:33 | Our next step is to add
terms to that vocabulary.
| | 01:36 | Don't worry if this is a
bit confusing right now;
| | 01:39 | it will be clearer when we actually
go and create some tour nodes and start
| | 01:42 | adding those terms to the tour nodes.
| | 01:45 | But first, let's go ahead and add
those terms by going over here and
| | 01:48 | clicking add terms.
| | 01:50 | The first one will be
called Backpack California.
| | 01:53 | I won't put in the description;
| | 01:54 | I'll just go down to the bottom and save.
| | 01:57 | We then come back to the Add Term
screen because usually when you create terms,
| | 02:01 | you create many of them all at one go.
| | 02:04 | The next one we'll be called Nature
watch, scroll down and save it again, and
| | 02:09 | finally California
hotsprings, scroll down and save it.
| | 02:15 | In order to use these tags in a content type,
we have to go back and edit the content type.
| | 02:20 | Now remember, we're going to use these
on our tour content type, so we go up to
| | 02:24 | Structure and Content types,
then down to Tour and manage fields.
| | 02:30 | As you remember, we added a few
fields earlier, and that's exactly what
| | 02:33 | we're going to do now.
| | 02:34 | We'll call it tour type, tour_type, like
so, and then under field type, there is
| | 02:42 | actually one specifically for
taxonomy terms called Term reference, and then
| | 02:47 | we have a few options as to how
we're going to select those terms.
| | 02:51 | I'm going to leave it as Select list,
although if you set up your own terms,
| | 02:55 | you'll probably want to play around with
these and decide which one is best for you.
| | 02:58 | Also, you'll learn more about these
types by watching my video "Drupal Essential
| | 03:02 | Training," where I go into it
in a little bit more detail.
| | 03:05 | Scroll down and click Save.
| | 03:08 | The next question is which
vocabulary is going to be the one from which
| | 03:12 | these terms are selected?
| | 03:13 | Of course, since we're going for Tour
types, we'll select the Type of tour, and
| | 03:17 | save field settings.
| | 03:18 | On this page, I'll actually just leave
everything in its default value, and save settings.
| | 03:24 | Finally, I'll move this up so it's near
the length and price, just because it's
| | 03:27 | more convenient on the node form.
Scroll down and click Save. Great!
| | 03:33 | Now, we can start to categorize our
tours. But you might remember, if we go to
| | 03:36 | content, we only have one tour in
already. That's the Big Sur Retreat.
| | 03:40 | So I'm going to add a couple more.
| | 03:43 | If you're a lynda.com premium
subscriber or got this course on a disc, you have
| | 03:47 | the exercise files, which
include one file called other-tours.
| | 03:51 | I'm going to use that to copy and
paste into my Tour content type.
| | 03:57 | Go down to body and paste. Then our title,
| | 04:04 | let's say that that's a two-day trek.
| | 04:05 | Let's say that the price is 250,
and the tour type is Backpack California.
| | 04:12 | Scroll down and save it,
and I'll leave the photo blank;
| | 04:16 | it'll give us that default photo.
And then I'll create one more under Tour.
| | 04:22 | Once again, I'll pick that from our
exercise file, Channel Islands Excursion.
| | 04:32 | This one is 1 day at $150, and it's
considered a Nature watch, and save. Great!
| | 04:44 | Now if we go back to our content list,
we see that we now have three tour types.
| | 04:48 | I'm going to just go back and change
that Big Sur Retreat so that we add some
| | 04:52 | type of Tour type to that one.
| | 04:54 | I'll call it Backpack
California and save it. Great!
| | 04:59 | Now let's take a look at any one of those--
| | 05:01 | let's say the Big Sur Retreat.
| | 05:05 | As we scroll down, we see our tour
type right here, that Backpack California
| | 05:09 | that we used tag it.
| | 05:11 | When we click on that, we'll
see a page that chose all of the
| | 05:14 | Backpack California tours.
| | 05:16 | Furthermore, the URL that goes to
that page is stable and simple, so you can
| | 05:21 | create a menu item, and you'll
learn how to do that in the video about
| | 05:24 | understanding menus.
| | 05:25 | In short, tagging content makes it easy
for visitors to just click around to see
| | 05:30 | content that most interests them.
| | 05:32 | Tags become even more useful as your
site grows into hundreds or even thousands
| | 05:37 | of nodes, and you have dozens of tags.
| | 05:39 | Now tagging does take a little time
to set up and a bit more time whenever
| | 05:43 | you create a node, but for making
your site a lot more user friendly, it's
| | 05:48 | really worth it.
| | Collapse this transcript |
| Creating dynamic pages with simple views| 00:00 | Now we come to one of the best
parts of Drupal Gardens: views.
| | 00:04 | Put simply, a view is a way to collect a
bunch of information on your site into one page.
| | 00:09 | You saw views like pages at the
beginning of this course when we clicked on the
| | 00:13 | Blog link up here in the News link.
| | 00:15 | That would show blog post from everybody on
your site, or all things that were news items.
| | 00:20 | But you can create your own views
that collect nodes according to all kinds
| | 00:23 | of criteria, by using something that's
built into Drupal Gardens called simple views.
| | 00:28 | As its name implies, simple views is
a streamlined version of a much more
| | 00:32 | complicated Drupal module called
Views that's available for core Drupal.
| | 00:36 | Views is so useful that it is the
number one most popular module for Drupal,
| | 00:41 | and in fact, I presented it in entire lynda.com
course based heavily on views, called "Drupal 6:
| | 00:47 | Online Presentation of Data."
| | 00:49 | Now, simple views has maybe a tenth of
the power of the full Views module, maybe
| | 00:54 | a 50th. But still, it's surprisingly useful.
| | 00:57 | So we're going to create our own view
to list all of the tours on our site, with
| | 01:02 | the most recently added ones at the top.
| | 01:04 | In previous videos, we added three
nodes at the Tour content type, and you
| | 01:08 | can see that by going to Content and then
filtering on the type Tour, and there they are.
| | 01:15 | Now, it's time to group them.
| | 01:17 | To do that, we go up to
Structure and then down to simple views.
| | 01:22 | Now you'll notice one view is already
there, as I mentioned--the News view, which
| | 01:26 | is linked from that menu on the front page.
| | 01:28 | We're going to ignore that and add our own view.
| | 01:31 | The title will be called Newest Tours.
| | 01:34 | The path will be new-tours.
| | 01:37 | Now, that describes the page that you'll
go to in order to see this information.
| | 01:41 | It'll be your domain/new-tours.
| | 01:45 | We'll display only the tour posts,
sorted so that the newest ones are first, and
| | 01:51 | we'll show that simply as a list of
titles, where clicking reveals the full post.
| | 01:57 | We could also limit that to tags so
that if, for example, we wanted it to be
| | 02:00 | only the Backpack California tours,
| | 02:03 | it would show up in the view, but we're
going to just leave it for all of them.
| | 02:06 | It'll show ten items on the page.
| | 02:08 | We won't talk too much about
the RSS feed and expose as block.
| | 02:12 | They are pretty big subjects on their own.
| | 02:14 | And I'll show you how to use that
RSS feed in the video later on about
| | 02:17 | publishing RSS feeds.
| | 02:19 | But right now, we'll just leave it as it
is and know that they are available for
| | 02:23 | us later when we want to take a look at them.
| | 02:25 | Click Submit, and that's
actually all we have to do.
| | 02:29 | Now if we go to that page, new-tours--
and I can do that simply by clicking here--
| | 02:34 | we see the Channel Islands
Excursion, Death Valley Survivor's Trek.
| | 02:38 | You remember these were the three
tours that we added most recently.
| | 02:42 | If we click on any of these titles, it
then shows us more of the information.
| | 02:46 | I want to muck a little bit with this
view so that you can see some of the
| | 02:50 | different options that are
available when you create a simple view.
| | 02:53 | To do that, go up to Structure and then
down to simple views again, and there is
| | 02:58 | our Newest tours view. Click on edit.
| | 03:01 | Let's change just exactly how that shows.
| | 03:04 | List of titles (clicking reveals full
post), which as you saw was a sort of neat
| | 03:09 | animated JavaScript thing.
| | 03:11 | Now I'm just going to make it a
List of titles instead and submit.
| | 03:16 | Now if I go to new-tours--and again, I
could actually just type that up here,
| | 03:19 | new-tours--there is our page. And if
you click on any of these, it now goes to
| | 03:25 | the full node, which includes the
picture and the price and all that sort of
| | 03:28 | thing. And from there,
you can edit it if you want.
| | 03:30 | This is the Nodes page.
| | 03:32 | Once again, I'll just go up to
Structure, just to give you an idea of some of
| | 03:35 | the different options, and edit it,
and show a list of full posts, and submit.
| | 03:43 | Now when we go to that new-tours page,
we see the whole thing, all in one page--
| | 03:49 | great way to show a catalog of your
different products, for example.
| | 03:52 | Now when you make a view, chances
are you'll want to add a link to a menu
| | 03:56 | somewhere so that people can get to it
quickly, and they don't have to type in
| | 04:00 | "new-tours" or whatever the page address is.
| | 04:02 | You'll learn how to do that in
the video about understanding menus.
| | 04:06 | I hope this shows you how powerful simple
views can be for displaying dynamic content.
| | 04:11 | It's not always easy to see just how
powerful it is, but I think once you
| | 04:15 | start having lots and lots of nodes
on your site, you'll start needing to
| | 04:19 | organize them somehow.
| | 04:20 | Then it'll become clear how simple
views works together with taxonomy to keep
| | 04:25 | your information grouped and easy to understand.
| | Collapse this transcript |
| Creating complex information collections with Views| 00:00 | We just finished creating a collection
of tours sorted so the newest ones float
| | 00:04 | to the top, using the
feature called Simple Views.
| | 00:07 | Now I'd like to show you how to do the
same thing, but using the full version of
| | 00:10 | views, which is also now
a part of Drupal Gardens.
| | 00:13 | It lets you do a lot more, but
it's also a lot more complicated.
| | 00:18 | I'll just show you a little of how
Views works to reproduce the collection we
| | 00:22 | put together using Simple Views,
| | 00:24 | but then we'll go a little bit further.
| | 00:26 | The first thing we have to do is to turn it on.
| | 00:28 | To do that, go up to Modules and
scroll down until you see Views.
| | 00:34 | You can also close up this CORE group up here
to get there more quickly. And there it is.
| | 00:40 | We check the box and Save configuration.
| | 00:44 | Then we add a new view by going up to
Structure, scroll down to Views, and Add new view.
| | 00:55 | This page is very similar to the one
that you saw on Simple Views, but with
| | 00:58 | a few more options.
| | 00:59 | In fact, we can create an exact duplicate
of our Simple View using only this screen.
| | 01:04 | I am going to call this Newest tours.
| | 01:08 | The content will still be only
those of type Tour, and it's going to be
| | 01:13 | sorted by newest first.
| | 01:15 | It will create a page.
| | 01:17 | And the thing that I am going to change
here is just so that it's easy to tell
| | 01:20 | which one we're working with, whether
it's the Simple View or the Regular View.
| | 01:23 | I'll call it newest-tours-using-views.
| | 01:24 | This will be an unformatted
list of full posts, without links--
| | 01:33 | we don't want people to comment
on our posts--and without comments.
| | 01:41 | Go down a little bit and save and exit.
| | 01:43 | So here is our newest-tours-using-views, and if
I want to, I can compare that to our new-tours.
| | 01:50 | I'll just a create a new
window here, go to new-tours.
| | 01:54 | So this one was created using Simple
Views, and this one was created using Views.
| | 02:01 | As you can see, they're exactly the same.
| | 02:04 | Now we're going to go back and
change the way the page appears in a
| | 02:07 | few interesting ways.
| | 02:09 | To do that, once again, I go up to
Structure and down to Views, and there is
| | 02:15 | the view I created. I click Edit.
| | 02:18 | The first thing I'll change is instead
of showing the whole node--that is, all of
| | 02:21 | the information about the tours--
| | 02:23 | I'm just going to show a few select fields.
| | 02:26 | To do that, we click Edit Page details.
| | 02:28 | This interface is nearly identical to
the full version of Views that you get if
| | 02:32 | you download Drupal and
host it on your own computer.
| | 02:35 | Scroll down a little bit, and the first
thing we'll change is from Content to Fields.
| | 02:40 | That lets us break up
what's actually shown. And Apply.
| | 02:44 | We have several options here, and
I am just going to say okay, Apply.
| | 02:48 | As I say, the full version
of Views is extremely complex.
| | 02:52 | Down below all of these settings you'll
see a preview. This shows you what will
| | 02:55 | happen if you were to save now
and then go back to that page.
| | 02:59 | I am going to add a few fields.
| | 03:00 | Right now all that we have
is the Title. So I click Add.
| | 03:04 | And then we have a very long list of
all of the things that we could add.
| | 03:08 | Some of these are specific to the
content itself; some are related to the user
| | 03:12 | who posted the content; and so forth.
| | 03:14 | You can filter as you see by choosing from
the pop-up menu here or by typing in here.
| | 03:19 | One thing I'll look for is length--
| | 03:21 | I want to show not only the title of the tour,
but how many days it is--and also the price.
| | 03:25 | So length, I'll add that, and I'll keep
all the default information and just Apply.
| | 03:33 | Then I am also going to add the price.
| | 03:37 | Once again, I'll search for price here,
and Add and configure fields. Now I'll
| | 03:43 | accept the defaults.
| | 03:44 | As I scroll down now, I see a
little bit more information.
| | 03:50 | You have a lot of control
over exactly what you show.
| | 03:53 | To make this a little more
attractive, I am going to change the FORMAT.
| | 03:56 | Instead of it being an
unformatted list, I'll turn it into a table--
| | 04:00 | that's a very popular one for views. Apply it.
| | 04:04 | We have once again more options.
| | 04:06 | For example, you could sort it by all of
these different things, by clicking the
| | 04:09 | SORTABLE button, and Apply.
| | 04:11 | Let's scroll down and see what
that looks like. Quite nice, right?
| | 04:16 | And in fact, as you see, we can sort
by price and by length and so forth.
| | 04:21 | I am going to add one more field,
which is going to be a photo.
| | 04:25 | You might remember some of these
have a photo associated with them.
| | 04:28 | Click Add, do a search for photo, and
add it. And here because it's an image, we
| | 04:36 | have very different options available.
| | 04:38 | I am going to make this just a thumbnail,
a little tiny one, and I'll link it to
| | 04:42 | the node itself, to the content.
| | 04:44 | Apply, scroll down.
| | 04:47 | It's quite a nice look now, isn't it?
| | 04:50 | And you can go on and do so many other things.
| | 04:52 | For example, you can rearrange the
fields to put them in a specific order,
| | 04:56 | you can change exposed filters so people
can choose what they see, and so forth.
| | 05:02 | Before I do anything else, I am going
to go back up to the top and click Save.
| | 05:06 | This is the part that many people forget
when doing Views, because it looks like
| | 05:09 | you're doing so much, but actually it
doesn't get saved until you click Save.
| | 05:14 | Then it becomes permanent. Great!
| | 05:17 | One other thing that you can do with
Views is you can add a block, or several
| | 05:21 | other types of displays.
| | 05:23 | To do that, go up to Add > Block.
| | 05:29 | The Block name will be Our latest tours.
| | 05:33 | This is what shows up on the block's
Admin page, which you learned about in
| | 05:37 | the video about blocks.
| | 05:39 | As we scroll down, we can see
what it's going to look like.
| | 05:42 | It's got quite a few fields for a block
actually, and we can change that if we want.
| | 05:49 | To do that, you would click on any
one of the fields and change it from all
| | 05:52 | displays to just this block.
| | 05:54 | That overrides so that it breaks it
away from the template that's set up when
| | 05:59 | you created the page.
| | 06:00 | Now, you'll notice this is italicized.
| | 06:02 | That means it's different from the default.
| | 06:04 | In other words, you can now change
things, like removing the photo and the length
| | 06:08 | and the price, and in fact,
I am going to do that.
| | 06:09 | I'll remove it here.
| | 06:12 | We see that we only have three fields
now, whereas if we switch the page, we
| | 06:17 | have our original four.
| | 06:19 | Going back to the block, I'll remove also
the length and the price, just to keep it easy.
| | 06:31 | And finally we go back up to Save.
| | 06:36 | Now let's see how that looks.
| | 06:37 | If we click on Page, you
can go directly to the page.
| | 06:41 | I'm going to do that and Ctrl+Click so
that I can open it in a new tab up here.
| | 06:45 | There is our Newest tours, and you
can see compared to the old Simple View,
| | 06:51 | it's much easier to look
at a large list of tours.
| | 06:54 | Going back to that block, we can make that
visible by clicking Structure > Blocks.
| | 07:00 | If we scroll down to our Disabled
Blocks, we see the one that we just
| | 07:06 | created, Our latest tours.
| | 07:08 | I am going to put that in the right-
hand sidebar, which is known as sidebar B,
| | 07:11 | scroll down to the bottom, and Save.
| | 07:16 | We'll close out the
overlay and see how that looks.
| | 07:18 | If we scroll down, there it is.
| | 07:22 | It's in the right-hand sidebar, just as
we wanted, with only the titles, while
| | 07:25 | the page itself shows all of this information.
| | 07:28 | Now, there is your introduction to Views.
But I don't want two features on our
| | 07:33 | site that essentially do the same
thing, that is, show this list of tours.
| | 07:36 | So I am going to go back and delete the
view we just created, leaving only the
| | 07:39 | Simple View we created earlier.
| | 07:41 | When I do, the block and page
displays that are part of it will
| | 07:45 | automatically disappear.
| | 07:46 | So I go up to Structure, and
Views, over to edit, and delete.
| | 07:56 | Click delete, and we're done.
| | 07:59 | When I close out the Overlay, we get
told that we can't go to that page because
| | 08:03 | of course that was displaying
the view that we just deleted.
| | 08:05 | So I'll just go back to our homepage.
| | 08:07 | When Acquia created Drupal Gardens, only
Simple Views was available, and it was good enough.
| | 08:15 | At the time, the Views interface was
simply too difficult to use, so the company
| | 08:19 | figured it would be better to avoid all
of the support questions they'd get by not
| | 08:23 | including the Full Views module.
| | 08:25 | But very much to their credit, Acquia
funded development to make the interface
| | 08:29 | easier, then gave those
improvements back to the Drupal community.
| | 08:33 | That's really admirable.
| | 08:35 | Not only do you benefit as a Drupal Gardens
user, but everyone who uses Drupal benefits.
| | 08:40 | As this little peek showed
you, Views is a huge subject.
| | 08:44 | In fact, Lynda.com has an entire course
that's mostly about it, called Drupal 7:
| | 08:49 | Reporting and Visualizing Data.
| | 08:51 | That's a good place to start if you
want to know how to rearrange content you
| | 08:54 | already have to create
some amazing data collections.
| | Collapse this transcript |
| Creating image galleries| 00:00 | Image and video galleries are obviously
most important on web sites with pretty
| | 00:05 | pictures to show off.
| | 00:06 | I think our Explore
California site is a perfect example.
| | 00:10 | I mean how better to get across the
grandeur of the state. So, let's do it.
| | 00:14 | A gallery is simply a content type,
but it's sort of a complex one because it
| | 00:19 | contains all of these images in one gallery.
| | 00:22 | To create one though, it's very simple.
Just go up to Add content, like any other
| | 00:25 | content type, and select the Gallery.
| | 00:28 | Now this is the gallery itself.
| | 00:30 | It's not the images that go into that.
| | 00:32 | We'll add that after the gallery is created.
| | 00:34 | I'll call this one "Visions of California"
and for the description, "Our great state
| | 00:42 | as seen through many lenses." How is that?
| | 00:45 | I'm not going to change any of the settings.
| | 00:47 | I'll come back and do that later,
and you'll see many of the different
| | 00:50 | options that you have.
| | 00:51 | For now I'll just click on Save.
| | 00:53 | There. It's created. But as you see, there
are no pictures in it. To add them it's
| | 00:58 | very simple; just click Add Media,
and then you'll drag files here.
| | 01:03 | In order to do that, I'm going to make
this window smaller and drag it out of
| | 01:06 | the way, and I'll take my sample files
here, select them all and just drag them in.
| | 01:11 | Now, I'll go back, enlarge my
Window again and click Start Upload.
| | 01:19 | As those files upload, Drupal Gardens
tells you about how much longer it'll take
| | 01:23 | for those to upload.
| | 01:24 | We have a fast connection, so
it doesn't take long at all.
| | 01:26 | And then there we are.
| | 01:27 | We actually have our gallery.
| | 01:29 | I can show you what that looks like in
another browser, by just copying the URL,
| | 01:34 | and then I'm going to launch the Google
Chrome browser, which we are not logged
| | 01:37 | into Drupal Gardens on--
| | 01:39 | just so we could see what a visitor
would see when they went to that page. And
| | 01:43 | there it is. Very, very simple.
| | 01:45 | And let's go back and do a few other things.
| | 01:49 | The first thing that you'll notice
is that Drupal Gardens added this
| | 01:53 | Galleries menu up here.
| | 01:54 | Now, you could remove that if you want.
| | 01:56 | It's just a simple menu item in the main menu.
| | 01:59 | And for details on how to remove it
watch the video about understanding menus.
| | 02:04 | When you click that Galleries link, you see
all of the galleries that are in your site.
| | 02:09 | In our case, we only have the one,
and it says us how many images are there, and
| | 02:13 | it shows the first image in that gallery.
| | 02:15 | When we click on it, once
again we go back to our gallery.
| | 02:20 | But we could add things
other than photos to this;
| | 02:23 | we could add YouTube videos, for example.
| | 02:26 | To do that, once again, we just go to Add
Media and then click on in Embed image or video.
| | 02:31 | Now if we had uploaded something
previously, it would be in the library.
| | 02:36 | In my case, I'm going to re-embed a video that I
put in the library and then took it out again.
| | 02:39 | You might remember as this
Explore California Weekly Podcast.
| | 02:45 | Go ahead and paste it into that video
URL and submit. Then once the page
| | 02:50 | redisplays, you'll see we now have
nine items: eight images, and one video.
| | 02:56 | Something that's really need about
this galleries is that you don't have to
| | 02:58 | leave them in their default configuration.
| | 03:00 | Let's say, for example, that I want to
move this video up to the top. Just grab
| | 03:04 | the little compress icon and drag it up there.
| | 03:08 | You can also edit these individual
images in movies by clicking on the little
| | 03:11 | widget here and selecting Edit.
| | 03:14 | Once there, you can add a description,
add tags, and even remove it by clicking
| | 03:19 | on this tab right up here.
| | 03:20 | I'm just going to save it and leave it as it is.
| | 03:24 | Finally, you can change the behavior
of all of the galleries on your site. To
| | 03:29 | do so go up to Configuration and
scroll down to Gallery settings, which is
| | 03:34 | under the Media group.
| | 03:37 | Some of the options that you could
change include where all of the galleries
| | 03:41 | appear--that is, what the URL is--what
the default layout is for each gallery, and
| | 03:46 | how titles show up, whether it's shown
when they hover or they're below, or just
| | 03:50 | show no title at all.
| | 03:51 | I'd want to go back to my gallery
actually and make a few more small changes.
| | 03:56 | If we click Edit Gallery here, we see
a page very much like what we saw when
| | 04:00 | first created the gallery.
| | 04:02 | For example, we can change the number of
columns, so let's make it 3x3 instead of 4x3.
| | 04:08 | Again, we can change where the title shows up.
| | 04:11 | We can make it possible to either
download or not download the original image if
| | 04:14 | you want to protect the copyright and
prevent it, to some extent, from being
| | 04:18 | passed around on the Internet,
| | 04:19 | although of course it's quite
impossible to completely prevent that.
| | 04:23 | You can just make it a little bit more
difficult by unchecking Allow Downloading.
| | 04:27 | I'm going to leave the other settings
alone and just change it so we can see it
| | 04:30 | is a 3x3 grid, and there it is.
| | 04:32 | And as you can see, there it's
slightly bigger than in the 4x3 grid.
| | 04:35 | I just have to say that galleries are one
thing that Drupal Gardens really got right.
| | 04:40 | They're just so easy to set up, and the
effect is so wonderful, especially on a
| | 04:44 | picture-rich site such is ours.
| | Collapse this transcript |
|
|
3. Site StructureWorking with blocks| 00:00 | For most of this course we've been
dealing with the content that appears in
| | 00:03 | the center of the page and ignored all of
the stuff that's floating around the edges.
| | 00:08 | This video talks about that edge stuff,
which is contained in something called blocks.
| | 00:14 | These blocks in turn are
placed in blocks regions.
| | 00:17 | You can put three kinds of things in blocks.
| | 00:20 | First, there's static content
such as text and pictures.
| | 00:24 | Second, there's dynamic content, such
as you'd create with simple views as you
| | 00:28 | learned in an earlier video.
| | 00:29 | Finally, Drupal Gardens automatically
creates a few special blocks that are
| | 00:33 | available for placement right away.
| | 00:35 | As we look through our page, we can
see some of these blocks regions, scroll
| | 00:40 | down a little bit and you see, this is the
main region, where our main content goes.
| | 00:45 | This left area is called sidebar A;
| | 00:48 | the right area is called sidebar B.
But there are many, many more.
| | 00:51 | There is these down at the bottom.
| | 00:53 | There are some up at the top.
| | 00:55 | In fact, there are about 20 block
regions, although only about eight have
| | 00:59 | blocks in them right now.
| | 01:00 | There are two ways to see all the
block regions, one of them is to go to a
| | 01:04 | Documentation page on the Drupal Gardens site.
| | 01:07 | That's at regions.drupalgardens.com, and here we are.
| | 01:11 | As you can, there's a lot of stuff there
that we don't have showing on our site.
| | 01:16 | The other way is by going to
your site's Block Management page.
| | 01:20 | We'll go back to our site and go there
by going to Structure and Blocks, and
| | 01:25 | then clicking on this link toward
the top, Demonstrate Block Regions.
| | 01:30 | All of these yellow bars demonstrate,
more or less, where these Blocks are.
| | 01:34 | Remember those three columns at the top?
| | 01:36 | Well, here they are, in our own theme.
| | 01:39 | When you're done looking at the block
regions, just click on this Exit block
| | 01:42 | region demonstration, and that takes
you back to your list of block regions.
| | 01:47 | Each section of bold text here
corresponds to one of those block regions, so we
| | 01:51 | have the Header, Navigation Area,
Highlighted Content, and so on.
| | 01:56 | I mentioned Sidebar A, which is a lot
of stuff in it, and Sidebar B, and you
| | 01:59 | might remember that we had added some
things into the earlier on in the course.
| | 02:04 | Toward the bottom are all of the blocks that
are available but are not yet in a block region.
| | 02:09 | They are in this Disabled area.
| | 02:11 | By the way, I want to mention that
these block regions are standardized
| | 02:14 | throughout Drupal Gardens, so if you
create something in the Campaign theme and
| | 02:19 | then change to a different theme altogether,
your items will stay in their block regions.
| | 02:23 | That's a real boon, because it's
not true among contributed themes for
| | 02:27 | core Drupal, generally.
| | 02:28 | That is, if you self-host Drupal, not
using Drupal Gardens, but just put it on
| | 02:32 | your own server and you start
downloading all these themes,
| | 02:35 | you might find that blocks disappear
as you change from theme to theme, but
| | 02:39 | you don't have to worry about that in
Drupal Gardens, which I think is just terrific.
| | 02:42 | Anyway, let's get back to our blocks.
| | 02:44 | When I am working with them I like to
open up a few windows. The first one shows
| | 02:49 | this Block Administration page,
so I can move things around.
| | 02:53 | The second, which I'll open by right-
clicking and choosing it in a new tab, is to
| | 02:57 | show where those block regions are.
| | 02:59 | The third page I'd like to show is just the
homepage and, again, I'll open that in a new tab.
| | 03:04 | This way I can see the immediate
effects of what I change on this Block page,
| | 03:08 | as well is where those block regions are,
very quickly just by moving from tab to tab.
| | 03:13 | Now, there are a few different ways that I
can move blocks from one region to another.
| | 03:17 | Let's say, for example, that I want a
move that rotating banner that's at the
| | 03:21 | top from the Banner area into,
let's say, Precontent second.
| | 03:26 | Well, I could just grabbed that
little compass-like icon and drag it down.
| | 03:30 | When I do that, you'll notice that it
changes on the pop-up menu, and it also
| | 03:34 | shows this little orange asterisk.
What that means is that I have to save the
| | 03:38 | page, or I'll lose that change.
| | 03:40 | If I were in fact to close this out by
clicking on this X, it would not move.
| | 03:44 | In fact, that's what I'm going to do,
because I don't really want to move this.
| | 03:48 | And you see that page redraws,
and this banner up here doesn't actually move.
| | 03:51 | I'll go back by going to Structure and Blocks.
| | 03:55 | Another way to move things around, as
you might guess, is by changing it in this
| | 03:59 | region pop-up menu itself. Again, go
back to that Rotating Banner and move it to
| | 04:05 | Preheader First, for example.
| | 04:07 | It jumps up to that area, and once
again we see our orange asterisk. And again,
| | 04:12 | I'm not going to save that.
| | 04:13 | I am just to bring it back to the Banner area.
| | 04:17 | Another way to change things on a block is
by going to the block itself and editing it.
| | 04:21 | You can do that in two ways, either
by hovering your cursor over the block
| | 04:26 | itself until you see the widget and
then click it and change Configure Block.
| | 04:31 | In the page that you get to, you'll
see Region Settings, and there you can
| | 04:35 | choose from the list here of what
region you want it to be in, or remove it
| | 04:39 | entirely by changing it to None.
| | 04:42 | You can also get to that Block
Configuration page, once again, by going to the
| | 04:45 | Block page > Structure > Blocks and
clicking the Configure link next to
| | 04:51 | whichever block you want to change.
| | 04:53 | Now that you know how to move blocks
around, let's look at some of those that
| | 04:56 | Drupal Gardens provides
but keeps disabled by default.
| | 05:00 | Scroll down to the bottom here to our
Disabled region, and we see Active Forum
| | 05:05 | Topics, Author Information, Add This button.
| | 05:09 | The best way to learn about these is
really to start implementing them in your
| | 05:12 | site, particularly when you have a lot
of stuff on your site already, because
| | 05:16 | some of these things only become
relevant when they are displayed in your
| | 05:19 | content, or when you have a
lot of comments coming in.
| | 05:22 | For example, right now, if we go back
or front page, we have a block over here,
| | 05:29 | Comments, but no comments are available,
so there's really not much reason for
| | 05:33 | it to show. And in fact,
it doesn't tell us anything.
| | 05:37 | In fact, I'm going to remove this one
by clicking Configure Block, going to our
| | 05:41 | Region Settings and going to None and saving.
| | 05:46 | One block that I actually like to add
is the Recent Content block, which again
| | 05:51 | starts out as disabled.
| | 05:52 | I am going to put that let's say into
sidebar A. Now when I do that it, jumps up
| | 05:58 | to Sidebar A, but since there's a lot
of stuff there, I'm never really sure
| | 06:01 | where it's going to put it.
| | 06:03 | It might be at the top or the bottom
or the middle, so I'll just go down and
| | 06:06 | save and make sure that I like the
way that it looks. And there it is.
| | 06:14 | Although it said that it was at the top
before, it actually ended up in the middle.
| | 06:18 | Now let's add a dynamic block that
we created earlier with simple views.
| | 06:22 | That block was called Newest Tours.
| | 06:24 | I'll go up to Structure and Blocks once
again, and down toward Disabled region.
| | 06:32 | And there's our Newest Tours Block. Go
and I'm also going to put that one into
| | 06:37 | sidebar A. Go down and save.
| | 06:39 | Then actually, instead of closing
this out, I am going to go to my homepage
| | 06:46 | right there, and reload it.
| | 06:48 | Now when I scroll down, I see recent
content which I put there, and then at the
| | 06:53 | bottom Newest Tours, just as we would expect.
| | 06:55 | This is a good time to take a look at
what else is on this page and decide
| | 06:58 | what we really want.
| | 07:00 | You know, I think I am going
to remove this sample gallery.
| | 07:02 | We don't need it there, and
again, it's just a sample.
| | 07:05 | So, Configure Block, move it
out of sidebar B, and it's gone.
| | 07:13 | There is one thing that I want to warn
you about blocks: not every one fits into
| | 07:18 | every block region well.
| | 07:20 | Let's go back down here to that Newest
Tours, for example, which looks so good
| | 07:23 | in sidebar A. I am going to configure
it, and let's move it up into say, the
| | 07:28 | header region, go down and save it. Hey!
| | 07:32 | It really kind of clutters up the
header region there, so I am going to bring
| | 07:38 | that right back down and put
it in sidebar A once again.
| | 07:43 | And what you'll find is that a lot of
those ones at the very top and bottom
| | 07:46 | of the screen actually change the look of
the block quite a bit. So don't just decide, oh!
| | 07:51 | This will look good there,
| | 07:52 | this will look good there, because the
typefaces will actually change depending
| | 07:56 | on the design of the theme.
| | 07:58 | Go back and save the block.
Put it back to where it was.
| | 08:01 | Now, at the beginning of this video I
said there were three kinds of blocks.
| | 08:06 | They were those provided by Drupal Gardens--
which you already saw, such as Recent Content--
| | 08:11 | dynamic blocks, such as the one you saw
are created by simple views--that Recent
| | 08:15 | Tours--and static blocks
that you create explicitly.
| | 08:18 | I am now going to going to
create one of those static blocks.
| | 08:21 | To do that, I go back to my
Blocks administration page.
| | 08:24 | I could do that again by just going
to that tab or clicking Structure and
| | 08:27 | Blocks, and then say Add block.
| | 08:32 | Block Description, I am
going to say "Need guidance?"
| | 08:35 | I'll make that the block title as well,
and then, in the Body, I'm going to add
| | 08:42 | "Need help finding your way around?
| | 08:48 | Write for one-on-one help," and then
for this Write for one-on-one help, I am
| | 08:55 | going to link that to our Contact page, which
incidentally is at /contact, in Drupal Gardens.
| | 09:01 | You'll learn more about that in
the video "Setting Up Contact Forms."
| | 09:05 | Click on the link here and make it
/contact. There. Go down and change its
| | 09:17 | region so it shows up in sidebar
A. Scroll to the bottom and Save.
| | 09:23 | Let's take a look at what that looks
like by going back for homepage, clicking,
| | 09:28 | and scrolling down. There it is!
| | 09:33 | It does show up at the bottom, however, so
I am just going to move that up to the top.
| | 09:37 | I think it is important enough.
| | 09:38 | I do that by going down here, grabbing
its little compass, dragging it up to
| | 09:42 | the top, and saving.
| | 09:48 | Close that out, and there it is.
| | 09:52 | You know, blocks are a tough subject to teach.
| | 09:55 | On one hand they're vitally important
for defining how people experience your
| | 09:59 | sites, so I wish I could teach them first.
| | 10:01 | But on the other hand you need to
understand a lot of Drupal concepts first,
| | 10:05 | about nodes and such,
before blocks make any sense.
| | 10:08 | But now you know the basics of block management;
| | 10:11 | we haven't really gone deeply into the
configuration pages, or for example
| | 10:15 | you can change settings so the block
only shows up on certain pages or to
| | 10:19 | certain kinds of users.
| | 10:20 | If you want to know more of those
details, the Drupal Essential Training
| | 10:24 | course is the place to go.
| | Collapse this transcript |
| Setting up rotating banners| 00:00 | We have been staring at our site's
front page since we installed it from the
| | 00:03 | Campaign template about a dozen videos ago,
| | 00:06 | so I am sure you noticed this big
giant area right at the top of the page.
| | 00:10 | This is called a rotating banner,
and it's a great way to highlight several
| | 00:14 | parts of your site in a single
space with a lot of visual impact.
| | 00:18 | Now originally, when the site was
installed it rotated between headline 1 and
| | 00:22 | headline 2 every few seconds.
| | 00:24 | I changed that earlier, so
it wouldn't be so distracting.
| | 00:27 | Now we are going to add our own rotating
banner back in, with our own graphics and text.
| | 00:31 | A rotating banner is simply a block, and
you can place it in any block region, as I showed
| | 00:36 | you in the video about using blocks.
| | 00:38 | To get there, we will go
up to Structure and Blocks.
| | 00:43 | Right now, that banner is
in an area called Banner.
| | 00:45 | I'm going to take the one that's there
right now and hide it by moving it from
| | 00:49 | Banner into None, then going down and saving.
| | 00:56 | Now, when we go back to our front
page, as you can see, after the page
| | 00:59 | reloads, it's gone.
| | 01:01 | Okay, now let's go back and create
our own. Click Structure and Blocks.
| | 01:07 | Here near the top of the screen you see
Add Block and Add a Rotating Banner. Of
| | 01:11 | course, I will choose the
Rotating Banner and give it a title.
| | 01:15 | We will call this "Front page banner."
| | 01:19 | This isn't shown to anybody who visits the site;
| | 01:21 | it's only for administrative
purposes. Then click Create.
| | 01:25 | I am now going to add a few graphics to
this banner. These images are from the
| | 01:30 | exercise files for this course, which
you should have if you are a premium
| | 01:34 | member lynda.com or
received this course on a disc.
| | 01:37 | I have them here on my desktop.
| | 01:38 | First, I will click Add a new slide to
this banner, and then Choose banner image,
| | 01:46 | and then navigate to where you have the files.
| | 01:48 | I have them on the desktop
in my exercise files here.
| | 01:50 | I'll add this first one, beach_houses,
and click Upload. There you have it.
| | 01:59 | Now, you'll notice that with each
graphic you have an option to put in several
| | 02:02 | pieces of text, headline and text, down here.
| | 02:05 | You could type it in here if you want,
or if you go further down the page, I
| | 02:09 | actually find it easier to
type into these text areas.
| | 02:13 | Now when I go back to my Desktop, I have
some text already put together for this.
| | 02:18 | So I'm going to just copy and paste that.
| | 02:20 | I will make the headline, "Beach
houses on the coast," and I think I just
| | 02:27 | won't put in any text;
| | 02:28 | I will have only a headline for these.
| | 02:30 | Now when I do that, I'll scroll back
up, and I can see what it looks like.
| | 02:33 | It looks pretty good to me.
| | 02:35 | So then I will click Save.
| | 02:36 | I will continue doing this with the
other three graphics that I have, and I will
| | 02:41 | just do this very quickly.
| | 02:43 | Choose a banner image, Browse > golden
_gate > upload, go back, get my text.
| | 02:54 | Again, you can click up here if you
prefer, but it's a little bit harder to get
| | 02:58 | a hold of the text that you
have there, as you can see.
| | 03:01 | So I will just continue using the text
area like this. Scroll down and Save.
| | 03:07 | Just two more to go. Choose the
banner image > Browse > ventura.
| | 03:15 | Now while it's uploading, you
can go back and grab your text.
| | 03:18 | You don't have to wait for it to
finish to go to a different program.
| | 03:21 | Paste it in, remove the text, save and
almost done. One more. And there we go.
| | 03:44 | We now actually have our rotating
banner completely done, and we could leave
| | 03:47 | it exactly as it is.
| | 03:49 | But remember, it's in a block, and it
won't show up anywhere on the page until
| | 03:52 | we'll put that block into a block region.
| | 03:54 | I am going to do that right now on the
page here, or of course, you could go
| | 03:58 | back to the Block Administration page.
| | 04:00 | I am going to that back into the
area we had before, which is Banner, and
| | 04:04 | scroll down and save.
| | 04:07 | Let's go to our front page and see
what that looks like. Give it a moment to
| | 04:10 | redraw, and there it is.
| | 04:13 | Now with these rotating banners, you
could just wait for a while for it to
| | 04:17 | change from graphic to graphic, as it
does there, or the user can click on these
| | 04:22 | buttons and move them manually.
| | 04:24 | Now, there are more options
that you have with this banner.
| | 04:29 | Let's go back to our Banner
Setting page and see what they are.
| | 04:32 | To do so, you could go back to
Structure and Blocks and then click Configure
| | 04:35 | next to the block itself, or the
faster way is just to click on this little
| | 04:38 | widget here to configure
block, and you are back at it.
| | 04:43 | Now once you have these images in, you
could go back and edit them if you like,
| | 04:46 | to change the text, for example.
Or you could change some certain other
| | 04:50 | things, such as where the
text appears on the graphic.
| | 04:54 | Let's say, for example,
we didn't like it up here.
| | 04:57 | We thought it should be better over
on the right. Just change it top-right,
| | 05:01 | scroll down, and save.
| | 05:04 | Now when we go back to our
front page, we will see the result.
| | 05:08 | Notice that it doesn't
affect any of the other graphics.
| | 05:10 | It only affects that one, and that's
actually quite useful. For example, on
| | 05:13 | this Ventura one, we can see it's not quite as
easy to read, so let's go back in and change it.
| | 05:23 | Once again, we go there, and Top right.
| | 05:28 | So that's how you can change
individual graphics, but you can actually make
| | 05:32 | other changes as well to the entire
rotating banner, by scrolling down and
| | 05:36 | clicking on this Banner Settings link.
| | 05:39 | That exposes a lot more options.
| | 05:42 | I use graphics that were pretty well
prepared for this use, although there has
| | 05:45 | been a bit of cropping.
| | 05:47 | If your graphics vary in size, Drupal
Gardens can make them look kind of odd.
| | 05:51 | So you're best off making them all
consistent in an image-processing
| | 05:54 | program such as Photoshop.
| | 05:55 | If you don't know how to do that
already, of course, check out any of
| | 05:58 | lynda.com's many Photoshop courses,
such as "Photoshop Essential Training."
| | 06:03 | But if you're not able to do that for
whatever reason, you do have these two
| | 06:05 | options here, which will either shrink
the banner to fit the page or will make
| | 06:10 | the banner the same size and change
the area that the banner is shown in.
| | 06:15 | You can also change what
kind of transition is happening.
| | 06:18 | Let's try a Fade instead, for example.
And you can change the length of time
| | 06:22 | between transitions.
| | 06:23 | I am going to make this much faster
I think it's a little bit too sleepy.
| | 06:28 | Finally, you can change what kind
of control moves between the slides.
| | 06:32 | I will change that the Numbers. Or if
you prefer, make it no control, which
| | 06:35 | will force people to wait the two
seconds. Scroll down to the bottom just to
| | 06:39 | see those changes, close out our overlay,
give it a moment to redraw, and there we are.
| | 06:46 | You see the numbers here, and you see
that it's switching much more quickly.
| | 06:51 | Now that you have seen how to do
this, I am actually going to hide this
| | 06:54 | banner block for now.
| | 06:55 | We are going to be working on a site's
design a lot in later videos, and we will
| | 06:59 | bring this banner back when we ready.
| | 07:00 | So once again, we can go up to
Structure and Blocks--or of course, we could've
| | 07:05 | clicked on that widget--go down to the
Banner area and hide it again by moving
| | 07:09 | it to None. Then Scroll down and click Save.
| | 07:16 | It really is a nice effect though, isn't it?
| | 07:18 | As I mentioned earlier, you
can do it in any block region.
| | 07:21 | So don't feel that you have
to stick with the site design.
| | 07:25 | It's a kind of an effect where a little
goes a long way, so do be judicious in its use.
| | 07:29 | Too much, and your site gets a little confusing.
| | 07:32 | That's a kind of circus-like feel,
with too much going on all at once.
| | 07:35 | But I think it is right for our site,
since the way we are using it shows
| | 07:39 | off the variety and spectacle of
California while enticing people to click
| | 07:43 | and learn more.
| | Collapse this transcript |
| Understanding menus| 00:00 | If you look at our site like a
storefront, we're not quite ready to open yet.
| | 00:05 | We stocked our inventory with text,
graphics, videos and maps, but we still
| | 00:09 | don't have any signage, so people
don't know how to find anything.
| | 00:13 | Adding some menus will make our site
a lot more visitor-friendly and better
| | 00:17 | showcase what we have.
| | 00:19 | That's what this video is all about.
| | 00:20 | When you first create your site on Drupal
Gardens, there are already two menus on the page.
| | 00:26 | There is this Main menu right
here and the User menu right here.
| | 00:30 | You can tell that they are menus by
clicking on the little widget here.
| | 00:33 | In addition to Configure block, you
also have Edit menu and List links, both of
| | 00:38 | which are specific to menus.
| | 00:40 | By contrast, if you go down to any other
sort of block--this one is from a feed--
| | 00:44 | you get different options: Configure
block, sometimes you'll get some other
| | 00:48 | things like Edit view.
| | 00:49 | So you can edit a specific menu by going
up and using that contextual menu link,
| | 00:55 | or you can edit all of them by going up
to Structure and then clicking on Menus.
| | 01:01 | Here we see all of the menus that
come by default in Drupal Gardens.
| | 01:05 | Again, I mentioned Main menu and
User menu, but there are also these two:
| | 01:09 | Management and Navigation.
| | 01:11 | Let's click on List links,
just to see what's in those.
| | 01:15 | The Management menu contains Dashboard,
Content, Structure, and so on, and that
| | 01:20 | might sound familiar to you, because it's
actually what's in the toolbar up here at the top.
| | 01:24 | The Management menu controls what shows
up in the toolbar, but like every other
| | 01:29 | menu, it also appears in a block.
| | 01:31 | We could take a look at these menus by
going to the Blocks Administration page.
| | 01:35 | To do so, you go up to Structure and
then Blocks, and we discussed this quite a
| | 01:39 | bit in the video about working with blocks.
| | 01:42 | Now as we scroll down, we see the User
menu is already in that Preheader second area.
| | 01:46 | That's right. That's the one up here on the right.
| | 01:49 | The Main menu is in the Navigation area
and then down at the bottom, we have all
| | 01:54 | of our disabled blocks, which
include Management and Navigation.
| | 01:59 | So if you wanted to, you could move all
of these options into any block area on
| | 02:03 | your page: the left column, the right
column, the bottom of the page, and so on.
| | 02:08 | But I do want to warn you: don't just
move a block somewhere and walk away
| | 02:12 | without checking it out.
| | 02:13 | Make sure that it works in the target
region, because some blocks simply don't
| | 02:17 | look right when you move them around.
| | 02:19 | For example, you might end up with
white text on a white background, which
| | 02:22 | doesn't do anyone any good.
| | 02:24 | But let's move on and
actually start building our own menu.
| | 02:27 | To do so, once again, you go up to
Structure and Menus, and then up at the
| | 02:33 | top, click Add menu.
| | 02:35 | I am going to call this one "Explore
California," and I don't think I need a description.
| | 02:42 | Once again, that description only shows up
on administrative pages. Then click Save.
| | 02:48 | Now we've created the menu,
but there are no links in it yet.
| | 02:51 | It also doesn't show up anywhere on
the page, because it appears in a block,
| | 02:54 | which hasn't been placed in a block region.
| | 02:56 | Let's start adding some
links by clicking Add link.
| | 02:58 | I think the first one I'm going to
create is actually an offsite link.
| | 03:04 | I'll call it "State parks," and the
path will be http://www.parks.ca.gov.
| | 03:14 | I happen to know that
that's the State parks' site.
| | 03:17 | And for description, we'll say,
"Information about state parks."
| | 03:22 | Now that shows up when you
hover your cursor over the link.
| | 03:25 | We'll ignore the rest of the settings
for now and just click Save. Great!
| | 03:30 | So we have one link so far.
| | 03:32 | Just to show how that works, I am going
to move that block into a block region,
| | 03:35 | so we can keep an eye on
the menu as we build it.
| | 03:38 | To do so, go up to Structure and then
Blocks, and then scroll all the way down
| | 03:44 | to the Disabled blocks, because when
you create a menu, the block that it
| | 03:48 | creates remains disabled
until you put it somewhere.
| | 03:51 | And there is our Explore California
block, which I'll just put in sidebar A.
| | 03:57 | Scroll down to the bottom, Save Blocks,
and just to prove it's there, I'll
| | 04:01 | close out that overlay.
| | 04:03 | Once the screen redraws, we go down,
and there it is, down at the bottom. And
| | 04:08 | when we click on the link, of course
we would then go to the external page.
| | 04:12 | But let's go back and continue building
our menu by clicking Structure and Menus.
| | 04:18 | I'll just add a few more links by
clicking Add link here next to the menu.
| | 04:23 | Let's say, Related news.
| | 04:27 | The Path is going to be aggregator.
| | 04:30 | We covered what the aggregator page is
in the video earlier about subscribing
| | 04:34 | your site to RSS feeds.
| | 04:36 | Again, I don't really need a description,
and I'll leave things as they are, and save.
| | 04:40 | I am just going to create
two more. Click Add link.
| | 04:45 | It will be About us.
| | 04:49 | The path is about-us, and save.
And then one more, which is Our Mission, with
| | 04:59 | the path, content/who-we-are.
| | 05:03 | Let's just have a description there.
| | 05:05 | What makes us different?
| | 05:08 | Now the reason that I did this is I want
to show a little bit about the hierarchy.
| | 05:12 | So we have these four links, and you
might notice that Our Mission sort of fits
| | 05:15 | underneath About Us.
| | 05:16 | So I will actually pull it over,
so it's subordinate to About us.
| | 05:20 | You'll notice that as you drag these
around, you can make them subordinate to
| | 05:24 | each other, and in fact, you
could have multiple levels like this.
| | 05:27 | It takes a little bit of practice to
figure out exactly how to make them fit
| | 05:30 | underneath each other properly,
but eventually you get it. And I will leave it
| | 05:35 | just like that, so we have our
three levels with one sublevel.
| | 05:38 | Scroll down and save configuration.
| | 05:42 | Now, when we go back to our front page,
wait for it to redraw--now when we
| | 05:46 | scroll down, we can see our menu, and it
shows that there's something underneath About us.
| | 05:51 | In order to show what's underneath
About Us, we're going to have to go back
| | 05:54 | and edit that menu.
| | 05:55 | I'll do that simply by clicking on this
little widget here and Edit menu and List links.
| | 06:03 | Now this About us menu is what has to
change, because we need to expand it to
| | 06:07 | show that Our Mission.
| | 06:08 | Click Edit, scroll down, and
Show as expanded, then save.
| | 06:14 | Now let's take another look at that page.
| | 06:17 | Wait for it to redraw and scroll down.
| | 06:20 | Now we see all of the links in there.
| | 06:22 | There's something interesting
about the way that this works as well.
| | 06:26 | If you were to put this up into the
Navigation region--that is, up where the Main
| | 06:30 | menu is now, and you had this multilevel
sort of menu with the top one expanded,
| | 06:35 | it would show up as a dropdown menu.
And in fact, you could have dropdown menus
| | 06:39 | as much as nine levels.
| | 06:41 | The one thing you have to make sure
you do is to expand each level to show
| | 06:44 | the ones underneath it.
| | 06:46 | The last thing that I'm going to do
is I am going to hide that menu just to
| | 06:49 | keep our site clean. Scroll down, go
to that widget, and this time instead of
| | 06:55 | editing the menu, I configure the
block and then move it so that it's in no
| | 06:59 | region and save.
| | 07:02 | Now I have to admit that sometimes I'll
build a big site with features I am very
| | 07:06 | proud of and then forget to
make them easy to access with menus.
| | 07:10 | But it's really important that you
give people easy and obvious ways to reach
| | 07:13 | the parts of your site
you most want them to see.
| | 07:16 | Then if you want to be really thorough
about its usability, invite friends to
| | 07:20 | browse the site while you watch over
their shoulders, and adjust menu links
| | 07:24 | according to their behavior.
| | Collapse this transcript |
| Setting up contact forms| 00:00 | Now we have our site set up to tell the world...
well, whatever it is you want to tell it.
| | 00:05 | But we haven't talked about
giving the world a way to talk back.
| | 00:09 | This video looks at how you can
do that through contact forms.
| | 00:12 | Our site actually has one already, as you
can see when you click the Contact link.
| | 00:17 | When someone fills out this form, your
site sends a message to whatever address
| | 00:21 | you entered when you first created
this site, as you saw on the video "Getting
| | 00:24 | Started with Drupal Gardens."
| | 00:26 | That's the e-mail address of the
site owner, which in this case is me.
| | 00:31 | But right now that form
isn't as flexible as it could be.
| | 00:34 | Here's how to make it a little bit better.
| | 00:37 | To do so, go up to
Structure and down to Contact form.
| | 00:42 | There is one category
already set up, Website feedback.
| | 00:45 | That's the one that we saw already.
| | 00:47 | You can go over and edit it by
clicking on the Edit link here.
| | 00:51 | Here at the top, you enter the category.
| | 00:52 | I'll talk about that a
little bit more in a minute.
| | 00:55 | The second area is where you enter
recipients--that is, whoever it is you want
| | 00:59 | to receive the e-mails that are
sent through the contact form.
| | 01:02 | You can actually enter multiple e-mail
addresses here by simply putting a comma
| | 01:07 | after each one and then typing in the
rest of the e-mail addresses that you
| | 01:11 | want to receive it.
| | 01:12 | The third area here is an auto-reply.
| | 01:15 | That's something that gets sent back to
the person who enters information into
| | 01:19 | the contact form--that is, the sender--
and something that you might want to
| | 01:22 | enter there is "Thank you for your message!
| | 01:27 | We'll respond soon."
| | 01:30 | That just gives them a little bit
of feedback, so they know that their
| | 01:33 | message didn't go into a complete black hole,
and then we'll just go down and click Save.
| | 01:39 | But there's more to the contact form than that.
| | 01:41 | You can add other categories, so
instead of just having a simple website
| | 01:45 | feedback, you might have something--
since this is a California site, we could
| | 01:49 | say, "Ask a question about California,"
and then again the recipients could be
| | 01:55 | anyone you like. I'll just say admin@
example.com, and again you could put an
| | 02:00 | auto-reply here if you wanted.
| | 02:02 | "Thanks for your message!
| | 02:04 | We'll respond soon." And save it.
| | 02:08 | Now we'll come back to what the
Selected means and the Weight in just a second.
| | 02:12 | It's actually easier to see when we go
back to our list of different categories.
| | 02:17 | So now we have two different categories.
| | 02:20 | I am going to take another look at
the contact form and then come back here
| | 02:23 | and start monkeying with them, but I think
it'll be clearer when you look at the form itself.
| | 02:27 | We'll let the page reload,
and there is a new pop-up menu here:
| | 02:32 | Website feedback or Ask a
question about California.
| | 02:35 | And as you might guess, when I fill
out this form and select which one of
| | 02:38 | these categories, it determines which
recipients would receive that e-mail
| | 02:43 | sent through this form.
| | 02:45 | Before going on, I want to point out
one small difference between this form as
| | 02:50 | it's seen by an authenticated user--that
is, someone who is a member of your site--
| | 02:54 | and somebody who is just
visiting and hasn't become a member.
| | 02:57 | It's this little Send yourself a copy box.
| | 02:59 | I am going to switch over to Google
Chrome where I'm visiting the site as an
| | 03:03 | anonymous visitor--that is,
someone who's not logged in.
| | 03:06 | I will click the Contact button up here.
| | 03:08 | I see the same pop-up menu here.
| | 03:11 | I see a place for name and e-mail address,
although it's not filled out, since of
| | 03:15 | course the site doesn't know who this
anonymous visitor is. And there is no
| | 03:19 | check box down here to send
yourself a copy of the message.
| | 03:24 | The reasons for this should be obvious.
| | 03:26 | You don't want people using your
contact form as an anonymous e-mail server.
| | 03:30 | If you did, somebody could be malicious
by entering an enemy's e-mail address up
| | 03:35 | here and then putting in threatening
messages or whatever and then send message.
| | 03:39 | They won't be able to do that because
the only place an anonymous visitor can
| | 03:42 | send e-mail to is you.
| | 03:45 | But let's get back to
those different categories.
| | 03:48 | Once again, we go up to
Structure and Contact form.
| | 03:51 | Now you'll notice Ask a question about
California is at the top, and it's not selected.
| | 03:58 | I am going to change this.
| | 04:01 | So instead--it's a little bit further down--
| | 04:04 | I'll make it have a heavier weight.
| | 04:06 | These weights make it sort of sink like
a stone to the bottom of the ocean, and
| | 04:09 | I'll make it selected as
yes and then click Save.
| | 04:14 | What that did is it made at the second
option, but it's the one that's selected.
| | 04:19 | If we go back to our contact form,
it's still selected, but it sank to
| | 04:23 | the bottom of the form.
| | 04:25 | You can only have one
selected for obvious reasons.
| | 04:28 | When you change one of them to yes,
the other ones all change to no.
| | 04:32 | So now we have a contact form that
will direct e-mails wherever we want.
| | 04:36 | Take a look at the URL up here.
| | 04:38 | It's simply our domain/contact, and
sometimes it'll have the little Pound sign
| | 04:43 | here depending on where we came from,
but generally, it's just contact.
| | 04:47 | We can actually direct people to this
contact page from anywhere else on the
| | 04:50 | site we want by writing that as a URL.
| | 04:53 | You might remember we did that in an
earlier video about working with blocks.
| | 04:57 | And in fact, here's the block we
created with a link to this contact form.
| | 05:02 | If these contact links aren't enough for
you, there is one way to add one that's
| | 05:07 | even more prominent.
| | 05:08 | It requires turning on a
module called Gardens feedback.
| | 05:12 | I'll do it very quickly here, but if
you want to learn more about how to
| | 05:15 | enable and disable such features, see the
video about adding and removing functionality.
| | 05:20 | Very quickly though, just go up to Modules.
| | 05:23 | I'll scroll down to the Gardens
feedback module, which is fairly far down here,
| | 05:28 | turn it on and then Save configuration.
| | 05:33 | Now when I close that overlay, the
screen will redraw, and we'll see this
| | 05:37 | Feedback link over here.
| | 05:39 | Clicking that also takes
you to the contact page.
| | 05:42 | Finally, there is one last thing I'd
like to show you how to do, which is only
| | 05:46 | allow registered users to
access your contact form.
| | 05:49 | By default, Drupal Gardens lets
anybody who casually comes across your site
| | 05:53 | send you e-mail.
| | 05:55 | That's great from a customer
engagement point of view, but you might want to
| | 05:58 | make it more restrictive to prevent spam,
because there are spam robots that seek
| | 06:02 | out Drupal Contact forms and
simply send garbage through them.
| | 06:06 | You can fix that by taking away
anonymous members' permissions to send you mail
| | 06:10 | through the contact form.
| | 06:11 | I'll show you how to do that very
quickly, but a much better understanding of
| | 06:14 | users, roles, and permissions is in the
video about managing users and the one
| | 06:19 | about adjusting user permissions.
| | 06:21 | To get there, we go up to People and
Permissions and scroll down to Contact and
| | 06:28 | turn off the site-wide
contact form for anonymous users,
| | 06:32 | scroll to the bottom and click Save permissions.
| | 06:38 | Contact forms are an effective way to get
valuable feedback, but they're not the only way.
| | 06:44 | If you want to make things even more
interactive, consider also letting your
| | 06:47 | users talk to each other directly.
| | 06:49 | You'll learn how to do that in the
video about starting discussion forums.
| | 06:53 | Forums are much more heavyweight solution
because you have to keep an eye on them
| | 06:57 | to make sure they're not being abused.
| | 06:59 | Contact forms, by comparison, are pretty
simple, and they're trouble-free, and best
| | 07:04 | of all they are real sense to set up.
| | Collapse this transcript |
| Adding and removing functionality| 00:00 | You might remember back in the Getting
Started with Drupal Gardens video that we
| | 00:04 | could choose from among several site
templates which varied in which functions
| | 00:08 | they included, but the thing is you
only see those template choices when you
| | 00:12 | first set up a site. So I'll show you
how to turn those functions on and off
| | 00:17 | after your site is up and running.
| | 00:19 | First, let's start by taking
another look at those templates.
| | 00:22 | I am going to create a new site by going
up to My sites and then Create a new site.
| | 00:27 | We won't actually make this site. I just
want to show you sort of what it does.
| | 00:30 | And I'll call this explorercalifornia6, yup.
| | 00:35 | We could we can do that.
| | 00:36 | Click on Continue, and that brings us
to the Template page, which again you
| | 00:40 | remember from earlier.
| | 00:42 | Now on this page you can turn on
individual pages and blocks and see
| | 00:46 | exactly what they do by hovering
your cursor over them, or you could turn
| | 00:50 | on and off features.
| | 00:51 | Now we've talked about
what pages and blocks are.
| | 00:54 | You already know how to create those.
Features are what are called modules in
| | 00:58 | Drupal, and in order to turn those on
and off after you've installed your site,
| | 01:03 | you have to go to the Modules page.
| | 01:05 | I just get out of this and go back
to my sites, by clicking My sites and
| | 01:10 | explorecalifornia.drupalgardens and
then go up to the Modules button up here.
| | 01:16 | As you can see when you scroll through
this page, there are a lot of modules to
| | 01:20 | choose from, way more than we could
go into individually in this course.
| | 01:24 | Some of them are part of core Drupal--
that is, the basic version of Drupal you get
| | 01:29 | downloaded from drupal.org.
| | 01:31 | Somewhere written by individuals
for the community's benefit, and these
| | 01:34 | are called contributed modules,
and some were created by Acquia
| | 01:38 | specifically for Drupal Gardens.
| | 01:41 | Some modules, by the way, are hidden from
view. You don't see them on the screen.
| | 01:45 | You learn how to do that in the
video about exporting your sites.
| | 01:49 | You can learn more about those
core modules for my course Drupal
| | 01:52 | Essential Training.
| | 01:53 | All those core modules are listed up
here in the top in this group CORE.
| | 01:57 | We can hide that group by
just clicking on this link.
| | 01:59 | I mention that some of these modules
are contributed, meaning that they were
| | 02:03 | written by individuals and then
contributed to the community for their use.
| | 02:07 | The directory for those is
at drupal.org/project/modules.
| | 02:14 | For example, let's go back to our site.
| | 02:16 | As we scroll down, I see
something called AddThis.
| | 02:20 | Now I happen to know that that's a
contributed module, so we could search for
| | 02:24 | that on drupal.org, AddThis,
and there it is, AddThis button.
| | 02:30 | Now unlike core Drupal, you can't
actually install modules that you find
| | 02:34 | this way, but you can go there if you
want to get more documentation about
| | 02:39 | the feature, and you don't find enough
information on Drupal Gardens' own help resources.
| | 02:43 | Be sure to watch the video in this
course about getting help to understand more
| | 02:46 | about what these resources are.
| | 02:49 | Also, when we go back to the Modules
page, sometimes we'll see a little Help
| | 02:53 | link next to a contributed module. Clicking
that will give you a little bit more information.
| | 02:58 | Anyway, let's go back and talk a little
bit more about turning features on and off.
| | 03:03 | The mechanism is really pretty simple.
To turn something off, you would simply
| | 03:08 | uncheck its check box here, scroll
down to the bottom, and click Save
| | 03:12 | Configuration. But there's
something really big to watch out for.
| | 03:16 | When you turn off a feature and your
site already has content that depends on
| | 03:20 | that feature, turning it off might take
some of that content with it, or at least
| | 03:25 | it will take off temporarily.
| | 03:26 | One example is in that rotate banner
module, which we discussed earlier in the
| | 03:31 | course. But then if we were to turn off
this rotating banner module, that banner
| | 03:35 | would actually just disappear from the site.
| | 03:38 | Now it's still in the site's database, so
when we turn on that module again, it'll
| | 03:42 | probably show up again. But be careful
about that because it might not show up,
| | 03:47 | or it might show up with some
problems after you turn off the module.
| | 03:50 | The last thing I want to
mention is the Uninstall tab.
| | 03:53 | It's a holdover from regular Drupal,
where you can add your own modules.
| | 03:58 | Since you can't do that in Drupal
Gardens, I recommend that you leave it alone.
| | 04:02 | You generally can't do anything with it,
and if you can do something--such as here
| | 04:06 | to remove this feature--
it's usually not a good idea.
| | 04:09 | So it's obvious why you would want to
add features after installation, but why
| | 04:13 | would you want to turn them off?
| | 04:15 | Usually it's to clear up clutter on the
site and to make it more streamlined, but
| | 04:19 | before checking that box to disable the
module entirely, I recommend you take a
| | 04:24 | good look at the Modules configuration options.
| | 04:26 | There are couples of places you can
find those. One of them is on the Module
| | 04:29 | page itself, where if you look next to
the module you'll sometimes see these
| | 04:33 | Configure Links here.
| | 04:35 | Clicking those will take you to controls
that will let you turn things on and off.
| | 04:39 | Another place you might find them is
under the Configuration screen up here.
| | 04:42 | For example, let's take a look at the
AddThis module, which I mentioned earlier.
| | 04:47 | Instead of disabling the entire module,
I want to just take off the display on
| | 04:52 | node pages and then save configuration.
| | 04:54 | That's one way to turn off part of a
future without entirely disabling the module.
| | 04:58 | That's generally a better solution,
and it's less likely to have consequences
| | 05:02 | that you're not expecting.
| | Collapse this transcript |
|
|
4. Site MembershipManaging users| 00:00 | Opening your site for membership expands its
possibilities for interacting with the public.
| | 00:05 | Through membership people can
establish identities that let them carry on
| | 00:09 | processes from one session to the next.
So, for example, they can set site
| | 00:14 | preferences and have ongoing discussions.
| | 00:17 | First, I'll show you how you can
control who signs up to your site, then I'll
| | 00:21 | show you what the member sign up
procedure looks like from the user's point
| | 00:24 | of view, and finally I'll show you how you
as the site owner can invite people to join.
| | 00:30 | The first thing to do is to take a look at
how people are allowed to sign up for your site.
| | 00:35 | Those settings are under
Configuration and Account settings.
| | 00:39 | There are several settings here,
but the one that's most important is here, Who
| | 00:43 | can register accounts?
| | 00:45 | By default, anybody who comes to your
site is allowed to register an account.
| | 00:49 | Now, that doesn't necessarily mean
that they can do things on your site.
| | 00:52 | You define that with permissions,
as you'll learn in a later video about
| | 00:55 | permissions. But if you wanted to
restrict who can become a member, you could
| | 00:59 | choose only those invited by you, or
you could say that visitors can apply but
| | 01:04 | that you have to approve their application.
| | 01:06 | I am just going to leave it on Visitors for now.
| | 01:09 | So let's take a look at how somebody
actually might sign up for your site.
| | 01:13 | To do that, I am going to switch to the
Google Chrome browser, where I am looking
| | 01:16 | at the site as a visitor,
somebody who is not already a member.
| | 01:20 | By default, there is this link in
the left-hand column, Login or Register.
| | 01:25 | Clicking it brings up this little window.
| | 01:28 | If the person is already a member of
Drupal Gardens, they could simply enter
| | 01:32 | their username and password here,
and then your site would be added to their
| | 01:36 | list of sites that they're
allowed to access as a member.
| | 01:39 | If not they have to sign up as a
Drupal Gardens member by going through the
| | 01:43 | usual sign-up process.
| | 01:45 | I am going to call myself
califanjoe, and I have already set up an
| | 01:50 | e-mail address for that.
| | 01:51 | I would then read through the terms
of service of course and then click
| | 01:57 | Create new account.
| | 02:01 | In order to be sure that I have a true
e-mail address, instructions to complete
| | 02:05 | that application are sent to the
e-mail address I put in. So I'm going to
| | 02:09 | switch over to that e-mail account, and
there is the message I received, and I
| | 02:13 | simply click on the link--or in this
case I'm going to copy it--go back and
| | 02:18 | paste it into my browser.
| | 02:22 | I'm then allowed to log in
as my new user, califanjoe.
| | 02:26 | I then set my password and save.
| | 02:37 | I've now done two things. califanjoe is
both a member of Drupal Gardens and a
| | 02:43 | member of this explorecalifornia site.
| | 02:46 | To find out about that, I can go up as
califanjoe and click My Account, and here,
| | 02:51 | I see my membership on explorecalifornia.
| | 02:55 | Now let's go back to the Administrator
view and see what that looks like when we
| | 02:59 | look down the list of people.
| | 03:01 | I'll switch back over to my
administrator page. Then I click People up here.
| | 03:07 | I now see my new user, califanjoe. It shows
how long that person has been a member,
| | 03:13 | and I can go in and actually
edit their user profile if I like.
| | 03:16 | If I don't want them to be a member,
I could simply change this to Blocked
| | 03:21 | and then say Save, and that will stop them
from being able to access my site as a member.
| | 03:26 | But let's say that you as the
administrator would like to invite people to your
| | 03:30 | site--that is, you don't want to rely on
them going to the site and clicking the
| | 03:33 | link and going through all of the steps.
| | 03:35 | You can do that by clicking on People and
then clicking this link at the top, Invite people.
| | 03:41 | I happen to know another person who I
want to invite, califandan, and I know
| | 03:45 | their e-mail address.
| | 03:50 | You can then click Send invitations,
and they'll get a message very similar to the
| | 03:53 | one that you saw when you signed up
for the account on your own volition.
| | 03:57 | You can actually change the
message though by clicking this View/edit
| | 04:00 | invitation message.
| | 04:02 | Inside this message or a few what are
called "tokens," which are filled in with the
| | 04:07 | name of the site, and you see a list of
those tokens down here if you wanted to
| | 04:11 | change what the message said or
perhaps remove the name of the site or remove
| | 04:15 | the URL, things like that.
| | 04:17 | But we'll just leave it as is, and we'll
say Send invitations. So califandan will
| | 04:22 | receive that e-mail, and it will look very
similar to the one that califanjoe got when
| | 04:27 | he joined the site on his own volition.
| | 04:30 | Now once you have users on your site,
you can give them more access to what
| | 04:34 | they're allowed to do by clicking on
Permissions and giving them an additional
| | 04:38 | role. You could make them a blogger
or editor or even an administrator.
| | 04:43 | We will talk more about this in the
video about adjusting user permissions.
| | 04:47 | Let's go back to our list of people
very quickly and take a look at some of the
| | 04:51 | things we can change on califanjoe's
account by clicking Edit next to his name.
| | 04:55 | As I mentioned before, you can block it or
keep it as active. You can add roles here.
| | 05:01 | You can change whether or not they
received e-mail in response to comments of
| | 05:05 | that post on the site, and you can
give them a personal contact form.
| | 05:09 | This is something very interesting I
just want to show. If we go back up and
| | 05:12 | take a look at califanjoe's user account, you'll
notice that there's a tab here called Contact.
| | 05:19 | If we want to send an e-mail to that
person, we click there, and it's very much
| | 05:22 | like the site-wide contact form
that you saw in an earlier video.
| | 05:27 | The My follow links tab is very much
like we described in the video about taking
| | 05:31 | advantage of social media.
| | 05:33 | This way califanjoe is able to enter
the Facebook account, MySpace account, all
| | 05:39 | of these other accounts, so that when he
post things to the site, people can then
| | 05:43 | look up more about him on those social networks.
| | 05:46 | The Shortcut tab we described in the video
about shortcuts earlier on in this course.
| | 05:51 | In short, the controls you have over
users on a Drupal Gardens site are really
| | 05:55 | quite extensive, well beyond what is
possible in most other web site-building tools.
| | 06:00 | You'll get even more control by
changing settings that affect what users are
| | 06:04 | allowed to do on your site, and you'll
learn more about that in the video about
| | 06:07 | adjusting user permissions.
| | 06:10 | Finally, I would like to urge you to
go back, log out, and look at the site
| | 06:14 | from that point of view from time to
time, but especially whenever you make a
| | 06:18 | change in membership policy. This is
something that a lot of administrators
| | 06:22 | forget to check, but it really makes a
difference in user experience and can
| | 06:26 | help keep your site safe.
| | Collapse this transcript |
| Adjusting user permissions| 00:00 | Once you've decided to allow
memberships on your site, you may want to control
| | 00:04 | how much those members can
do when they're logged in.
| | 00:07 | By default, they can't really do that much:
| | 00:09 | just read content and comment on it.
| | 00:12 | But you can give them more power by
assigning them to a role and then adjusting
| | 00:16 | those roles on a task-by-task basis.
| | 00:19 | The first step in doing that is going
up to the People page, by clicking on
| | 00:23 | People, and then going to
look at the permissions.
| | 00:26 | These permissions are broken up so
that each row is a specific task on your
| | 00:30 | site, and each column is a different role.
| | 00:33 | You can see those roles by clicking
this little button in the upper right-hand
| | 00:36 | corner, and it's the same group
as you saw on the previous page:
| | 00:39 | anonymous user,
authenticated user, and so forth.
| | 00:43 | Now there are a few roles here that are
always going to be there and you can't change.
| | 00:48 | The first one is anonymous user.
| | 00:50 | That's somebody who visits
your site and hasn't signed in.
| | 00:54 | The second is authenticated user.
| | 00:56 | That's somebody who has created an
account on Drupal Gardens and is now a
| | 00:59 | member of your site.
| | 01:01 | You can learn how people become members by
watching the earlier video about user management.
| | 01:06 | The last kind of role here, site owner,
is something that you can't turn on or off.
| | 01:11 | It's the user that was created
when you first made your site.
| | 01:15 | It's what's called a super-user, and if
you're used to using core Drupal, it's
| | 01:19 | the one that doesn't actually show up.
| | 01:21 | This would normally be hidden,
but in Drupal Gardens it's shown.
| | 01:25 | Administrator, blogger, and editor are
three roles that you can change, and you
| | 01:29 | can add your own roles as well.
| | 01:31 | One thing to note about the
authenticated user is it's anybody who has an
| | 01:35 | account on your site, so that means a blogger
is also an authenticated user, as is an editor.
| | 01:41 | Drupal takes this into account because
when you click on that check box for the
| | 01:45 | authenticated user, it turns
on all of the ones above it.
| | 01:49 | And then when you uncheck it, it
remembers which ones were clicked before,
| | 01:52 | which is very handy.
| | 01:54 | I am going to demonstrate how
to turn on and off a permission.
| | 01:57 | Now it should be fairly clear.
| | 01:59 | You simply check the task and the role
that you want and then click down at the
| | 02:03 | bottom to save the configuration.
| | 02:04 | But just to show you how it works, I am
going to go down to the Node group down
| | 02:10 | here and the Access the content overview page.
| | 02:15 | I am going to let any authenticated
users see that by checking there, scrolling
| | 02:19 | to the bottom, and save permissions.
| | 02:24 | Now, I have another browser window
open with my user califanjoe, who is
| | 02:28 | an authenticated user.
| | 02:29 | I am going to take a look at that
content page, which I happen to know is at
| | 02:33 | admin/content, and now I can
see everything on the site.
| | 02:37 | Now you'll notice I can't do any operations.
| | 02:40 | I can't edit or delete those nodes,
but I can at least see them, and I can
| | 02:43 | filter on them, and so forth.
| | 02:45 | If I go back here and take that away
again, go down to Node and take away Access
| | 02:50 | the content overview page, scroll down
again, and save the configuration, now if
| | 02:57 | I reload the page as califanjoe, I get nothing.
| | 03:01 | I'm told that access is denied.
| | 03:02 | That's the way that we want it.
| | 03:04 | So that's how you can change individual
permissions for members of a given role.
| | 03:09 | But what if you want to move a
member from one role to another?
| | 03:12 | For example, let's say that you've
been watching califanjoe for a while, and
| | 03:16 | you've gotten to trust him, and you want
to give him permission to start a blog.
| | 03:19 | That's pretty easy.
| | 03:20 | I'll just go back to my
Administrative page, click on People, go down to
| | 03:25 | califanjoe, check his box,
and then I can add a role.
| | 03:30 | I can say okay, now he's a
blogger. Then click Update.
| | 03:33 | I can also do it, as you've seen in an
earlier video, by clicking on Edit next
| | 03:37 | to that user and adding the
role on that user's profile page.
| | 03:40 | But let's go back to our list of people.
| | 03:43 | I want to point out a user
down here that I didn't add.
| | 03:46 | Now explorecalifornia is me,
the administrator of this site.
| | 03:50 | This Gardens admin is something that
Drupal Gardens added, and that you can't delete.
| | 03:55 | You'll see there is no edit or delete here.
| | 03:57 | This is for people at Acquia if they
need to go in and fix anything on your
| | 04:00 | site, but don't worry.
| | 04:02 | I've never had any experience where
they make any sort of changes unless there
| | 04:05 | was something really wrong with
the site, and I asked them to do so.
| | 04:08 | But in any case you can't change it, so
there's no need to pay any attention to it.
| | 04:13 | Now, let's move on.
| | 04:14 | Let's say that you want to put
together a group of permissions that doesn't
| | 04:17 | match any of the roles that already exists.
| | 04:20 | And to take a look at those roles, I'll click on
Permissions and then Roles. Nope, that's okay.
| | 04:28 | You can just add a role.
| | 04:29 | You might remember that we added a
content type earlier called Tour.
| | 04:33 | Let's say that we want to allow certain
users permission to create those tours,
| | 04:37 | but we don't want them to
have any other special roles.
| | 04:39 | That is easy enough.
| | 04:40 | I'm going to call this person a
tourmaker, add the role, then go back to
| | 04:47 | Permissions, and I now see tourmaker up here.
| | 04:51 | I could go through, that person already
has all of the authenticated user roles,
| | 04:55 | I would go down to, let's see, it's
under Node, and allow that person to create
| | 05:03 | or edit tour content. There we go.
| | 05:05 | I'm actually not going to do that.
| | 05:07 | Again, just to keep the site clean, I'll go
back up and delete the role. Simple enough:
| | 05:13 | down here, edit the role, and then
delete it, and of course confirm.
| | 05:19 | By the way, this is a great technique
for building content on your site--that
| | 05:22 | is, let your users do the work.
| | 05:26 | It's called crowdsourcing, and it's
essentially the wealth on which such sites
| | 05:30 | as Yelp and Facebook rest. Watch out, though.
| | 05:34 | If you give the permission too liberally,
and you don't monitor your users, then
| | 05:38 | you'll find that trolls and spammers
and other vandals will start to abuse it.
| | 05:42 | I finally want to mention a few things
to watch out for when you start playing
| | 05:45 | with roles and permissions.
| | 05:47 | Most important is that you revisit
them whenever you turn on a new feature
| | 05:51 | of your site, as you learned how
to do in the video about adding and
| | 05:54 | removing functionality.
| | 05:56 | Second, be extremely wary of granting
any permissions that have a label next to
| | 06:01 | them that says give to trusted roles only.
| | 06:03 | If we take a look through that look
through that permissions list, you'll see
| | 06:05 | that that's quite a few of these tasks.
| | 06:08 | As we scroll down, see in the
italics, it says it may have security
| | 06:12 | implications, any other warning like
that, be very careful about giving those
| | 06:16 | away because they may allow
somebody to actually take over your site.
| | 06:20 | Third, resist the urge to go
wild and create a lot of roles.
| | 06:25 | Only create them when you need to.
| | 06:27 | Otherwise, you might find that you
have too many check boxes here, and it
| | 06:30 | becomes more and more
confusing to control who can do what.
| | Collapse this transcript |
| Managing comments| 00:00 | Drupal Gardens sites are pretty secure
by default, but even if you don't give
| | 00:05 | visitors additional access, as you
learned how to do in the video on adjusting
| | 00:09 | user permissions, there is one big way
that they can cause problems: by leaving
| | 00:14 | abusive or spam-filled comments.
| | 00:16 | This video shows you how to manage them.
| | 00:18 | Now we're going to look specifically at
actions that are permitted for anonymous
| | 00:23 | users since they're the ones who never
sign in and therefore can't be tracked,
| | 00:27 | but we'll also look at some things that
authenticated users can do, since Drupal
| | 00:31 | Gardens sites by default
allow anyone to sign up.
| | 00:34 | There are actually programs out there
that will go around and automatically
| | 00:38 | sign up for web sites and then post spam.
| | 00:41 | In other words, they become authenticated
users first and never face restrictions
| | 00:45 | you place on anonymous users.
| | 00:47 | For ways to stop that sort of abuse,
you could require administrative approval
| | 00:51 | of all new memberships, as you
learned in the video for managing users.
| | 00:55 | But let's go through and look at some
of these permissions, which is a more
| | 00:57 | lightweight way to avoid such abuse.
| | 01:01 | To do so, click on People and Permissions.
| | 01:06 | Now I am just going to scroll through
and look at the things that anonymous
| | 01:08 | users and authenticated users can do.
| | 01:11 | The first one is this AddThis widget.
| | 01:14 | We'll discuss this future in the video
about taking advantage of social media,
| | 01:18 | but in brief you don't really have to
worry about people abusing your site with it;
| | 01:22 | it only allows them to look at things.
| | 01:24 | The other kinds of things that
anonymous and authenticated users can do are
| | 01:28 | broken into two categories.
| | 01:31 | The first one is permission to view content,
and you really don't have to worry about that.
| | 01:36 | The second one is permission to
create and edit content. That's where
| | 01:40 | the problems come in.
| | 01:42 | So let's scroll through and
see what those permissions are.
| | 01:45 | In Aggregator, they can view news feeds.
No problem there. View comments, ah!
| | 01:50 | And then we come to Post comments.
| | 01:52 | There are actually two kinds of category
here: Post comments and Skip comment approval.
| | 01:58 | We'll take a look at both of these
later in the video and explain how you can
| | 02:02 | moderate these comments as they come in.
| | 02:05 | As we scroll down further, Subscribe to
comment notifications, again, something
| | 02:10 | that's not really a problem.
| | 02:11 | It has to do with people receiving
information instead of putting it into your site.
| | 02:15 | Use the site-wide contact form, we
already removed the anonymous user permission
| | 02:19 | from that in an earlier video.
| | 02:23 | Use the Filtered HTML text format,
| | 02:25 | that's actually not a problem.
| | 02:27 | We can skip over that.
| | 02:29 | View media, not a problem. And as we go
down, the rest are all about viewing content.
| | 02:35 | Using search, again about viewing content.
Not really very much there except for
| | 02:40 | the commenting problem, so
let's talk a little bit about that.
| | 02:43 | You might remember that
authenticated users can post comments and skip
| | 02:47 | the approval process.
| | 02:49 | Anonymous users, on the other hand, have to
get approval for every comment that they post.
| | 02:53 | I'll show you what both of those look
like, and how you actually give that approval.
| | 02:57 | First, I am going to create a test news
post, something that will allow people
| | 03:01 | to add their comments.
| | 03:02 | So I click Add content and then go to
News item, and just to how about "What do
| | 03:08 | you think about California?"
| | 03:12 | In the body, "Tell us your opinions."
| | 03:17 | Go down, make sure that comments are
allowed. Yup, they're opened, and save.
| | 03:22 | And there is our node with the Add new
comment link there and the comment form beneath it.
| | 03:27 | I'm just going to copy this URL and
then go over to the Google Chrome browser
| | 03:32 | where I am already logged in as
an authenticated user, califanjoe.
| | 03:36 | I'll go to that URL, and I'll post my comment.
| | 03:43 | "I think it's great!
| | 03:47 | I love to visit when I can!"
| | 03:50 | And go down and save it.
| | 03:55 | And as you can see, there is the comment.
| | 03:57 | It appears the immediately because an
authenticated user doesn't have to go
| | 04:00 | through the approval process.
| | 04:02 | Now I'm going to sign out, and I'm
going to add a comment as an anonymous user.
| | 04:10 | I'll click on the link to go to the
comments, and now I'm going to post a
| | 04:14 | new comment myself.
| | 04:16 | I'm going to say Hateful Joe,
and that's at admin@example.com.
| | 04:22 | We could enter a Homepage if
the person wants a subject.
| | 04:26 | "Why would you even ask such a question?
| | 04:32 | That's dumb!!!111!!!" There.
| | 04:36 | That's the kind of silly comment you
might see, and then I'll save that.
| | 04:41 | Now because I am an anonymous user, I
get this message that the comment has
| | 04:45 | been queued for review.
| | 04:46 | Let's go back to our administrator
site and see exactly how that works.
| | 04:50 | We go up to Content and
then click the Comments tab.
| | 04:56 | The first thing you see is all of the
comments that have actually been published.
| | 04:59 | Here is the one from
califanjoe. It's published.
| | 05:02 | Everything is fine.
| | 05:03 | Then we see these unapproved comments
right up here, and that's where you see
| | 05:07 | the one from the anonymous user.
| | 05:09 | You could then go in and take a look
at it, or you could go in and edit it.
| | 05:14 | While editing it, you could decide, oh
I don't really want that, by clicking the
| | 05:18 | administration tab here and
just leave it on Not published.
| | 05:22 | You can also change who it's authored by.
| | 05:24 | You can change everything
about it, quite honestly.
| | 05:26 | But let's go back and take a look
at this Unapproved comments list.
| | 05:30 | The easiest way to get rid of all of
them is to simply check the boxes of the
| | 05:34 | ones you want to get rid of, choose
from the pop-up menu, Delete the selected
| | 05:38 | comments, and update.
| | 05:41 | Now you have a choice at this point to
report these as low quality or obscene,
| | 05:47 | and this all goes into a system called
Mollom, which we'll discuss in a later
| | 05:50 | video, but for us, I am just
going to say, no, that's fine.
| | 05:54 | You don't have to report this,
just delete it, and it's done.
| | 05:58 | The tough part about this system is you
have to watch that unapproved comments
| | 06:01 | list like a hawk, so come back here
every once in while, click on, again,
| | 06:06 | Content > Comments and Unapproved
comments, and just look through and make sure
| | 06:11 | that you haven't caught anything that
should be released or should be deleted.
| | 06:15 | You can leave them there if they should
be deleted because of course they won't
| | 06:17 | appear on your site.
| | 06:18 | Nobody will see them except for you.
| | 06:21 | Now if that sounds like a lot
of work, guess what? It is.
| | 06:26 | You can offload some of it by giving
the Administer comments and Comment
| | 06:29 | settings permission to somebody else,
perhaps by assigning it to a newly created
| | 06:34 | community manager role or something
like that. And if you want to learn how to
| | 06:38 | do that, take a look at the video
about adjusting user permissions.
| | 06:42 | But I'm afraid that's just the way it is.
| | 06:44 | Computers are easy. People are hard.
| | 06:47 | The most complete way to solve it is
simply not to allow comments in your site,
| | 06:52 | and you would do that by editing the
content type and taking away the comment
| | 06:56 | permission, as you learned in an
earlier video about content types.
| | 06:59 | Another partial solution is found in
the Mollom module, which you'll learn about
| | 07:03 | in the video, "Slowing spam."
| | Collapse this transcript |
| Slowing spam| 00:00 | You already learned how to handle user
comments in the video about managing comments.
| | 00:05 | You have also learned what
a pain in the neck it is.
| | 00:07 | Many of the problematic comments aren't
actually from people at all, but instead
| | 00:12 | are computer-generated spam, and
sometimes it's hard to tell the difference.
| | 00:16 | I showed you how to moderate spam,
but there's also one other level of spam
| | 00:20 | prevention, called Mollom.
| | 00:23 | This video shows you how Mollom works, and
how you can change some of its settings.
| | 00:28 | Before we go on to Mollom, I do want to
suggest that you go back and watch that
| | 00:32 | video about managing comments, if you
didn't watch it already, because that really
| | 00:35 | represents your first line of
defense against abuse on your site.
| | 00:39 | Mollom is a unified system for testing
anything that a user tries to put in your site.
| | 00:45 | It does that in two ways: First, it
looks at the text itself and tries to see if
| | 00:50 | it thinks its spam based on what
other people have reported as spam.
| | 00:54 | The second way it does it is using
something called CAPTCHA, an acronym that
| | 01:01 | stands for, ready for this, Completely
Automated Public Turing Test to Tell
| | 01:05 | Computers and Humans Apart.
| | 01:08 | The CAPTCHA is something that's easy
for people to do but hard for computers
| | 01:11 | to do automatically.
| | 01:12 | Now I'll show you how that works.
| | 01:14 | To change Mollom settings, go up to
Configuration and scroll down to CONTENT
| | 01:19 | AUTHORING and click Mollom.
| | 01:22 | Here you see different places where
people can enter information into your site.
| | 01:26 | By default, Mollom is set up so
that you don't even know it's there.
| | 01:30 | It looks at the text and if it
thinks its spam, it simply throws it away.
| | 01:34 | I'll show you how to change that behavior.
| | 01:36 | I will do that by changing the
comments that go into a news item.
| | 01:41 | Go over to Configure, click it,
and that brings up a new screen of controls.
| | 01:47 | While set to analyze the text,
Mollom will look at two different possible
| | 01:51 | problems: either spam or
profanity in these comments.
| | 01:55 | It also gives you an option as to
whether to look at just a subject or just the
| | 01:59 | comment itself--the body of the comment that, is.
| | 02:02 | And then finally whether it should
hold onto that comment or simply throw
| | 02:06 | it away right away.
| | 02:07 | It should be obvious how this works, so I'll
move on to more complex one, which is CAPTCHA.
| | 02:12 | I change the radio button there, and that
removes all the other options. Click Save.
| | 02:19 | And of course in the list it
shows exactly what's going to happen.
| | 02:22 | When somebody tries to comment on a
news item, it will show a CAPTCHA.
| | 02:25 | Now I'm going to switch over to
another browser where I'm visiting the site
| | 02:29 | as an anonymous user.
| | 02:31 | And I'll go to a news item, this one
here which I added in the last video,
| | 02:36 | and I'll try to add my own comments, let's
just say "California stinks, Blah, blah, blah."
| | 02:46 | There we go.
| | 02:48 | Now I think I am going to post that, right.
| | 02:50 | But then I'm challenged by this CAPTCHA
right here, and I have to type in what it says.
| | 02:54 | Now for somebody who is actually typing in
information, that's not really a problem.
| | 02:58 | You can see it's fairly
readable, zzuBd in this case.
| | 03:03 | But if it's a computer doing it, it
looks at this and can't quite make that out,
| | 03:07 | and that's basically how
automated spam is stopped by Mollom.
| | 03:11 | I won't even save that.
| | 03:12 | I will just let it be as it is.
| | 03:14 | Let's take a look at some of
the other settings for Mollom.
| | 03:17 | To do that, I switch back to
my administrative interface.
| | 03:20 | It's possible to blacklist specific
words. Like let's say that you're running a
| | 03:24 | site for a company, and you don't want
your competitor's name to be mentioned.
| | 03:28 | Well you can just add and say that
is something I don't want to have in any
| | 03:32 | field at all, and you can say whether
you wanted to be an exact match or just
| | 03:36 | that it contains the word--that is, it
might be in the middle of a string of text.
| | 03:40 | And you would add it as should be obvious here.
| | 03:42 | You can define these blacklists as
being spam, profanity or simply unwanted, as
| | 03:48 | would be in the case of a
competitor's brand name.
| | 03:52 | Finally, there are certain
numbers of settings that you can have on
| | 03:54 | Mollom, generally speaking.
| | 03:57 | These get somewhat complex, and rather
than go into all of them individually, I
| | 04:01 | would like to recommend that you visit
the Mollom site, which is at mollom.com,
| | 04:07 | and you can read the
documentation there if you like.
| | 04:10 | There are also links from the
Configuration page if you like.
| | 04:13 | Finally, if you have decided you wanted
to completely remove all protection from
| | 04:17 | some sort of form, you can do that by
simply clicking the Unprotect button here
| | 04:22 | and say yes, I do want to confirm that.
| | 04:24 | And in that case, there will be no
challenges, either by text analysis or by CAPTCHA.
| | 04:30 | If you want to add protection back again,
you just click add a form, click this
| | 04:34 | pop-down menu, find the kind of form
that you want to protect, and you might
| | 04:38 | remember that was Comments on News items.
| | 04:40 | Say Next, decide what kind you want.
| | 04:42 | I am going to keep it on CAPTCHA and save.
| | 04:45 | And it's back in the list.
| | 04:47 | You know, when people talk about spam,
they often talk about stopping spam, but I
| | 04:51 | decided to call this video "Slowing
spam" instead because to put it frankly, we
| | 04:55 | missed our chance to stop it 20 years ago.
| | 04:58 | The systems that allow it to continue
which are both legal and technical are
| | 05:02 | well in place, and they are not going
away. Unless you're willing to turn off
| | 05:06 | your comment form and forbid all user
input in your site and turn off your
| | 05:09 | contact form as well,
| | 05:11 | I am afraid your tools are somewhat
limited. But in combination with vigilance,
| | 05:16 | you can prevent your site from
being a big contributor to the problem.
| | Collapse this transcript |
| Starting discussion forums| 00:00 | Drupal Gardens' strength isn't just
that it lets you build web sites;
| | 00:03 | I mean dozens of programs do that.
| | 00:06 | It lets you build social web sites
where members can interact with each other.
| | 00:11 | Along the way, they increase your
site's value because interactions are filled
| | 00:15 | with content that can help future visitors.
| | 00:18 | We already went over how people
interact through comments in the Managing
| | 00:21 | Comments video, and I didn't really
put the pieces together for you, but you
| | 00:25 | already know how to let people
create entire nodes on your site as well.
| | 00:29 | You would just create a content type
and grant the permissions that you would
| | 00:33 | need to the roles as appropriate.
| | 00:35 | And you learned how to do that in
"Creating and Managing Content Types" and the
| | 00:38 | video on adjusting user permissions.
| | 00:41 | The next step is to let them talk
directly to each other in forums.
| | 00:45 | That's what this video is all about.
| | 00:47 | Now we used the Campaign
template when we created this site.
| | 00:51 | If you used a different template, the
Forum module might not have been turned on,
| | 00:55 | so the way you would do so is going up
to the Modules link here and scrolling
| | 01:00 | down and turning on the Forum Module and
then clicking Save configuration at the bottom.
| | 01:05 | But we don't need to do that since, of
course, our forums are already turned on.
| | 01:11 | Once that module is on,
there is a new page at /forum.
| | 01:15 | That is at the end of your
domain name, just F-O-R-U-M.
| | 01:20 | You can also go there by clicking on
this link in the Main menu in our Campaign
| | 01:23 | template. It takes you to the same place.
| | 01:26 | If you don't have that link in your
Main menu, you can add one using the skills
| | 01:30 | you gained from watching the
video about understanding menus.
| | 01:34 | Right now, our forum is pretty dull.
| | 01:35 | There is only one board with
a generic label "Discussion."
| | 01:39 | Let's juice that up a bit.
| | 01:41 | The way you do that is by going up
to Structure and then down to Forums.
| | 01:47 | Here we see that one
discussion board called Discussion.
| | 01:50 | We can change that name if we want, by
clicking the Edit link here and just I'm
| | 01:54 | going to change it to General discussion.
| | 02:00 | Scroll down and save.
| | 02:01 | You can add forums as well.
| | 02:04 | I'm going to add just a couple of forums.
| | 02:06 | First one will be--let's say Road Trips,
and I'll put in the Description: "Have a good one?
| | 02:15 | A bad one? Tell us about it."
| | 02:19 | Scroll to the bottom and save.
| | 02:20 | And I'll put in just one more.
| | 02:22 | I'll call it Finds in California.
| | 02:29 | Favorite restaurants, views,
and monuments, and save.
| | 02:37 | Once you have these forums, you can
reorder them, as in many other places on
| | 02:42 | Drupal Gardens, by grabbing this
compass-like icon and just dragging it around
| | 02:47 | and then clicking Save again
at the bottom of the screen.
| | 02:49 | There is another link up here called container.
| | 02:53 | I'll explain a little bit more what
containers are once we look at the forums
| | 02:57 | themselves, but for right now, I am
just going to add a couple of those.
| | 03:01 | This one is going to be Around California,
and I won't put in a Description, and
| | 03:08 | I'll add another
container called Around this site.
| | 03:13 | Scroll down and save.
| | 03:15 | Let's go back and take a look
at what our forums look like now.
| | 03:18 | I'll do that by closing the
overlay and letting the screen redraw.
| | 03:24 | Now you see we have our container here,
Around California, and a container here,
| | 03:28 | Around this site, and then
we have our actual boards.
| | 03:31 | You'll notice that we don't have a
listing of how many topics are in containers.
| | 03:35 | That's the difference
between containers and forums.
| | 03:37 | Containers are really just to
separate out and categorize the forums.
| | 03:41 | You can't post directly to them yourself.
| | 03:44 | In fact, if I click up here on Around
California and say, Add new forum topic.
| | 03:49 | I am just going to say, "Test subject"
and scroll to the bottom and say Save.
| | 03:57 | See I'm told I can't actually add that
topic because it's a container, not a forum.
| | 04:02 | So I'll just close out of that overlay now.
| | 04:05 | In order to get back to my
forums, I'll just click on Forum.
| | 04:10 | You can, however, add topics
into the forums themselves.
| | 04:14 | Before I do that, I'm going to rearrange
this a little bit, so that forums appear
| | 04:18 | correctly inside the containers.
| | 04:20 | Once again, you go up to Structure and
Forums, and then you can drag them around.
| | 04:25 | I think General discussion goes into
Around this site and Road Trips and Finds
| | 04:30 | in California are both in
Around California. There we go.
| | 04:36 | Now when we close out this
overlay, it makes a lot more sense.
| | 04:40 | Let's try posting something in General
discussion, and I'll say Add new forum topic.
| | 04:49 | This is a great site.
| | 04:51 | I just wanted to say thanks.
Scroll down and save it.
| | 04:56 | Now when we go back to our forum, we see
that we have one topic and one post in
| | 05:03 | there. If we drill down further
into General discussion, there it is.
| | 05:07 | This is a great site.
| | 05:10 | Now this is a great way for you users
to talk to each other, but I want to
| | 05:13 | point something out.
| | 05:14 | I am going to switch back to Google
Chrome where I'm visiting the site as
| | 05:18 | an anonymous visitor.
| | 05:19 | I click on Forum.
Let's say I'll look in there.
| | 05:24 | I think it's a great site, too.
| | 05:25 | I want to comment on that as well.
| | 05:26 | So I click there. I can post the
comment the same as I would to any other node.
| | 05:32 | However, if I go back one screen, I'm
not able to post a new topic entirely. I
| | 05:38 | would have to log in first in order to do that.
| | 05:41 | You can change that behavior, as you
learned earlier in the video about
| | 05:44 | permissions, by going up to People and
Permissions, and then scrolling down to the Node group.
| | 05:54 | You see, a forum topic is really just a
node of the forum type. There it is:
| | 05:59 | forum topic content.
| | 06:01 | You could say, create new forum topic
content and get that to anonymous users if
| | 06:04 | you wanted, or authenticated users, or so forth.
| | 06:08 | This is an important thing, by the way,
which is that authenticated users don't
| | 06:12 | naturally have the ability
to post new forum topics.
| | 06:15 | You have to grant it to them.
| | 06:17 | That's a good security device; however,
it does mean you should check out your
| | 06:20 | site as an authenticated user, not as an
administrator, before you launch it, or
| | 06:24 | you'll find, why is nobody
posting anything in the forums?
| | 06:26 | Well, they are not able to.
| | 06:28 | Just to recap a few things that might
not have been so obvious as we went along.
| | 06:33 | The structure of forums is such that,
at the very top level, you have forums as
| | 06:37 | a group, and you turn that on with that
module that I showed you, the Forums Module.
| | 06:42 | You can go to the page that shows all
of the forums by going to /forum, or if
| | 06:46 | there's a menu link, just clicking
on the menu link that says forums.
| | 06:50 | The page of forums contains two types of entity:
| | 06:54 | One is a forum itself which in turn
contains topics and each of those topics in
| | 06:59 | turn contain comments.
| | 07:01 | It also contains containers which
can contain forums. Is that all clear?
| | 07:07 | There are two things at the top level of
forums. They can either be containers or
| | 07:11 | forums. And one thing that I didn't
show you before, to complicate things even
| | 07:15 | more, is that forums can contain other
forums, and I'll show that by going to
| | 07:20 | Structure and Forums.
| | 07:22 | And let's say Road Trips, I wanted to
add another forum that was by region,
| | 07:29 | let's say, Northern California road trips,
and I'll make its Parent > Road Trips and save.
| | 07:37 | Then go back to our Forums page, go to
the Front Page and Forum, and you see how
| | 07:46 | that hierarchy works.
| | 07:48 | The last thing I want to show you is a
few of the settings that are available,
| | 07:51 | which will change what your forums look like.
| | 07:53 | Once again, we go to Structure and
Forums and then go up to this Settings tab.
| | 07:59 | Toward the bottom here, you have something
which will let you change how they're sorted.
| | 08:03 | The best way to leave it, in my opinion,
is to simply have the newest ones at the
| | 08:07 | top, because that's what people start reading.
| | 08:09 | And once you start reading a forum,
you'll come back often and you just want
| | 08:12 | to see the new stuff.
| | 08:14 | The Topics per page lets you
decide how quickly the page will load.
| | 08:18 | If you have a low number, it will load
quickly, but on the other hand, people
| | 08:21 | will have to click more
if it's a very busy forum.
| | 08:24 | The Hot topic threshold changes the
icon that people see when they look at
| | 08:28 | the list of forums.
| | 08:29 | I'll go back and show you
sort of what that looks like.
| | 08:32 | If the threshold for Hot topics was
lower than the number of topics that was in
| | 08:36 | a forum, you would see a
special icon saying, hey!
| | 08:39 | This one is very busy. Go here first.
| | 08:41 | So that's what that setting does.
| | 08:43 | One last thing: if you decide to open
your site to forums, you'll really have to
| | 08:48 | monitor the comments, as we described
in the video about managing comments.
| | 08:52 | You'll also have to monitor nodes of
the forum topic content type. For extra
| | 08:58 | help in that, watch the Slowing
spam video to keep forum quality high.
| | Collapse this transcript |
| Creating blogs| 00:00 | Blogs are good for your site in two ways.
| | 00:02 | First, blog-centered sites are very
popular, as the success of WordPress attests.
| | 00:08 | The best way to create one of those
sites in Drupal Gardens is to start with a
| | 00:12 | blog template that you learned about in
video about getting started with Drupal Gardens.
| | 00:17 | Second, blogs give your sites'
members a chance to express themselves.
| | 00:21 | In exchange, they feel more loyalty
toward your site, and they give you
| | 00:25 | valuable free content.
| | 00:27 | Regardless of what template you start
of with, blogs are very easy to create,
| | 00:30 | and Drupal Gardens adds a nice
little tweak to the way Core Drupal
| | 00:33 | traditionally handles them. Let's take a look.
| | 00:37 | First of all, you will have
to turn on the Blog module
| | 00:39 | if it's not already on. Chances are it
is, but let's take a look and make sure.
| | 00:43 | Go up to the Modules button
here, and there it is, Blog.
| | 00:46 | It's already turned on.
| | 00:48 | There is another part that's added by
Drupal Gardens that's not in core Drupal,
| | 00:52 | called Flexible blogs.
| | 00:55 | As we scroll down, we se it
here in the Other category.
| | 00:57 | I will talk a little bit more about what
Flexible blogs gives you in just a minute.
| | 01:02 | To create a blog post, it's very easy. Just
click Add content up here and then Blog entry.
| | 01:07 | I will just create something simple.
| | 01:11 | "This is my first blog post."
And for the body, "Hoo-hah!"
| | 01:15 | Now I will scroll down to the bottom and
save it, and there it is. It's very simple.
| | 01:24 | It looks like any other node
that you create, with one exception.
| | 01:27 | It has this little Explore California
blog down here And if you click on that,
| | 01:31 | it will go to all of the blog posts,
whether it's by user or by site. And again, I
| | 01:35 | will get to that in just a minute.
| | 01:36 | I am very quickly going to
create another blog post.
| | 01:39 | Again, just Add content and Blog
entry, and I will call this one
| | 01:45 | This is my second blog post
from califanjoe. Hoo-hah again!
| | 01:54 | The one change I am going to make down
here is in Authoring information, instead
| | 01:58 | of it being by me,
explorecalifornia, I will make it by califanjoe.
| | 02:03 | As I type in, it brings up the username
that's in the site already. Click on it
| | 02:08 | and then click Save. Great!
| | 02:11 | So we now have two blog posts: one by Explore
California and the other by the user califanjoe.
| | 02:17 | To see all of them, you can just go to
the /blog link up here in the URL, blog,
| | 02:26 | and that shows all blogs
by everybody on this site.
| | 02:29 | You can also get there by clicking
this link in the main menu, Blog.
| | 02:33 | If I click on any one of these--
this is the one by califanjoe--
| | 02:39 | we see at the bottom, also, this
link, Explore California blog.
| | 02:42 | This also leads you to all
of the blog posts on the site.
| | 02:47 | Now, I am going to talk about what
that flexible Blogs module gives you.
| | 02:50 | To get to it, go to Configuration
and Blog settings, which is under the
| | 02:55 | Content Authoring category.
| | 02:58 | This allows you to change the link that
appears underneath each of the blog posts.
| | 03:03 | So, instead of going to site-wide blog,
it cloud go to only the author's blog.
| | 03:07 | I will change it there and save configuration.
| | 03:10 | Again, this is something that's in
Drupal Gardens, but it's not in core Drupal.
| | 03:13 | So, it's a nice little added thing.
| | 03:15 | Now, let's go back to our
front page and click on Blog again.
| | 03:19 | You see, instead of just saying read
the explorecalifornia's blog, it now says
| | 03:23 | either califanjoe's blog
or explorecalifornia blog.
| | 03:27 | In my opinion, this is the best setting
to have, especially if you have a site
| | 03:31 | which has many individual contributors,
because typically people want to read only
| | 03:36 | from contributor rather
than everybody on the site.
| | 03:39 | If you have many, many bloggers, it can
become quite overwhelming if you have it
| | 03:42 | linking to everybody on the site.
| | 03:44 | I have been online since 1986, and I
have never really felt that thing that
| | 03:50 | people were saying all along that the
Internet made everybody a publisher.
| | 03:54 | Only the blogging eco-system, when it
started to emerge in 2001 or so, only that
| | 03:59 | really made me feel that
everybody could be a publisher.
| | 04:02 | Because it's not really the format
that makes blogs valuable, but rather how
| | 04:06 | they connect to each other, and the Blog
module in Drupal Gardens helps you do that.
| | 04:10 | You learn more about ways that people
connect to each other with their own
| | 04:13 | content and the videos about publishing
RSS feeds, subscribing to RSS feeds, and
| | 04:19 | taking advantage of social media.
| | 04:21 | One last thing I want to mention about
blogs: as with all user-created content,
| | 04:26 | there's the always-present danger of abuse.
| | 04:29 | So, be sure to monitor
what your users are posting.
| | 04:32 | You learn some tips about that and videos
about creating and managing content, about
| | 04:37 | managing comments, and about slowing spam.
| | Collapse this transcript |
| Setting up mailing lists| 00:00 | E-mail proceeded by web about twenty
years, and a lot of people, including me,
| | 00:05 | still prefer to get some
kinds of information that way.
| | 00:08 | Drupal Gardens includes a way to
collect e-mail addresses for mailing lists,
| | 00:11 | but I have to warn you,
it's very rudimentary.
| | 00:14 | It doesn't actually send out the
e-mails or even check to make sure that the
| | 00:17 | addresses are valid.
| | 00:19 | All it does is collect the addresses, which
you can then export into another program.
| | 00:24 | So, you might ask, why even talk about it? Well,
| | 00:27 | although it's mediocre, it does have
some usefulness, and it might improve with
| | 00:31 | some time, so you might as well
learn what's there now in preparation.
| | 00:35 | Further, you can actually use the e-mail
addresses that you collect this way in
| | 00:38 | other marketing methods.
| | 00:40 | You will notice that the collection
form is actually included on the front page
| | 00:43 | of the campaign template that we created.
| | 00:45 | We scroll down here and see
this Join our Mailing List.
| | 00:50 | This is actually a block, which you
learned about in the video about blocks, and
| | 00:54 | you can place it anywhere on
your page that you would like.
| | 00:56 | I am going to add a name.
| | 00:58 | I am going to add that person who we
added to our site before, califanjoe, and
| | 01:04 | the e-mail address is califanjoe@gmail.com.
| | 01:09 | And then I click Subscribe.
| | 01:12 | All that it does is tell you
that it was added to a list.
| | 01:14 | It doesn't send an e-mail to
that address, or anything like that.
| | 01:17 | But let's take a look at what exactly
that means for us as the administrator.
| | 01:21 | To do so go up to
Structure and then Mailing lists.
| | 01:26 | So there's our mailing list, which
is called join our mailing list.
| | 01:30 | You can create as many as you want by
clicking on the Add tab, and then each one
| | 01:33 | that you add will create its block, which again
you can place anywhere you like on your site.
| | 01:38 | When we click on the list e-mails links here,
we see califanjoe@gmail.com. Very good.
| | 01:45 | We could go back and edit that if we
want, although really it's only two fields:
| | 01:48 | the Name and Email Address--and
Subscribe just brings us right back there.
| | 01:53 | So you might ask, what
can we do with this? Well,
| | 01:56 | we can export it.
| | 01:57 | To do that, go up to the Export List tab,
click, and it offers to save a file or
| | 02:03 | open it up in a program.
| | 02:04 | I am just going to save it to
our Desktop here and click OK.
| | 02:07 | I will then go back to our Desktop by
hiding everything else, and there's our file.
| | 02:13 | If we double-click at it, it opens up
an Excel. Or if we open it up in a text
| | 02:17 | editor, it looks like this. Very
simply, it's the address, followed by the name.
| | 02:23 | This is what's called a comma-separated
values file, with quotes surrounded just
| | 02:27 | to make sure that anything
in the middle remains true.
| | 02:30 | The only thing that separates them is
commas outside of those quotation marks.
| | 02:35 | I will just close that out
and go back to our site now.
| | 02:38 | So, now you have seen one way that you
can add addresses to that mailing list,
| | 02:42 | which is through that form.
| | 02:44 | There are actually two others.
| | 02:46 | One of them is by clicking on this Add
E-Mail tab as the administrator, and then
| | 02:50 | you would simply type them in.
| | 02:51 | Let me just say Califan lynda,
and that would be lynda@example.com.
| | 03:00 | But let's say you have already
collected a large number of e-mail addresses.
| | 03:03 | You want to import them into this list.
| | 03:05 | You can do that by
clicking the Import E-Mails tab.
| | 03:10 | Now, I should warn you: this program
requires that your e-mail addresses to be
| | 03:14 | in a very specific format, basically
the format you already saw with the
| | 03:18 | quotation marks and the comma and so forth.
| | 03:21 | In the exercise files, I have already
created such a file, and I am just going to
| | 03:24 | open that up in a text editor, so
you can see what its looks like.
| | 03:27 | Once again, we have got the comma, the quotes.
| | 03:29 | The important thing is that the
e-mail address comes before the name.
| | 03:32 | I will close that up, go
back to our site, and find it.
| | 03:37 | Double-click it to get into the
program and import. And there we are.
| | 03:42 | We now have all of those names and
addresses and can combine them with those
| | 03:46 | that we collected in other ways.
| | 03:48 | Now, there is one thing that I want
to warn you about importing e-mail
| | 03:52 | addresses, and this is very important.
| | 03:54 | You can't just grab a bunch of
addresses and start sending e-mail to them.
| | 03:58 | If you don't have a prior relationship
with the people who have those e-mail
| | 04:01 | addresses, and they are not
expecting to receive mass e-mail from you,
| | 04:04 | you could be in violation of federal law
in the United States, or privacy laws in
| | 04:09 | Europe and elsewhere.
| | 04:11 | Even if nobody sues, you will be
breaking your agreement with Acquia, and you
| | 04:15 | could get your entire site shut down.
| | 04:17 | Certainly, no matter what happens, you
will ruin your online reputation for spamming.
| | 04:20 | So make sure you are on the level
before you import a whole bunch of addresses.
| | 04:24 | The last thing I want to mention: this
feature is really only half baked compare
| | 04:30 | to some of the other
solutions you will find out there.
| | 04:32 | And some people will say that you
shouldn't be using e-mail anyway, that the wave
| | 04:35 | of the wave of the future is RSS subscriptions.
| | 04:38 | They may be right, but it doesn't hurt to
make your content available in both ways.
| | 04:42 | To find out how to use RSS feeds to
make your content available, watch the video
| | 04:47 | about publishing RSS feeds.
| | Collapse this transcript |
| Allowing users to rate content| 00:00 | As we get further into building our site,
we're giving our users more and more
| | 00:04 | freedom to affect what's on it.
| | 00:05 | There is one interactive feature that's
become really popular over the last few
| | 00:09 | years, as is evident from the number of
like and +1 buttons you see everywhere--
| | 00:14 | that is, the ability to rate content.
| | 00:17 | In Drupal Gardens that's done
through a system called Fivestar.
| | 00:20 | You have to turn it on first, and you do that
by going up to Modules and then down to Fivestar.
| | 00:26 | You get there more quickly by
closing the CORE group. And then scroll a
| | 00:29 | little, and there it is. Enable it,
| | 00:32 | go to the bottom of the
page, and Save configuration.
| | 00:35 | I want to show you a little quirk about
Fivestar by going back to that Module.
| | 00:40 | Scroll down a little bit
and click the Permissions.
| | 00:45 | This is a big page, so I will
search for Fivestar, and there it is.
| | 00:50 | By default, only the
Administrator is allowed to rate content.
| | 00:54 | I am going to leave it like that for
now, but if you're setting up a social
| | 00:57 | site, you'll probably want to let
everybody rate content, or at least
| | 01:00 | authenticated users.
| | 01:02 | Anyway, let's go back to our
modules and take a look at Fivestar again.
| | 01:05 | There is something peculiar about it.
| | 01:12 | There is no configuration
setting here. And if you go up to
| | 01:15 | Configuration, you'll see as you
scroll through the page, there is also
| | 01:21 | no configuration setting here.
| | 01:23 | That's because turning on the Fivestar
system is actually only evident when you
| | 01:27 | add fields to content types, as you
saw how to do in the video "Creating and
| | 01:31 | managing content types.
| | 01:33 | To show you that, I'll go up to Structure, and
Content types, and Forum, and manage fields.
| | 01:41 | I am going to add a new field
which I will call Rating.
| | 01:48 | The field type will be Fivestar Rating--
| | 01:51 | this is where it shows up--and you
see that there are a few options there.
| | 01:55 | I will accept the defaults and save.
| | 01:59 | On the next page, there are quite a few choices,
| | 02:01 | for example, the Number of stars,
whether you want to make this Public or
| | 02:06 | Private or so forth. But I'll just
say Save settings for now. Very good!
| | 02:10 | Now let's see what that looks like
when you actually go in to look at content.
| | 02:14 | To do that, I will close the Overlay,
then I will go to my Forums by clicking on
| | 02:18 | Forum, and General discussion.
| | 02:26 | Now, earlier we had created this
topic here, This is a sample forum topic.
| | 02:31 | I'll click it to see what it looks like.
| | 02:35 | And that's where our rating system is.
| | 02:37 | Let's say that I really liked this post.
| | 02:39 | I'm going to give it four stars.
| | 02:43 | As you do this, it makes an
average based on everybody who has voted.
| | 02:47 | This is really nice.
| | 02:48 | And by the way, using Views, you can
sort by the five-star rating so the most
| | 02:52 | popular things float to the top.
| | 02:54 | Now, the way we have this set up,
you can only rate the post itself;
| | 02:59 | you can't rate comments.
| | 03:00 | However, you can actually change that.
| | 03:02 | I am going to open up a new tab
and show you, by Command+Clicking or
| | 03:06 | Ctrl+Clicking on Structure, then to Content
types, back to Forum again, and manage fields.
| | 03:18 | Once there, I can look at Comment Fields.
| | 03:22 | And as before, if we wanted, we
could add a rating so that the comments
| | 03:26 | actually have ratings as well.
| | 03:28 | You know, I've decided I don't really
want to have Fivestar Ratings on my site,
| | 03:32 | so I can get rid of them very easily,
simply by turning off the Fivestar Module.
| | 03:36 | I go up to Modules, go back to my
Fivestar check box, uncheck it, and scroll down
| | 03:44 | to the bottom, and save.
| | 03:47 | Now if we go back to that original
Forum topic where we had the rating, if we
| | 03:50 | reload the page, you see that
it simply disappears. Very easy, very clean.
| | 03:56 | So you might be asking, what good do
those Fivestar Ratings do for you besides
| | 04:00 | showing someone how good a
particular story or comment was?
| | 04:04 | Well, as I mentioned earlier in the
video, "Creating complex information
| | 04:08 | collections with views," you can
combine views with Fivestar to do some
| | 04:12 | really interesting things.
| | 04:14 | That's a great way to get your users to
curate your site for you, which in the
| | 04:17 | end delivers better quality to everyone.
| | Collapse this transcript |
| Using best practices for online clubs| 00:00 | You can build a static
traditional web site in Drupal Gardens,
| | 00:04 | but what it's really good at is social sites--
| | 00:07 | that is, those sites that accept
members and let them interact with each other
| | 00:11 | through comments and blog posts and so on.
| | 00:13 | A lot of this course is about how to
make Drupal Gardens do what you want,
| | 00:17 | but that's only half the story.
| | 00:20 | If you're going to run a social
web site, you also need to know how
| | 00:24 | people interact with it.
| | 00:25 | Then you have to plan to make that
interaction easy, safe, and free of abuse.
| | 00:30 | Here are five tips.
| | 00:32 | First one is to pretend that you're a visitor.
| | 00:35 | I switched over to another browser
where I am not logged into the site.
| | 00:39 | I just want to browse around it,
make sure that all of the links work.
| | 00:42 | For example, right there, I clicked on
the contact link, and I get this Access
| | 00:47 | denied. What that tells me is I have
to go back and edit this block so that
| | 00:51 | people who are anonymous users don't see it.
| | 00:54 | I will show you very quickly how to do that.
| | 00:55 | I will go back into my administrative
interface, go up to Structure and Blocks,
| | 01:03 | and scroll down to where that block is.
| | 01:05 | Sidebar A, it's that Need guidance block.
| | 01:08 | Click configure, and then scroll
down to the bottom and make it so that
| | 01:14 | only authenticated users and everybody
above that can see the block, and save the block.
| | 01:22 | Now if I go back to my front page, I
as the administrator can still see it.
| | 01:27 | However, an anonymous user going to
that page will see nothing. Very good.
| | 01:31 | We corrected one problem right there,
which we would have missed if we hadn't
| | 01:34 | looked at the site as a visitor.
| | 01:36 | The second tip is to go
through the sign-up procedure.
| | 01:39 | Make sure that you understand how
people are interacting with your site from
| | 01:43 | the very beginning.
| | 01:44 | To do that go on, again, as an
anonymous visitor and click Login or Register.
| | 01:50 | Actually go through the procedure
with an e-mail address that you have, for
| | 01:53 | example, on yahoo.com or gmail.com,
something that's not really your
| | 01:57 | central e-mail address.
| | 01:59 | This way you'll have some
understanding of what people are going through in
| | 02:02 | order to become a part of your site,
and that will help direct exactly how much
| | 02:06 | you give to them without
going through that procedure.
| | 02:09 | You'll start to understand how easy or
difficult it is, and how much of a barrier
| | 02:13 | it is to get to the content
that you want to give them.
| | 02:17 | The third tip is to check roles and permissions.
| | 02:20 | I am going to go back to my
administrative site here and click on People and
| | 02:24 | then click Permissions.
| | 02:25 | I mentioned this earlier in the
course, but it's worth mentioning again.
| | 02:30 | You should particularly look at what
anonymous users and authenticated users can do,
| | 02:35 | because remember, anonymous users is
anybody who comes across your site, and
| | 02:39 | authenticated users is
anybody who signs up for an account.
| | 02:43 | In particular, watch out for anything
that says it has security implications.
| | 02:48 | If you give those permissions away, you
might be allowing people to actually take
| | 02:52 | over your site or destroy things
that you've worked hard to create.
| | 02:56 | Going back up to our list of People,
take a look at the Roles column and make
| | 03:01 | sure that you've given out the roles
the way that you really want them to be.
| | 03:06 | Let's say that califanjoe had gained
your trust and became a blogger but then
| | 03:09 | later on did something you didn't like.
| | 03:11 | Well remember to come back here and
take away that role. And you can remember
| | 03:14 | how to do that by watching the
video about adjusting user permissions.
| | 03:18 | The fourth tip is to make sure that
people aren't abusing your site by checking
| | 03:22 | over the content every once in a while.
| | 03:25 | I'm talking about both the node content,
which includes blog posts and news items,
| | 03:29 | and comments that people add
in response to those nodes.
| | 03:33 | To find out about that, go
up to the Content link here.
| | 03:35 | Once in a while just look
over the content that's come in.
| | 03:39 | Make sure that you know what everything
is, or at least that nothing looks peculiar.
| | 03:43 | That's especially true if you've
given permission to authenticated users to
| | 03:47 | create any nodes, because as I mentioned
before, automated spamming programs will
| | 03:51 | go ahead and just create account after
account and then start filling up your
| | 03:55 | site with junk nodes.
| | 03:57 | Also look at the comments, both
the published comments and those that
| | 04:02 | haven't been approved yet.
| | 04:03 | To learn more about that, once again,
watch the videos about slowing spam
| | 04:07 | and managing comments.
| | 04:09 | The final tip takes a bit of explanation,
but it's also an important one, so I
| | 04:13 | am going to go through the whole thing.
| | 04:15 | You need to adjust your text formats
to prevent people from entering damaging
| | 04:19 | content into your site.
| | 04:20 | I will show you how that works, by going and
adding content, and let's just say basic page.
| | 04:28 | When you create a node, you'll notice
this little pop-up Safe HTML, and it lists
| | 04:32 | of few other choices.
| | 04:33 | If somebody chooses Full HTML and then
switches from WYSIWYG to HTML, they can
| | 04:39 | enter all kinds of damaging content.
And I'd like to actually go through and
| | 04:44 | enter some of this content, so
you get a sense of what can happen.
| | 04:47 | Now I am going to show you something
that's not all that damaging, but it
| | 04:50 | will give you a sense.
| | 04:51 | I am going to call this "Dangerous
stuff," and down here I'll enter in
| | 05:00 | <iframesrc = http://google.com width=
equals 800 height=600"></iframe> and then
| | 05:15 | close out the iframe.
| | 05:18 | So what does that actually do?
| | 05:19 | Let's go down and take a look. I will save it.
| | 05:21 | And as you can see, it actually frames
somebody else's site inside your content.
| | 05:28 | Now, in this case it doesn't matter that much.
| | 05:30 | It's just the Google site.
| | 05:31 | It's not taking up the entire page and so forth.
| | 05:34 | But you can see the sort of
mischief that people can do.
| | 05:37 | I am just going to go back
now and delete that node.
| | 05:43 | There are ways to allow more tags into
your text formats than I've shown you here.
| | 05:48 | To learn more about that, see
my other lynda.com course, "Drupal
| | 05:51 | Essential Training."
| | 05:53 | These five tips will get you
started, but don't kid yourself.
| | 05:56 | When it comes to dealing with
people, there is a lot to learn.
| | 05:59 | That's especially true on the
Internet, where as the old joke says, you
| | 06:03 | don't know who's a dog.
| | 06:05 | New tricks show up every day,
| | 06:06 | so I recommend you also stay in
touch with other webmasters who can give
| | 06:09 | you additional tip.
| | 06:11 | One of the best sites that I've found
to stay on top of Drupal vulnerabilities
| | 06:14 | is crackingdrupal.com, which is led by
longtime Drupal developer Greg Knaddison.
| | 06:20 | Above all, stay in touch with your users.
| | 06:23 | Some of them will get to know your site
better than you do, and they can alert
| | 06:27 | you to any problems that pop up.
| | Collapse this transcript |
|
|
5. Making Sites Interact with the WorldGetting feedback with webforms| 00:00 | Elsewhere in this course, I showed you
that Drupal Gardens comes with a simple
| | 00:03 | contact form built in, and you can
get to it by clicking Contact in this
| | 00:07 | particular template.
| | 00:09 | And you saw how to make a small change
by adding this Category menu down here.
| | 00:13 | Now I am going to show you a way to collect
information that's much, much more flexible.
| | 00:18 | It's called Webforms,
which is turned off by default.
| | 00:21 | So first we have to turn it on by
going up to Modules, closing up our CORE
| | 00:25 | group to get down there more quickly,
scroll to the bottom, and turn on
| | 00:29 | Webforms, and Save configuration.
| | 00:32 | Turning that on adds a content type
called, obviously enough, Webforms.
| | 00:37 | To create a feedback form, you just
add a node of the Webform content type.
| | 00:41 | So we go up to Add content and
Webform. And I'll fill this out.
| | 00:50 | The Title will be Your
dream California vacation.
| | 00:55 | These items on the left are fields
that you can add to your Webform.
| | 00:59 | You simply drag them in like this.
| | 01:01 | Once you've dragged them in, when you
click on one, you see the Field settings.
| | 01:04 | So you can change the Labels and all
the other different options that go along
| | 01:08 | with it, or you could delete them
simply by clicking Delete next to each one.
| | 01:11 | So I am going to start building my form.
Go back over to Add field, and first I
| | 01:16 | am going to add a Fieldset.
| | 01:17 | You will see what this means when we
actually go back and look at our Webform as
| | 01:22 | a user filling it out.
| | 01:23 | So for the Fieldset, I will say,
"First, tell us about yourself," and I'll
| | 01:32 | add some radio buttons. Why not?
| | 01:37 | Again, you can change all of the
settings here. Where are you coming from?
| | 01:45 | And add some options here. Let's say
Eastern U.S., Central U.S., Western U.S.,
| | 01:56 | and add an item and say Outside the U.S.
| | 02:00 | And by default, since most or our
visitors are from the Western U.S., I
| | 02:05 | will change the default.
| | 02:07 | This is just to give you a sense of
all the different things that you can do,
| | 02:09 | because there are quite a lot.
| | 02:10 | We'll add another few fields here.
| | 02:24 | When I added this one, I thought I
would just give people a short answer, but
| | 02:28 | now that I think about it, I'll make it longer.
| | 02:30 | So instead of being a single line,
I'll add a Multi-line text field.
| | 02:38 | Who'll be traveling with you? Very good!
| | 02:42 | You can also add an E-mail field.
And you can even add a Page break so you
| | 02:55 | have Multi-page forms.
| | 03:01 | Then I will add something
on the second page here.
| | 03:11 | Great, that looks pretty good.
| | 03:13 | So we will save it by going all the way down to
the bottom and saying Publish. And there it is.
| | 03:21 | As you can see, it's easy
for somebody to fill out.
| | 03:24 | If we go back and edit it, you'll see
that there are some other form settings
| | 03:27 | that I sort of glossed over here.
| | 03:29 | You can make it a menu selection.
| | 03:31 | When you change it, you could add a
revision to keep track of all of the
| | 03:34 | different changes that you make to the form.
| | 03:37 | You can limit submissions so that
people can only turn into one submission or
| | 03:40 | five submissions or something like that--
| | 03:42 | very good for contests.
| | 03:43 | And you can even have it send you a
conformation e-mail whenever somebody
| | 03:46 | completes the webform.
| | 03:49 | The only thing that I think I'll do is
I'll un-promote it from the front page.
| | 03:52 | I don't really want it appearing on
the front page. And then we'll save it.
| | 03:58 | I think I'll actually go ahead and fill
this in and see what it looks like after
| | 04:02 | we get some answers in.
| | 04:03 | So I am coming from the
Central U.S. I'll travel alone.
| | 04:07 | My e-mail address is admin@example.com.
| | 04:11 | And then you see, since we put in this
page break, we click Next Page, and I
| | 04:17 | want to go "Everywhere in
California!" and then Submit.
| | 04:22 | Terrific! Now, since we are the Administrator,
we can actually look and see what
| | 04:26 | people turned in there.
| | 04:27 | So we go back to the Form, and now we
see this tab here that says Results.
| | 04:33 | There are several things that we could do here.
| | 04:35 | We could simply view them, in which
case we see all of the answers here.
| | 04:40 | And by the way, if the user happened
to have a picture that went with their
| | 04:44 | account, we'd see that here
as well. Going back a bit.
| | 04:48 | We can also edit it to change the
answers, or we can download the entire file.
| | 04:57 | There are also some options for analysis.
| | 04:59 | If several people had answered, of
course we start to get a sense of what the
| | 05:03 | most popular answers were, and where
people are coming from, and then we could
| | 05:07 | change our marketing
based on that webform result.
| | 05:10 | So you can see how powerful webforms can
be, but the truth is, we've only barely
| | 05:15 | scratched the surface, because there
are a lot of additional settings that
| | 05:18 | extend it even further.
| | 05:20 | You can see those if you go up to
Configuration and then down to Webform
| | 05:24 | settings, which is right over here.
| | 05:29 | You can enable all your content types
so that not only do the questions appear
| | 05:32 | on webforms, but as parts of tours,
for example, or anything else.
| | 05:36 | You can allow people to add certain
field types but not other field types as
| | 05:40 | they design forms, and then it just
goes on and on, lots of interesting things
| | 05:44 | you can do with these.
| | 05:45 | And after all this, you might ask,
why even bother with the contact form?
| | 05:49 | Well, the two can be used to
serve slightly different purposes.
| | 05:53 | For example, you could allow logged-in
members to reach you through the contact
| | 05:57 | form, but force anonymous users to give
you extra information through a webform
| | 06:01 | in order to reach you.
| | 06:02 | In any case, the webform system is
an amazing addition to Drupal Gardens.
| | 06:07 | Its flexibility in both input
and data export opens up a world of
| | 06:11 | feedback possibilities.
| | Collapse this transcript |
| Publishing RSS feeds| 00:00 | Until about 12 years ago, you had
to go directly to a web site to get
| | 00:04 | information from it, but the movement
widely known as Web 2.0 encouraged more
| | 00:09 | interactivity among sites
| | 00:11 | so that now, for example, you can read
someone's diary post on livejournal.com
| | 00:15 | without leaving facebook.com.
| | 00:17 | In fact, you can read a lot of the same
content in an e-mail reader or on your mobile phone.
| | 00:23 | The main thing that makes this
happen is called RSS, which is short for
| | 00:27 | Really Simple Syndication.
| | 00:29 | I swear I'm not making that up.
| | 00:30 | That's really what it stands for.
| | 00:32 | I won't go into the detail of how it
works or how to read information through RSS.
| | 00:36 | For that just search the
lynda.com site for videos about RSS.
| | 00:41 | The important thing for us is that Drupal
Gardens publishes your content as RSS feeds.
| | 00:46 | This video shows you how it does that.
| | 00:48 | First, let's talk about how Drupal
Gardens publishes your information.
| | 00:52 | In short, anywhere on your site whether
is a collection of nodes, for example
| | 00:56 | here on the front page, Drupal Gardens
automatically publishes it as a feed, and
| | 01:02 | I'll show you that by clicking on the
little RSS icon up here in the front page.
| | 01:06 | Click and there it is;
| | 01:08 | that's the RSS format.
| | 01:09 | If you wanted to subscribe to this in
another web site or in a mail program or
| | 01:14 | through LiveJournal or another web site
that reads RSS feeds, you just copy this
| | 01:19 | and paste it into the appropriate place.
| | 01:22 | Now on that front page, the RSS icon is for
everything that's been promoted to the front page.
| | 01:28 | For example, if I go down here and take
a look at our tours, and let's say I'm
| | 01:31 | move this Big Sur Retreat to the front page--
| | 01:34 | I'll go up and edit it, scroll down,
and publish it to the front page, save it--
| | 01:41 | then when we go back to the front page,
you'll see that it's also included with
| | 01:45 | the other two nodes. And when we look at
our RSS feed, it's there as well, along
| | 01:50 | with a photo that comes with it.
| | 01:51 | I'm going to just go back and remove
that from the front page, by clicking Edit,
| | 01:57 | scroll down again, publish
and un-promote. There we go.
| | 02:03 | Another place where you'll
find an RSS feed is in each forum.
| | 02:06 | I'll click on Forum to go to all of
our forums, and let's just say this
| | 02:10 | General discussion forum,
| | 02:11 | when I click there, you'll notice
that it brings up an RSS icon up here.
| | 02:15 | Click that and you see the posts that are in it.
| | 02:19 | That brings us to the question, are you
actually giving away all of your stuff
| | 02:22 | when you provide your
content through an RSS feed?
| | 02:25 | Don't worry about it.
| | 02:26 | You have a lot of control over how
much goes out this way through three
| | 02:30 | different methods, and I'll
show you each one of them.
| | 02:32 | The first method affects
every RSS feed on your site.
| | 02:36 | To get there, we'll go back to our site
and then click Configuration and scroll
| | 02:41 | down to RSS publishing.
| | 02:42 | It's under Web Services.
| | 02:45 | You'll notice that you have a choice of
how many items to include in each feed,
| | 02:48 | and also how much of each
individual item to include.
| | 02:52 | I'm going to change that from Full
text to Titles only and save it, and then
| | 02:56 | I'll go back to our front page
and see what that looks like.
| | 02:59 | Back at our front page and look at the RSS feed.
| | 03:03 | Now you see it's just the titles.
| | 03:05 | So if someone were to subscribe to this,
they would have to click through on the
| | 03:07 | title in order to see what the story was about.
| | 03:10 | I'm just going to go back and change it
back. Configuration, scroll down to RSS
| | 03:16 | publishing, and change it again
to Full text, Save configuration.
| | 03:21 | The second method of control affects
all nodes of a specific content type.
| | 03:26 | We can look at this best by going to
our front page, where we'll see a list of
| | 03:29 | nodes of varying content types.
| | 03:32 | We'll go to our front page, and here we
see a basic page and a news item both
| | 03:39 | as part of this feed.
| | 03:40 | Let's say that we only want for the
full text of the news items to come through
| | 03:45 | on our feed, but not those things
that are part of our basic page.
| | 03:48 | What we would do is go up to Structure
and edit the content type by clicking on
| | 03:53 | the Content types link.
| | 03:55 | Then to our Basic page and manage display.
| | 03:59 | Now we talked a little bit about this
when we were putting fields into content
| | 04:02 | types earlier on in the course, but we
skipped over this bit here, Custom Display Settings.
| | 04:07 | I'll open it up now, and we can
change what's displayed in the RSS feed by
| | 04:12 | clicking on this check box and saying save.
| | 04:15 | Now we have another little
button up here that says RSS.
| | 04:18 | We click there, and we can decide
whether we want to show the body or not.
| | 04:22 | By default, incidentally when you
add that custom display, it's hidden.
| | 04:27 | So I'm just going to leave
it that way and say save.
| | 04:31 | Then go back to our front page,
and let's take a look at our RSS feed now.
| | 04:37 | Before, this "Explore our world your way,"--
and remember that was a basic page--
| | 04:41 | showed the whole node.
| | 04:43 | Now, it just shows the title, so again, you can
withhold certain information by content type.
| | 04:49 | The third method to control RSS feeds
works only on simple views, and you learned
| | 04:54 | about those in the video about
simple views earlier on in this course.
| | 04:57 | We created one, you might remember, called New
Tours, and we put that in a block down here.
| | 05:03 | It also shows up on a page, which
you will see if you go to New Tours.
| | 05:09 | Once again, we're looking at a view
which collects all nodes of the Tour content
| | 05:13 | type, and we can see our RSS
feed by clicking right here.
| | 05:17 | And we see the full nodes, as we would expect.
| | 05:20 | But what if we don't show any kind of RSS feed?
| | 05:22 | Well, we can do that by editing the simple view.
| | 05:26 | Click Structure, scroll down to Simple
views and click, and then we're going to
| | 05:30 | edit our Newest tours by
clicking edit next to it.
| | 05:33 | There is a check box here that lets
you add an RSS feed or take it away, and
| | 05:37 | that's exactly what we're going to do.
| | 05:39 | Now by default Drupal includes an
RSS feed with every simple view,
| | 05:44 | so if you don't want them to go out, make
sure you uncheck this, and then click Submit.
| | 05:49 | Now, when we go back to that page, we
see the RSS feed icon has disappeared.
| | 05:55 | So there's the three methods of taking away RSS
feeds or controlling what goes out into them.
| | 06:00 | It doesn't matter which one you choose,
as long as you're conscious of how much
| | 06:03 | you're sending out there.
| | 06:04 | Remember, whatever you publish via
RSS other people will republish on their
| | 06:09 | sites, and they're allowed to.
| | 06:11 | You're saying that you want them to do that.
| | 06:13 | If you don't want that, cut it off.
| | 06:16 | On the other hand, you could
increase how much you're publishing, which is
| | 06:20 | good for a promotional site like
ours where you probably want people to
| | 06:24 | republish your content and draw
them to look at your tours and other
| | 06:27 | information about California.
| | 06:30 | By the way, Drupal Gardens also lets you
display other sites' RSS feeds for free.
| | 06:34 | And if you want to learn about that,
watch the video about subscribing to
| | 06:38 | RSS feeds.
| | Collapse this transcript |
| Taking advantage of social media| 00:00 | Lots of times someone will have a great
idea and build a web site and then get
| | 00:04 | discouraged because no one knows it's there.
| | 00:07 | These days the best way to get the word
out is through social networks such as
| | 00:11 | www.twitter.com and www.linkedin.com.
| | 00:13 | This video shows you three ways to
let your Drupal Gardens site interact
| | 00:17 | with those networks.
| | 00:19 | First, you'll see how to encourage
people to promote your site by posting links
| | 00:23 | about it to social networks.
| | 00:25 | Second, you will see how to promote the
fact that you have a presence on those
| | 00:29 | networks, and third, you'll see how to
let users create Follow me links so that
| | 00:34 | they can promote their
individual presences on those networks.
| | 00:37 | For some of this, you'll need to set up
accounts on those target networks, such as Twitter.
| | 00:42 | For this video, we will
assume you've already done that.
| | 00:45 | If you haven't, several lynda.com
courses show you how to get started.
| | 00:49 | Among them are "Twitter Essential
Training," "Facebook Essential Training," and
| | 00:53 | "Social Media Marketing
with Facebook and Twitter."
| | 00:56 | But let's just take a look at
the Drupal Gardens side of things.
| | 01:00 | First, we will help our members
promote our site on Twitter and the like.
| | 01:04 | Actually, we don't even have to do anything.
| | 01:06 | Drupal Gardens has already set that
up for us, and I'll show you how.
| | 01:10 | Let's go to this node here, which is a news item.
| | 01:12 | Click through so we see the full node, and
underneath each one of these news items,
| | 01:16 | we see this little Share button.
| | 01:18 | If you bring your cursor over it, you
could then click and say, okay, I want to
| | 01:22 | share this on Twitter or Facebook or
any of over 300 other networks--really
| | 01:27 | quite an amazing thing.
| | 01:29 | That's great as it is, but you can
actually change the behavior of that button.
| | 01:33 | I will just close out this window here
and then go up to Configuration and AddThis.
| | 01:38 | This button works by
connecting your site with another site
| | 01:43 | called www.addthis.com.
| | 01:44 | You can use the button whether or not
you already have an account on AddThis.
| | 01:48 | It still works just the same.
| | 01:50 | There are some features that only work
if you've gotten an account on AddThis,
| | 01:52 | but we won't go into those.
| | 01:54 | If you do have an account, you would
enter your username here, and that would
| | 01:58 | help you do some analytic tracking and
see exactly where links are coming from.
| | 02:02 | Below that we have two links here for
Button Image settings and Widget settings.
| | 02:07 | I'm also not going to go into these
because they're quite complicated.
| | 02:11 | They let you change what those buttons
look like. And as you see, there are lots
| | 02:15 | and lots of settings where you can change
the color and all sorts of things like that.
| | 02:18 | The most important things from our
point of view is whether those links appear
| | 02:22 | on node pages or just in the teasers or on both.
| | 02:25 | I am going to make it so that they
appear on the teasers as well as a node pages.
| | 02:29 | This is not my preferred way of doing
things, and I'll show you why in a moment.
| | 02:33 | I will scroll down to the bottom of the
screen by collapsing these and scrolling
| | 02:36 | down, and then I'll go back to the front page.
| | 02:41 | Now, on the front page we have
this button that wasn't there before.
| | 02:43 | You might remember we had to click on
the node's title in order to see the full
| | 02:47 | node before we had the Share button.
| | 02:49 | The reason I don't like this is when
you have it on the front page, you then
| | 02:53 | start mousing around and people end up
doing this all over the place, and it kind
| | 02:57 | of gets in the way.
| | 02:58 | So I am going to go back to Configuration
and AddThis and remove it from the teasers.
| | 03:03 | There is one other thing to know about AddThis.
| | 03:07 | Again, we go back to our front page.
| | 03:09 | We clicked through on this
news item, and we saw the button.
| | 03:12 | If we click through on this node, which is a
basic page, we don't see the button at all.
| | 03:18 | You can control, on a content-type-
by-content-type basis, which nodes show
| | 03:23 | that AddThis button.
| | 03:24 | To do that you would go up to Structure
and Content types, and I'm going to go to
| | 03:30 | Basic page and edit it.
| | 03:32 | Scroll down and you see this
little vertical tab, Addthis settings.
| | 03:36 | If I wanted to show the button on all of
those basic page nodes, I would just check this.
| | 03:40 | But I think I will leave it as it is for now.
| | 03:43 | So that's the first way that you can connect
your Drupal Gardens site to social networks.
| | 03:47 | The second way is by advertising that
you have accounts on those social networks.
| | 03:52 | Now we've already done this in an
earlier video about configuring your site.
| | 03:56 | To show that I'll go back to our front
page and scroll down, and we have this
| | 04:01 | Stay connected block, which has links
to our Facebook and Twitter accounts, as
| | 04:06 | well as one to the RSS feed for the front page.
| | 04:09 | I just want to show you,
once again, how to do that.
| | 04:12 | The way that you do it is you go up to
Configuration, scroll down until you get
| | 04:18 | to Site follow links, and click there.
| | 04:20 | Now earlier when we did this, we
added lynda.com's Facebook and Twitter.
| | 04:24 | I am going to get rid of the Facebook,
and I am going to add my own Twitter
| | 04:28 | account, which is ExpCal, Explore California.
| | 04:33 | After you've added URL, you can
change the Customized Name, so it will show
| | 04:36 | something other than
Twitter, show any word you like.
| | 04:39 | You can also add any of
these other social networks,
| | 04:41 | so they will show up in
that block at the bottom.
| | 04:44 | Click Submit, go back to our front page
and scroll down, where you see that the
| | 04:51 | Facebook link has disappeared and
the Twitter link now goes to our page.
| | 04:57 | I'll just go back to our site though.
| | 05:00 | Finally, we come to the third way to
connect your site to social networks, and
| | 05:04 | that's by letting users promote their
own accounts on those networks in their
| | 05:08 | profiles on your site.
| | 05:10 | By default, Drupal Gardens only
gives permission to do this to users
| | 05:13 | with certain roles.
| | 05:15 | That's a good idea because spammers
love to post links to their sites wherever
| | 05:18 | they can, and this would be
an easy privilege to abuse.
| | 05:22 | But in our case I am going to be
gracious and let all authenticated users do it.
| | 05:27 | To change that permission, you would
go up to People and Permissions, then
| | 05:32 | scroll down to the Follow group,
and add permissions to Edit own follow links.
| | 05:37 | Again, I will give that to authenticated users.
| | 05:41 | Scroll to the bottom and Save permissions.
| | 05:47 | Now, I'll show you how it works.
| | 05:48 | It's a several-step process,
but bear with me; we will get this working.
| | 05:53 | First, I'll switch to another
browser where I am logged on as anybody.
| | 05:56 | I am going to log on as an
ordinary authenticated user on our site.
| | 06:00 | That's califanjoe, who you might
remember we created in another video.
| | 06:07 | Username is califanjoe and the password.
| | 06:14 | The first thing I'll do is I'll show my
own profile by clicking My account.
| | 06:19 | You'll notice one of the things
I can edit is My follow links.
| | 06:22 | I am going to add a Facebook link here.
| | 06:24 | It will be http://www.facebook.com/lynda.com.
| | 06:32 | Of course, that's the lynda
Facebook, but we will use it for
| | 06:35 | demonstration purposes.
| | 06:37 | I will also add a Twitter link.
| | 06:39 | Again, http://twitter.com/lynda.com and then
scroll down to the bottom and click Submit.
| | 06:48 | Now you might think that we would see
that when we click on View, but no; those
| | 06:54 | links aren't actually there.
| | 06:56 | That takes us to the
second part of this process.
| | 06:59 | The reason we don't see those links is
because they show up in a block which you
| | 07:03 | then have to place somewhere on the page.
| | 07:05 | So to do that, we will go back to
our Admin page, which is in our another
| | 07:09 | browser, click Structure and Blocks,
and scroll down to the bottom where our
| | 07:15 | disabled blocks are.
| | 07:18 | The one we want is Follow User,
and I'm going to move that into sidebar
| | 07:22 | B. Scroll to the bottom and Save, and let's
take a look and see where it is on there.
| | 07:29 | I think I am going just move it up above that
feed and scroll to the bottom again and Save.
| | 07:36 | Now, let's go back. Take a look at that again.
| | 07:40 | Go up to People, look at califanjoe's
profile, and there are his follow links.
| | 07:48 | If we look at it from his account, we see the
same thing: his Follow links. That's terrific!
| | 07:55 | There's still one problem,
and this is the last stage in the process.
| | 07:58 | It's the kind of thing that's easy to
miss, unless you regularly check out your
| | 08:01 | site while you're viewing
it as an anonymous visitor.
| | 08:04 | Here I will show you.
| | 08:05 | First, we will log out here,
and then we will try going to that page.
| | 08:11 | Here it is, Users califanjoes.
| | 08:13 | Copy it, bring it over, and paste it.
| | 08:18 | We don't see his profile, but we do
see the ways that we can follow him.
| | 08:23 | In order to change that, we will go
back to our administrative interface,
| | 08:27 | go up to People and Permissions, and
allow everybody to view User profiles.
| | 08:34 | That's way down at the bottom in
the User group, View user profiles.
| | 08:40 | I am going to allow everybody, including
anonymous users, to do that, and then save permissions.
| | 08:45 | Now the other thing you could do
is you could hide that block so that
| | 08:49 | anonymous users don't see it.
| | 08:51 | That way it would always be paired up.
| | 08:52 | So, you would see the Profile
together with the follow links.
| | 08:55 | But you have to be careful to just
make sure that you balance those.
| | 08:58 | Just to make sure it works, I will now go back.
| | 09:01 | Again, I'm in as an
anonymous user. Revisit that page.
| | 09:05 | Now, I see the user and
the follow links. Very good.
| | 09:09 | I know there was a lot of stuff to
digest, but that's just because the Follow
| | 09:13 | and AddThis modules give you a lot of options.
| | 09:16 | But really, once you've got them all
configured and put the blocks in the correct
| | 09:19 | places and set up permissions as you want them,
| | 09:22 | they are fairly simple to operate.
And when you get people actually promoting
| | 09:26 | your content and following you on
social networks, the effect is worth the small
| | 09:30 | amount of work required.
| | Collapse this transcript |
| Emphasizing external links| 00:00 | There is a long-standing debate about
how to handle links that lead from your
| | 00:03 | site to some other place.
| | 00:05 | The default behavior is to just go
straight to them, and in fact, that's the way
| | 00:09 | things work right now on our site.
| | 00:10 | For example, take a look at these links
over here, which go to an off-site feed.
| | 00:15 | If I click any one of them,
that page opens in the same screen.
| | 00:20 | I'll go back to my site now.
| | 00:21 | There are several downsides
to the default behavior, though.
| | 00:24 | First, by staying in the same screen,
you're lowering the likelihood that
| | 00:28 | someone will return to your
site after being led away.
| | 00:30 | Second, someone might believe that
they're still on your site as they go
| | 00:34 | elsewhere and then blame you for
anything they dislike in that outside site.
| | 00:38 | Making matters worse, there's no way to
tell the difference between a link that
| | 00:42 | stays on your site and one that goes elsewhere.
| | 00:45 | Drupal Gardens solves these problems by
letting you change these behaviors with
| | 00:48 | a module called External Links.
| | 00:50 | It's off by default, so
I'll go ahead and turn it on.
| | 00:53 | Go up to Modules and then
go down to External Links.
| | 00:57 | It's in the other group.
| | 00:59 | Turn it on, go to the bottom, and click Save.
| | 01:03 | To see all your options for External
Links, go up to Configuration and then
| | 01:08 | down to External links,
here under User Interface.
| | 01:12 | I am going to leave all of these
default settings, but you get a pretty good
| | 01:15 | sense of how it works.
| | 01:16 | Basically it places icons next to
certain links, so that you can tell that
| | 01:20 | you're leaving the site.
| | 01:21 | There are also some additional options
here so that you can change which ones
| | 01:25 | are considered external.
| | 01:27 | But I'll leave it as is and go
back to our front page and see what
| | 01:29 | exactly that got us.
| | 01:31 | Now you can see that all of the links
that lead off of the site have this little
| | 01:35 | "You are leaving the site" icon, whereas the
ones that stay on your site don't have that.
| | 01:39 | If you click one of these that leads off
of the site, it actually warns you. And
| | 01:44 | again, this is configurable, and if you
click OK, it opens up a new tab up here
| | 01:48 | before taking you to the site that you want.
| | 01:51 | Then when you close it, you're
still on your site in the original tab.
| | 01:55 | I'm kind of a traditionalist, so I am
actually going to turn off this feature by
| | 01:59 | disabling the module.
| | 02:00 | Because there's no content
associated with it, that's all we have to do.
| | 02:04 | Just go up to Modules, go down to
External Links, uncheck the box, scroll to
| | 02:09 | the bottom, and save.
| | 02:12 | This is one of Drupal Gardens' smaller
features, but it's one I really like for
| | 02:17 | the control that it gives you.
| | 02:19 | Now, there is some debate about
whether it's a good idea to open new windows
| | 02:22 | for External Links.
| | 02:24 | On the one hand, as I mentioned before,
you do keep visitors on your site, but
| | 02:28 | on the other hand, it could make your
site seem less reputable, like you're
| | 02:31 | trying to trap people.
| | 02:33 | Before implementing this option, I
recommend reading some of those debates,
| | 02:37 | which you can find by searching the
Internet for the quote "should links open in
| | 02:41 | new windows," or something similar to that.
| | Collapse this transcript |
| Improving search engine optimization (SEO)| 00:00 | Google and other search engines
catalog the web automatically, using
| | 00:04 | sophisticated page and language
analysis to figure out what a site is about.
| | 00:08 | There are things you can do to make
your site more readable to them, resulting
| | 00:12 | not only in better search ranking,
but also better quality search results.
| | 00:16 | Here are four ways to do that in Drupal Gardens.
| | 00:20 | The first one you've already seen,
which is to add a little bit of information
| | 00:23 | here called a site slogan.
| | 00:25 | Earlier in the course, we got rid of
our site slogan, and now we're going to
| | 00:28 | return it back in but not have it
show up here underneath the title.
| | 00:32 | To do that, click Configuration
and then click Site information.
| | 00:37 | In Slogan, I'm going to say
"California tourism and travel."
| | 00:44 | Now, if I Show it and click Save
configuration, it appears right here under
| | 00:50 | the title, but there is still some value if I
add that and then hide it, and I'll show you.
| | 00:56 | I'll scroll to the bottom
after unclicking that Show slogan.
| | 01:00 | Now, it doesn't show up under the
title, but it still shows up here in
| | 01:04 | the browser's title bar.
| | 01:05 | That is important to search engines,
| | 01:08 | so you might as well leave it in.
| | 01:11 | The second method gives your site
credibility to the companies that run search
| | 01:15 | engines, such as Google and Yahoo.
| | 01:17 | I'll show you how it works with Google,
although Drupal Gardens lets you verify
| | 01:20 | your site to other search engines
such as Bing and Yahoo and Yandex.
| | 01:24 | It does this through a module called
Site Verification, which is way down here
| | 01:28 | near the bottom of the Modules page.
| | 01:30 | It's turned on automatically,
| | 01:31 | so you don't have to worry about it.
| | 01:34 | The way that you add a verification is
that you go to Google's webmasters page.
| | 01:39 | That's at google.com/webmasters.
| | 01:39 | I have already logged in to the
Webmaster tools with my account.
| | 01:46 | Now I go down and add a site.
| | 01:48 | Here I type in the URL of my
site, which you might remember is
| | 01:51 | explorecalifornia.drupalgardens.com.
| | 01:54 | I'll just copy it and paste it
there for ease and then click Continue.
| | 01:59 | On the next page, we have several
ways that we can verify it, and actually
| | 02:02 | several of these are
supported in Drupal Gardens.
| | 02:05 | I kind of like the Add a meta tag,
because then you just have to copy and paste
| | 02:09 | a small amount of text here.
| | 02:11 | So we copy it, go back to Explore
California, and click on Configuration.
| | 02:17 | Then go down to Verifications, which
is down here under search and metadata.
| | 02:23 | Add a verification.
| | 02:25 | It's for Google. And then click Next.
| | 02:29 | Click in on META tag,
scroll down, and click Save.
| | 02:34 | Now, when we go back to our Google
Webmaster's page, we click Verify.
| | 02:39 | There. Now, Google knows that we own
the site, and it has a little bit more
| | 02:44 | credibility with Google.
| | 02:46 | Again, you can do this with other
search engines in a very similar way.
| | 02:50 | The third way that you can improve your
site's SEO is by defining an XML sitemap.
| | 02:55 | The way you do that--and let's go
back to our site--is by clicking on
| | 02:59 | Configuration and then down to XML
sitemap, which is right down here under
| | 03:05 | Search and Metadata.
| | 03:08 | Now, the truth is you don't
actually have to add the sitemap.
| | 03:11 | It's automatically created
when you create this site.
| | 03:13 | However, you can change certain
settings in that sitemap which will affect how
| | 03:17 | your site will appear in search
engines, by clicking on the Edit button right
| | 03:21 | here next to the sitemap.
| | 03:23 | First, you can decide whether to
submit or not submit your sitemap to the
| | 03:27 | various search engines.
| | 03:29 | You can change priorities of which
pages and content types and so forth show up
| | 03:34 | in those search engines.
| | 03:36 | I won't go through all of the details
here because they get quite complex.
| | 03:40 | I'll show you, in a minute, where you
can get those details and figure out how
| | 03:43 | best to position your site, but first
I'll show you exactly what this gets you.
| | 03:47 | I'll open up a new window
and search in Google for "lynda."
| | 03:51 | Of course, that brings us to
lynda.com's site right at the top.
| | 03:56 | You see all of these sublinks here that go
to different areas of the lynda.com site?
| | 04:01 | Those were pulled out of the site,
because they were decided to be the most
| | 04:05 | important ones in the entire site.
| | 04:07 | Well, with the XML sitemap and by
changing all of the weights that you have
| | 04:11 | here--that is, deciding that a page is more
important than a forum topic, for example--
| | 04:15 | you can determine which ones will show
up in searches when somebody searches on
| | 04:20 | Google or Bing or another search engine.
| | 04:23 | There is a documentation page
on the Drupal Gardens site at
| | 04:27 | drupalgardens.com/documentation/
modules/xml-sitemap, which will give you a
| | 04:34 | lot more details about how exactly to improve
the way your site is presented to search engines.
| | 04:40 | Finally, I want to briefly mention a
couple of other ways that Drupal Gardens
| | 04:44 | makes your site friendly to search engines.
| | 04:46 | You don't have to do anything with
them though, because they're turned on and
| | 04:48 | preconfigured by default.
| | 04:51 | One of them has no settings you can
change, and you should usually just leave
| | 04:54 | the other one alone.
| | 04:55 | The first one is called URL aliases and
formerly known as Pathauto in the Drupal world.
| | 05:01 | To get there, we'll go back to our site
and then click Configuration, scroll down
| | 05:07 | a bit to URL aliases.
| | 05:11 | As you could see, this takes nodes
that we've posted, which are naturally
| | 05:14 | known by their node number--node 12,
node 57--and gives them a name that more
| | 05:19 | describes what they are.
| | 05:21 | This name is automatically created by
Drupal Gardens by setting up patterns and
| | 05:26 | then taking certain words from the title.
| | 05:29 | So as you can see it's
just content, slash, node:title.
| | 05:32 | There is some language
manipulation that's done on that,
| | 05:35 | for example to drop words like A and V,
but the effect is very good for search
| | 05:39 | engines, because it sees not only does
the page concern let's say a tour in Big
| | 05:44 | Sur, the title and URL all agree with
that, and that builds credibility with
| | 05:49 | various search engines.
| | 05:51 | The second way that Drupal Gardens
helps improve your site's presentation to
| | 05:54 | search engines is called RDF, which
stands for Resource Description Framework.
| | 05:58 | There is not much to show
about it in Drupal Gardens.
| | 06:00 | It's just something that's there by default.
| | 06:02 | What it does is to describe
your content in a way that other
| | 06:05 | computers understand.
| | 06:07 | I can explain how that works by going
to Google once again and doing a search
| | 06:11 | for a movie, let's say Avatar.
| | 06:13 | Now as we look down here, because the
IMDb site speeds up the information about
| | 06:19 | ratings to Google, we see the
rating right here in Google.
| | 06:23 | This is also true about products.
If we were to type, for example, Xbox, we not
| | 06:28 | only see ratings, we also see
prices and how many reviews there are.
| | 06:32 | Again, Drupal Gardens automatically
feeds up some of this information.
| | 06:36 | If you're curious about how RDF works, the
best place to go to find out is at W3.org/RDF.
| | 06:45 | Now, search engine optimization is a
huge subject, and a whole industry has
| | 06:49 | grown up around it.
| | 06:51 | The good news is that Drupal in
general, and Drupal Gardens in particular, is
| | 06:55 | really good at presenting your pages
to search engines and also to other
| | 06:59 | computers around the web.
| | 07:02 | This page on the Drupal Gardens web
site gives you a few more tips on how to
| | 07:06 | make SEO even better in Drupal Gardens,
but a lot of SEO is based on things like
| | 07:11 | how you link text and where
elements appear on the page.
| | 07:14 | You're best way to learn all this
stuff is to watch the lynda.com course "SEO:
| | 07:19 | Search Engine Optimization Getting Started."
| | 07:22 | And of course, you can always learn
more by searching for SEO on the web in
| | 07:26 | general, because there is
a lot of stuff out there.
| | Collapse this transcript |
| Internationalizing sites| 00:00 | One difficulty in creating something for the
World Wide Web is that, well, it's worldwide.
| | 00:06 | That means that if your site is
successful, your content will be seen by people
| | 00:10 | in many different time zones, speaking
many different languages, and using many
| | 00:14 | different date and currency formats.
| | 00:16 | How much you want to adapt your site
to them is up to you, but whatever you
| | 00:20 | decide, Drupal Gardens is already set up for it.
| | 00:24 | Just to be clear about terminology,
Drupal Gardens is what's called
| | 00:27 | "internationalized software."
| | 00:30 | If you decide to take advantage of that
feature, you'd be localizing your site
| | 00:34 | to make it friendlier to
people in various locales.
| | 00:37 | Now internationalization and
localization are very big subjects and much too big
| | 00:41 | to cover in one video.
| | 00:42 | I'll show you where the
controls are in Drupal Gardens.
| | 00:46 | Actually, making them work to their
fullest extents is a much bigger subject.
| | 00:51 | At the end of this video I will
show you some additional resources that
| | 00:54 | will give you more help.
| | 00:56 | Let's start by taking a look at the
basic internationalization controls that are
| | 01:00 | already enabled in Drupal Gardens.
| | 01:02 | To do that, we go to Configuration and
then scroll down to Regional and Language.
| | 01:09 | Here we see Regional settings and Date and time.
| | 01:11 | I won't go into great detail,
but you can see that you can set a default
| | 01:15 | country, first day of the
week, time zone, and so on.
| | 01:19 | These things, believe it or not, vary
quite a bit from country to country.
| | 01:22 | In some places, for example, Monday
is considered the first day of the week,
| | 01:25 | while in others Sunday is, and that
comes into play when you start dealing with
| | 01:29 | date-related information, but for
us we'll just get out of this screen.
| | 01:34 | Similarly, if you change the Date and
time formats, it will look right to people
| | 01:39 | in whatever area you're trying to appeal to.
| | 01:42 | So those are the basic non-language settings.
| | 01:46 | To actually get started translating
your content into other languages, you will
| | 01:50 | need to enable a couple of other modules.
| | 01:52 | These are the Locale
module and Content translation.
| | 01:55 | We will start by just doing
the first one, the Locale module.
| | 01:59 | Go up to Modules and scroll down.
| | 02:02 | It's in the Core group, so not too far down.
| | 02:05 | Then scroll down and Save.
| | 02:07 | When that module is on you will see
additional controls under Configuration, in
| | 02:14 | that Regional and Language group.
| | 02:16 | These are Languages and Translate interface.
| | 02:19 | First, I'll click Languages.
| | 02:22 | Now, right now our site is only
set up for one language, English.
| | 02:25 | I am going to add a language to that.
| | 02:28 | I'll add the only other one that I know
fairly well, Esperanto, and Add language.
| | 02:34 | There are quite a lot of choices on
that list though, and if you wanted to you,
| | 02:39 | could even add a language
that's not on that list.
| | 02:41 | That's more complicated than we can
describe here, but it is possible.
| | 02:46 | Now that we have our two languages, we
want to tell to Drupal Gardens when to
| | 02:50 | use one or the other, and how to
present those languages to the user.
| | 02:54 | So I go up to the Detection and
Selection tab here in the right corner.
| | 02:59 | There are several different ways
the Drupal Gardens can present these
| | 03:02 | different languages to you.
| | 03:03 | For example, it could look at the
user and decide, well, what does the
| | 03:07 | user's browser say?
| | 03:09 | What did the users say in their profile
on Drupal Gardens? Or it could just use
| | 03:13 | the default site language.
| | 03:14 | I am going to use the URL.
| | 03:17 | I will click that to enable it,
and then I'll show you some of the
| | 03:19 | configuration options.
| | 03:21 | Once again, Detection and
Selection, and Configure.
| | 03:23 | There are two different ways that
you can change the URL to show what
| | 03:26 | language is being used.
| | 03:28 | One of them is in the domain.
That would be eo.explorecalifornia,
| | 03:33 | et cetera, et cetera.
| | 03:34 | The other one is by changing the path prefix.
| | 03:37 | So it would be explorecalifornia.
drupalgardens.com/eo and then the rest of the path.
| | 03:43 | I am going to leave it as the Path prefix.
| | 03:45 | So now we've configured our site
to show two different languages.
| | 03:52 | The next thing we are actually going
to do is start translating our content.
| | 03:57 | Before going on there I want to warn
you away from something that can be
| | 04:00 | a little confusing.
| | 04:01 | If you go up to Configuration and
scroll down again to that Regional and
| | 04:07 | Language area, you see
this Translate interface link.
| | 04:10 | That actually doesn't let
you translate your site;
| | 04:13 | instead, that's so that you can
translate Drupal's interface itself.
| | 04:17 | So instead of "people" here, it would be "homoy,"
which is the Esperanto word for people.
| | 04:23 | So what we have to do is go back to
Modules and turn on the Content translation
| | 04:28 | module, and then scroll and Save.
| | 04:30 | All right, we're almost there.
| | 04:37 | We can't yet start translating
content until we do one last thing.
| | 04:41 | Content translation is only available for
content types that you've enabled it on.
| | 04:46 | By default, it's not on any of them.
| | 04:49 | So, the way we change that is go up to
Structure and Content types, and in my
| | 04:54 | case I'm going to make the tours
available--that is, the Tour content type--
| | 04:58 | available for people in
both English and Esperanto.
| | 05:02 | So I go to Tour and click edit.
| | 05:05 | If you need more help with this area,
by the way, see the video on creating and
| | 05:08 | managing content types.
| | 05:10 | As we scroll down and click
Publishing options, you will notice some
| | 05:14 | additional options.
| | 05:16 | This multilingual support is disabled right now.
| | 05:19 | I'm going to enable it, with
translation, and then save the content type.
| | 05:24 | Now we're finally ready
to start our translation.
| | 05:27 | To do that, we will go back to
any node of the Tour content type.
| | 05:31 | I know that if we go back for homepage
and look down here, we have a simple view
| | 05:36 | that we set up earlier on
which shows all of the tour nodes.
| | 05:40 | So I'll just click on this Big Sur Retreat.
| | 05:44 | When we click Edit on this node, we
notice a new option, which is down here
| | 05:50 | toward the bottom, and it
says, what language is this in?
| | 05:54 | In this case, instead of being simply
language-neutral, we know that this one is English,
| | 05:58 | so I will change it to
English and then click Save.
| | 06:03 | Now I want to produce the Esperanto version.
| | 06:06 | Once I name this one as a
specific language--English--a new tab
| | 06:10 | appeared: Translate.
| | 06:12 | By clicking the Translate tab, I can now add
the translation in Esperanto for this node.
| | 06:19 | What I will do is I will just say
"Retreto al Big Sur," and then of course I would
| | 06:27 | change the body as I wanted: "Granda
promenado en Big Sur." Excellent!
| | 06:37 | And of course, the language
is Esperanto, and we save it.
| | 06:42 | So now we're back, and we
are looking at that node.
| | 06:45 | This one is in Esperanto. As we scroll down,
| | 06:48 | we see there is a tag at
the bottom in English. Ah!
| | 06:51 | We can switch back and forth between the
English and Esperanto versions very easily.
| | 06:55 | Just look at one.
| | 06:56 | If we want to the other, we click on the tag;
now we are on the English. And back again.
| | 07:01 | Very easy.
| | 07:03 | I do want to mention one little oddity
that comes up when you start translating
| | 07:07 | nodes: If you have these grouped into any
sort of collection of nodes such as you
| | 07:12 | would in a simple view, it'll show up
twice, and we could see that by going down
| | 07:16 | to our little block down here.
| | 07:18 | See we have both Big Sur
Retreat and Retreto al Big Sur.
| | 07:21 | Well, that's not necessarily so bad
because, of course, somebody might want to
| | 07:25 | be looking for it in Esperanto
and not recognize the English.
| | 07:28 | But again, you should just be aware that
| | 07:30 | that's one of the things that happened.
| | 07:32 | I said at the beginning of this video
that I would provide some additional
| | 07:35 | resources, and here they are.
| | 07:37 | I hope it's clear that
internationalization is a complicated issue, and we have
| | 07:41 | really only dipped our toes in the water here.
| | 07:44 | I know that what I have shown
was a pretty incomplete solution.
| | 07:47 | Partly that's because we don't have the
time to go into all the ins and outs of
| | 07:50 | internationalization, and partly it's
because getting a site to appear only in
| | 07:54 | the visitor's preferred language isn't
quite possible yet in Drupal Gardens.
| | 07:59 | But even the solution you have seen
here is better than most available.
| | 08:02 | I expect it to improve in
the months and years to come.
| | Collapse this transcript |
| Tracking site usage with Google Analytics| 00:01 | They say that listening is more
important than speaking, and that's why we have
| | 00:04 | two ears but only one mouth.
| | 00:06 | The thing is, people don't
say much directly on the web.
| | 00:10 | They just come to your site, look at
a few things, and then leave silently.
| | 00:13 | But even if they are not saying anything
directly, you can still listen indirectly.
| | 00:19 | You do that through a web site analysis
system. Drupal Gardens integrates well
| | 00:23 | with Google Analytics, the
most popular such system.
| | 00:26 | You first have to sign up for it
though, which you do it google.com/analytics.
| | 00:31 | Through Google Analytics you won't be
able to watch someone as they move through
| | 00:35 | your site or discover their e-mail
address and pester them afterwards.
| | 00:39 | What you get instead is what's
called aggregated information.
| | 00:43 | So you might find out, for example, that we
get more visitors from Mexico than from Japan.
| | 00:47 | We then know that we would get a better
return producing translations in Spanish
| | 00:52 | than Japanese: very useful information,
although again not for specific people--
| | 00:56 | only aggregated groups of
people who visit your site.
| | 01:00 | First, you have to add your site's
domain to your Google Analytics account.
| | 01:03 | Once you have logged in to Google
Analytics, the procedure is fairly simple.
| | 01:07 | I have already signed up
and logged in to my account.
| | 01:10 | I will add a new web site profile by
clicking down here, Add Website Profile.
| | 01:16 | Down here you type in the URL that you
would like to track; in our case that's
| | 01:20 | simply explorecalifornia.
drupalgardens.com, and then click Finish.
| | 01:27 | Now we are going to have to come back
and copy this code right here next to Web
| | 01:33 | Property ID, so leave this page up.
| | 01:36 | But right now, I am going to go
back to our site and turn on the Google
| | 01:39 | Analytics module, which is turned off by default.
| | 01:42 | To do that go to Modules and then
scroll down to the Google Analytics Module.
| | 01:48 | It's fairly far down under Statistics.
Turn it on and Save configuration.
| | 01:56 | Now that it's turned on we have to
take that code that we got from Google
| | 01:59 | Analytics and put it into
our Drupal Gardens site.
| | 02:02 | To do that, go up to Configuration
and scroll down to Google Analytics.
| | 02:07 | Now you will notice we now
have this error message up here.
| | 02:09 | This is actually just telling us
that we haven't added our information
| | 02:12 | into Google Analytics.
| | 02:14 | If you click on the status report
link, you will see that; as we scroll down
| | 02:17 | see Google Analytics Module, and in fact you can
get directly to the Settings page here as well.
| | 02:22 | Now this is where we paste in that Property ID.
| | 02:25 | I will go back and copy it and then go
back to Google Analytics in our site and
| | 02:31 | paste it and scroll down and Save configuration.
| | 02:37 | Once we have done that, we can go back
to our Google Analytics page, scroll down
| | 02:40 | to the bottom, and click Save and Finish.
| | 02:44 | Now you see a warning here
that we can't yet see that
| | 02:47 | explorecalifornia.drupalgardens.com report.
Don't worry about it.
| | 02:52 | It takes a little while for this to be
set up between Google Analytics and your
| | 02:56 | site, but after a few hours you
will start to notice some activity.
| | 03:00 | The last thing I want to mention is about some
of the options that you have back on our site.
| | 03:05 | So let's go back there and
take a look down through here.
| | 03:09 | There are actually quite a few options.
| | 03:11 | You can have Google Analytics only look
at certain roles--that is, what certain
| | 03:15 | users do, see exactly what all the
bloggers are doing, what pages they tent to
| | 03:19 | go to, for example--only have Google
Analytics watch certain pages, or you
| | 03:24 | could have it track downloads from your site.
| | 03:26 | I won't go into all of these details,
but if you want to learn some more about
| | 03:29 | it, there are several courses
on lynda.com that will help you:
| | 03:33 | One of them is "SEO, Search
Engine Optimization Getting Started";
| | 03:37 | another is "Google Analytics Essential
Training"; and finally, "Google Website
| | 03:41 | Optimizer Essential Training."
| | 03:43 | All of these will help you to get
more information out of your site
| | 03:45 | though Google Analytics.
| | Collapse this transcript |
|
|
6. Introducing the Theme BuilderUnderstanding Drupal themes| 00:00 | One of the first things people ask
when they create a web site is, how do
| | 00:03 | I change the design?
| | 00:05 | I gave you a little peek of Drupal
Gardens' capabilities for this in the video
| | 00:08 | about what Drupal Gardens is,
but now it's time to dive in deep.
| | 00:13 | The best way to understand how Drupal
Gardens handles design is to first look
| | 00:17 | at how Drupal does, because Drupal is the
underlying software beneath Drupal Gardens.
| | 00:22 | Drupal defines design through its themes.
| | 00:26 | To look at its themes, we are going
to switch away from Drupal Gardens and
| | 00:29 | turn to core Drupal, which I've already
downloaded and have running on my own computer.
| | 00:34 | Don't worry if it's a bit
unfamiliar to start with;
| | 00:36 | it'll all come clear in the end.
| | 00:38 | So first we will switch over to core
Drupal and then take a look at our themes
| | 00:42 | by clicking on Appearance.
| | 00:44 | The default theme in core Drupal is
called Bartik, and this little screenshot
| | 00:49 | should look familiar to you because
it's what we saw just a minute ago when we
| | 00:52 | were looking at the just-installed site.
| | 00:55 | The other theme that comes
enabled with Drupal is called Seven,
| | 00:59 | which again should look
familiar to you because this is the
| | 01:01 | administrative overlay theme.
| | 01:03 | You see this when you click anything up here
in the toolbar; for example, the Modules link.
| | 01:08 | It's the thing that floats over Bartik,
so we have Seven above and Bartik below.
| | 01:14 | Core Drupal also includes two other themes
that are disabled by default: Garland and Stark.
| | 01:19 | We don't have to talk about these.
| | 01:21 | In order to change from one theme to
the other, you click the Set default link.
| | 01:26 | So I'm going to change our default
theme here from Bartik to Seven and then
| | 01:30 | close our administrative
overlay, and the screen will redraw.
| | 01:33 | Now we see the entire site in that Seven theme.
| | 01:36 | I'll switch it back by just going down and
Set default next to Bartik, and there we are.
| | 01:43 | One big difference between Drupal
Gardens and core Drupal, as you know, is that
| | 01:47 | Drupal Gardens lives on Acquia servers.
| | 01:49 | Whereas core Drupal, you download to
your own computer; you play with it; you
| | 01:53 | might upload it to another computer.
But the thing is, you have control over the files.
| | 01:57 | So let's take a look at what
files actually make up a Drupal theme.
| | 02:00 | We will close out this window and
then open up the folder I have here:
| | 02:04 | Drupal-7. This is the Drupal software itself.
| | 02:07 | I scroll down and open up the Themes folder.
| | 02:10 | This is where the themes
that come with Drupal live.
| | 02:13 | They might also live in other
folders, but these are the core themes.
| | 02:17 | I'll open up Bartik, and we see
it's contained a number of files.
| | 02:22 | The most important one is this .info
file, which has a number of instructions
| | 02:26 | that tell Drupal where all the
files are that define this Bartik theme.
| | 02:31 | The CSS folder is also very important.
| | 02:34 | Let's open up one of those files.
| | 02:36 | When you open one of the CSS files,
you see styling information in the CSS, or
| | 02:40 | cascading style sheets, language.
| | 02:43 | Again, you can learn more about CSS by
watching courses on that topic on lynda.com.
| | 02:49 | We won't be going into great detail in it in
this course, although it is good for you
| | 02:52 | to learn it because we will need to
have a little bit of CSS in order to change
| | 02:56 | our themes in Drupal Gardens.
| | 02:58 | In addition to the CSS files, there
are additional files in the theme.
| | 03:02 | For example, Templates lets you
change the way that the page looks in
| | 03:06 | different contexts.
| | 03:08 | In this case, for example, comments
are styled one way, while entire nodes
| | 03:12 | are styled another way.
| | 03:13 | The number of template files
will vary from theme to theme.
| | 03:17 | So just to summarize, most of the
visual decisions in Drupal themes are
| | 03:22 | defined by its CSS Files.
| | 03:24 | Once again, in Bartik that's in the css folder,
but it doesn't have to be, by the way; it could be loose
| | 03:30 | in this folder or in subfolders or so
forth. All of that is defined in the .info
| | 03:35 | folder, which tells the theme
where to find all of these files.
| | 03:39 | Logic, and to some extent layout,
is defined by these template files.
| | 03:43 | These are written in the PHP
programming languages. Graphic elements are stored
| | 03:48 | in separate files; in Bartik they in
this folder called Images. And all of this
| | 03:52 | is pulled together by that .info file.
| | 03:55 | In core Drupal, as you already saw, all
of this is hidden from you; all you have
| | 04:00 | to do is click Appearance,
select your theme, and you're golden.
| | 04:04 | Now let's take a look at how
Drupal Gardens handles appearance.
| | 04:08 | We'll switch over to Drupal Gardens and
then click Appearance. Now, instead of
| | 04:14 | getting that simple screen, we get a
theme editor, what they call the Theme
| | 04:18 | Builder. And here we can switch from
theme to theme just like in core Drupal, or
| | 04:23 | we can style individual elements very
easily by simply clicking on Styles,
| | 04:28 | selecting the thing we want to change,
and then let's say we want to make that a
| | 04:31 | bigger font, and there we go.
| | 04:34 | Now, there are lots of controls in
Drupal Gardens' Theme Builder, and we will go
| | 04:38 | over all of these in the next 15 videos or so.
| | 04:41 | Just as importantly, you learn how to
export the themes you create, so you can
| | 04:46 | use them in any Drupal site, not
just those hosted on Drupal Gardens.
| | 04:50 | So you can start in Drupal Gardens,
design your theme, design your site, then
| | 04:54 | take it out and host it
yourself anywhere you like.
| | 04:58 | Drupal theming is a huge subject, and to
be honest, it's too big for me personally.
| | 05:03 | If you want to learn more about it, I
recommend lynda.com's video series by
| | 05:07 | Chris Charlton, which is called "Drupal:
| | 05:09 | Creating and Editing Custom Themes."
| | 05:11 | That series talks about how to
create Drupal themes the traditional way.
| | 05:16 | What you learn in that course will also
show you how to modify themes you create
| | 05:19 | in Drupal Gardens, and it'll show
you how to do things that aren't quite
| | 05:23 | possible in this Theme Builder.
| | 05:25 | The Theme Builder can do a lot but not
quite as much as in the traditional way;
| | 05:29 | and once you start using it, you'll find
that it's really not that hard. Best of all,
| | 05:34 | the theme builder creates real
Drupal themes. They look great.
| | 05:38 | They work well in Drupal Gardens,
and they can be taken out and installed
| | 05:42 | in core Drupal.
| | Collapse this transcript |
| Understanding the Theme Builder| 00:00 | Before we start poking around in Drupal
Gardens' Theme Builder, let's get a quick
| | 00:04 | overview of its controls.
| | 00:06 | To launch the Theme Builder, click Appearance.
| | 00:10 | The Theme Builder has five tabs: Themes,
Brand, Layout, Styles, and Advanced.
| | 00:16 | The Themes one is the simplest one;
| | 00:18 | it lets you just switch
from one theme to another.
| | 00:21 | So, for example, I'm going to
change to the Broadway theme.
| | 00:24 | I click it and the entire site changes.
| | 00:27 | You see the same content;
it just looks different.
| | 00:30 | You can hide the Theme Builder by
clicking this little Minus sign.
| | 00:34 | That keeps it active so that you can
quickly go back and do other styling, but
| | 00:38 | it lets you see more of the page, as you can see.
| | 00:41 | Let's make it large again by clicking
on the Plus sign and switch to another
| | 00:45 | one--let's say Carbon.
| | 00:49 | And once again, it's all of the same
content, just in a different appearance, and
| | 00:53 | we'll show it again.
| | 00:55 | In addition to the themes that Drupal
Gardens gives you, as you load and edit
| | 00:59 | these themes you'll be
creating your own versions of them,
| | 01:03 | and so in addition to the Gardens theme
tab here, there is also a My themes tab.
| | 01:07 | Right now, it's empty, because we
haven't saved any of our own versions, but as
| | 01:11 | we go through this course, you'll
see this fill up more and more.
| | 01:14 | Let's go on to the other tabs.
| | 01:17 | The second one is the Brand tab,
which has two subtabs here.
| | 01:21 | It should be fairly obvious from the
appearance what the Palettes tab does.
| | 01:26 | You click on any one of these color
combinations and it changes the entire
| | 01:30 | color of that theme.
| | 01:32 | Now notice it's not just the background--
although that's the most obvious thing,
| | 01:35 | it also changes text color. These are very
subtle changes, but they make a big difference.
| | 01:40 | The Logo subtab lets you upload your
own logo that will up here near the top of
| | 01:45 | the page right by the title.
| | 01:47 | The Favicon lets you change
this little thing that shows up.
| | 01:51 | It's usually in the address bar and
also sometimes in tabs and browsers.
| | 01:55 | The Layout tab lets you change how
many columns there are on the page.
| | 02:02 | Let's take a look at our page here.
| | 02:03 | I'm actually going to go
back to the way that we have it.
| | 02:06 | I'll discard our unsaved changes,
and you'll see it switches right back to
| | 02:10 | that Campaign theme.
| | 02:12 | Now in this one we have a left-hand
column and a right-hand column around a
| | 02:17 | central content area.
| | 02:18 | I'm going to go back into the Appearance to
launch the Theme Builder, go back to Layout,
| | 02:27 | and let's change that so that both of these
columns are on the right-hand side. There we are.
| | 02:32 | It's actually quite a nice effect
once you have your columns all set up.
| | 02:36 | Sometimes you like to have your
main content on the left or the right.
| | 02:39 | You get all of those
options here in this Layout tab.
| | 02:43 | Now, the Styles tab is the most flexible of all.
| | 02:47 | This is the one that lets you
style individual elements on the page.
| | 02:51 | Once you've selected this tab, when
you move your cursor over any elements on
| | 02:55 | the page they become sort of highlighted.
| | 02:57 | Let's say we want to change this
title up here, the explorecalifornia title.
| | 03:01 | I click it and then change its
font to, let's say Lucida Sans.
| | 03:07 | There, and you saw a subtle change
there, change it to Monaco, and so forth.
| | 03:12 | The Styles tab has to other subtabs--
Borders & Spacing--which lets you change, as
| | 03:17 | you might guess, borders around things,
and how they're based on the page.
| | 03:22 | Again, we'll talk more about
this later on in the course.
| | 03:26 | The Background lets you change
what happens behind an element.
| | 03:30 | So, for example, you could change
it to a color, or you could even add a
| | 03:33 | graphic. That's sort of what you see in
this entire page; you have this big body
| | 03:38 | graphic behind everything.
| | 03:40 | Finally, in the Advanced tab, you can
add your own CSS code, and again we'll be
| | 03:45 | talking about this much later in the course.
| | 03:48 | When you finish designing your theme,
you can save it, which will allow you to
| | 03:51 | hold onto it and make other changes
without actually publishing it--that is,
| | 03:55 | without making it live to everybody.
Or you could go ahead and publish it.
| | 03:59 | Before you publish, it'll force you to
save it, and then we'll publish it so that
| | 04:03 | everybody sees the new
theme that you've designed.
| | 04:06 | Finally, there is an Undo and Redo button--
| | 04:08 | this works just the same as in
many programs--and the Export button.
| | 04:13 | You'll learn more about that
in the video "Exporting Themes"
| | 04:16 | These ones up here get a little bit
complicated, and I'll show you how they work
| | 04:21 | all together in switching,
saving, and copying themes.
| | 04:25 | Now when we close it out, we lose all of
our changes unless we decide to save them.
| | 04:29 | I'm just going to go back to what we had.
| | 04:31 | Yes, I want to discard them,
and we're back as we were.
| | 04:35 | So that's your brief
introduction to theming in Drupal Gardens.
| | 04:40 | If you're the sort of person who does
well by poking around, this is a really
| | 04:43 | good time to just stop and
spend some time doing that.
| | 04:47 | Create a new site, as you learned in the
video about getting started with Drupal Gardens.
| | 04:52 | Personally, I like to have what I
call a throwaway site, so that I can
| | 04:56 | experiment without worrying about what happens.
| | 04:59 | You can't hurt anything in Drupal Gardens;
the only thing that you might hurt, so
| | 05:03 | to speak, is a site that if you have a
throwaway site you didn't mean to do
| | 05:07 | anything with anyway.
| | 05:09 | As you start mucking around with themes,
I do want to recommend that you save
| | 05:12 | copies as you go, using that Save as button.
| | 05:16 | That way you can roll back to an
earlier one if you make a mistake.
| | 05:19 | I'll show you how to do that in the
video about switching, saving, and
| | 05:22 | copying themes.
| | Collapse this transcript |
| Switching, saving, and copying themes| 00:00 | There are four steps to
changing themes in Drupal Gardens.
| | 00:04 | First, you select the base theme; then
you modify it if you like or leave it as
| | 00:08 | it is; then you save your version;
and then you publish it to the web.
| | 00:12 | So once again you select your theme, you
modify it, you save it, and you publish it.
| | 00:17 | It can get a bit confusing in those
middle two steps there, the Save and Publish,
| | 00:22 | because you'll usually do several
rounds of revisions before publishing and
| | 00:25 | perhaps save intermediate
versions under various names as you go.
| | 00:30 | I'll try to make it clearer by showing you
what the typical design process looks like.
| | 00:34 | Now I'll be working on this theme in
Firefox when I'm administering it, but I've
| | 00:38 | also brought up the site in Google
Chrome, so that we can see what it looks like
| | 00:42 | to a visitor. But let's go back to
our administrative interface and click
| | 00:46 | Appearance, so we can start working with it.
| | 00:50 | First, I'll do something very simple.
I'll change it to Minima, and as you know,
| | 00:56 | the entire site look changes.
| | 00:59 | One thing that's really nice about
Drupal Gardens, by the way--and it's often
| | 01:03 | not true about Drupal in general--is that
all of the themes have the same block regions.
| | 01:08 | So content doesn't just disappear
because the region names are different.
| | 01:12 | It just stays in the same place.
| | 01:14 | So our feed that we had here is
here, and our block up here is here.
| | 01:18 | It didn't does appear.
| | 01:19 | That sometimes does happen in core
Drupal, but not in Drupal Gardens.
| | 01:24 | Now by clicking Publish we'll make
Minima the active theme but that everybody
| | 01:28 | sees when they visit the site.
But Minima is the template's name.
| | 01:32 | We can't change the template itself, so
Drupal Gardens is now asking us to save
| | 01:36 | it as one of our custom themes.
| | 01:38 | We're doing what's technically
called "making an instance" of Minima.
| | 01:42 | I'm just going to call this exp_cal_01.
| | 01:46 | This is a naming convention that I
like to use because that way I can have
| | 01:49 | multiple versions and know which came first.
| | 01:52 | I then click OK; it takes a little
minute; and we get this message here saying
| | 01:59 | that it was successfully copied and saved.
| | 02:03 | And once it's been published, we get this
message saying that the theme is now live.
| | 02:08 | By the way, I just want to mention that
these theme names, that exp_cal_01 that I
| | 02:13 | gave it, only pertains to this site.
| | 02:15 | As you know, you can have multiple
sites on Drupal Gardens, and if you have
| | 02:18 | the same theme name in different
ones, that's perfectly okay; they don't
| | 02:22 | relate to each other;
| | 02:23 | they are specific to the
one site you're working on.
| | 02:27 | Now let's prove that this actually is
published by switching over to our Google
| | 02:31 | Chrome browser and
reloading the page, and there it is.
| | 02:35 | This is what the world would actually see.
| | 02:37 | Now let's go back and continue
our administration of the theme.
| | 02:42 | Once you start saving themes, they
appear in the subtab here under My themes.
| | 02:46 | Now I want to say something about
this underlining that I did here.
| | 02:50 | I recommend that you use underscores
instead of spaces or hyphens in your theme name.
| | 02:56 | They will be changed into underscores
on the server anyway, and if you don't
| | 02:59 | know that, you could later have trouble,
because you're looking for certain theme
| | 03:03 | assets, and they're in the wrong place.
| | 03:05 | That particular issue stopped me for a
whole day once, so just use underscores
| | 03:09 | and avoid that whole problem.
| | 03:12 | Now right now, the Save
button up here is grayed out.
| | 03:17 | That's because we haven't
made any changes to this theme;
| | 03:19 | it's exactly the same as Minima.
But let's say that we were to make this
| | 03:23 | a little bit bigger.
| | 03:24 | I'll click on Styles and then click on
our title, and then just make it slightly
| | 03:29 | bigger--34 pixels, let's say.
| | 03:32 | Now, you'll notice the Save
button is available again.
| | 03:36 | I can save that either by just
clicking Save, and it republishes the theme
| | 03:41 | under the same name.
| | 03:42 | This is still exp_cal_01 as you see up here.
Or I can save it under a different name.
| | 03:48 | If I click there, I can then
rename it exp_cal_02, and there we go.
| | 03:58 | We now have, if we go back to our
Themes tab, exp_cal_01 and exp_cal_02;
| | 04:05 | however, I do want to mention we
didn't actually publish exp_cal_02.
| | 04:09 | We're working on it now, and you can
see that because we have that title right
| | 04:13 | up here, but if we go back to our
Google Chrome browser and reload the page,
| | 04:17 | you'll notice that the
title is exactly the same size.
| | 04:20 | We're still on that first theme.
| | 04:22 | This part is something that kind of
confuses me when I start working with this.
| | 04:26 | That's one reason I always keep
another browser open, so I can see what the
| | 04:29 | true live theme is.
| | 04:31 | Now I'm going to try something
drastically different: a black background.
| | 04:35 | I'll go up to Styles again and click
in the background, and I will change the
| | 04:42 | Background to black, like that.
| | 04:46 | And once again, if I wanted to save
this, I would say Save as, and then let's
| | 04:50 | say exp_cal_black_01. You get the idea.
| | 04:56 | I don't have to keep repeating this,
but it is a good idea to name your themes
| | 05:00 | like I'm naming them here:
| | 05:01 | something a little descriptive,
but also a serial number, so you can keep
| | 05:04 | track of what came first.
| | 05:07 | In fact, I don't like looking at that
because I can't really read the text,
| | 05:10 | so I'll switch back by going to Themes.
| | 05:13 | Minima is actually the published theme.
| | 05:15 | I'll click back on it just so that
we can see it ourselves as we go.
| | 05:19 | You'll notice that the one that's
actually published has a red border around it.
| | 05:26 | Now, honestly I found that not
always to be consistent in Drupal Gardens;
| | 05:30 | however, it does look like it's getting
better. So by the time you see this video,
| | 05:34 | that should be much more consistent.
| | 05:36 | So that shows you basically how
to switch around among themes.
| | 05:40 | Before we go, I'm just going to switch
it to this exp_cal_02, and then I'll
| | 05:47 | publish it, just so that I'm sure
that that's what I actually have live.
| | 05:52 | I can check that out in Google Chrome.
| | 05:54 | I'll reload the page. Great!
| | 05:57 | That looks good. And then close out the
Theme Builder by clicking on the little X.
| | 06:03 | I know it can sometimes be confusing to
keep straight which theme you're working
| | 06:07 | with and which one has been published.
| | 06:09 | Two techniques have been a big help to me.
| | 06:12 | First, keep an eye on this theme
name right here in the right-hand tab.
| | 06:17 | When you've made a change, as I'll do
right now just to show you--again, I'll
| | 06:21 | just make this font bigger--
| | 06:26 | when you've made a change, it'll have
an asterisk next to it, as it does now.
| | 06:31 | That means you've made a
change that hasn't yet been saved.
| | 06:35 | Second, view your site as an anonymous
visitor in an another browser as you go,
| | 06:39 | to see which version has been published.
| | 06:42 | When you do that though, either click
around the site a bit or do a power-
| | 06:45 | reload in the browser, because sometimes the
browser will save an old version in its memory.
| | 06:51 | Here is my last tip:
| | 06:52 | While you're working on a theme save a
copy whenever you get to a point that it
| | 06:56 | looks pretty good even, if it's not perfect,
| | 06:59 | because once you start messing around
with CSS--as you learn how to do in the
| | 07:03 | video about modifying CSS selectors--
things can very quickly get confusing.
| | 07:08 | And if you've made those backups
you'll be glad to have a decent version to
| | 07:11 | revert to.
| | Collapse this transcript |
| Introducing custom CSS| 00:00 | Drupal Gardens' Theme Builder is very
graphical, but mostly it's just a way to
| | 00:04 | change text-based styles in the
page description language CSS.
| | 00:08 | These CSS files are important ones that make
up the theme that shows how your site looks.
| | 00:14 | I think it's instructive to see what CSS
looks like in its original text form, though.
| | 00:19 | That way you get a sense of, and
appreciation for, how the Theme Builder does its magic.
| | 00:24 | Let's start by looking at our own sites' pages.
| | 00:27 | Then we'll take a look at CSS, or
Cascading Style Sheets as it's more formally
| | 00:31 | known, and see how those affect our pages.
| | 00:34 | First, let's take a look at our page in general.
| | 00:37 | There are a few things that make this
presentation different from just raw HTML
| | 00:41 | that has no styling information on it.
| | 00:43 | For one thing, all of the text is sans-serif.
| | 00:46 | The default for most browsers is a serif font.
| | 00:49 | Also, the links are in orange instead of
blue, which is what you get if you just
| | 00:52 | create a simple HTML page.
| | 00:55 | There are layout elements as well,
for example, this gray bar up here, and
| | 00:59 | there are some dynamic elements such as
when you bring a cursor over these menu
| | 01:04 | items up at the top.
| | 01:05 | They glow a lighter gray.
| | 01:06 | Now you might remember that themes are
contained in a collection of files that
| | 01:10 | live on the Drupal Gardens server.
| | 01:12 | We talked about this in the video
about understanding Drupal themes, and we
| | 01:16 | looked at the CSS files of a
Drupal theme in a text editor.
| | 01:19 | Now, we can't do that in Drupal Gardens
because we don't actually have access to
| | 01:23 | the server, but we can use a little
Firefox add-on called Firebug, and you can
| | 01:29 | get that at getfirebug.com.
| | 01:32 | I have already loaded Firebug into my
browser, and I see it as a little, tiny
| | 01:37 | icon here in the corner.
| | 01:39 | I'll click that, and it brings up
some of the CSS information for my site.
| | 01:44 | To see specific styling information of
an individual element, we click on this
| | 01:47 | little Inspect icon,
and then we can wander around.
| | 01:51 | Once again, let's go up to the title here
since we've been using that as an example.
| | 01:54 | When I click on it, it
sort of freezes the selection.
| | 01:57 | As we look over here in the Style pane,
we can see just how many different
| | 02:01 | styles actually affect
that one little bit of text.
| | 02:05 | That's because of CSS's inheritance.
| | 02:08 | There's a style for the body of the
entire page; there is a style for the title;
| | 02:13 | there is a style for h1; and so forth.
| | 02:16 | It all cascades down, and all of the
styles affect this one little bit.
| | 02:21 | Let's talk a little bit
about how those rules work.
| | 02:24 | Again, you don't have to know the
details about this, but the more you know, the
| | 02:28 | more you'll be able to change
your themes in Drupal Gardens.
| | 02:32 | The first kind of CSS style is very simple.
| | 02:35 | You name a selector, in this case the <p>
tag, and then you say what to do with it.
| | 02:39 | It'll affect every place the
text appears within these <p> tags.
| | 02:43 | It'll make them black and
of that specific size, 1 em.
| | 02:47 | Going on, you can separate
out selectors with a comma.
| | 02:50 | What that means is that it should
affect all of those things that are in that
| | 02:54 | comma-separated list;
| | 02:55 | that is, both <li> and <i> tags,
| | 02:58 | they'll both be made that black color.
| | 03:00 | You can also narrow down the selector
by not putting a comma between them.
| | 03:04 | In this case, it means that only the
text that's in <i> tags that are inside
| | 03:09 | of <li> tags. The way the selectors
work is they become more specific as you
| | 03:14 | move from left to right,
| | 03:15 | so <i> tags inside <li> tags.
| | 03:18 | There are also other kinds of selectors.
| | 03:20 | Those that start with a hash tag
usually refer to a single item on the page--
| | 03:25 | very commonly used for layout.
| | 03:27 | For example, #content means
the content area of the page.
| | 03:31 | Everything that appears in that area
should be styled a certain way, and then
| | 03:34 | you would have the curly braces
and the colons and semicolons and the
| | 03:38 | descriptors that say exactly what
happens when an element is inside that region.
| | 03:43 | Dot followed by a name is
what's called a class selector.
| | 03:47 | Elements that are labeled with
that class get the special styling.
| | 03:51 | Finally, there are selectors called
pseudo-classes, and they start with a colon.
| | 03:56 | The most common one is a:hover, which
means that it'll change the style when you
| | 04:00 | move your cursor over a certain element.
| | 04:03 | But there is more to CSS then that;
| | 04:05 | believe me, there is a
lot more to CSS then that.
| | 04:08 | Here are a few things to watch out for.
| | 04:10 | Styles can affect multiple items, and
multiple styles can affect an item.
| | 04:15 | So in other words, when you change the
<p> tag style, it's going to affect <p>
| | 04:19 | tags throughout the site.
| | 04:21 | Similarly, a block of text might be
affected, as you saw a little earlier, by
| | 04:25 | many, many styles, and you
sometimes have to untangle them.
| | 04:28 | It's not always that easy.
| | 04:30 | The Theme Builder in Drupal Gardens
will help you out because it lets you
| | 04:33 | select and unselect parts that are
affecting a styling, as you'll see a little
| | 04:37 | later in the course.
| | 04:39 | Rules will sometimes fight each other.
| | 04:41 | The one that comes last is the one that wins.
| | 04:44 | So let's say that a style is first set to
be red, and then later it's set to be black.
| | 04:49 | Well, it'll come out as black.
| | 04:51 | One thing that Firebug does is it lets
you turn off certain parts of a styling
| | 04:55 | so that you could see what
exactly is affecting what.
| | 04:58 | So I am going to go ahead and
select this style once again.
| | 05:02 | As I move my cursor over here,
you'll see a little icon that lets us
| | 05:05 | black out certain styles.
| | 05:08 | So let's actually do that now,
and now you start to see things changing.
| | 05:11 | We change the margin, and so that
changed the layout of the style. And as you go
| | 05:16 | down, you'll see other examples of that.
| | 05:17 | Now you might say, this is awfully
confusing, but believe me, it's even
| | 05:21 | worse without Firebug.
| | 05:22 | I am just going to go back to my
Desktop here, and I can show you that by
| | 05:26 | looking at raw CSS files
in a Drupal installation.
| | 05:29 | Once again, we'll open up our Drupal
installation and go into the themes, and
| | 05:33 | then open up bartik,
and any one of the CSS files.
| | 05:36 | Let's take style, which is the main one.
| | 05:39 | And from this, it's really hard to
tell exactly what is affecting what.
| | 05:42 | You'd have to scroll through this
whole thing--and this is hundreds of
| | 05:44 | lines long, by the way.
| | 05:46 | This is over a thousand lines long,
and it's only one of many files.
| | 05:49 | It's quite difficult.
| | 05:51 | So you can really appreciate how much the
Theme Builder and Firebug are doing for you.
| | 05:56 | So at base, we have a folder of CSS files
with hundreds or even thousands of styles.
| | 06:01 | Firebug helps us to understand those
files better, but it's still pretty geeky.
| | 06:05 | On the other hand, Drupal Gardens'
Theme Builder is like Firebug, but it goes
| | 06:11 | further to almost completely
get rid of the need to know CSS.
| | 06:15 | It's very graphical.
| | 06:16 | You simply point at an element,
and you make your changes.
| | 06:20 | The hard part comes in later, in
determining whether you're affecting the
| | 06:24 | right style, because as I mentioned
earlier, most elements are affected by
| | 06:27 | several styles at once.
| | 06:29 | But we'll go into that in the
video about refining selections.
| | 06:32 | Now I'm not a CSS wizard myself;
| | 06:35 | that's one reason I personally
appreciate the Theme Builder so much.
| | 06:39 | If you want to go further with raw
CSS coding, check out some of the other
| | 06:42 | lynda.com courses on the subject,
such as "CSS Website Design," "CSS Essential
| | 06:47 | Training" and "CSS for Developers."
| | Collapse this transcript |
| Refining selections in the Theme Builder| 00:00 | In the video about introducing CSS, we
peeked at the style sheets that make up a
| | 00:05 | typical Drupal theme, and you saw how
mind-bogglingly complicated they can be.
| | 00:10 | The biggest problem is in determining
which styles affect a given element on
| | 00:14 | your page; even with developer
tools like Firebug, it ain't easy.
| | 00:19 | The Theme Builder in Drupal Gardens
goes a long way to making CSS more
| | 00:22 | accessible, including the
ability to select individual styles;
| | 00:26 | but it's still a little tricky.
| | 00:28 | This video leads you around some of the traps.
| | 00:32 | First of course, we go up to
Appearance to bring up the Theme Builder.
| | 00:38 | Just as a reminder, this little tab
up here shows that we are working with
| | 00:41 | the exp_cal_02 theme.
| | 00:43 | That's one of the themes we created earlier.
| | 00:45 | I am going to save it as a different
name once again, as a good sort of way to
| | 00:49 | make sure that we can roll back if
anything goes wrong; ex_cal_03 and save it.
| | 00:56 | I will also publish that theme so
we can keep track of it as we go.
| | 01:06 | In the Theme Builder, CSS is
mostly affected through the Styles tab.
| | 01:11 | As we go around the page and click on
things, we see this message here, "You are
| | 01:16 | styling," and then it describes what it is:
| | 01:18 | "All links in all list
items in the navigation region."
| | 01:22 | This is actually an English language
translation of what the CSS actually is.
| | 01:26 | Over here, you can turn it
on so you see the real CSS.
| | 01:30 | So I'll switch it from off to on,
and watch what happens with this, "You
| | 01:33 | are styling" message.
| | 01:36 | See, it was all links in all
list areas in the navigation region.
| | 01:41 | If we turn it off again, you can see.
| | 01:44 | I'm going to keep it on the CSS Styling,
so that we can start to learn CSS as we go.
| | 01:48 | By the way, this is a great
way to learn and understand CSS.
| | 01:52 | It's a good way to even test yourself.
| | 01:54 | You can point at something and say, okay, with
the CSS off, it's all links in all list items.
| | 01:59 | Okay, if I would have put that in
CSS, it's going to be something like
| | 02:03 | #preheader-second li a, and then if I turn
it off, that's exactly what it is. Very good.
| | 02:11 | The other switch here is
this Power theming switch.
| | 02:14 | Watch what happens with this You
are styling area as I turn it on.
| | 02:17 | There are two changes. First of
all, there's a hierarchy indicator.
| | 02:22 | It shows exactly what is being styled,
even if there aren't any styles that are
| | 02:27 | affecting it from that thing.
| | 02:29 | For example, the bit up here which is
what we're styling: We know that it's a link.
| | 02:32 | We know it's in list.
| | 02:33 | It's also part of this ul
container, which is again in a block.
| | 02:38 | This is a block up here.
| | 02:39 | It's part of the body, which
is the entire page, and so on.
| | 02:42 | The other thing that's different when
you turn on the Power theming is these
| | 02:46 | little pop-down menu show up.
| | 02:47 | Let's do that next to the a here.
| | 02:51 | We can now select to change the theme,
not only for the link as it shows right
| | 02:55 | now, but what happens when you hover
over it or when it's already been visited.
| | 02:59 | These are those pseudo-classes I
mentioned in that earlier video
| | 03:02 | about introducing CSS.
| | 03:04 | There is something that you will notice
as you point at elements on the screen;
| | 03:08 | they will often have these little arrows which
will be either above, below, or to the two sides.
| | 03:13 | As you hover over them, it tells you
exactly what it is you're going to go to by
| | 03:17 | clicking on that arrow.
| | 03:19 | In this case, it says, Select the parent element.
| | 03:21 | Let's click it and see what happens.
| | 03:23 | See, it went from li to ul.
| | 03:26 | If we were to click it again, it
then goes to the larger area of header.
| | 03:32 | Similarly, we have these siblings to
the right and sometimes to the left.
| | 03:37 | These words--parent, sibling, and child--
are somewhat complicated, but they're all
| | 03:41 | related to the way that web pages
are structured, and that's according to
| | 03:44 | something called the
Document Object model, or DOM.
| | 03:48 | Two lynda.com courses that explain it well
are "XML Essential Training" and "Real-World XML."
| | 03:54 | If you search the lynda.com site for
XML of course, you may find others.
| | 03:58 | I would like to go back and start
selecting individual elements here, like
| | 04:02 | let's click this Mission element here.
| | 04:04 | Now as you go down here, you can
actually turn on or turn off other styling
| | 04:09 | selectors, like ul or navigation.
| | 04:13 | Let's say that we want to do the
entire navigation bar instead of just
| | 04:16 | this navigation region, and we want it to
be everything inside it, not just these links.
| | 04:20 | Well, we could turn those
off by clicking like that.
| | 04:25 | As we do that, you see that the
selector, this little blue line around it,
| | 04:29 | expands to show exactly what's being
styled. Or if we were to say that we want
| | 04:33 | all link items by clicking the a here
and turning off navigation, you see that
| | 04:38 | it actually selects every link on
the page, no matter how it's styled.
| | 04:42 | Even though this one looks different
from this one, they're both styled with the
| | 04:45 | a. So you can see that the Theme
Builder really helps you understand CSS more
| | 04:50 | than pretty much anything I have seen.
| | 04:53 | Now while you're doing this and you start
styling things, try not to get too discouraged.
| | 04:58 | CSS selection was one of the hardest
things for me, personally, to understand when
| | 05:01 | I first started using Drupal Gardens.
| | 05:03 | Even after playing with it for a while,
I still get stumped from time to time,
| | 05:07 | particularly because some styles are
located on top of each other so you can't
| | 05:11 | easily click the one that's on the bottom.
| | 05:14 | One good example of that is these links up here.
| | 05:17 | In the menu you have the text,
but then you also have the boundary box that
| | 05:21 | contains the text, and it goes on like that.
| | 05:23 | It can be kind of confusing.
| | 05:25 | Once when this happened to me, I got a
lot of great help from the Drupal Gardens
| | 05:29 | staff by posting a
question in their community forum.
| | 05:31 | You can learn how to do that
in the video about getting help.
| | 05:34 | One reason they were able to help
me is that all of their themes are
| | 05:37 | standardized, including the CSS style names.
| | 05:40 | That also means when you learn how to
style one Drupal Gardens theme, you are
| | 05:44 | actually learning how to style all of them.
| | Collapse this transcript |
| Exporting themes| 00:00 | Now we have reached one of the easiest
parts of Drupal Gardens, but it's also
| | 00:04 | one of the most useful: that is, exporting
themes you have created in the Theme Builder.
| | 00:09 | I have mentioned elsewhere in this
course how hard it is to create Drupal themes
| | 00:12 | the traditional way.
| | 00:14 | You get a lot more control, but you
need some specialized knowledge of PHP
| | 00:18 | programming, as well as
Drupal's unique theming system.
| | 00:21 | If you create a theme in Drupal Gardens and
then export it, you don't need any of that.
| | 00:26 | In this video I will show you two things:
how to export the theme and how to use
| | 00:31 | it in the standard Drupal
installation outside of Drupal Gardens.
| | 00:35 | For this latter part I have already
installed Drupal on my computer after
| | 00:39 | downloading it from drupal.org.
| | 00:41 | If you want to follow along at home and
need to learn how to do that, watch the
| | 00:45 | installation section of my
lynda.com series "Drupal Essential Training."
| | 00:49 | It will have to be the latest version of
Drupal though, in order to be compatible
| | 00:53 | with the theme that you
export from Drupal Gardens.
| | 00:56 | To get started in Drupal Gardens, we click
Appearance to bring up the Theme Builder.
| | 01:00 | I will just quickly make sure that I
know which theme I am exporting. Yes, it's
| | 01:06 | exp_cal_03, which is one of the themes
that I created. It's in My themes, and
| | 01:10 | good: it has that red box around it.
| | 01:13 | So I just go up and click Export.
| | 01:15 | I am going to call this
"explorecalifornia" and click OK.
| | 01:21 | Drupal Gardens takes a moment to package
up the theme and then offers to save it
| | 01:25 | to your download location.
| | 01:27 | I click OK and there it is.
| | 01:29 | It's now in your download
location in a compressed format.
| | 01:33 | If you want to learn how to
uncompress them, see Garrick Chow's computer
| | 01:36 | literacy courses also on lynda.com.
| | 01:39 | I have already uncompressed it on my
computer and taken it out of the folders
| | 01:44 | that it was contained in, because
when you download it, it actually ends up
| | 01:47 | contained in two or three folders.
| | 01:49 | What I end up with is the theme itself,
with the name acq_ and the name I gave
| | 01:55 | it, explorecalifornia.
| | 01:57 | If you double-click it, you will see
that it's just like any other theme.
| | 02:02 | It has CSS files, PHP files,
and up here, the info file.
| | 02:08 | If you want to learn more about how
to change these files, see the course
| | 02:12 | by Chris Charlton about designing Drupal themes.
Then it's a simple matter of installing it.
| | 02:18 | You do that in the standard way.
| | 02:20 | I am going to do this the old-fashioned way.
| | 02:22 | I will open up my drupal folder here,
go down to sites, open up the all folder
| | 02:29 | and the themes folder, and just drag it in.
| | 02:34 | Now when we go back to our core Drupal
site, I can look at the themes page by
| | 02:38 | clicking Appearance.
| | 02:39 | Now remember, this is a core Drupal, not
Drupal Gardens, so it brings up this screen.
| | 02:44 | Scroll to the bottom
and there it is, explorecalifornia.
| | 02:47 | I will enable it and set default,
| | 02:50 | close out the overlay, give it a
moment to redraw, and there it is.
| | 02:54 | You know, when Acquia first announced
development of the Theme Builder in Drupal
| | 02:58 | Gardens, I had no idea they would
allow theme exporting like this.
| | 03:02 | And you think about it, it's a
pretty gutsy thing of them to do.
| | 03:06 | A greedier corporate decision would be
to let you create these terrific themes
| | 03:09 | in Drupal Gardens, but then not give
you a way to take them with you when you
| | 03:13 | leave, thereby forcing you to
stay a Drupal Gardens customer.
| | 03:17 | But instead they followed a more open
source ethic, and I say, good for them.
| | 03:22 | Once you have exported the theme, you
might of course want to modify it further,
| | 03:26 | perhaps in ways that Drupal Gardens
doesn't allow, such as using PHP to change
| | 03:30 | page logic. To do that I recommend
once again the lynda.com course, "Drupal:
| | 03:36 | Creating and Editing Custom Themes."
| | Collapse this transcript |
|
|
7. Creating Site Designs with the Theme BuilderChanging the site's color palette| 00:00 | One small thing you can do to make your
site's design fit its content better is
| | 00:04 | to change its color palette.
| | 00:06 | Drupal Gardens offers a choice of designer-
selected sets of colors that go together well.
| | 00:11 | You can always apply your own
colors to individual elements.
| | 00:15 | You learned a little bit a about that
in the video about refining selections in
| | 00:18 | the Theme Builder and you'll learn
more about it in two other videos about
| | 00:21 | adjusting typography and
adding background colors and images.
| | 00:25 | But I find the best way to start is with
one of Drupal Gardens built-in color palettes.
| | 00:30 | To go there, click Appearance and then Brand.
| | 00:36 | As I briefly showed before, you just
click on any one of these, and it changes
| | 00:40 | the entire site's look.
| | 00:42 | There is quite a bright look, and it
changes different parts of the site.
| | 00:46 | It might change the background color;
| | 00:48 | it changes this navigation bar; this search
that changes the color a little bit; and so on.
| | 00:54 | But mostly I am looking for something
basic without that bright orange that was
| | 00:58 | in the original theme.
| | 00:59 | I have looked around a little bit,
and I kind of this Kenwood look, especially
| | 01:03 | for California, which has woodsy feel.
| | 01:06 | I will then save it and publish it.
| | 01:08 | I think I will save that
as exp_cal_kenwood_01. Okay.
| | 01:16 | Then once that's done, I will publish it,
so that this is what the world sees.
| | 01:20 | For most Drupal Gardens themes, changes
in color palette mostly affect highlight
| | 01:25 | color on a site--that is,
the text and borders and rules.
| | 01:30 | You can make much bigger impact by
changing the background color or by replacing
| | 01:34 | it with the graphic.
| | 01:36 | We won't show that in this video;
instead, you will learn how to do it in the
| | 01:38 | video "Changing Background Colors and Images."
| | 01:44 | And that's all there is to it.
| | 01:45 | Now I have to admit that I am pretty
ignorant about color theory, but when the
| | 01:49 | colors are wrong, I just know.
| | 01:52 | I expect business sites to have muted
blues and greens instead of bright clown-
| | 01:57 | like colors, for example.
That implies money and suits, whereas gaming sites
| | 02:02 | should have bright
colors and a black background.
| | 02:04 | These are just some of the standards
that have grown up on the web, and Drupal
| | 02:08 | Gardens helps you follow those standards.
| | 02:10 | If you want a really delve into what
makes good color usage though, I recommend
| | 02:14 | the lynda.com course "Working With
Color" and certainly just poke around the
| | 02:18 | palettes that Drupal Gardens offers.
| | 02:21 | Most importantly, as you do that, is
to keep an eye on how the colors fit
| | 02:25 | your content, including such
corporate identity items such as logos and
| | 02:30 | illustrations.
| | Collapse this transcript |
| Changing the site's main logo and favicon| 00:00 | It's sort of odd that we've gone this
far in the course without changing the
| | 00:03 | main logo, isn't it?
| | 00:05 | Fortunately, the setting
isn't that hard to make;
| | 00:07 | you just have to find it.
| | 00:09 | This video shows you how to do that,
and also suggests an alternate way to
| | 00:12 | display your logo that I
think works better in many cases.
| | 00:15 | Along with the logo, we'll add a custom
favicon to appear up here near your browser bar.
| | 00:22 | One thing I have to mention before we
start though: as with all graphics on the
| | 00:25 | web, you'll need to use an
image-processing program to size your logo before
| | 00:29 | you put it on the site.
| | 00:31 | There are dozens of lynda.com videos
that will help you with that, such as
| | 00:34 | Photoshop for the Web.
| | 00:36 | But let's get to it.
| | 00:37 | In the exercise files, you'll
find a graphic named logo-final.gif.
| | 00:42 | I'll show how you how to implement it.
| | 00:44 | You go up to Appearance.
| | 00:49 | Then when the Theme Builder
opens, you click Brand and Logo.
| | 00:54 | You then Browse for it.
| | 00:55 | I happened to have put it on my Desktop,
so that's easy enough to find. And Open it.
| | 01:03 | You'll notice that it's warning that
you have to enable a block, and it offers
| | 01:07 | to do that for you.
| | 01:08 | I'll go ahead and say
sure, go ahead and do that.
| | 01:11 | As long as we're here, I'll also
upload a custom favicon, or a shortcut icon.
| | 01:16 | We have one named hills-favicon.jpg.
| | 01:19 | If you don't know what a favicon is, it
will be clear after we upload this one.
| | 01:24 | Again, I go to Logo and
Browse, and there it is.
| | 01:29 | Open and wait a moment.
| | 01:31 | Now, you saw it change down here, but you
also saw it change up here in the browser bar.
| | 01:36 | The location of the favicon varies
from browser to browser, but it's usually
| | 01:40 | somewhere up here near the address.
| | 01:42 | It's a nice little visual reminder
to people that they're on your site.
| | 01:45 | The one thing to remember as you design
your favicon is that they're only 16- or
| | 01:49 | 32-pixels square, so you have
to keep them extremely simple.
| | 01:54 | In designing this site, I originally
used our full Explore California logo, this
| | 01:58 | big one here, but it just
became unreadable mush when reduced.
| | 02:02 | So instead I used the simple
evocative graphic instead, right up here.
| | 02:07 | Now you know the quick way of adding
a logo. But to be honest, I don't like
| | 02:11 | the way it looks, and we can see that in full
when I close out the Theme Builder like this.
| | 02:15 | Oops! It's reminding me that I have to save
my changes, so I'll go back and save.
| | 02:24 | I can then close out the Theme Builder.
| | 02:29 | The problem I have with putting a
logo up here is it makes it impossible to
| | 02:33 | smoosh down all that white
space up here at the top.
| | 02:36 | So I'm going to apply some design
judgment to move that logo over to the side.
| | 02:40 | What I'll do is simply move the logo
from that header region, or what's actually
| | 02:44 | the site logo region, into the sidebar A region.
| | 02:48 | If you're not sure what that means,
watch the video on working with nlocks.
| | 02:51 | I'll also get rid of our site's name
as it appears here, since it's really
| | 02:55 | redundant with the graphic.
| | 02:56 | First, we'll start with the block.
| | 02:58 | Go up to Structure and Blocks.
| | 03:02 | You can see your block regions by
clicking here, on Demonstrate block regions.
| | 03:06 | And it gives you a sense of
where exactly that site logo is.
| | 03:09 | It's somewhere up here in one of these regions.
| | 03:12 | I'll exit that though, and
do a search on this page.
| | 03:18 | There it is, in the header.
| | 03:19 | Instead, I'm going to put it in
sidebar A. Scroll down a little bit.
| | 03:26 | Yup, it shows up at the top there.
| | 03:28 | Scroll to the bottom and Save blocks.
| | 03:32 | Let's see what that looks like. Ah, it worked.
| | 03:37 | But there is something
strange when you arrange blocks:
| | 03:39 | sometimes it doesn't stay quite
in the same order as you expect.
| | 03:43 | So I'll go back up, and I'll bring
it up to the very top, and save again.
| | 03:54 | This is a small bug that I've
discovered in Drupal Gardens.
| | 04:01 | Close out the overlay, and there it is.
| | 04:04 | That didn't completely solve the problem.
| | 04:06 | We'll still have to change some
styles later, in the video "Changing
| | 04:09 | element spacing and borders."
| | 04:11 | But at least we've cleared out the space
up here by moving that logo out of the way.
| | 04:16 | Now let's get rid of the site name and slogan.
| | 04:18 | For that, once again, we go
up to Structure and Blocks,
| | 04:24 | and there's our slogan.
| | 04:26 | I'm going to move it into No area, and then do
the same with the site name--move it to None.
| | 04:32 | Scroll down to the bottom, save,
and then take a look at it.
| | 04:41 | That's a lot more like the way I want it.
| | 04:43 | Now, you'll note that the site name
still shows up here in the Title bar.
| | 04:47 | You saw a little more about how the
site title and slogan work in the video
| | 04:50 | "Configuring the site."
| | 04:51 | Watch that video again if
you want some more details.
| | 04:54 | But overall, that was pretty easy, wasn't it?
| | 04:57 | The technical part of adding a
logo is as simple as it can be, really.
| | 05:00 | But this video marks the start of us
delving more into how the site is designed.
| | 05:05 | That is, we're using the Theme Builder
as just one tool in Drupal Gardens' box.
| | 05:10 | While theming changes are the most
immediately visible changes you can make,
| | 05:13 | blocks, simple views, rotating banners,
and other site aspects all work together
| | 05:19 | to get your site's message across.
| | Collapse this transcript |
| Changing the column number and arrangement| 00:00 | This video will show you something
that's incredibly easy in Drupal Gardens,
| | 00:04 | but it's actually pretty hard with
self-hosted Drupal because there you need to
| | 00:08 | know PHP and some server maintenance skills.
With Drupal Gardens you simply point and click.
| | 00:14 | One curious thing is that Drupal
Gardens handles this change very differently
| | 00:18 | from how it's done in traditional theming.
| | 00:20 | I'll show you that when we are done
by exporting the theme it creates and
| | 00:24 | opening the relevant text files.
| | 00:25 | What I am talking about
specifically is moving columns around.
| | 00:29 | I'm going to actually hide this column
in the right, so that we have more room in
| | 00:33 | the center of the page, and that'll
be true throughout the entire site.
| | 00:37 | One place you will notice especially
is on this About page. Right now we have
| | 00:41 | this map in the middle, and it doesn't
really have very much room to breathe;
| | 00:44 | it's kind of crowded in there. But when we're
done, it'll have this whole area on the this side.
| | 00:48 | So first we click Home to go back Home,
and then we launch the Theme Builder, as
| | 00:53 | usual, by clicking Appearance.
| | 00:56 | Once there, we click Layout.
| | 00:58 | Now before I continue, I'm going to
save a copy of this just to be safe.
| | 01:03 | I am going to save this as ex_cal_010 to start
a whole new series at 10, and OK, and publish it.
| | 01:14 | Great! Now we're going to start moving those
columns around, and when I click on them,
| | 01:19 | you'll see pretty much what the result will be.
| | 01:21 | I click here, and we have the
two columns off to the right.
| | 01:24 | You can see that better if you click
the Minus sign here. Or you can actually
| | 01:29 | remove columns entirely, so that we have
just the left-hand column and the main
| | 01:33 | content area without the right-hand column.
| | 01:35 | That's actually what I'm going to do.
| | 01:37 | I'll click All Pages, which will change
every page on this site, and then once
| | 01:41 | again I'll publish it. And to
demonstrate that I'll close out the Theme Builder
| | 01:46 | and start clicking around the site a little bit.
| | 01:48 | Let's go back to that About page,
for example. See? Much better.
| | 01:53 | Even though the map is still small,
and you can change that setting by the way
| | 01:56 | by going back to the Google Maps page
and fiddling around with the code, but at
| | 02:01 | least it doesn't get crowded in
by all the information over here.
| | 02:05 | There is one strange thing about this
though: we had a feed in this right
| | 02:08 | column, and we basically just lost that.
| | 02:11 | Don't worry, we didn't lose the
information itself because you might remember
| | 02:14 | it was contained within a block, and you
can see that by clicking Structure and Blocks.
| | 02:20 | As we scroll down, you can see that
it's still contained within Sidebar B, and
| | 02:24 | in fact if we were to change our layout
back so that Sidebar B showed up on the
| | 02:28 | right side, it would show up again. So we don't
really have to worry about losing content that way.
| | 02:33 | I am going to make one more change.
| | 02:36 | One common site design is to make the
front page different from all of the
| | 02:39 | others, usually with more links and
navigational stuff. That way when people
| | 02:43 | drill down into other pages, one of the
sidebars disappears so there's more room
| | 02:48 | for the main content.
| | 02:49 | I like that system, so here we go.
The first thing I'll do is I'll close out this
| | 02:54 | overlay and go back to our front page.
Then I'll go back into our Theme Builder
| | 02:59 | by clicking Appearance and back to Layout.
| | 03:03 | This time I am going to return that B
column to the right-hand side but click
| | 03:08 | only on Just This Page, and then
publish it. And just to be sure it's working,
| | 03:15 | I'll hide the Theme Builder a little
bit and click around, and that should
| | 03:18 | disappear, and indeed it does.
| | 03:21 | The About page is the same as it was
with the open area on the right, while the
| | 03:27 | front page has that right column.
| | 03:28 | Now I want to export this theme just to
show you how to Drupal Gardens does this.
| | 03:34 | If you want to follow along and need help
doing so, see the video about exporting themes.
| | 03:39 | I'll export it as ExploreCalifornia2.
| | 03:43 | As usual, Drupal Gardens
packages that up and saves it.
| | 03:48 | Now that it's downloaded
you, have to uncompress it.
| | 03:51 | If you have any problems doing that,
see Garrick Chow's videos about computer
| | 03:54 | literacy, also available on lynda.com.
| | 03:57 | I've already done so, so we'll just
double-click the folder, and there's our theme.
| | 04:02 | The thing we are going to look at is
that .info file, so let's see where that is.
| | 04:07 | There it is, right near the top.
| | 04:10 | I'll open that up in Notepad
and scroll down a little bit.
| | 04:14 | As I scroll down, you see this whole
area here about configurations. These
| | 04:18 | are all the different two columns, one on
the right side, one on the left, and so forth.
| | 04:22 | I'm only showing you this really to give
you a sense of the pain that you're missing.
| | 04:27 | You can do a lot more with themes by
editing these files, but it is quite difficult.
| | 04:31 | If you want to learn how, watch the
lynda.com "Drupal: Creating and Editing Custom
| | 04:36 | Themes," in particular the video
"Creating a template to theme individual pages."
| | 04:41 | One thing that you can do by watching
that course is you can change every page
| | 04:45 | that contains a certain content type--
for example, the tour page--so that it has
| | 04:49 | a different layout from everything else.
| | 04:51 | In Drupal Gardens you'd have to change
each page individually, and that wouldn't
| | 04:55 | take into account any new pages that
you create of that content type. But for a
| | 04:59 | graphical editor, it really does a lot,
and the layout changes it does offer are
| | 05:04 | enough for most kinds of sites.
| | Collapse this transcript |
| Adding background colors and images| 00:00 | Now, we come to the most
impactful video of the entire course:
| | 00:04 | the one that lets you change
background colors and images.
| | 00:08 | I don't have to tell you what a
difference it will make because you'll see;
| | 00:10 | it will be absolutely obvious once we start.
| | 00:13 | So, let's get to it.
| | 00:15 | As usual, you launch the Theme
Builder by clicking Appearance.
| | 00:19 | Once there, you click Styles and Background.
| | 00:23 | Now you'll notice that it shows the
Background color is being black, but that's
| | 00:27 | just because nothing is actually selected.
| | 00:29 | So the first thing we do is we're
going to select the entire page background.
| | 00:33 | Just click anywhere in the background
and then take a look at the selectors
| | 00:37 | down here. And we see, yes,
that's the entire page.
| | 00:41 | If you hadn't turned on Power theming or
Show CSS, it would have said, You are styling:
| | 00:46 | The page, but I prefer to leave those on.
| | 00:50 | We talked about the information in
this bar in the video about refining
| | 00:53 | selections in the Theme Builder.
| | 00:55 | Let's go through a few different
colors and see what it looks like.
| | 00:58 | Right now, it shows no color.
| | 00:59 | That's the little checkerboard pattern.
| | 01:01 | It's sort of subtle, but if
you look closely, you can see it.
| | 01:04 | But we could change it let's say
to brown, or green, or a light gray.
| | 01:10 | The colors that you see here are the
ones that came with this Kenwood color
| | 01:13 | scheme that we selected in a previous video.
| | 01:15 | You can also have a custom color if you
like by just clicking this little Plus
| | 01:19 | sign and moving around as you would
in any other kind of color selector.
| | 01:23 | Let's just say Add.
Let's have a dark blue background.
| | 01:26 | Ugh, that's terrible.
| | 01:28 | Okay, we'll get rid of that
and switch back to a light gray.
| | 01:32 | One thing you might notice is that no
matter what color we choose, it lowers the
| | 01:36 | contrast throughout the page.
| | 01:38 | The text isn't quite as easy to
read when we have that color selected.
| | 01:42 | Let's go back and select the
area--make it like a green.
| | 01:48 | Now you can't read anything at all.
| | 01:50 | Even a gray makes it a
little bit harder to read.
| | 01:52 | So, I'm going to just go
back to what we had before.
| | 01:55 | One way of doing that is just clicking
off, say over to this Close Theme Builder
| | 01:59 | button, and we're back to white.
| | 02:02 | Now let's move to putting in a graphic.
| | 02:04 | Remember, as with any web graphic,
you'll have to create and adjust it in an
| | 02:08 | image-editing program.
| | 02:10 | lynda.com has lots of videos
that'll help you with this,
| | 02:13 | one of them being "Photoshop for the Web."
| | 02:16 | One popular kind of image to use as a
background is a gradient, and so that's
| | 02:20 | what I'm going to do.
I have one right here.
| | 02:23 | I'll just click Browse and then
go into my exercise files and open
| | 02:26 | page_background.jpg.
| | 02:31 | As we scroll down this page,
we see it gets lighter as we go.
| | 02:34 | We also have it repeating.
| | 02:36 | If we turn off the repeat so that it
doesn't go left to right or right to left,
| | 02:40 | we see the actual graphic itself is
a very thin little thing over here.
| | 02:45 | But the default repeat is for
it to repeat in both directions,
| | 02:48 | up and down and right to left.
| | 02:50 | The problem with that though is if the
page is long, as is true in our case, it
| | 02:55 | then starts again right here.
| | 02:56 | So instead, I'm going to have
it only repeat horizontally.
| | 03:00 | There, now it goes all the way from this
dark blue down to white, and then since
| | 03:06 | the rest of the page is white,
it just blends in naturally.
| | 03:10 | Now that we've done that,
I'm just going to publish it.
| | 03:14 | Then I'm going to close out the Theme
Builder, just so I can take a clear look
| | 03:17 | at exactly what I have. Yup!
| | 03:20 | Looks pretty good.
| | 03:21 | There is one thing that I don't like
though, which is although it's nice to have
| | 03:25 | this dark color up here,
| | 03:27 | when we get in here we
can't read any of the text.
| | 03:29 | That's okay though.
| | 03:31 | We can change all of this area in here,
so it's white, and we just have the
| | 03:35 | background around the edges.
| | 03:36 | To do that of course, we go back into
our Theme Builder, click Styles, and
| | 03:43 | once again Background.
| | 03:45 | Now I have to find the area that I want to
change that I want to not have that background.
| | 03:49 | So, I would start clicking around here.
| | 03:51 | Well, that's just the header area,
and again you see it here in the CSS selector.
| | 03:56 | That's the main. Ah, but when I click main,
I see it gets bigger and bigger.
| | 04:00 | I'm going to try just this content
area, and get rid of everything else.
| | 04:06 | Then if I scroll around, I can see the
boundaries of what that content area actually is.
| | 04:10 | It's that solid blue border.
| | 04:15 | Now, I've worked with these themes, and I
happen to know that that's what I want,
| | 04:18 | so that's what I'm going to do;
| | 04:19 | I'm going to change that Background
to be white over here. Say OK and once
| | 04:26 | again I'll publish it.
| | 04:29 | We're well on our way. And here is a
little something that's really impactful:
| | 04:33 | what I just showed you not only works
for the pages background, and not only for
| | 04:38 | large area backgrounds, but for any background.
| | 04:41 | In fact, I'm going to put a
graphic in at the top of the page.
| | 04:46 | To do that, I select the area once again.
And I happen to know that this one is
| | 04:51 | going to be the header area,
so that's the one I'll use.
| | 04:54 | I'll go back in and browse as I did
before, and choose this main_back-top
| | 04:58 | graphic, and select Open.
| | 05:01 | That looks pretty good.
| | 05:03 | But in this case, the
graphic isn't quite wide enough.
| | 05:07 | Ideally, we would go back and fix the graphic,
but let's say you don't have that option.
| | 05:11 | You can also fix the spacing of that
graphic, and I'll show you how to do that
| | 05:14 | in the video about changing
element spacing and borders.
| | 05:17 | There is one last thing I want to
mention about putting in colors or
| | 05:22 | backgrounds, which is you have to be
careful when you apply it to something that
| | 05:26 | has a rollover, because the thing is
you might change the background for one
| | 05:30 | state of the rollover
but not for another state.
| | 05:33 | In that case, you have to start messing
around with all of those pseudo-classes
| | 05:37 | that I talked about before, and make
sure that you have matching colors or
| | 05:40 | matching graphics for both when
you roll over and when you leave.
| | 05:45 | The last thing I'll do of course is to
publish this. And so that we can see what
| | 05:51 | it looks like, I'll close out the Theme Builder.
| | 05:54 | Boy, that made a big change, didn't it?
| | 05:56 | Background graphics are great, but as you
can see, they require a little bit of attention.
| | 06:01 | You have to either edit them beforehand,
so they fit your page, or change the
| | 06:05 | spacing of your page
afterward so it fits the graphic.
| | 06:08 | We're actually going to do the latter
in that video I mentioned about changing
| | 06:11 | element spacing and borders,
| | 06:12 | although that's backward from the way
that traditional web design works.
| | 06:16 | Usually, it's easier to edit the
image than play with CSS, but with Drupal
| | 06:20 | Gardens' Theme Builder CSS is so
easily handled and so fluidly handled,
| | 06:25 | I find that you can do
either one just as easily.
| | Collapse this transcript |
| Changing element spacing and borders| 00:00 | When we last left our web site, we
had just added this background graphic
| | 00:04 | that you see at the top.
| | 00:06 | It's pretty, but the spacing is a
little bit off, and we have got this line
| | 00:09 | going through the guy's head.
| | 00:10 | We can fix both of those things by
changing the spacing and borders.
| | 00:15 | To reach those controls, click
Appearance to go into the Theme Builder, then
| | 00:21 | click Styles, and then Borders & Spacing.
| | 00:24 | Before we start making changes in
earnest, let's take a look at the
| | 00:27 | controls available to us.
| | 00:29 | I am going to save a copy of our
theme, so we can play around without
| | 00:32 | hurting the original theme.
| | 00:34 | The details on how to do this are
in the video about switching, saving,
| | 00:37 | and copying themes.
| | 00:38 | I am just going to save this as exp_cal_
test, and then I'll publish it so that I
| | 00:48 | am sure that that's the one I'm working with.
| | 00:51 | As with all other controls under the Style
tab, you first click an element on the page.
| | 00:56 | I will just use this image right here
and then start playing with the margins.
| | 01:00 | Now there are two ways to change them:
| | 01:02 | You can either click in this area;
and that brings up his little slider bar; and
| | 01:06 | you can adjust like that. Or you can
actually type in directly numbers, so
| | 01:10 | instead of 0, I will type in 10.
| | 01:11 | Now as I do this, you'll notice the
change right up above. As I make the
| | 01:16 | margin bigger on the top, it brings
the image down further on the page.
| | 01:21 | If you want to change all of the
margins around, just go into the corner here
| | 01:25 | and then do your dragging.
| | 01:27 | See how that moves the graphic down?
| | 01:29 | Along with the margin, there is
something called padding, and you might wonder
| | 01:32 | exactly what the difference
is between border and padding.
| | 01:35 | Here I'll show you just what
happens when I make the padding bigger.
| | 01:38 | So you see that blue area around the graphic?
| | 01:44 | That defines the elements borders, so
to speak, the element's bounding box.
| | 01:49 | When you make the padding bigger, it
increases the space inside that bounding box.
| | 01:53 | When you change the margin, it
changes the space outside that bounding box.
| | 01:58 | It's a very subtle difference, and
mostly where you know it is in repeating
| | 02:01 | things, such as on these menu items at the top.
| | 02:04 | If I change the margin, it
has a slightly different effect
| | 02:09 | than if I were to change the padding.
| | 02:13 | The best way to really understand this
is to go back and play with it yourself.
| | 02:18 | Finally, we have our border.
| | 02:20 | I'll go ahead and click on that image
again and then start adding a border.
| | 02:25 | And you see it does exactly
what you would expect it to do;
| | 02:27 | it puts a border of a certain color
around the element that you selected.
| | 02:31 | You can change that color
as usual, or interestingly,
| | 02:35 | you can change its style. Now we have solid.
| | 02:37 | There is also dotted, dashed, and
interestingly these grooves and ridges and so
| | 02:43 | forth, which has this kind of
3D effect that I really like.
| | 02:46 | One thing to watch out for: when you add
a border, make sure that the border that
| | 02:51 | you're adding doesn't blend
in with the background color.
| | 02:53 | If it does, you might start adding
the border and changing style and
| | 02:56 | thinking, why don't I see it?
| | 02:58 | Oh, it's because it blends in.
| | 03:00 | The other thing to watch out for is make
sure that the style is not set to None,
| | 03:04 | because then you don't see it at all.
| | 03:07 | So now that we know what we're doing,
let's out of this test theme, go back into
| | 03:11 | our production theme, and fix the gap
| | 03:13 | that's up here next to the header.
| | 03:16 | To do that, we go to our Themes >
My themes, and back to the one I was using,
| | 03:21 | which was exp_cal_010.
| | 03:22 | Yup, I want to describe the changes I made.
| | 03:29 | And then just to be sure
it took, I click Publish.
| | 03:34 | Usually when you have a problem like
this, the hardest part is figuring out
| | 03:37 | exactly which element that you need to style.
| | 03:40 | I'll click on Styles here,
so that you can see what I mean.
| | 03:43 | Click on Borders & Spacing just to be ready.
| | 03:46 | Now as I come up here, there are a whole lot
of different styles that I could be changing.
| | 03:50 | This one is the preheader-
second-region. There is a header.
| | 03:53 | There is a preheader.
| | 03:55 | It's a little easier for us though,
because we placed this graphic ourselves,
| | 03:58 | and you might remember we placed it in the
header area, so we know what we want to affect.
| | 04:03 | So how do we change it?
| | 04:05 | Well, let's start messing with the margins.
| | 04:07 | I really want to get rid of the
margin on the right-hand side, so I'll try
| | 04:11 | bringing that in a little bit.
| | 04:12 | Yeah, that works pretty well.
| | 04:14 | Let's see what would've
happened if I'd tried the padding.
| | 04:16 | Now that's really not what I want to do,
although I could do that instead if I wanted.
| | 04:21 | I am going to keep it with margin,
and that comes to let's just say 32.
| | 04:29 | Now as the matter of style, I don't
want to have this jagged, stair-step effect,
| | 04:34 | so I am going to also change this area here.
| | 04:37 | Once again, it's going to be difficult
to figure out exactly what section we
| | 04:40 | want to change, but as it happens, I
know the CSS styles of Drupal Gardens
| | 04:45 | themes fairly well, so I click, and I
happen to know that it's the content area
| | 04:49 | that I want to change.
| | 04:51 | And I change that also to 32. And again, you
can go and just type the number if you like.
| | 04:57 | And we see, in fact it does line up. Terrific!
| | 05:01 | The last thing we're going to do
is get rid of this line that's going
| | 05:04 | through the guy's head.
| | 05:05 | Once again, you have to figure out
which part of the page to change, so I will
| | 05:09 | just start clicking around.
| | 05:11 | That looks possible, so we click there.
| | 05:13 | No, that wasn't it.
| | 05:16 | There. Let's see. Ah, yes.
| | 05:18 | There is a border at the bottom
of this area, the preheader area.
| | 05:22 | What happens if I make that 0?
Yup, it disappeared. Terrific!
| | 05:26 | I'm going to save that, and in
doing so, it publishes that theme.
| | 05:35 | And finally, I'll just close out my Theme
Builder, so I can take a good clear look at it.
| | 05:40 | Now as you can tell at this point, you
could spend hours just on spacing, and in
| | 05:44 | fact, that's what you end up doing
when you're working seriously on the design.
| | 05:48 | We will do a little bit of touch-up in
the video about finessing theme design.
| | 05:52 | I encourage you to start playing with
borders and spacing on a variety of Drupal
| | 05:57 | Gardens-based themes and just remember
to save test versions of them so you
| | 06:00 | don't hurt anything,
and then just go wild with it.
| | 06:03 | Because their style names are
standardized, you will very quickly get a sense of
| | 06:07 | what you have to select
to affect a given element.
| | Collapse this transcript |
| Adjusting typography| 00:00 | Modern CSS handles just about every
aspect of page display, but early versions
| | 00:05 | focused more on typography than
on such matters as positioning.
| | 00:09 | If you know how to handle type on a
print layout program, such as InDesign or
| | 00:13 | even on a word processor such as
Microsoft Word, then you will be right at home
| | 00:17 | with Drupal Gardens' controls.
| | 00:19 | As usual, the hard part is making sure
that you have the right CSS selectors
| | 00:24 | before you start making changes.
| | 00:26 | The only thing I am going to do on this
page is to make these menu items look a
| | 00:30 | little bit more classical, maybe give
them a serif font, maybe put them in caps.
| | 00:34 | But along the way, I will show you some
of the other controls that you have for
| | 00:37 | typography in Drupal Gardens.
| | 00:40 | As usual, you bring up the Theme Builder by
clicking Appearance, and then click Styles.
| | 00:46 | We want to change the typography,
so we will just leave it on Font.
| | 00:49 | Then we go and find what
exactly we want to change.
| | 00:52 | Let's change these main menu items, as I said.
| | 00:55 | Click there and then click Font,
and you will notice that you actually have a
| | 00:58 | large selection of fonts to choose from.
| | 01:00 | I am going to take Georgia.
I like its classic look.
| | 01:03 | Once you have something selected, you
will notice all of these things that you
| | 01:06 | can change: underline obviously,
| | 01:09 | italics, bold, any
combination of those if you like.
| | 01:13 | You also can change the alignment.
| | 01:15 | Now it's not always obvious when you
change alignment, because it changes it
| | 01:18 | within its own little bounding box.
| | 01:21 | Like if I make this align right,
it doesn't actually change anything.
| | 01:24 | You might think it would go all
the way over here, but the individual
| | 01:27 | bounding box is right here.
| | 01:29 | It's not the entire bar.
| | 01:30 | So I will change that
right back to the way it was.
| | 01:33 | And as I described, you can
change it so it's all caps.
| | 01:36 | One thing to watch out for: when you
change something to all caps, it does
| | 01:39 | make it larger over all.
| | 01:41 | So sometimes it's a good idea to bring
down the font size just a little bit.
| | 01:45 | And I will publish that.
| | 01:49 | Now, I didn't mention these two controls
here which control leading and kerning.
| | 01:53 | I will show how that works by
going down to some body text here.
| | 01:57 | Let's just actually select the main
body text right here. And if I look at the
| | 02:01 | selector, it's all field items that
are in between p tags in the main area.
| | 02:07 | Okay, so that would be anything
that is right in the middle here.
| | 02:10 | We are going to change it
back, so it doesn't really matter.
| | 02:13 | If we go and change the leading, you
see that it actually changes the amount of
| | 02:16 | vertical space between the
lines that are within a paragraph.
| | 02:20 | The kerning changes
horizontal space between the letters.
| | 02:24 | Generally speaking, you want to be
very subtle with this, because as you can
| | 02:27 | tell, it gets really ugly really fast.
| | 02:30 | One thing that people sometimes do is
they will do a very subtle kerning inward
| | 02:33 | if they want to fit more text onto the
page. But for us we are not going to do
| | 02:38 | either of those things,
| | 02:39 | so I am just going to leave the
Theme Builder, discard my changes, and we
| | 02:45 | are back as we were.
| | 02:46 | Once again, I will go back in just
to show one or two other things.
| | 02:50 | I clicked Appearance to go into the Theme
Builder, then Styles, and I am back at Font.
| | 02:55 | Let's scroll down here and
take a look in our right column.
| | 02:58 | Let's say that we wanted to change
just these titles in the left column.
| | 03:03 | I will click there, and we
see it's h2 in #sidebar-a.
| | 03:07 | Now, we could say we want h2 that's
only in a block in #sidebar-a by clicking
| | 03:12 | there. Or we can make Drupal Gardens
change all of the h2s throughout the page
| | 03:17 | by removing the #sidebar-a.
| | 03:19 | We learned about this in the video about
selecting CSS, but just to review, let's
| | 03:24 | take a look at what exactly that does.
| | 03:25 | Well, that would affect this, and it would
affect this, basically throughout the entire page.
| | 03:31 | This is a good way to give
your page a very consistent look.
| | 03:35 | Like let's change that to Georgia now.
| | 03:37 | Because we expanded what exactly we
are selecting, we now have that Georgia
| | 03:42 | look throughout the entire page.
And I think it looks pretty good, but actually
| | 03:45 | I am just going to close out and leave as it
was with our main menu changed and nothing else.
| | 03:51 | Now, I want to mention two more things to
watch out for when you change font styles:
| | 03:55 | First, if you're using the background
graphic, and you make the type larger,
| | 03:59 | text might end up running past the
end of the background graphic, and that
| | 04:03 | could look really bad.
| | 04:04 | Second, be careful when you change font
color, because it might disappear into a
| | 04:09 | similarly colored background shade.
| | 04:11 | That's especially tough to watch for
when you change the style that shows up on
| | 04:15 | multiple places on the page.
| | 04:17 | As always, vigilance is the watchword,
and it's a good idea to look at your
| | 04:20 | site both as a visitor and in multiple browsers.
| | Collapse this transcript |
| Using fonts from outside sources| 00:00 | I showed you how to change typography
on your site using the Theme Builder and
| | 00:03 | the forty or so fonts that come built into
Drupal Gardens, but you can do much more
| | 00:08 | by gaining access to external font libraries.
| | 00:12 | Drupal Gardens comes with settings for two
such popular libraries: Fonts.com and Typekit.
| | 00:18 | The first thing we do is to
turn on the Font Management module.
| | 00:21 | You go up, click Modules, then scroll
down to Font management, which is in
| | 00:26 | the other group, down toward the bottom.
Check its box, go to the bottom, and
| | 00:32 | click Save configuration.
| | 00:34 | Now you have to sign up for those font
libraries, then configure them within
| | 00:38 | your Drupal Gardens site.
| | 00:40 | Don't worry about the sign up
phase; both libraries have a free
| | 00:43 | subscription level.
| | 00:44 | I'll show you how it works with
Fonts.com, because the system is similar for
| | 00:48 | both it and Typekit.
| | 00:50 | We go up to Configuration and
then down to Font management.
| | 00:56 | First thing we'll do is
enable our Fonts.com web fonts.
| | 00:59 | Then you'll notice that there are
links all around here for where to go in
| | 01:03 | order to get your Fonts.com account, and the
same is true for Typekit down at the bottom.
| | 01:07 | I'm going to Ctrl+Click, since I'm
on Windows, to open that in a new tab;
| | 01:11 | if you're on Mac, Command+click.
| | 01:14 | Then I'll switched to that tab.
| | 01:16 | I'm already signed in for this account,
so I'll click Enter; otherwise, you would
| | 01:21 | go through the normal
account-creation process. And, again, there is a free
| | 01:24 | level, as well as some more premium levels.
| | 01:28 | For Project name, I'll call it Explore
California, and then I'll paste in my
| | 01:34 | domain, then click Save project.
| | 01:39 | The next step is to select a font,
but first I'm going to save my changes.
| | 01:45 | Once that's done, I click Choose fonts.
| | 01:48 | You'll notice that some of them simply
say Add to project. These are the free
| | 01:53 | fonts. The ones you have to pay for
say Upgrade. I'll just pick the first one,
| | 01:58 | Albertus, click Add to project, and it's done.
| | 02:02 | All I have to do is publish it.
| | 02:06 | Now I'll go back to my site,
Before I can continue, I have to get
| | 02:09 | my authentication key.
| | 02:11 | The text down here explains how that works.
| | 02:14 | You go to My account and then
click the Account summary tab.
| | 02:18 | I can do that, go back to Fonts.com,
My account, and Account summary.
| | 02:24 | Then down here I see my authentication key.
| | 02:27 | I just copy the entire thing and go
back to my site and paste it in that field.
| | 02:32 | When I click outside that box, it
looks up all the information from that
| | 02:37 | account, and in fact fills in
with the project that I have.
| | 02:40 | If I had multiple projects, of course I
would select the one that I wanted here.
| | 02:44 | Then I go down and save.
| | 02:46 | Now I'm ready to use my fonts.
| | 02:48 | I'll close out this overlay, and then go
to Appearance to launch the Theme Builder.
| | 02:58 | You'll notice this new link,
configure professional fonts.
| | 03:02 | That leads us back to the Configuration page.
| | 03:04 | We don't have to go there
since we've already set it all up.
| | 03:07 | To use a font, you simply select some
text that you want to style, and as usual,
| | 03:12 | choose the font from here.
| | 03:14 | At the top we have all of the Drupal
Gardens fonts and then at the very bottom
| | 03:18 | we have the one we chose from Fonts.com.
| | 03:20 | If I select it, we immediately see the change.
| | 03:23 | I'm actually not going to keep it, so I'll
just close this out. And yes, I'll discard.
| | 03:31 | There is one downside that I don't like
about using these external font libraries.
| | 03:35 | We give this little ad for the
libraries down here in the corner.
| | 03:39 | To get rid of it, I'm going to go
up to Modules and turn that off.
| | 03:46 | We just scroll back down to the Font
Management module, uncheck it, scroll all
| | 03:51 | the way down, and Save
configuration, and we're back the way we were.
| | 03:57 | Once the screen reloads, that ad disappears.
| | 04:00 | The magic that Fonts.com offers is in
the wide selection of fonts that it has.
| | 04:05 | The same is true for Typekit.com.
| | 04:08 | I'll just go to that site as
well, so you can see what it's like.
| | 04:11 | Ultimately, it's very similar to
Fonts.com, and your decision may be based on
| | 04:15 | which ones you actually want, if
there are specific fonts that you like.
| | 04:19 | Both have a huge selection within their
free plans and allow enough page views
| | 04:23 | for most small personal sites.
| | 04:25 | If your site grows, you'll have to
upgrade your subscription, because it limits
| | 04:29 | you not only on the fonts available,
but also on the number of page views.
| | 04:33 | There's one other thing I want to
warn you about: using these external font
| | 04:37 | libraries might slow down your site, as
it will call that outside library every
| | 04:41 | time a user visits the page for the first time.
| | 04:44 | If that's a concern, try it out for a
little while and see if the slowdown is onerous.
| | 04:49 | Chances are you won't even notice it.
| | 04:51 | The other thing I have to warn you of
is to be judicious in your use of fonts,
| | 04:55 | because designs can get pretty ugly
if you use too many on a single page.
| | 05:00 | But when you select smartly and use them
with a keen eye, these additional fonts
| | 05:04 | can really dress up your site.
| | Collapse this transcript |
| Inserting raw CSS code into themes| 00:00 | There's one part of Drupal Gardens'
Theme Builder I haven't showed yet--
| | 00:03 | the Advanced tab.
| | 00:05 | It's the most powerful feature, but it
also takes the most knowledge of CSS.
| | 00:10 | You could spend months studying
exactly how CSS files interact with Drupal
| | 00:14 | Gardens' themes, and obviously,
we won't be able to do that here.
| | 00:17 | But I will show you enough to be able
to do little tricks, and then you can
| | 00:20 | start flowering out from there.
| | 00:23 | As usual, we go up to Appearance to
bring up the Theme Builder, and then we go
| | 00:28 | to the Advanced tab.
| | 00:29 | Now what we're going to do with this
is I am going to add a graphic very
| | 00:33 | similar to this one on the top down
here in the bottom, but I want that only
| | 00:37 | to appear on the front page.
| | 00:39 | Now, there is no way to do that
directly with the Theme Builder in Drupal
| | 00:42 | Gardens, but you can do that with custom CSS.
| | 00:45 | There is a class that specifies that
something goes only on the front page; it's .front.
| | 00:51 | I will show you that in just a minute.
| | 00:53 | But the first thing we need to do is
figure out where exactly we're going
| | 00:56 | to place that graphic.
| | 00:58 | To do that, I am going to cheat a
little bit and go into Styles and
| | 01:01 | start clicking around.
| | 01:03 | One good thing about the Style selector is
that you don't actually have to make any changes;
| | 01:07 | you can use it to figure out how
your Drupal page is constructed.
| | 01:11 | So I know I want it somewhere in here.
| | 01:12 | Let's see, content-inner, content
looks like it's probably the thing.
| | 01:18 | I'll try it there, and then if I
need to, I will adjust it after it's in.
| | 01:22 | First, I want to prove that we can change that
area by affecting only the front page's color.
| | 01:27 | Before we do that, I'm going to
save as and call this exp_cal_11.
| | 01:34 | Again, it's always a good idea to save
many versions of the theme as you work on
| | 01:38 | it, and then I'll publish it.
| | 01:42 | Great, now we will start
playing around in the Advanced tab.
| | 01:45 | We will start out by just adding a
background color to that area with #content
| | 01:52 | curly brace, background-color, and you notice that
it gives you a little cheat sheet here,
| | 01:58 | which is really nice.
| | 01:59 | Say colon and let's make it this color.
And it changed it already.
| | 02:04 | It does it right away.
| | 02:05 | I will just close that, add my
proper semicolon, update, make sure it's all good,
| | 02:11 | publish, and then I am just
going to take a look around the site.
| | 02:16 | Close out the Theme Builder
and click around a little bit.
| | 02:19 | Let's see our About page.
Yeah, it works on every page right now.
| | 02:24 | But we only want it on the front page.
| | 02:26 | So once again, we go back to Appearance
to bring up the Theme Builder and then
| | 02:30 | back to our Advanced tab.
| | 02:32 | But this time, we only want it on the front page,
| | 02:36 | so I will add that up here .front and
then Update, Publish, and then go back to
| | 02:44 | our site. Go back to our front page.
| | 02:47 | There's our background color.
| | 02:51 | And as you'll notice, when it redraws us
About us page, it's not on the About us page;
| | 02:55 | it is only on the front page, which
is exactly what we wanted. Great.
| | 02:59 | So we have already done something that
can only be done through the Advanced tab.
| | 03:02 | Now, I am going to go
ahead and add in that graphic.
| | 03:06 | Now, this is the part that's a little bit hard.
| | 03:09 | The thing is, we have a graphic on our
own computer, and we want to put on Drupal
| | 03:13 | Gardens' server, but we don't
have a direct way of doing that.
| | 03:16 | So I'm going to use a little bit of a
trick that I learned earlier in core Drupal.
| | 03:20 | What I will do is I will close
out the Theme Builder for now.
| | 03:23 | I'm simply going to add a Junk node, I'll call it.
| | 03:28 | It will be a Basic page,
it doesn't really matter.
| | 03:30 | I'll call it JUNK NODE, so that I remember that.
| | 03:33 | And then down here I'll add my media,
browse for it, and then select it.
| | 03:40 | It's this main_back-bottom graphic and
Open and finally Upload. We'll leave it in its
| | 03:50 | original format, and submit.
| | 03:52 | And there it is. Then I save that node.
| | 03:54 | But before I do, I just want to
un-publish it. It is a junk node.
| | 03:57 | We are only doing this, so that we
can get the graphic onto the site.
| | 04:01 | Once it's there, click Save,
and we see our graphic.
| | 04:05 | Now here's the trick:
| | 04:07 | I right-click on the graphic and say View Image.
| | 04:11 | What that does is it tells us exactly
where on the server that graphic is found.
| | 04:15 | I will copy everything here;
| | 04:18 | it's going to be explorecalifornia.drupal
.gardens.com/files, et cetera, et cetera--
| | 04:22 | actually, I will copy the whole thing.
| | 04:24 | I might have to play around with this a
little bit once I go back into my site.
| | 04:28 | But then I can go back, go into
Appearance--and actually we can delete this node
| | 04:33 | if we want, but I will leave
it since it's unpublished--
| | 04:35 | go into Appearance, and then
go back to our Advanced tab.
| | 04:42 | Now, it's a simple matter of replacing that
background color with the graphic itself.
| | 04:47 | That's going to be background-image url
(', paste in that url, and ');. And then just
| | 05:01 | so it doesn't repeat, we
will make it background-repeat.
| | 05:04 | Oops, I forgot to put back my colon there
but background-repeat: no-repeat.
| | 05:12 | Now, let's take a look at that.
| | 05:13 | Again, we might have a bit of
a problem with this url here;
| | 05:17 | we might have to cut it
down to files and so forth.
| | 05:19 | Again, after you've done this a
little while, you will find out exactly the
| | 05:22 | right way that Drupal wants it.
| | 05:25 | Click Update, Publish, then go back to our
front page and see if it works. Nope, not quite.
| | 05:35 | That's okay; we can just go in and
continue to fiddle around with it.
| | 05:38 | Let's go back up to
Appearance and again to the Advanced tab.
| | 05:43 | One thing that I've noticed about the
URLs in Drupal generally, and Drupal
| | 05:47 | Gardens as well, is that it very
often needs to have a leading slash.
| | 05:51 | So let's try that and see if that works.
| | 05:54 | Ah! Even before we click Update, it
automatically updated and showed that that was in
| | 05:58 | fact what we were missing.
| | 06:00 | Click Update anyway and then Publish.
| | 06:03 | And then just to be sure that it's only on
the front page, I am going to close this X here--
| | 06:08 | that will get us out of the Theme
Builder--and click onto a different page,
| | 06:11 | let's say the blog.
| | 06:13 | Yep, it only shows up on the front page.
| | 06:16 | Now, when we go back Home,
you see what it looks like.
| | 06:19 | And you have to admit the site
is looking pretty good now, right?
| | 06:22 | I know we have a lot of text overruns,
and this isn't quite matching up to the
| | 06:25 | left-hand side, but we are starting
to get there, and these are some of the
| | 06:29 | things that we're going to fix in the
video about finessing the theme design.
| | 06:34 | By the way, the CSS code that you enter in
that Advanced tab, it overrides all previous CSS.
| | 06:41 | It's the last thing that
the page renders, so to speak.
| | 06:44 | When you export the theme, all the
custom code you entered here ends up nicely
| | 06:48 | segregated into a file called Advanced
CSS; and if you were to take a look at the
| | 06:53 | info file, that's the last thing that's loaded.
| | Collapse this transcript |
| Adding visual effects with JavaScript libraries| 00:00 | Because of how it's set up, Drupal
Gardens can't be as flexible as the core
| | 00:04 | Drupal that you download and host yourself.
| | 00:06 | The biggest difference is that you
can't add modules or custom code to your
| | 00:10 | Drupal Gardens site-and with very good reason.
| | 00:12 | If you could, then Acquia--which is the
company that makes Drupal Gardens--would
| | 00:17 | have to support all those additions
that thousands of customers added, which is
| | 00:21 | just an impossible task
for such a low-cost platform.
| | 00:24 | But Drupal Gardens does make
concessions for the geekiest among us by, for
| | 00:28 | example, making it easy to turn on
some often-used JavaScript libraries that
| | 00:32 | deliver cool visual effects.
| | 00:34 | Here's how you do it.
| | 00:35 | The first thing you have to do,
as usual, is to enable a module.
| | 00:39 | Go up to Modules, then scroll
down to JavaScript libraries.
| | 00:45 | It's under the Other group down here.
| | 00:49 | Enable it, scroll to the bottom,
and click Save configuration.
| | 00:55 | Then you add the libraries you
need by clicking Configuration and
| | 01:00 | JavaScript libraries.
| | 01:04 | I'll enable jQuery UI:Core and jQuery UI:
Tabs. Then I'll click Save.
| | 01:11 | Now, because I'm not a programmer,
I'm going to use some example code that
| | 01:15 | Drupal Gardens provides.
| | 01:16 | I'll go up to Help and
search for jQuery content.
| | 01:21 | This just happens to be some
stuff that I know they have.
| | 01:28 | And there it is, Adding tabs
to your content using jQuery.
| | 01:32 | What I'm going to do is I'm going to
use JavaScript to show information using a
| | 01:36 | neat effect, which is made possible
only because we turned on those libraries.
| | 01:41 | First, I'll create an HTML page.
Then I'll upload a file containing a
| | 01:45 | little JavaScript code.
| | 01:46 | You will find both pieces on this page.
| | 01:49 | I scroll down, and here's my
HTML, which I'll simply copy.
| | 01:55 | I'll then go back to my
site and create a new node.
| | 01:58 | I don't need this Help open anymore,
so I'll close that. Click Add content.
| | 02:04 | I'll make it a Basic page.
| | 02:07 | Title will be JavaScript test, and
then I'll paste in the code here.
| | 02:12 | But there is a little thing
you have to watch out for.
| | 02:14 | It needs to be in HTML and Full HTML.
| | 02:18 | Now, watch out, because when you
switch to Full HTML, Drupal Gardens
| | 02:21 | switches back to WYSIWYG.
| | 02:23 | So you want to make that switch to Full
HTML, then click HTML. Now you can paste.
| | 02:30 | I'll scroll to the bottom,
and publish it. Good!
| | 02:36 | There's our page.
| | 02:37 | It doesn't look like much yet, does it?
| | 02:39 | Now we create our JavaScript code
as a separate file that we'll upload.
| | 02:43 | Note that you have to do this in a
text editor that saves plain text, not the
| | 02:47 | styled text that a word processor saves.
| | 02:50 | Some free programs that do that are
Notepad, which is built into Windows, and
| | 02:54 | TextEdit, which is built into the Mac OS.
| | 02:56 | To get our code, I'll go back to
this page, scroll down, and copy it.
| | 03:03 | I'll then go to my text editor.
| | 03:05 | I happen to have one open already
called Notepad++. Paste the code.
| | 03:10 | Then I'll Save it to the
Desktop as mytabs.js, and save.
| | 03:22 | I can close out this window, and
finally add that file as a custom library.
| | 03:27 | I go back to the site and click Configuration.
| | 03:32 | Go back to JavaScript
libraries, and click the Custom tab.
| | 03:36 | This is where you upload
any code that you've written.
| | 03:40 | Add JavaScript, and I'm going to add
the file that we created. Choose it, go to
| | 03:46 | my Desktop, and there it is. Open.
| | 03:51 | You might wonder whether to put it in the
Footer or the Head or leave it Disabled.
| | 03:56 | Differing programming needs determine
what part of the page should contain
| | 03:59 | that custom script.
| | 04:00 | If you put it in the Head, then of
course it loads earlier than if you put it
| | 04:04 | elsewhere. But by putting it in the
Footer, we're displaying the content first
| | 04:08 | and then adding the effect.
| | 04:09 | That makes a difference
if the page loads slowly.
| | 04:12 | I'll leave the Description empty and click Save.
| | 04:15 | The last thing we need to do is sort
of clear the site's throat, so to speak.
| | 04:21 | You see, Drupal Gardens aggregates
JavaScript files and caches certain
| | 04:25 | information to make sure
that your site runs faster.
| | 04:28 | The downside of that is it sometimes
doesn't notice when you add new JavaScript files.
| | 04:33 | We can fix that by going
to the Performance page.
| | 04:36 | We click Configuration and Performance.
| | 04:39 | I'm going to go down here and
dis-aggregate CSS and JavaScript.
| | 04:47 | Incidentally, these will come on again in a
little while when Cron next runs on Drupal Gardens.
| | 04:53 | I'll save that.
| | 04:54 | And then finally, I'll clear
the caches. Now we're ready.
| | 05:01 | When I close this overlay, we see the
page with the neat effects in place.
| | 05:09 | That's pretty cool, isn't it?
| | 05:11 | Now, the thing is, I use some code
that was tested on Drupal Gardens.
| | 05:14 | There is additional sample code
out there, but I personally had some
| | 05:18 | troubles getting it to work.
| | 05:19 | If you're a JavaScript programmer, however,
you'll probably have better luck debugging it.
| | 05:24 | I'll show you where that stuff is.
| | 05:26 | Go up to Configuration and JavaScript
libraries. And if you Command+Click to
| | 05:32 | open a new window on any one of these,
it will take you to a page where there's
| | 05:36 | some sample code and some really neat
effects that you can work into your own
| | 05:40 | site--again, if you're good enough
with JavaScript to make it work properly.
| | 05:45 | This gives you a very basic
introduction to how to implement JavaScript
| | 05:48 | libraries in Drupal Gardens, but as is
usually the case with programming, the
| | 05:54 | devil is in the details.
| | 05:55 | For more information, see this
page on Drupal Gardens documentation.
| | 06:00 | It's called Extending your site using
third-party JavaScript libraries, at this
| | 06:04 | URL, drupalgardens.com/
documentation/adding-custom-javascript.
| | 06:11 | And of course, there's no better
way to learn programming then to watch
| | 06:15 | lynda.com's videos on the subject,
| | 06:17 | for example, JavaScript Essential
Training and jQuery Essential Training.
| | Collapse this transcript |
|
|
8. Perfecting Site DesignsFinessing theme design| 00:00 | Now is that magical moment when we
bring together all that we learned to make
| | 00:05 | our site truly complete.
| | 00:07 | We have all the pieces here,
and normally you'd be perfecting more as you went.
| | 00:10 | But in my rush to demonstrate how things
worked, I have left some pretty ragged edges.
| | 00:15 | Let's be honest, the site is
not really functional right now.
| | 00:19 | This video cleans up all those edges,
and gives us a site that we can truly be proud of.
| | 00:25 | Now, I'm going to do all of this very
quickly, both to save time and to give
| | 00:28 | you an idea of what working with Drupal
Gardens is really like in a production environment.
| | 00:32 | I've already done a little bit of it.
| | 00:34 | For example, I removed some blocks
that are here in the left-hand column.
| | 00:39 | We're going to keep this Need guidance,
and Newest tours block, but we'll get
| | 00:42 | rid of the rest of the stuff.
| | 00:44 | What I really want in the middle of the
page is just this one bit of information
| | 00:48 | here, Explore our world your way.
| | 00:51 | So first we'll get rid of this bit of
text up here by editing it and removing
| | 00:57 | it from the front page.
| | 00:58 | Of course, you could also un-
publish it or delete it, but this is how
| | 01:02 | I'll handle it here.
| | 01:04 | I don't think that I want to
have anything in the right column.
| | 01:07 | I'm going to really open this up.
| | 01:08 | So I'll take this block and Configure
block, and move that out of Sidebar B.
| | 01:14 | Now I want to mention another way
of doing this would be to go up to
| | 01:18 | Structure and then to Blocks,
and then you can move a whole bunch of blocks
| | 01:22 | around all at once.
| | 01:23 | But I've already done most of that work.
| | 01:26 | I'll refresh the screen. Great!
| | 01:28 | It's already looking a little better.
| | 01:30 | Now one other thing I noticed when I
went back to Google Chrome, as I'll do
| | 01:34 | right now, is that because it doesn't
have that information up here that shows
| | 01:38 | up when you're logged in,
| | 01:39 | this guy's head turned into a little like
mushroom head, instead of being like this.
| | 01:44 | So I'm actually going to
remove this user menu from here.
| | 01:47 | Of course, as we were creating this site,
what we should be doing is looking at
| | 01:51 | it in a variety of browsers while
logged in, while not logged in, and so on.
| | 01:56 | But for now, I'm just going to
remove it. Go down and save.
| | 02:05 | Now every time I come back to this
page, I have this little help message.
| | 02:09 | That's something that's not
normally going to be showing to people,
| | 02:11 | so I always reload after I see that so
I can see the page more the way people
| | 02:16 | will actually see it.
| | 02:18 | Now let's take care of some things
that have been bothering us for a while.
| | 02:21 | For one thing, the sidebar should
really end with this graphic line here.
| | 02:26 | So I'll click Appearance
and change some of the borders and spacing.
| | 02:29 | I'm going to do that in a few different phases.
| | 02:31 | This is where I start playing around with
the way that the page is actually laid out.
| | 02:35 | I actually find it a lot of fun,
but it can be frustrating because
| | 02:39 | you'll change one thing,
| | 02:40 | you'll go back, you'll change it again,
and you'll see that it changed more than
| | 02:44 | you expected, as you'll see in a moment.
| | 02:46 | I click Styles > Borders & Spacing,
and then again, I have to find the
| | 02:52 | correct area to do.
| | 02:53 | I happened to know that it's the content area.
And let's play with the padding a little bit.
| | 02:58 | Nope, that's the whole thing.
So let's try the margin. Aha!
| | 03:02 | I have the wrong part.
| | 03:04 | So what I need to do is look in here. Yup!
| | 03:06 | That's what I want: main, not content.
| | 03:09 | Maybe it's the margin.
Is that what I want?
| | 03:11 | No, maybe it's the padding. Yup!
| | 03:13 | That's what I want.
| | 03:15 | As long as I'm doing that, I'll add a
little bit of padding on the right-hand side.
| | 03:20 | That makes the text rewrap, and gives us
this nice little bit of white space over here.
| | 03:26 | I'll publish that, and then before
continuing on, I'll do something that I
| | 03:30 | always like to do once in a while.
| | 03:31 | I'll save it under a different name.
| | 03:36 | This will be called exp_cal_final_01.
| | 03:42 | Of course, the way things work out
there'll probably be final_02, final_03,
| | 03:46 | and then final_final.
| | 03:48 | You know how this goes.
| | 03:51 | You know, now that this site is more together,
| | 03:54 | I think that I would rather
not have that logo in the side.
| | 03:57 | I want to have it back in its original position.
| | 03:59 | Now you remember, we moved it down there
for design reasons, but designs change.
| | 04:04 | So the first thing I'll do is I'll
close out of my Theme Builder, go back to
| | 04:09 | my page and remove that block,
scroll down, and move it out of Sidebar A.
| | 04:18 | Reload the page again.
| | 04:20 | Already it's looking a lot better,
| | 04:22 | but I still do need that
back up here in the corner.
| | 04:24 | I click Appearance, and I'll put
it back to its traditional location--
| | 04:32 | that is to say the natural location
that you get by clicking Appearance and
| | 04:36 | then Brand and then Logo.
| | 04:38 | Now, I cheated here a little bit as well.
| | 04:41 | The original logo was actually taller
than these people's heads at the top, and
| | 04:46 | so we ended up with a big gap underneath it.
| | 04:48 | So what I did was I went into an
image-processing program and I made a slightly
| | 04:52 | smaller version. And that's going
to be our final logo, and publish it.
| | 04:59 | Now let's see how that looks.
| | 05:01 | Close out the Theme Builder
and then reload the page. Aha!
| | 05:07 | Now we're getting somewhere,
| | 05:09 | but in doing so, we exposed the little
bit of a flaw with this header graphic.
| | 05:14 | You see we have it on repeat,
and furthermore we have a little bit of space
| | 05:17 | down here we don't want.
| | 05:19 | We also have a gap here
that really shouldn't be there.
| | 05:22 | So what we have to do is pull all of
this stuff together, and then I think
| | 05:25 | we're pretty much done.
| | 05:26 | Let's go back into Appearance, and once
again we're going to be playing with the
| | 05:30 | borders and spacing.
| | 05:33 | We click Styles > Borders & Spacing,
and then we have to play around again, as usual.
| | 05:39 | Let's see. We don't see any padding here in
this header-inner, so we will remove a
| | 05:45 | little bit of the styling.
| | 05:47 | We have a margin up here at the top.
| | 05:49 | That's probably the margin above here.
| | 05:50 | Let's see. It starts out as 9.
| | 05:51 | Yeah, oh I think I'll leave it at 9.
| | 05:55 | That doesn't look so bad.
| | 05:56 | Let's try the header itself.
| | 05:58 | Now we have some extra
padding down here at the bottom.
| | 06:01 | Let's see what happens
when we change that. Yup!
| | 06:03 | That helped a bit.
| | 06:04 | Of course, we added some margin over here,
that 32 margin, in order to fix the graphic.
| | 06:09 | If we take that out, you'll remember.
| | 06:11 | So we'll leave that as it is.
| | 06:13 | So we keep clicking around.
| | 06:15 | Sometimes if you have extra space
and you don't see it in the part that's above,
| | 06:19 | sometimes you'll find it in parts that are
below, like this navigation bar, or even down here.
| | 06:25 | There could be some extra padding in there.
| | 06:27 | So let's take a look all around there.
| | 06:28 | The navigation Bar, well, there is
nothing around the navigation region.
| | 06:33 | Let's take away this content and ul,
nothing there, and maybe navigation. Aha!
| | 06:37 | We have an extra 54 pixels
there, so I'll bring that up.
| | 06:44 | Now, we're in business.
| | 06:45 | We still have this thing below.
| | 06:47 | So once again, I click below,
and indeed we have additional margin there, and a
| | 06:53 | border we don't need.
| | 06:54 | At this point, I'll publish it again, just
to see what it looks like, and close it out.
| | 07:02 | We actually look pretty good at this point it.
| | 07:05 | Now let's be honest, the site still isn't perfect.
| | 07:09 | It's clear that we could go on like
this for quite a while, honing the site's
| | 07:13 | edge until it's razor-sharp.
| | 07:14 | For example, we didn't really go in
very deep with the content, and the menu
| | 07:19 | system could really use an overhaul.
| | 07:21 | But I meant to make this video
just as something of an inspiration.
| | 07:25 | You now have all the skills you need
to make a truly professional-quality web
| | 07:30 | site with Drupal Gardens, or to
convert a comp design, or a wireframe into
| | 07:35 | something that really works.
| | 07:37 | There are still some
important maintenance skills to learn,
| | 07:40 | but if you've watched this entire
course from the beginning, you should feel
| | 07:43 | really good about what you've done so far.
| | 07:45 | The sites you'll soon create for
yourself are proof of your accomplishments.
| | Collapse this transcript |
| Eight ideas for modifying themes| 00:00 | Now, I'll admit it:
| | 00:02 | even though I have been working with
Drupal for about three years, I never
| | 00:05 | made a serious attempt to create themes until
I got hold of Drupal Gardens' Theme Builder.
| | 00:11 | Once I started, I discovered some
tricks that are specific to Drupal theme
| | 00:14 | design, and augmented them with
guidelines I learned from print and
| | 00:17 | traditional web design.
| | 00:19 | What I have done here is I have started
a brand-new Drupal Gardens site based on
| | 00:23 | the Campaign template, just to show
you eight of these tips I have picked up.
| | 00:27 | First, less is more.
| | 00:29 | Studies show you only have a few
seconds to grab people's attention.
| | 00:32 | I like that Drupal Gardens gives you
all of the sample stuff down here when you
| | 00:36 | create a new site, but in
practice it's just too much stuff.
| | 00:40 | For example, nobody is going to read
and understand these seven menu items in
| | 00:44 | the first few seconds, so
cut down as much as possible.
| | 00:47 | There are several ways of doing that.
| | 00:49 | One is, as you saw in the finessing
video, to get rid of some of these blocks.
| | 00:54 | You don't necessarily need to have all of
these comments on the front page, or blog posts.
| | 00:59 | Even once your site is lively it's
not necessarily a good thing to have all
| | 01:03 | of that information thrown in people's face
once they get there, so start cutting back.
| | 01:08 | Another way to simplify is by going
up to Appearance, to open up the Theme
| | 01:14 | Builder, and switch from the Campaign
design to something a little bit simpler.
| | 01:19 | One that I like is Minima.
| | 01:20 | That was the one that we used to build
our old site, the Explore California site
| | 01:24 | you saw throughout this course.
| | 01:26 | There are others, though.
| | 01:28 | The Bare Bones one is specifically
made to be very, very simple, and to give
| | 01:33 | you only a little bit of stuff so that you
can then create your style exactly your way.
| | 01:38 | My third tip is to expand and narrow
CSS selectors, so you're changing the
| | 01:44 | styles of things exactly as you want, and
not doing more or less than you mean to.
| | 01:49 | The way to do that is by clicking
Styles in your Theme Builder, and then let's
| | 01:53 | click around a little bit.
| | 01:54 | Once you have something selected,
turn on Power theming and Show CSS.
| | 02:00 | Now have a lot more control.
| | 02:02 | If you don't want use the CSS names, you
could just have Power theming on, but
| | 02:06 | the important thing is that you would
be able to click to add and subtract
| | 02:10 | these different parts.
| | 02:11 | For example, if we look up here at
this title, it has The header inner, The
| | 02:16 | site name, All links.
| | 02:17 | Well what exactly is it you're trying to style?
| | 02:20 | By removing some of these or adding
others, you can narrow it down or broaden
| | 02:25 | it out as you like.
| | 02:26 | My fourth tip is to move the logo
out of its traditional position.
| | 02:30 | In traditional core Drupal when
you're looking at the site--and I'll close
| | 02:34 | out the Theme Builder to give you an
idea-- you would have a logo up here in
| | 02:38 | the corner, and to be honest I'm
glad that they took that out of Drupal
| | 02:42 | Gardens so that you don't have this default
logo that you accidentally leave into your site.
| | 02:47 | But you know not every logo has to be up there,
and I showed you this in a different video:
| | 02:51 | "Changing the site's main logo and favicon."
| | 02:54 | I kind of like having the logo down
here in the left-hand column, or even in
| | 02:59 | the right-hand column.
| | 03:01 | Whatever you do, just make it
fit in with the rest of your site.
| | 03:04 | On the same note, I recommend that you
hide the site's title once you have a logo up.
| | 03:09 | People understand that a logo is your name
and usually will click on it to go back home.
| | 03:14 | My next tip is to use
borders and backgrounds creatively.
| | 03:19 | You can apply borders and backgrounds
to everything with the Theme Builder.
| | 03:23 | It's easy to overdo, but a few
judicious touches can really make an impact.
| | 03:28 | And I'll show you that by again going
into the Theme Builder, scrolling down on
| | 03:33 | my screen so I see a little bit more of the
content, and then go into the Minima theme.
| | 03:38 | Let's take, for example,
this article content here.
| | 03:41 | I'll click Styles > Borders & Spacing,
and then I'll select this right here.
| | 03:47 | Take a look at this.
| | 03:52 | You could actually make this
interesting way of having text stand out by
| | 03:56 | adding a border there.
| | 03:58 | You could do the same thing with graphics,
add a little bit of a border around them.
| | 04:03 | Well, that's not the most tasteful border,
but you get the idea: have fun with it.
| | 04:07 | Play around with the spacing as well.
| | 04:09 | My next tip is to use repeating backgrounds.
| | 04:12 | We did that in our earlier site, and
you saw how it created this nice little
| | 04:16 | fade from the top to the bottom,
with just a very small graphic.
| | 04:20 | You can get a lot of punch out of
those little graphics by designing one that
| | 04:24 | repeats in background areas.
| | 04:26 | It's not that hard to do, but
it does take a little practice.
| | 04:29 | The way I learned how to do it was by
watching Jan Kabili's course Photoshop for the Web.
| | 04:34 | My next tip is to use main graphics
boldly, and to demonstrate this I am going
| | 04:40 | to take a look at our completed site,
just to remind you what it looked like
| | 04:43 | before we put in our main graphic.
| | 04:45 | To do that we'll go back to
explorecalifornia.drupalgardens.com, go up to our
| | 04:52 | Theme Builder > Styles >
Background, and select that header there.
| | 05:01 | Now when we remove that, you can see
it completely changes the feel of the
| | 05:06 | site, so don't be afraid to use them,
especially as light backgrounds, like you have back here.
| | 05:13 | Finally, I would recommend that you
do something special on the front page.
| | 05:17 | In the video we showed, "Inserting raw
CSS code into themes," I showed you how
| | 05:21 | to use that .front selector to make
something appear only on the front page.
| | 05:25 | That's not the only way to do it, though.
| | 05:27 | If we go up to Structure and Blocks,
you can make blocks appear only on the
| | 05:33 | front page or on every page but the front page.
| | 05:36 | To do that--and I'll just down and edit one.
| | 05:37 | Let's say this Need guidance block.
| | 05:40 | Click Configure, scroll down, and here you
can say which pages you want it to appear on.
| | 05:46 | If it should only be on the front page, you
would say Only the listed pages, and then front.
| | 05:52 | All of this is explained in the text
below it, and you can do some pretty
| | 05:56 | complicated rules so it will little
show up on all pages that have a URL that
| | 06:00 | starts with a certain
word, or anything like that.
| | 06:03 | These are just a few ideas of how to
use the Theme Builder and the rest of
| | 06:07 | Drupal Gardens to make your site truly
yours, but more important than learning a
| | 06:12 | few tricks is to spend time using it.
| | 06:15 | Don't be afraid to experiment;
| | 06:17 | you won't destroy anything.
| | 06:18 | And if you save backups, as you learned
in the video about switching, saving and
| | 06:22 | copying themes, you can always
undo errors and try something new.
| | Collapse this transcript |
|
|
9. Managing SitesMonitoring sites| 00:00 | When you host a Drupal site yourself, you
find yourself constantly checking on it.
| | 00:05 | You need to make sure all the modules
are up to date, the changes on the server
| | 00:09 | haven't created new
problems, and on and on and on.
| | 00:12 | With Drupal Gardens though, nearly
all of these worries are taken from you.
| | 00:17 | You still have to check for spam and
abuse, and that people aren't signing up
| | 00:20 | that you don't want to sign up,
but those are people problems.
| | 00:23 | Solving machine problems
isn't your responsibility.
| | 00:27 | Nonetheless Drupal Gardens does give
you a few tools, so you can keep an eye on
| | 00:31 | things, if you decide you want to.
| | 00:32 | Here are some of those tools.
| | 00:34 | You'll find all of them up
underneath this Reports link.
| | 00:38 | The first one is Status report.
| | 00:40 | When you host your own Drupal site, you
find yourself checking this constantly,
| | 00:44 | but the truth is, in Drupal Gardens
there is not much you can do if you find a
| | 00:47 | problem here. And you almost never do
find a problem here because they run the
| | 00:51 | system very well on the Acquia side.
| | 00:54 | So we'll just go on to the next one.
| | 00:56 | Recent log messages tells you all
of the unusual activity that's been
| | 01:00 | happening on your site.
| | 01:02 | It doesn't tell you, for example,
when somebody accessed a certain page;
| | 01:05 | that's a little bit more detail than
you need. But it does tell you if, for
| | 01:09 | example, somebody was trying to get
into a page they shouldn't have, such as
| | 01:13 | here, someone was trying to change
the permissions, some anonymous user.
| | 01:17 | You can cut down on the number of
messages that you see here by clicking this
| | 01:21 | Filter Log Messages, and let's just take a
look at the alerts, for example. Filter, Ah!
| | 01:26 | Good, there were no alerts
that we had to worry about.
| | 01:30 | But we could also see, for example,
what the Aggregator has being doing.
| | 01:34 | Go ahead and click Aggregator.
| | 01:35 | I removed the alert by Ctrl+
Clicking on it. Filter. Good!
| | 01:40 | It tells us that our Aggregator is
picking up information regularly as it should.
| | 01:44 | To reset that filter, just
click the Reset button right there.
| | 01:49 | The next report is the Field list.
| | 01:54 | This is sort of an unusual one.
| | 01:56 | You might remember that when we are
creating content types you could add
| | 01:59 | various fields to content types,
and then you could share those fields
| | 02:02 | among content types.
| | 02:05 | The body, for example, is
found in every content type.
| | 02:08 | Whereas the one we created for Tour,
field_length, is only found there.
| | 02:12 | This Field list is useful, especially if
you go in and try to create a field, and
| | 02:16 | are warned that you can't do that
because the field name already exists.
| | 02:20 | Sometimes if you've been working on a
big site, you've created dozens and dozens
| | 02:24 | of fields, and you won't
remember where you put them.
| | 02:27 | Well, this screen will tell you.
| | 02:30 | Continuing on, we have Mollom statistics.
| | 02:32 | Now you've learned about Mollom
in the video about slowing spam.
| | 02:36 | Our site, however, isn't a live site.
| | 02:39 | We are not actually interacting with the
public, so there is not much to see here.
| | 02:43 | But if you are interacting with the public
and people are trying to post spam to your site,
| | 02:47 | you'll see this graph that shows you
exactly how many people tried to post and
| | 02:51 | weren't able to, as well as
the ones who were successful.
| | 02:55 | That way you get a sense of what
percentage of attempts are true and which are spam.
| | 03:01 | The next two, access denied and page
not found errors, tells you if people who
| | 03:05 | are trying to get to pages that
either they shouldn't get to, or that they
| | 03:09 | should be able to get to
but they just aren't there.
| | 03:12 | If, for example, you created a page
called Big Sur Tour, but you accidentally
| | 03:17 | link to it from somewhere else under a
different URL, well, they will get a page
| | 03:22 | not found error, and you can find that
out by just clicking on this link here,
| | 03:26 | taking a look and saying, I see,
there should be a page there or there's an
| | 03:29 | incorrect link or something like that.
| | 03:33 | The last of the reports
is the Top search phrases.
| | 03:36 | This gives you an idea of what people
are looking for on your site when they
| | 03:40 | type something into that Search box.
| | 03:41 | It's a good marketing tool because
let's say you find that hundreds of people
| | 03:45 | are searching for restaurants, but
you don't have any information on your
| | 03:48 | site about restaurants.
| | 03:50 | Well, that tells you that you should,
and that's the end of the reports on Drupal Gardens.
| | 03:55 | As I said, there is really not that
much to monitor on a Drupal Gardens' site.
| | 03:59 | But really that's good. Because you don't
have to worry about these technical details,
| | 04:04 | you're free to create content and attend
to users and do all of the other things
| | 04:08 | that make a good site great.
| | Collapse this transcript |
| Duplicating and deleting sites| 00:00 | There are several reasons why you might
want to duplicate a Drupal Gardens site.
| | 00:04 | For example, you could build a template
site that you then use to build a suite
| | 00:08 | of sites with the same look and feel.
| | 00:10 | Or you could duplicate an existing site,
| | 00:12 | change it a little bit, and present the new
look for user testing and possible adoption.
| | 00:17 | Or you could simply use duplications
as an easy way to back up your site.
| | 00:22 | In fact, that's exactly what I
did while I was making this course.
| | 00:25 | After each video, I would
back up the site by duplicating it.
| | 00:29 | But whatever your reasons, Drupal
Gardens makes site duplication easy.
| | 00:33 | It's just a few clicks.
| | 00:35 | The way you do it is you go up to My sites
while you're logged in as the Administrator,
| | 00:40 | go to the site you want--in this case
we have only one in our Site manager--and
| | 00:44 | go over to his More link here.
| | 00:46 | From there, you click Duplicate Site.
| | 00:50 | You then enter whatever
name you want to have for it.
| | 00:53 | I am going to say explorercalifornia02.
There is one thing to know though:
| | 00:59 | you can't put in any kind of
punctuation here or unusual characters.
| | 01:04 | If you try to, it'll stop you at some point.
| | 01:07 | So I'll just say
explorecalifornia02 and duplicate site.
| | 01:11 | Do note the warning up here:
| | 01:13 | User accounts with site owner or
administrator will be copied to the new site
| | 01:17 | but nobody else will,
| | 01:19 | neither the user accounts nor
the content that they create.
| | 01:23 | So this is not a good way to keep all
of the content that somebody's created
| | 01:27 | and put on your site.
| | 01:29 | If you want to do that, the best thing to do
is to export the site and then host it yourself.
| | 01:34 | Unfortunately, there's no way for you
to duplicate it and keep it on Drupal
| | 01:38 | Gardens with all of that user-created content.
| | 01:41 | Once it's ready, you'll be told
that your site is being duplicated.
| | 01:45 | This will actually take a while,
| | 01:47 | but eventually an e-mail
will appear in your mailbox.
| | 01:50 | To see it, I go up to my mailbox here.
| | 01:53 | It typically takes a few minutes for
that e-mail to arrive, but once it's there,
| | 01:57 | you open it, and it will give you a
little bit of information about the site
| | 02:01 | having been created.
| | 02:02 | If you go back to your Site manager
and reload the page by clicking on My
| | 02:06 | sites, you then see your new site, which you
can log into, as usual, by clicking on the link.
| | 02:12 | Again, it'll look like your old site,
but it won't have any of your old users
| | 02:16 | or your old user content. Nice feature, huh?
| | 02:19 | Let's go back and take a
look at all of my sites.
| | 02:22 | Click on My sites up here, and we see it again.
| | 02:26 | Now, let's say that you've been
duplicating and duplicating sites, and eventually
| | 02:30 | this list is much longer
than you really want it to be.
| | 02:32 | Well, it's easy enough to delete sites.
| | 02:34 | You go to More and then down to Delete Site.
| | 02:37 | Here it gives you the typical warning
that you really are going to delete it, and
| | 02:41 | not only is it going to delete all of
the content and all of the users from your
| | 02:45 | site, but it'll also make
that URL available again.
| | 02:48 | So if I wanted to protect that
explorecalifornia02 domain, I really shouldn't
| | 02:53 | delete it; instead, I should take it
off-line, and there is a link here that
| | 02:56 | shows you how to do that.
| | 02:58 | But let's say I really do want to delete it.
| | 03:00 | Click Delete and I get this
warning that it's not yet deleted.
| | 03:05 | That's because, once again, it's going to
send an e-mail to me to confirm that I
| | 03:09 | really want to delete it.
| | 03:10 | This e-mail tends to take a lot less
time than it does when you duplicate a site.
| | 03:15 | That's because it takes less work
apparently to clear that site from the servers,
| | 03:20 | as opposed to creating a new site.
| | 03:23 | So I switch back to my mail program,
click to see if I have any new mail,
| | 03:27 | and indeed there it is.
| | 03:28 | Confirm deletion of your site.
I click that and I see a link in here.
| | 03:32 | Now remember, the site doesn't get
deleted until I actually click that
| | 03:36 | link. And in fact, if I don't click
it within 24 hours, then the request to
| | 03:41 | delete it just goes away.
| | 03:42 | So I click it and Drupal
Gardens just says, there. It's gone!
| | 03:49 | Nice features, huh?
| | 03:51 | Now because Drupal Gardens allows you
to create these sites and delete them so
| | 03:55 | easily, I'd like to suggest that you
start from the very beginning with a good
| | 04:00 | plan of how you're going to name the sites.
| | 04:02 | If you're doing it as backups, for
example, it's a good idea to do it in some
| | 04:06 | sort of serial-number fashion,
perhaps with a date or the time of day;
| | 04:10 | otherwise, you might find that you have
20 or 30 sites listed and not know which
| | 04:14 | one is the most recent.
| | 04:16 | In any case, I really appreciate that
Drupal Gardens offer these features because
| | 04:20 | they help me keep my sites in my control.
| | Collapse this transcript |
| Adding custom domains| 00:00 | Once your site is up and running,
you'll probably want to give it a domain name
| | 00:04 | that's easier to remember than
blah-blah-blah-drupalgardens.com.
| | 00:08 | You can do that, but it takes three steps.
| | 00:10 | The first is to register to the
domain you want with a registrar.
| | 00:14 | Now I won't go into the details of this
at all in this video, but if you want to
| | 00:17 | learn more about that, see the Web
Design Fundamentals course on lynda.com.
| | 00:22 | Now after you register that domain,
you are going to have to wait, because it
| | 00:25 | takes a while--typically about 24
hours--for that domain name to propagate
| | 00:30 | throughout the Internet so
everybody knows where it is.
| | 00:32 | The second step is to change a certain
record in your DNS records--called the
| | 00:37 | CNAME record--with your registrar,
and then again, you are going to have to wait.
| | 00:41 | I'll show you how to do this, but for
more details on that on that see the
| | 00:45 | video "Using a personal domain name" in the course
"iWeb '09 Essential Training," also on lynda.com.
| | 00:50 | I have brought up a control window
of my own web host here, and I have
| | 00:54 | already set up a subdomain,
explorecalifornia.tomgeller.com.
| | 00:59 | Then in the CNAME area, type in
explorecalifornia.druaplgardens.com, or whatever
| | 01:05 | the domain name is that you
have in your Drupal Gardens site.
| | 01:08 | Then once you have done that,
continue the process however your web host
| | 01:11 | directs you to do it.
| | 01:12 | Now I am doing this on my own
web host, which is webfaction.com.
| | 01:16 | It'll be very different
depending on your web host.
| | 01:18 | So if you have any problem with this
step, talk to your web host provider.
| | 01:23 | So, that's the second step.
| | 01:25 | The third step is to go back to Drupal
Gardens and tell it to expect all of the
| | 01:29 | traffic from this domain, so we go
back to our site and click My sites.
| | 01:35 | Once you see the domain that you want to
have as the target, click Manage Domains.
| | 01:39 | There is a fair amount of
information here at the top of the page.
| | 01:43 | Most importantly, they have their own documentation.
| | 01:46 | I'll just open that in a new tab, so you can see.
| | 01:48 | This is a somewhat complex process,
and there is a lot that can go wrong, so if
| | 01:52 | you have any problems, just go ahead
and take a look at their documentation.
| | 01:55 | It's pretty good, and in fact,
there are two ways of doing this.
| | 01:59 | The way I am doing it with the CNAME is
the one that they prefer that you use;
| | 02:03 | it's more stable and secure.
| | 02:05 | The other way affects the ANAME, which
is the address name of your DNS record.
| | 02:10 | It's not as reliable, but some
people prefer to use that. Anyway, their
| | 02:14 | documentation will tell you both methods.
| | 02:17 | Once you are on this page, type in
the domain that it's going to be coming
| | 02:20 | from--again, in my case, that does
explorecalifornia.tomgeller.com--and click Add Domain.
| | 02:26 | Incidentally, there is a charge for this,
so take a look at the documentation on
| | 02:31 | Drupal Gardens to find
out exactly how much it is.
| | 02:33 | Once it's done, you see down here the two
different ways that you can reach this site.
| | 02:38 | You can check to see if those domains
are working by simply clicking on them, and
| | 02:41 | indeed it works already.
| | 02:43 | That's actually fairly unusual.
| | 02:45 | You typically have to wait at least a few
hours before the connection will go through.
| | 02:50 | I do want to mention, you can still
reach the site through the old domain name,
| | 02:53 | explorecalifornia.drupalgardens.com.
| | 02:58 | Now as I went through this, I
said one word several times: wait.
| | 03:02 | When you first register a domain, it
can take up to two days for notice of that
| | 03:06 | registration to propagate to all of the
important servers on the Internet, and
| | 03:10 | then again, when you change the
CNAME record, there is an another wait.
| | 03:13 | It's usually not as long as the first
one, but still, plan for this to take
| | 03:17 | some time; don't expect to just be able to
jump right in and have your site live immediately.
| | 03:21 | Ultimately, a lot of this
process is going to involve the domain
| | 03:24 | registration company you choose.
| | 03:27 | The process is different at each one
of them, so I am afraid you are going to
| | 03:30 | have to turn to them for technical
support. But once again, the page on Drupal
| | 03:34 | Gardens I showed you earlier, which is
| | 03:36 | drupalsgardens.com/documentation/
custom-domains is a great place to get
| | 03:42 | information that will help you to get
out of trouble before you hear back from
| | 03:45 | your registrar's help desk.
| | Collapse this transcript |
| Using exported sites outside of Drupal Gardens| 00:00 | When you create an online property,
whether it's a web site or an account on
| | 00:04 | a social network, it's easy to get caught up
in the excitement of starting something new.
| | 00:09 | Too often lost in the excitement is what
you're going to do in 3 or 6 or 12 months later.
| | 00:14 | What happens if you want to
move that property to another host?
| | 00:17 | Will you be able to?
| | 00:18 | Well, you can with Drupal Gardens,
and in fact, the process is quite easy.
| | 00:23 | At least, it's easy to get
the site out of Drupal Gardens.
| | 00:27 | Moving it into another environment is a
different challenge, but first things first.
| | 00:31 | We are here on our site, and we
want to move this to our own host.
| | 00:34 | The first thing to do is click My Sites.
| | 00:38 | Once there, click More next to your domain
name, and go to Export Site. So far pretty easy, huh?
| | 00:46 | On this page, you see quite a bit of
information about what happens to your site
| | 00:50 | when it gets exported.
| | 00:51 | I am going to just summarize it,
although of course you should read through this
| | 00:54 | thing entirely from beginning to end.
| | 00:57 | Essentially when you do the export,
you will get a notification by e-mail.
| | 01:01 | Then some things will happen with the users.
| | 01:04 | First of all, user number 1, which is
Drupal Gardens--that's the entire site
| | 01:09 | owner, the supper user, so to speak of the
site--will get a random username and
| | 01:13 | password, and that gets put into
a text file, which I will show you.
| | 01:16 | The site owner also gets a random
password, although does keep the same username.
| | 01:21 | Finally, other authenticated users--
that is, people who signed up for your site--
| | 01:24 | will need to reset their
passwords when they log in to your site.
| | 01:28 | Again, for complete instructions on
what happens, go to the documentation on
| | 01:32 | Drupal Gardens, but that
will give you an overview.
| | 01:35 | Back to the process. You go
through this and you click Export.
| | 01:39 | Drupal Gardens takes a
while to package up this site.
| | 01:42 | You might remember when you exported a
theme it also took a little while for it
| | 01:45 | to put everything together into
a package and then download it.
| | 01:48 | Well in that case, you were just
downloading the design; here, you are
| | 01:52 | downloading the design and all the
content and the software to run it.
| | 01:57 | So, it actually takes a fair amount longer.
| | 01:58 | I'll save that to my Desktop.
| | 02:01 | Then once it's done, you are going to
have to uncompress the file, and in fact,
| | 02:05 | it goes through two levels of un-
compression, you open up folders and so forth.
| | 02:10 | I have already done that on my computer.
| | 02:12 | If you need any help doing that
yourself, watch the courses on computer
| | 02:15 | literacy on lynda.com.
| | 02:18 | When you are all done with all the
uncompressing and pulling things out of
| | 02:21 | folders, you will end up
with a folder called docroot.
| | 02:25 | Go ahead and name that whatever
you want your site to be called.
| | 02:27 | I am going to call it "ExpCalExport."
| | 02:32 | Let's take a look at what's in there.
| | 02:34 | If you use Drupal in a self-hosted
environment, you will notice a couple of
| | 02:38 | things that are different about this,
but for the most part it's just ordinary Drupal.
| | 02:43 | The first different part
is this credentials file.
| | 02:47 | Double-click the file to open it.
| | 02:49 | This credentials file tells you all of
the usernames and passwords for your site.
| | 02:54 | I mentioned that user 1, which is the
super user, gets a random username and
| | 02:58 | random password. And then here is what
was formally my username, and it gave me
| | 03:03 | a new password as well.
| | 03:04 | I will just close out that file.
| | 03:07 | The other thing that's unusual
in this folder is this .SQL file.
| | 03:12 | Now, this is actually all of the
content and all of the settings on your site.
| | 03:17 | I will open that up, and you see
that it's all SQL instructions.
| | 03:22 | It's not important that you understand
all of this, but you need to hold on to
| | 03:25 | this file, because that's what you are
going to import when you create your site
| | 03:29 | in its new location.
| | 03:31 | That wasn't too hard, was it?
| | 03:33 | The next step though--importing it into
a self-hosted environment--it's a little
| | 03:37 | harder. But to tell you the truth, it's
still not that bad, and I will show you
| | 03:41 | how to do it in the video about
hosting exported Drupal Gardens sites.
| | Collapse this transcript |
| Hosting exported Drupal Gardens sites| 00:00 | In the video "Exporting sites," I showed you
how to get your site out of Drupal Gardens.
| | 00:05 | We now have all the files we
need in this folder, which we've
| | 00:08 | named "ExpCalExport."
| | 00:11 | I also have the Acquia Drupal Stack
installer, or DAMP, running on my computer,
| | 00:15 | and that's where we'll be
importing our site into.
| | 00:18 | If you need any help with DAMP,
watch the videos about it in either of
| | 00:21 | my lynda.com courses,
| | 00:23 | "Drupal 7 New Features" or
"Drupal Essential Training."
| | 00:27 | Here, I'm bringing things into DAMP,
which is running on my Desktop computer.
| | 00:31 | I won't talk about how to move things
to a remote server because there are
| | 00:35 | simply too many variations.
| | 00:37 | Again, "Drupal Essential Training" and other
lynda.com courses are the places to go
| | 00:41 | for more about that.
| | 00:42 | I just want to take another look
inside this folder to see what we have here.
| | 00:47 | The entire folder is the Drupal software.
| | 00:50 | Inside there is the sites folder,
and inside there is default.
| | 00:55 | This is what our site actually is,
all of the files of our site, that is.
| | 00:59 | If we open the files folder, we see
the pictures that we imported and the
| | 01:04 | xmlsitemap and some other things like that.
| | 01:08 | The information about our site,
however, is in the database, which is this
| | 01:12 | Explore_California.sql.
| | 01:15 | Finally, we have passwords for
the two administrative users in this
| | 01:19 | credentials folder.
| | 01:20 | Okay, let's get going.
| | 01:23 | We go into the Acquia Drupal Stack
Installer, and we go to the Sites pane.
| | 01:27 | Now, there is a couple of ways of doing this.
| | 01:28 | You can either click
Settings and then click around.
| | 01:31 | My favorite way of doing it is to
use this pop-up menu and go to More.
| | 01:34 | That takes us straight here.
| | 01:36 | You might think we were creating a new
site, but what we're actually doing is
| | 01:39 | importing these files and that database file.
| | 01:42 | So I click Import and browse to
look for the files. There it is,
| | 01:47 | ExpCalExport. Click OK.
| | 01:50 | And then I look at the Database area.
| | 01:53 | I do have a database dump, so
I'll go ahead and find that.
| | 01:56 | There it is, .SQL, and open it.
| | 01:59 | Finally, we have to give this database a name.
| | 02:01 | I'm just going to all it ExpCal,
and for the Server, it's ExpCal.
| | 02:06 | Again, you can use any name
that you like. Then click Import.
| | 02:10 | This process will take a
little while, and it's done.
| | 02:15 | To go to the site, click it
here, and then click Go To.
| | 02:19 | Your web browser will open.
| | 02:22 | It came up, but it didn't
actually load all of the theme information.
| | 02:26 | I found that this sometimes
happens, but it's easy to correct.
| | 02:28 | Just reload your browser.
| | 02:29 | I did that by hitting Ctrl+R on Windows, or
Command+R on Mac, and there we are. One thing though:
| | 02:37 | we're looking at this as an anonymous visitor.
| | 02:40 | You might remember that I remove the user
login block when I did this design earlier.
| | 02:44 | If this ever happens to you,
it's easy to get back to.
| | 02:47 | Just go up to the URL, and add
"user" to the end, and now we can log in.
| | 02:53 | So let's do my old username,
explorecalifornia, and my old password. Oh!
| | 03:02 | It didn't work. Remember, when you
export a site, it gives you new passwords.
| | 03:07 | So I'm going to go back to my
Desktop and take a look at what exactly
| | 03:10 | those passwords are.
| | 03:11 | I open the folder, go to this
credentials file, and open it up with my favorite
| | 03:17 | editor, and there it is.
| | 03:19 | This is my new password. So I'll copy that,
| | 03:22 | go back to my site, and just paste it in the
Password field, and log in, and there we are.
| | 03:28 | I don't have to remember that password.
| | 03:31 | Now we're in the site just as
we were before on Drupal Gardens.
| | 03:34 | There are a few things you should
do here though, before you go on.
| | 03:37 | First of all, you're going to want to change
the password to something that you can remember.
| | 03:42 | So I'm going to change it back to what it was
on the Explore California site on Drupal Gardens.
| | 03:47 | So I paste that password in there, and then I
enter my new password here, and confirm it.
| | 03:54 | Yup! They match, and I am all set to go.
| | 04:00 | Our site is now up and
running. Congratulations!
| | 04:03 | I just want to go back and point out a
few differences between how the site ran
| | 04:07 | on Drupal Gardens and how it's running now.
| | 04:10 | First, let's go up to People.
| | 04:12 | As we scroll down, we see that our old
user califanjoe, he came over just fine.
| | 04:17 | There is one thing about that
though: his password changed,
| | 04:20 | so when he tries to log in,
it's going to actually reject him.
| | 04:24 | It's a good idea when you move your site
to put something at the top of the page
| | 04:28 | that says, hey, we moved off of Drupal
Gardens, or just, we move this site, and
| | 04:32 | you're going to have to reset your password.
| | 04:34 | It's fairly easy for them to do.
| | 04:36 | When they try to log in, they'll be
rejected, and there'll be a link that says
| | 04:39 | create a new password.
| | 04:41 | You'll also notice we have this
user1 with the random string after it.
| | 04:46 | This is actually the super user of the site.
| | 04:48 | You, explorecalifornia, are
no longer the super user.
| | 04:52 | You might want to start using this
user1 user instead of this one, because that
| | 04:57 | user1 person is going to have all of
the access that you would want to have as
| | 05:02 | the site administrator.
| | 05:03 | To do that, you would of course change
this person's password and username,
| | 05:07 | delete the old explorecalifornia user.
| | 05:10 | However you decide to do
it, it's not a bad idea.
| | 05:13 | If you want to change the username and
password, just click on Edit next to the
| | 05:17 | name, as I just did here.
| | 05:19 | After you've finished importing your
site and changing passwords and usernames,
| | 05:23 | be sure you delete those two special
files from your Drupal installation.
| | 05:27 | The first one, remember, is that
credentials file, which includes the
| | 05:31 | usernames and password;
| | 05:32 | and the second is the
SQL file that ends in .SQL.
| | 05:36 | If you don't do this, and somebody
knows the names of those files, they may be
| | 05:40 | able to get information that
will let them control your site.
| | 05:43 | There are two other large
changes I want to point out.
| | 05:46 | First of all, you're used to clicking on
Appearance and getting that Theme Builder.
| | 05:50 | Well, no more. Now you get the natural Drupal
Appearance page, and here is the theme that we
| | 05:55 | designed, along with Seven--
| | 05:58 | the administrative theme--and some
other ones that we started to use when we
| | 06:04 | were designing our site.
| | 06:05 | You could of course switch
among these themes however you want.
| | 06:08 | The important thing is you don't have
access to the Theme Builder anymore.
| | 06:11 | If you want functions similar to the
Theme Builder, there is a module called
| | 06:15 | Sweaver, which we'll find it
drupal.org/project/sweaver.
| | 06:21 | Download and install that, and then
you'll have something Theme Builder-like.
| | 06:24 | And if you need any help with that,
watch my Drupal Essential Training course.
| | 06:28 | The last difference I want
to show you is under Modules.
| | 06:32 | There is a lot of new stuff up here that
you wouldn't have seen in Drupal Gardens.
| | 06:37 | That's because those modules were
installed, but they were hidden from you.
| | 06:40 | Well, now that you have complete
control of your site, they've been made
| | 06:44 | more available to you.
| | 06:45 | Let's just take a quick look down
here, and we'll see some of them.
| | 06:49 | This Email Login that's part of
Login Toboggan is something new.
| | 06:54 | Some of this Media stuff is new.
| | 06:56 | There is an awful lot of stuff here,
and again, I won't go into all of the details.
| | 07:00 | But if you won't find out about these
modules, take a look at the drupal.org site.
| | 07:05 | Congratulations!
| | 07:06 | If you've followed this course from
the beginning, you've taken the site from
| | 07:09 | conception to completion.
| | 07:12 | You now know more than just how to
create a great site on Drupal Gardens;
| | 07:15 | you know a little about CSS, web
design, and core Drupal management.
| | 07:20 | Whether you decide to build one site or
a thousand, to move them off of Drupal
| | 07:24 | Gardens and into self-managed hosting,
or just to leave them there, you're now
| | 07:28 | ready to take the next steps.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Thanks for watching
"Drupal Gardens Essential Training."
| | 00:03 | I hope you're as excited as I am about
all you can do with Drupal Gardens, and I
| | 00:07 | can't wait to see the
great things you do with it.
| | 00:10 | If you're still hungry for more
information, here are some resources.
| | 00:13 | First of all, take a look it
what's on drupalgardens.com.
| | 00:17 | They are continually expanding their
documentation, and a lot of it is quite useful.
| | 00:21 | To help you get around a little
bit better within Drupal Gardens, I
| | 00:25 | also recommend other lynda.com
Drupal courses, in particular "Drupal
| | 00:28 | Essential Training."
| | 00:30 | Finally, for design help, I recommend
the many, many CSS courses that you will
| | 00:35 | also find on lynda.com.
| | 00:37 | In particular, I like "CSS2
Essential Training" and "CSS for Designers."
| | 00:41 | CSS3 is coming out soon, so
watch for that video as well.
| | 00:45 | I hope this course has giving you what
you need to get out and rock the web.
| | 00:49 | See you there.
| | Collapse this transcript |
|
|
