I'm using drupal 7 and panels 3.

I'm looking for a good tutorial, or tutorial video that describes how to them panels. I understand generally hoe to theme nodes and them fields using the template files, but I don't really understand how to theme panels. I see that within the layout designer, it allows you to add a "style" to your panel panes. I understand this is probably theme based, but how would one add another style to this.

Any help would be great.


P.S. I did do a search already for this info but was unable to find any really good info.

  • In addition to these examples, if your theming involves significant visual structural changes, e.g. like a show/hide comment form for a panelized node page, note that tpl template files are available for panels, if you use the Devel_Themer module (with Devel), turn it on and hover over your panel it will suggest the file you need to create (and also the file whose contents you would need to base it off). I've had success with this. Commented Feb 12, 2014 at 18:21

3 Answers 3


When you add a CSS class using the "CSS Settings" for the pane, Panels will tag the panel html with the classes you have identified. You can then specifically change the css styling attributes by defining your class style using the local.css file found in the active theme directory (set in admin/appearance) to modify your targeted content.

IF you are not familiar with working with css , I suggest you get an intro level book on Drupal and theming, a basic primer on css coding, and upload firebug for Firefox browser to help you see which css styles are currently rendering any content you display on the site.

I have not found a good out-of-the-box solution for what you want to do. I hope this helps get you started on the 'custom route'.


First I will say that I'm not the themer in the team at work, so I don't know all the details, but I will explain what we do as well as I can. The way we do it in my team with nearly all theming, is by using the Pane "CSS Settings", and adding one, or maybe two classes onto a pane. On a frontpage we may have a "Views slideshow". When we add the Pane, we just add a "slideshow" class onto to it, and that's the only Panels specific action we take. Everything else is the done in the themes css files, and is no different from any other theming.

You mention "Styles", and these allowing you to autogenerate certain theming, encapsulating logic for the theming, and is one way of solving the problem. The best documentation for this right now is looking at one of the existing styles.


To add a css class, use the 'panel content' tab. It cant be done using 'customize this page' ...

The 'style' buttons there are not related to css - they are indeed theming; php code that hooks into theming bits. Read http://dustinbons.com/panels-styles-plugin-drupal-7 on how to create a new 'style' for panels.

I wish there was a style that allowed users to enter css classes under 'customize this page' ...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.