Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Customizing block templates and variables

From: Drupal 7: Creating and Editing Custom Themes

Video: Customizing block templates and variables

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.

Customizing block templates and variables

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.

Show transcript

This video is part of

Image for Drupal 7: Creating and Editing Custom Themes
Drupal 7: Creating and Editing Custom Themes

42 video lessons · 11618 viewers

Chaz Chumley
Author

 
Expand all | Collapse all
  1. 5m 58s
    1. Welcome
      1m 3s
    2. Using the exercise files
      2m 4s
    3. Viewing the finished project
      2m 51s
  2. 23m 21s
    1. Installing Drupal 7 (Mac or Windows)
      7m 23s
    2. Using a development environment
      3m 36s
    3. Installing contributed modules
      3m 43s
    4. Using the Administration Menu module
      3m 55s
    5. Using the Backup and Migrate module
      4m 44s
  3. 15m 35s
    1. Using the Devel and Theme Developer modules
      7m 23s
    2. Using Firefox, Firebug, and Web Developer extensions
      4m 55s
    3. Using the Block Class module
      3m 17s
  4. 9m 42s
    1. Exploring the Appearance interface
      3m 20s
    2. Choosing global and theme-specific settings
      2m 55s
    3. Installing prebuilt themes
      3m 27s
  5. 10m 40s
    1. Anatomy of a theme
      2m 57s
    2. Structure of a theme
      1m 52s
    3. Understanding templates and variables
      4m 11s
    4. Exploring the theme registry
      1m 40s
  6. 27m 23s
    1. Exploring the Bartik themes folder, file structure, and .info file
      5m 45s
    2. Exploring how CSS references work in Drupal
      10m 49s
    3. Exploring how script references work in Drupal
      5m 7s
    4. Exploring regions and how they are referenced in a theme
      5m 42s
  7. 11m 5s
    1. Using the Backup Migrate module to create content for a web site
      2m 33s
    2. Creating a theming roadmap
      3m 10s
    3. Creating a theme folder, theme structure, and a .info file and enabling a theme
      5m 22s
  8. 54m 5s
    1. Customizing HTML templates and variables
      5m 29s
    2. Customizing page templates and variables
      13m 43s
    3. Creating regions and rendering page variables
      11m 36s
    4. Customizing region templates and variables
      53s
    5. Customizing node templates and variables
      4m 49s
    6. Customizing block templates and variables
      12m 14s
    7. Customizing view templates and variables
      5m 21s
  9. 13m 36s
    1. Removing unnecessary modules
      2m 46s
    2. Optimizing the CSS and JavaScript
      2m 45s
    3. Enabling caching
      4m 43s
    4. Exploring the performance settings
      3m 22s
  10. 44m 19s
    1. Recreating HanselAndPetal content, files, and the .info file
      14m 0s
    2. Adding an HTML template and modifying page templates
      11m 25s
    3. Converting node templates and page variables
      10m 30s
    4. Converting block templates and page variables
      3m 41s
    5. Converting miscellaneous templates and cleaning up CSS
      4m 43s
  11. 1m 11s
    1. Goodbye
      1m 11s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Drupal 7: Creating and Editing Custom Themes.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.