3

I wish to add custom css classes to specific regions in a panels page.

I understand from this question Add a class to a panels pane that I should be able to do this pretty trivially from the settings menu on the pane or region itself, however, there is absolutely no option to do so.

I am using panels 7.x-3.5 with Panels Bootstrap in Drupal 7.

No matter what layout setting I use - Boostrap, custom style etc - I never get any option to add css classes.

The boostrap settings has a handful of drop down boxes, the custom style settings has a heap of options but no ability to add css classes.

Do I need to over-ride a template somewhere? This should be trivial...

1

The option to add a CSS class is on the actual pane content. In a Bootstrap panel region the cog on the left gives you the option to set the grids up. If you need to add a class to that you will need to find the template file for the region you are using and copy it to your theme/sub-theme and add the class there or write a cTools plugin for that yourself. The ability to add a class is on the actual content panes that you add inside the region, so for instance if you were to add a view pane into the left region inside your panel you could place that view inside a bootstrap .well or bootstrap .alert using the cog on the right hand side (the cog on the content inside the region) of the content pane. So you can add the class to the content pane via settings that way.

If you need to add a class to the whole region you need to copy your template file for your layout to your theme. So if you were using Bootstrap three column stacked you would copy bootstrap-threecol-stacked.tpl.php to your templates folder in your theme. And modify the outer div for the region you want inside that template file. The regions are actually listed in that template file (you will see them inside the file). You can modify any of those template files inside the module, if you want to see what template files have what markup turn theme debug on and inspect your HTML of the page (see here for how to do that).

There is this module where you can add the alert or well into a region: https://www.drupal.org/project/panels_bootstrap_styles but I've never actually used that one and it looks limited. I would stick to the bootstrap panel layouts and proper templating, or cTools plugins for these types of things work great also. You can write them like that module does for just about any markup you need :)

You can also use a module like Semantic Panels to do this, it was a little overkill for something like adding a CSS class so I didn't add it before but you may find it easier to use.

  • So say I want to add 4 different sets of classes for each of 4 regions on a panels layout I have to generate 4 separate template files... And if I want to do this on a number of pages? I am starting to regret using Drupal... – tanbog Jul 26 '15 at 11:46
  • 1
    If you look at the bootstrap panel layout template file (bootstrap-threecol-stacked.tpl.php) it has all of the regions in there, but I'm gong to add another way to do this with a preprocess function also that should work. – burnsjeremy Jul 27 '15 at 11:25
0

I guess adding css class programmatically in THEME_preprocess_html will work. the Add a class to panel page body element suggested a solution to do this using menu_get_item().

  • I don't want to add a css class to ALL panel panes, only to a specific one. For example, say I want to add classes: mypanel-region1, mypanel-region2 to different regions in the same panel but to any other panels. – tanbog Jul 26 '15 at 4:03
  • You can filter it by some attributes. Like the current page url or anything else – M a m a D Jul 26 '15 at 4:04
  • Surely there is a more sensible way... that seems like an unreasonable amount of work to add a handful of custom css classes... – tanbog Jul 26 '15 at 5:23
  • May be there is, but it is all came to my mind to add class in the absence of UI ;) – M a m a D Jul 26 '15 at 5:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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