Viewers: in countries Watching now:
Author Tom Geller demonstrates how to create and publish a complete web site with the powerful tools in Acquia's hosted service, Drupal Gardens. The course shows how to leverage the pre-built page layouts and add custom styling using the ThemeBuilder tool; integrate rich site features, such as surveys, user ratings, and media galleries; and push content to Twitter and Facebook. The course also covers transitioning from a Drupal Gardens site to a self-hosted Drupal site. Exercise files are included with the course.
This video will show you something that's incredibly easy in Drupal Gardens, but it's actually pretty hard with self-hosted Drupal because there you need to know PHP and some server maintenance skills. With Drupal Gardens you simply point and click. One curious thing is that Drupal Gardens handles this change very differently from how it's done in traditional theming. I'll show you that when we are done by exporting the theme it creates and opening the relevant text files. What I am talking about specifically is moving columns around. I'm going to actually hide this column in the right, so that we have more room in the center of the page, and that'll be true throughout the entire site.
One place you will notice especially is on this About page. Right now we have this map in the middle, and it doesn't really have very much room to breathe; it's kind of crowded in there. But when we're done, it'll have this whole area on the this side. So first we click Home to go back Home, and then we launch the Theme Builder, as usual, by clicking Appearance. Once there, we click Layout. Now before I continue, I'm going to save a copy of this just to be safe. I am going to save this as ex_cal_010 to start a whole new series at 10, and OK, and publish it.
Great! Now we're going to start moving those columns around, and when I click on them, you'll see pretty much what the result will be. I click here, and we have the two columns off to the right. You can see that better if you click the Minus sign here. Or you can actually remove columns entirely, so that we have just the left-hand column and the main content area without the right-hand column. That's actually what I'm going to do. I'll click All Pages, which will change every page on this site, and then once again I'll publish it. And to demonstrate that I'll close out the Theme Builder and start clicking around the site a little bit.
Let's go back to that About page, for example. See? Much better. Even though the map is still small, and you can change that setting by the way by going back to the Google Maps page and fiddling around with the code, but at least it doesn't get crowded in by all the information over here. There is one strange thing about this though: we had a feed in this right column, and we basically just lost that. Don't worry, we didn't lose the information itself because you might remember it was contained within a block, and you can see that by clicking Structure and Blocks.
As we scroll down, you can see that it's still contained within Sidebar B, and in fact if we were to change our layout back so that Sidebar B showed up on the right side, it would show up again. So we don't really have to worry about losing content that way. I am going to make one more change. One common site design is to make the front page different from all of the others, usually with more links and navigational stuff. That way when people drill down into other pages, one of the sidebars disappears so there's more room for the main content. I like that system, so here we go. The first thing I'll do is I'll close out this overlay and go back to our front page. Then I'll go back into our Theme Builder by clicking Appearance and back to Layout.
This time I am going to return that B column to the right-hand side but click only on Just This Page, and then publish it. And just to be sure it's working, I'll hide the Theme Builder a little bit and click around, and that should disappear, and indeed it does. The About page is the same as it was with the open area on the right, while the front page has that right column. Now I want to export this theme just to show you how to Drupal Gardens does this.
If you want to follow along and need help doing so, see the video about exporting themes. I'll export it as ExploreCalifornia2. As usual, Drupal Gardens packages that up and saves it. Now that it's downloaded you, have to uncompress it. If you have any problems doing that, see Garrick Chow's videos about computer literacy, also available on lynda.com. I've already done so, so we'll just double-click the folder, and there's our theme. The thing we are going to look at is that .info file, so let's see where that is.
There it is, right near the top. I'll open that up in Notepad and scroll down a little bit. As I scroll down, you see this whole area here about configurations. These are all the different two columns, one on the right side, one on the left, and so forth. I'm only showing you this really to give you a sense of the pain that you're missing. You can do a lot more with themes by editing these files, but it is quite difficult. If you want to learn how, watch the lynda.com "Drupal: Creating and Editing Custom Themes," in particular the video "Creating a template to theme individual pages." One thing that you can do by watching that course is you can change every page that contains a certain content type-- for example, the tour page--so that it has a different layout from everything else.
In Drupal Gardens you'd have to change each page individually, and that wouldn't take into account any new pages that you create of that content type. But for a graphical editor, it really does a lot, and the layout changes it does offer are enough for most kinds of sites.
There are currently no FAQs about Drupal Gardens Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.