Unable to add css class to a Panels region

Question

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...

Answer 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.

Answer 2

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().