Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Installing Drupal 7 on Mac or Windows
- Using the Devel and Theme Developer modules
- Understanding templates and variables
- Choosing global and theme specific settings
- Creating a theme roadmap
- Creating the theme folder, structure, and .info file
- Customizing HTML templates and variables
- Creating template regions and rendering page variables
- Understanding performance considerations such as caching
- Migrating themes from Drupal 6 to Drupal 7
Skill Level Intermediate
Block templates act as a rapidable block content and views content and just like other templates can be modified to change the HTML output generated by Drupal. We will take a look at where the default block.tpl resides, what variables it outputs and best practices for overriding this template and its recommended template suggestions. Now that we are displaying dynamic content from our page, node and region templates our theme is starting to take shape.
However we take a look at our home page and our interior pages, you'll see that we still have a little more work to do before we are completely finished. It's time for us to take a look at blocks and how we can modify them to output HTML just the way we need. Let's begin by browsing to your editor, expanding the modules>block folder and copying the block.tpl.php template to your sites>all>themes>samocha>templates folder.
Now I can actually go ahead and double- click on the block.tpl and take a look at exactly what it contains. If I scroll down I can see that it's simply a wrapper for block content. I see a couple of attributes available to me such as the title_prefix and the title_suffix, which is used by contributed modules as well as the title if one exists for the specific block followed by the actual content that's being displayed and some wrapping div elements.
If I browse back over to Drupal and I actually inspect the elements on the page using Firebug, I can actually take a look at the talk to us block and I can see this actual block has a wrapping div for both the container of it as well as another one for the content. Let's actually navigate over to the about us page and see if we see the exact same thing. We have a different block called Current Exhibits and yes we are actually seeing that this particular block has a wrapping div and has a div for the content.
Now we see some additional wrapping divs because of the fact that this specific block is a block that has been composed of a view. We're going to take a look at that a little bit later but, for now let's look at how we actually go about cleaning up the content wrapped around a block. If we browse back to our editor, the first thing I want to do is actually remove the div for the container and the div for the content.
I'm going to save this, browse back to Drupal and Flush the page cache. By doing so, I can see that that wrapping div both around the content and around the actual block has been removed. Knowing that I can actually manipulate the HTML around the block, let's browse back our editor and undo the changes that we just did and this time I actually want to modify the block.tpl and change the div tag to an aside and remove the div around the content.
So, I'm going to leave an HTML element here, in fact I'm converting the div to an HTML 5 element to better match our HTML 5 layout. The next thing I want to do is actually remove the id attribute and add an additional class for the sidebar. But if I add it here then I add it to all the blocks and that's not specifically what I want to do at this point. I want to be able to use the template suggestions to create additional blocks that target specific blocks for my layout.
So for our purposes, let's go ahead and save this page as it is, browse back over to our Drupal instance and Flush the page cache. Now if I inspect this element I can see that there's in aside wrapped around this and the div that was wrapped around the content has disappeared. Now if I compare this to the about us page for our static layout, I see some CSS styling that's currently not being applied.
I have this bluish background, the heading is a little bit bigger in a different color and I have some shadow effects in the box here, which currently I do not have over in my Drupal version. But how do I go about actually targeting just that block? Well, there's a tool that we've looked at earlier that's currently disabled and we need to make sure we go back and enable it and that's known as the Theme developer. So, if I scroll back up to Modules and then scroll down to the Development field set I can see the Theme developer and the dependency of the Devel, which also needs to be enabled and by enabling both of those modules and clicking on Save configuration, I can then use the Theme developer module to inspect different sections of Drupal output to see what variables and what template suggestions are available.
By clicking on Themer Info and then moving my cursor around the page I can highlight the Current Exhibits, locate the block and then see what template is being called. Currently the default block template, which is inside our templates folder is being called, but if I want to target a specific block, I can look above to take a look at some of the template suggestions that Drupal would like to use. In this case, I see one called views_ view__sidebar_exhibit__block as well as seeing a couple of other different template suggestions.
So, which one do we use? The choice is yours. But let's take a look at how we can actually create one now. Browse back to your editor and if we scroll up to the Exercise Files and locate the 07_06 folder, we can see that I've already created this for you. I'm simply going to copy this and paste it into our templates folder.
Now if you're not a premium lynda.com subscriber I've also added the content of these templates into the readme file so that you can create these templates and just copy and paste the content. If I take a look at the block--views-- sidebar-exhibit-block template I can see that I've added a class of a feature-block. That's the only thing that I've added to this particular block and if I now save this and then browse back to my Drupal instance, turn off Themer information, and Flush the page cache, let's see what happens.
I am now seeing some styling start to take place. My shadow are there, my typography is starting to come through, however I have some shifting going on within other block below it, let's go ahead and address that as well. Tab back over to your editor, scroll back up to your Exercise Files and copy the block--block--3.tpl and paste that into your templates folder. This block--block--3.tpl.php template is the block that has shifted up on the page and the reason it shifted up is because it has a class that it's looking for to help it clear anything that's being floated on the page.
If I open this up I can see that this has been assigned a different class called content-block. Now, make sure this is saved and then browse back over to your Drupal instance, scroll at the top and Flush the cache. Now we see that the block below it has shifted back down and if we compare this with the about us page for the static version, we can see that we are exactly spot on with how this custom theme has been applied.
Now, you may be thinking to yourself, if I need to add a class do I have to create a custom template for every single block? And the answer is, no. If we actually scroll back up to the top and go to Structure>Blocks and go to the Block interface, one of the modules that's actually installed and enables called Block Class Settings and what this module allows you to do is when clicking on the Configure option, it provides you with a space to actually add additional CSS classes.
Let's go ahead and see how that works now. For the View: Spotlight block, it's actually going to require a CSS class of feature-collection. Scroll down, hit the Save block and then I'm going to close the Blocks interface and go to the home page and see what has happened. If you remember previously, the heading and the links for this particular image were below the image.
By adding this class and actually inspecting this element I can see that the class for a feature-collection has been added. Let's go ahead and repeat this process for a couple of additional blocks. Go back to the Structure> Blocks interface and for View: Upcoming click on Configure and then for the CSS class, let's add feature-block.
Save the block and for the next one Plan Your Visit, click on Configure, this also gets a feature-block. Scroll down and hit Save block and we need to repeat this process for the Content and the Sidebar. Census information is located in the readme file; I will go ahead and let you do that on your own. Remember, if you needing to create individual block templates, then you can take a look at the following.
Open up a tab and browse out to drupal. org/node/1089656 and this is where the Drupal 7 template suggestions are. So, if you do not have access to the Theme Developer module, you can take a look at the recommended template suggestions from this page. By copying the default block.tpl template and utilizing the suggested template names, we were able to override the HTML output generated by Drupal.
We also took a look at using the block class module versus creating a template for every block when it comes to simple theming needs. In our next lesson we will take a look at views and how we go about modifying view templates.