Drupal 6 themes from TopNotchThemes

Using Panels 2 with your TNT theme

What is Panels?

Panels is a module that allows you to create pages that are subdivided into areas. You can then point-and-click to assign content (views, blocks, pages, user profiles, etc.) to the areas and thereby create a new layout for content on your site.

Your TopNotchThemes theme comes designed with lots of abilities for Drupal and contributed modules. One of these is the ability to easily use the popular Panels 2 module written by Earl Miles. Panels 2 (a massive upgrade of the original Panels module) is still in beta and may be a little rough around some edges, but it’s so much more powerful that it’s what we consider a must-have module (http://www.topnotchthemes.com/handbook/must-have-drupal-modules).

Without using Panels, you normally assign content in Drupal through the Blocks interface by assigning blocks to any of the predefined regions in your theme. TNT themes come with an expanded set of regions to give you a lot of flexibility in placing your content. In fact, you may be able to build your site without needing to use Panels at all. But for those cases where you need a different layout for different pages or sections of your site, the ability to place a block in multiple regions, change the layout of add/edit forms, or to control more advanced options through an interface, that’s where Panels comes in. And TopNotchThemes helps make it easier to use Panels by providing a pre-themed panel page called "TNT Panel" that duplicates some of the styling from the rest of the theme.

We strongly recommend that you review a tutorial or screencast covering Panels 2 before working with this very powerful module on your site: http://drupal.org/node/210208

Does my Drupal site include Panels?

Probably not. Panels is a contributed (not a core) module for Drupal, so unless you specifically installed it or asked someone else to install it for you, an out-of-the-box Drupal installation won’t include Panels.

Can I use Panels to create my entire site layout instead of Drupal’s regions?

The Panels 2 module offers the option to have Panels itself take over all your site’s regions, instead of using traditional blocks. However, at this point, themes from TopNotchThemes do not support this functionality. The TNT Panel can be used to lay out the internal content of your page with special styling to match your theme, but not replace the entire layout. In the future, we may offer themes that can be used with entirely Panels-based layouts.

How do I install Panels?

You install the Panels module the same way you would install any other Drupal module. If you are unfamiliar with this process, we recommend you take a look at the detailed tutorial on module installation we’ve provided for you at http://www.topnotchthemes.com/handbook/installing-drupal-modules.

Briefly, the steps are:

  • Download the module from Drupal.org: http://drupal.org/project/panels (make sure you get Panels 2, not Panels 1, which will be marked with a 2.x in the file name: eg. 5.x-2.0) 
  • Uncompress the downloaded package
  • Upload the module’s directories and files to the sites/all/modules directory of your Drupal installation - Enable the module in your site’s Modules settings page: www.yoursite.com/admin/build/modules

IMPORTANT! In order to use the pre-themed TNT Panel page, you will need to copy three files from the extras/panels subdirectory of your TNT theme download to the Panels layouts subdirectory.

  • Files to copy: tnt-panel.css, tnt-panel.inc, and tnt-panel.png
  • Copy from: topnotchthemes_####/extras/panels (on your hard drive)
  • Copy to: sites/all/modules/panels/layouts (to your web site)

Once you have done this, you will be able to add TNT Panel pages to your site through the Panels administrative interface at www.yoursite.com/admin/panels

How do I create a Panels page?

1. Add a TNT PanelPage

Begin the process for creating a new TNT Panel page:

  • Go to the Panels administrative interface at www.yoursite.com/admin/panels
  • Click on "Panel pages" - From the "List | Add | Import | Settings" set of tabs, click on "Add"
  • Click on the "TNT Panel" layout image

2. Configure Your TNT Panel Page

You will then be taken through a series of steps to configure your Panel page. After filling in the necessary information for each page, click the "Next" button at the bottom left of the page.

3. Page Settings

  • Panel name (required)

Give the panel page a unique name. For example: all_features -

  • Page title (optional)

If you want a title to be displayed at the top of your panel page, enter it here. 

  • Path (required)

Enter the url you want your panel page to have. What you enter will be the path from the root of your website. So if you enter "mypanelpage" (without the quotes) then the url to access your panel page will be: www.yoursite.com/mypanelpage. Likewise, if you enter "news/politics/us/mypanelpage" then the url to access your panel page will be: www.yoursite.com/news/politics/us/mypanelpage. -

  • Click "Next"

4. Advanced Settings

This will take you to the "Advanced" tab of the settings for your panel page. This is a collection of settings that give you control over how users can access your panel page.

  • Menu settings (optional)

These settings let you make your panel page an item in the Drupal menu system and assign it to a menu. This is the best way to make your panel page available to your users, otherwise you have to provide a hardcoded link to it somewhere else in your content.

  • Advanced settings (optional) Here you can disable blocks all the other blocks and regions when this page is displayed, control access to who can see the page, and embed css code into the page.

In general, TNT panel pages are designed to work with all the regions enabled, so you typically wouldn’t want to disable the blocks/regions. If you want to limit who can see your page, then check the authorized roles. Otherwise, anyone will be able to access your page, which is what you want if it’s intended to be a public page.

Unless you know what you’re doing and had a specific purpose for doing so, you normally wouldn’t be embedding css into the page. More typically, you’d theme it by modifying the css in your theme’s style.css file.

  •  Click "Next"

5. Context Settings

These settings allow you to pass in additional information to your panel page that can let you programmatically modify what kind of information gets display on your panel page. It’s probably one of the most powerful features of panels, but it’s beyond the scope of this tutorial and is optional for many uses of a panels page. Feel free to experiment and learn more along with other Panels users at http://groups.drupal.org/panels.

  • Click "Next"

6. Content

Finally, the exciting part! This is where you get to add the content into your panel page. Fortunately, this also one of the easiest parts.

  •  Click on the "+" symbol for any of the panel areas
  •  A popup window will appear with a selection of items from a number of categories (e.g., Custom, Mini panels, Core blocks, Menus, and Contributed modules).
  •  Select an item you want to appear in that panel area. For instance, "New custom content" lets you create a "pane" of static text to go into your panel area.
  •  A new popup will appear with options to configure the settings for that pane, including a title override, css class/id, and access control, as well as settings to add/control the content itself.
  •  Click "Add pane"
  • Repeat this process to put additional panes into the same panel area and to put other panes in additional panel areas.
  • Click "Save"

IMPORTANT! When you’ve finished adding panes to your panel page, you need to click "Save" to save all your changes to the database.

7. View Your Panel Page

  • Visit the url of your panel page based on the Path information you entered in Step #3.
  • You should see a normal page in your site, but the content area will have been replaced with your new TNT panel page.
  •  If you need to make changes to your panel page, visit www.yoursite.com/admin/panels/panel-page and select the "Edit" option for your panel page.

 

‹ Using Panels 2upDesigns & Drupal themes ›