0

It's kind of hard to explain this but I'll try in a pragmatic example:

You have a mini-panel in a block, somewhere around a panel-node (say node/1, your homepage):

  • in the first panel-node (your homepage) this mini-panel has a CSS class named (For example): .pane-1
  • in the second panel-node (your "about-us" page) this mini-panel has the CSS class .pane-6
  • in the third panel-node (your "customers" page) this mini-panel has the CSS class .pane-11
  • in the forth panel-node (your "contact-us" page) this mini-panel has the CSS class .pane 14

And so on and so forth, you get the idea.

I would like to know why Panels creates different pane classes for mini-panels that appear inside panel-nodes?... It makes the CSS development very very hard, forcing me to fill the Style.css file with different classes that all has the same properties. It is also problematic in the sense that we shouldn't and can't adding a class to the Style.CSS each time when creating panel-nodes...

What is your most efficient way to handle with this and to achieve working just with a single general class for this same pane?

Please help,

Notes:

  • This problem doesn't occur in Nodes, it occurs only with Panel-nodes. In regular nodes it uses the same basic panel-pane class (for example .pane-1).
  • I Could supply direct links for examples in my site.

Here is but a very gentle example for the inefficacy of this method Panels works with that forces filling of Style.css with repitative lines of code.

enter image description here

Improve this question

3 Answers 3

Reset to default
1

I recommend using the pane configuration itself under CSS Properties to provide semantic class names for each pane. Create some sensible defaults for .panel-pane and extend it by adding classes. Eg users or themed-list list-striped. If necessary extend the concept using CSS ID's. But I think that's taking it a little far.

If that isn't enough then sometimes I create a custom panel layout with additional wrappers, classes and regions.

Improve this answer
0
1

When we are creating block in drupal then the class are "block block-block" which is similar in case of all blocks, But drupal also provide a unique ID to block which differentiate the block and made us easy to write a common css(according to class) or unique css(according to id).

Same thing is happening in case of panel-nodes. Each pane is having a unique class that is something like .pane-1, .pane-2 but there is also a common class .panel-pane. So u can use .panel-pane.

You can add css on .panel-pane which is followed by the outer region class.

Improve this answer
1

The classes your are seeing .pane-1, .pane-2, etc are generated as a part of the default theme implementation for panels.

The method of how the pane is rendered is controlled by the panels-pane.tpl.php file, this file can be copied from the templates folder and pasted into your theme where you can override it.

This would allow you to change the classes that are printed for the pane. You could insert a general class that you could use to identify and alter these panes. Additionally, you could use a preprocess function in your template file. This would be: THEME-NAME_preprocess_panels_pane. This function takes a single variable ($variables or $vars depending on the theme developer), in this is an array of values that can be overridden. One of these is $variables['classes'], again you could insert your general purpose class here, and if you would like you could remove the incrementing class that you mentioned in your post.

Adding/altering the template or classes array in this fashion would be more productive as it would avert issues where content entry persons forget to add the general purpose class using the UX interface in Drupal.

Improve this answer

Your Answer

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