Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Most content in Drupal that is not generated by a block or a view is considered to be a node and each node can be identified by its ID or type whether it's a page, article, or custom content type. These attributes give us great control over theming the HTML output by each node and its template. Based off our static mockup we are not doing anything special with the individual nodes or node types, other than simply cleaning up the HTML.
So let's begin by browsing to your editor and expanding the modules>node folder. And if we look in here we can see the node.tpl.php template. I am going to right-click and copy this and then I am going to paste this into my sites>all>themes>samoca>templates folder. Now that I have this in my folder I can go ahead and double-click on it to open it and take a look at what this template contains.
If we scroll down a little bit we can see Available variables such as $title and $content as well as other variables such as, $node, $type, $comment_count, and Node status variables to tell us whether or not the $view_mode is full, teaser, whether or not this particular node has been promoted to the front page or if it's sticky or whether or not the comment settings have been turned on. We can also see if there are Field variables available to us for each field instance.
As I continue to scroll down I can see the wrapping div and an HTML markup along with the variables that make up this particular page. Something new in Drupal 7 is the ability to hide and then render content later. This can be seen here in the div class content and as we take a look a little later at how we migrate from Drupal 6 to Drupal 7, this hide and render will come in handy in order to modify the layout.
For now though, all that we're interested in is actually removing any wrapping divs. And if we browse back to Drupal and we actually take a look through Firebug at how the page is laid out, I can navigate to the about us page and actually see a node in action. Within the main section, within the wrapping div, if I open it a little bit I'll see the system-main-block, which is the main content area, and then I finally reach the node.
I can see that I have a wrapping div for the node and if I expand a little bit further I see I have another wrapping div specifically for the content. I want to remove those two HTML elements from our design. Browse back to the editor and simply scroll up and remove the opening div, scroll to the bottom, delete the closing div, and then also remove the div for the content.
Save that node, browse back to Drupal, and Flush the page cache. Now if I inspect the node element, I should see that this block-system-main which is the main content region no longer contains a wrapping div for the node. If I browse back to the editor, we can see by simply removing the HTML elements, we have the ability to clean up the Drupal output.
Now for our particular theme we had no need to create additional node templates. But if you need to know the recommended template suggestions, we can quickly view the documentation. If we browse back over to Drupal, we can click on the drupal.org website for its template suggestions for a node. We can see that they're pretty simple. It starts with the node, followed by a node with the custom content type name, finally a node with the actual ID.
You can use these template suggestions to extend your theming needs. Examining what a node template is, where to find the template, and the best practice is for modifying its output, we were able to clean up some of the HTML to better suit our theming needs. What generally is in a node is considered to be a block of HTML and we will take a look at that next on how you actually go about modifying the output of a block in Drupal 7.
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.