Viewers: in countries Watching now:
Drupal 7: Creating and Editing Custom Themes shows the tools and techniques needed to build custom web sites with Drupal. Author Chaz Chumley introduces Drupal theme administration and takes a look at basic theming concepts, such as templates, regions, and variables. The course explores how Drupal default themes are configured and structured and how to install and edit a theme. The course also explores the tools a designer needs to create a Drupal 7 theme, using HTML, CSS, PHP, and Drupal templates, or migrate an existing Drupal 6 theme to Drupal 7. Exercise files are included with this course.
As we continue to convert Drupal 6 node templates, we will take a look at what is changed since Drupal 7, including template suggestions, page variables, the content array, and how to hide and render individual fields and variables so that we can control the exact HTML output needed for theming. If we compare our current version to our Drupal 6 version, we can see that there are a couple of different things that we need to change. First of all, the no display in the middle actually has a heading that does not have a background image.
Also if we scroll down and we take a look at exactly how the Read more, Add new comment is being displayed, the Drupal 6 version has a Shares this link and this is something new in Drupal 7. The way that the comments are rendered, we no longer actually get to have a combination of comments with the Add new comment, instead the way that it's rendered is actually with the Add new comment and if I scroll down a little bit, you'll actually see the comment count alongside the Add new comment.
Those are all things that we are going to need to address. Go ahead and browse over to your Editor, open up the hanselpetal6>sites>all>themes>hanselandpetal folder and let's take a look at the node.tpl.php. What we want to do is actually look at exactly what we need to change in here. For instance, items like picture have been changed to user picture and the page title actually has a title prefix and a title suffix to allow modules to display content around it.
Submitted has actually been replaced with display_submitted and if we actually scroll down to content, remember there's now a content array that allows you to be able to display different node items that are part of that array and those variables can be hidden and shown later within a template. The other thing not so noticeable is that clear-block has actually been replaced with clear-fix. So let's take a look at the best practices for migrating this over to our Drupal 7 instance.
Scroll down to your hanselpetal7>sites>all>themes> hanselandpetal>templates folder. What we wan to do is actually take a copy of the Drupal 6 version and paste it into our templates folder, lets do that now. Now that we have that in there, let's go and open up that version, let's compare that to the default modules>node. tpl template that Drupal 7 utilizes.
The first thing I want to do is replace the documentation. So I am going to highlight it, including the opening div copy it, go to my template for the Drupal 6 version and replace the code in the window. The next thing I want to do is replace picture with user picture. So once again copy and paste.
If we'll look at how the title is being displayed, we notice that the title prefix and title suffix is not part of this. So let's go back over to our node.tpl from our Drupal 7 version and simply copy the section of code and replace our version. Now let's take a look at the meta div. Inside here I have $submitted and $terms. If we take a look at what the equivalent is in Drupal 7, we can see that if display_submitted is the new conditional statement.
So let's copy that and replace the one in our templates folder. Let's also take a look at terms. If you notice we don't actually see terms anymore. The reason behind that is because terms have actually been moved into the content array and now display as links. So let's go ahead and bypass that for a second and then take a look at exactly how the content is being displayed. I am physically going to copy this div and then go back to our instance, I am going to remove terms, because remember terms are no longer part of Drupal 7 and then right above div class="content" I am going to paste in the new way that content is used inside of Drupal 7.
We can see that the class="content" is the same for our Drupal 7 and Drupal 6 instances, so I am going to simply remove or delete this particular block of code. The next thing we have is the share this link. This still uses the node_url so there's nothing to currently change here. However when we get down to print links, we no longer print the link's variable since its part of the content variable array.
And if I flip back over to my Drupal's 7 version, I can copy and then replace this print statement. If I've done everything correctly I should be able to the save this node.tpl, browse back over to my Drupal instance, click on the Performance tab and clear all the cache and then close the Performance interface. I now see the share this link and the Read more and Add new comment are also being displayed properly with the node.
If I continue to scroll down the page I can see that the layout is starting to take shape exactly the way I wanted. However when I get to a blog post that's currently being displayed, I'm seeing some information that I want to be able to hide. Let's compare the blog post in our Drupal 7 version to the Drupal 6. From here all I simply see is the share this link along with the Add new comment or comment count and the admin's blog for who it is that submitted this particular blog post.
I compare that to my Drupal 7 version, I'm seeing a little bit more information than what I really need. Let's actually browse back over to our Editor, close the node.tpl and then actually scroll up and take a look at the node-blog.tpl.php template from our Drupal 6 instance. I'm going to copy this and I am going to paste it into my templates folder. When I do, I also need to rename it, because remember based off Temple suggestions is no longer node-blog, but node--blog.
Go ahead and rename it now and for sake of time I'm actually getting going to open up this note--blog.tpl.php that I've copied in and then go up to my Exercise Files, open up the 09_03 folder and open up this version. I'm then going to copy and replace and then Save.
Now one thing that I want you to take a look at is all the code right smack in front of you that has to deal with the content array. In order for me to get the Drupal 7 version to display properly, I had to traverse the content array looking at the links, then the blog and then the links blog_username_blog, href simply just to get the hyperlink for the blog submitter, followed by the rendering of the content links, blog links, blog_username_blogs, title in order for it to be able to say admin blog.
The short story here is for you to specifically take a look at what the content array holds. You can do this by utilizing a tool such as theme developer and traverse through the content array to see all the information that is now at your disposal to be able to print out. This functionality actually gives us as a Drupal themer a lot more control of the information and the fine-tuning that you may need in order to display content that you previously would have had to do with some sort of advanced theming functions or pre-process or process functions in order to build out the information into a variable before you could actually print it.
If I actually save this and then browse back over to my Drupal instance, click on Performance and in Clear all cache and then close the Performance window and then scroll down, I can start to see that and now for my blog post if I have a comment it displays and if I do not, it shows Add new comment and prior to where we actually saw Add new comment and one comment side by side, those are now gone because I was able to pull that information out properly.
If you take a look at the Exercise Files, there are a couple more nodes that need to be replaced. I am going to actually going to let you do that and then in the next video we will take a look at exactly how those look side-by-side. So since we have now converted four different type of node templates modified the page variables and learned how to hide and render individual content variables to display the HTML exactly how we need it for our theming needs. We will next tackle block templates and the conversion process for Drupal 6 to Drupal 7.
Find answers to the most frequently asked questions about Drupal 7: Creating and Editing Custom Themes .
Here are the FAQs that matched your search "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
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.