Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There's one part of Drupal Gardens' Theme Builder I haven't showed yet-- the Advanced tab. It's the most powerful feature, but it also takes the most knowledge of CSS. You could spend months studying exactly how CSS files interact with Drupal Gardens' themes, and obviously, we won't be able to do that here. But I will show you enough to be able to do little tricks, and then you can start flowering out from there. As usual, we go up to Appearance to bring up the Theme Builder, and then we go to the Advanced tab. Now what we're going to do with this is I am going to add a graphic very similar to this one on the top down here in the bottom, but I want that only to appear on the front page.
Now, there is no way to do that directly with the Theme Builder in Drupal Gardens, but you can do that with custom CSS. There is a class that specifies that something goes only on the front page; it's .front. I will show you that in just a minute. But the first thing we need to do is figure out where exactly we're going to place that graphic. To do that, I am going to cheat a little bit and go into Styles and start clicking around. One good thing about the Style selector is that you don't actually have to make any changes; you can use it to figure out how your Drupal page is constructed.
So I know I want it somewhere in here. Let's see, content-inner, content looks like it's probably the thing. I'll try it there, and then if I need to, I will adjust it after it's in. First, I want to prove that we can change that area by affecting only the front page's color. Before we do that, I'm going to save as and call this exp_cal_11. Again, it's always a good idea to save many versions of the theme as you work on it, and then I'll publish it.
Great, now we will start playing around in the Advanced tab. We will start out by just adding a background color to that area with #content curly brace, background-color, and you notice that it gives you a little cheat sheet here, which is really nice. Say colon and let's make it this color. And it changed it already. It does it right away. I will just close that, add my proper semicolon, update, make sure it's all good, publish, and then I am just going to take a look around the site.
Close out the Theme Builder and click around a little bit. Let's see our About page. Yeah, it works on every page right now. But we only want it on the front page. So once again, we go back to Appearance to bring up the Theme Builder and then back to our Advanced tab. But this time, we only want it on the front page, so I will add that up here .front and then Update, Publish, and then go back to our site. Go back to our front page.
There's our background color. And as you'll notice, when it redraws us About us page, it's not on the About us page; it is only on the front page, which is exactly what we wanted. Great. So we have already done something that can only be done through the Advanced tab. Now, I am going to go ahead and add in that graphic. Now, this is the part that's a little bit hard. The thing is, we have a graphic on our own computer, and we want to put on Drupal Gardens' server, but we don't have a direct way of doing that. So I'm going to use a little bit of a trick that I learned earlier in core Drupal.
What I will do is I will close out the Theme Builder for now. I'm simply going to add a Junk node, I'll call it. It will be a Basic page, it doesn't really matter. I'll call it JUNK NODE, so that I remember that. And then down here I'll add my media, browse for it, and then select it. It's this main_back-bottom graphic and Open and finally Upload. We'll leave it in its original format, and submit.
And there it is. Then I save that node. But before I do, I just want to un-publish it. It is a junk node. We are only doing this, so that we can get the graphic onto the site. Once it's there, click Save, and we see our graphic. Now here's the trick: I right-click on the graphic and say View Image. What that does is it tells us exactly where on the server that graphic is found. I will copy everything here; it's going to be explorecalifornia.drupal .gardens.com/files, et cetera, et cetera-- actually, I will copy the whole thing.
I might have to play around with this a little bit once I go back into my site. But then I can go back, go into Appearance--and actually we can delete this node if we want, but I will leave it since it's unpublished-- go into Appearance, and then go back to our Advanced tab. Now, it's a simple matter of replacing that background color with the graphic itself. That's going to be background-image url (', paste in that url, and ');. And then just so it doesn't repeat, we will make it background-repeat.
Oops, I forgot to put back my colon there but background-repeat: no-repeat. Now, let's take a look at that. Again, we might have a bit of a problem with this url here; we might have to cut it down to files and so forth. Again, after you've done this a little while, you will find out exactly the right way that Drupal wants it. Click Update, Publish, then go back to our front page and see if it works. Nope, not quite.
That's okay; we can just go in and continue to fiddle around with it. Let's go back up to Appearance and again to the Advanced tab. One thing that I've noticed about the URLs in Drupal generally, and Drupal Gardens as well, is that it very often needs to have a leading slash. So let's try that and see if that works. Ah! Even before we click Update, it automatically updated and showed that that was in fact what we were missing. Click Update anyway and then Publish. And then just to be sure that it's only on the front page, I am going to close this X here-- that will get us out of the Theme Builder--and click onto a different page, let's say the blog.
Yep, it only shows up on the front page. Now, when we go back Home, you see what it looks like. And you have to admit the site is looking pretty good now, right? I know we have a lot of text overruns, and this isn't quite matching up to the left-hand side, but we are starting to get there, and these are some of the things that we're going to fix in the video about finessing the theme design. By the way, the CSS code that you enter in that Advanced tab, it overrides all previous CSS. It's the last thing that the page renders, so to speak.
When you export the theme, all the custom code you entered here ends up nicely segregated into a file called Advanced CSS; and if you were to take a look at the info file, that's the last thing that's loaded.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.