Drupal - ddblock Custom Themes

You have ddblock configured and working, now you're ready to take it to the next level and make it your own. To get to that next level, you need to build a custom theme. This tutorial is going to take you through building a custom theme to use with ddblock and how to make ddblock recognize the custom theme.

TIP: If ddblock is not configured and working, check out the tutorial "Drupal - Setting up ddblock". Any references to CCK field names or view names will be based off the "Drupal - Setting up ddblock" tutorial.

To get started, lets just start as simple as possible. We are going to begin with the ddblock standard theme "upright50." The upright50 theme should be installed in Your-Sites-Theme-Folder -> custom -> modules -> ddblock. We need to make a copy of everything that is related to the upright50 theme, this includes the following:

Old Name New Name
ddblock-cycle-block-content-upright50.tpl.php ddblock-cycle-block-content-custom50.tpl.php
ddblock-cycle-pager-content-upright50.tpl.php ddblock-cycle-pager-content-custom50.tpl.php
Folder = upright50 Folder = custom50
ddblock-cycle-upright50.css ddblock-cycle-custom50.css

I am renaming everything just to custom50, but you can use any name you would like to use. As stated in earlier tutorials, sometimes it is easier to learn using the exact tutorial to make sure everything works right, then go back and make the changes to be specific to your site. Now that we have new files to work with, we can begin to replace information inside the files. Open the two php files and the one css file that we just renamed. Perform a find/replace on all three files: find "upright50" and replace with "custom50" (exclude the quotes). In the file "ddblock-cycle-block-content-custom50.tpl.php" do a find/replace of: find "$template" and replace with "$custom_template" and then save all three files.

We now have a custom ddblock theme, even though it has not been modified to appear differently than the upright50 theme. To use our new custom theme, we have to specific the name to ddblock. Navigate to Administer -> Site Configuration -> Dynamic display block and click "Configure block" next to the ddblock that we want to apply the custom theme to. In the configuration, change Template = Custom and this will provide us with a text field asking for the custom template. In the Custom Template field, enter "custom50" (excluding the quotes). Under the "Pager Settings" section, set the Pager equal to Custom. Last step is to save the configuration of this ddblock. The ddblock we just configured is now pulling from our custom theme and we can begin to modify the theme.

The quick check list for creating a custom theme is:

Create a copy of the two php files and folder for a theme
Rename the two php files, folder, and css file to contain name of custom theme
Configure the ddblock to contain the custom theme
Select Custom from the Template dropdown
Type custom theme name into the Custom Template field
Set the pager type to custom

You can make a lot of changes to how your ddblock looks just by modifying the CSS file for your custom theme. You are able to change the size of the main image, thumbnails, slide text, pager layout, etc. just by modifying the CSS.