If I add content to a panel and then go to the settings->CSS Properties and add a css class and/or an id it doesn't work. It is not added to the rendered page.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

merlinofchaos’s picture

Odd, that's been tested to work the last time I tried it.

Do you ahve a custom panel-pane.tpl.php?

jerepops’s picture

No. Just a fresh install. I can msg user/pass if you want to look at it. I am pretty good at troubleshooting on my own, but I am at a loss of words on this one

Stado’s picture

Hi there,
having exactly the same problem. any progress on your side?
tnx

Witch’s picture

Same problem here!

Fresh install with adaptive theme. No custom tpl.

Amber Himes Matz’s picture

I can confirm that this is happening on a custom panel page and that the default sites/all/modules/contrib/panels/templates/panes-pane.tpl.php is being used. (I printed a statement out on that page and my statement displayed on the page.)

I have tried clearing all caches and just the theme-registry cache after setting the CSS class in the CSS properties on the pane and before reloading the page.

Anything else I can do to troubleshoot or provide more information?

I am using Panels 7.x-3.2 on Drupal 7.12.

Amber Himes Matz’s picture

This is my quick and dirty workaround for displaying a CSS class that is specified in the CSS properties of the placed content pane in a custom panel page.

1. Copied panels-pane.tpl.php from sites/all/modules/contrib/panels/templates to my theme's 'templates' directory.

2. Replaced Line 23 (the line that outputs the panel pane outer HTML div tag with the classes and id) with:

<?php $pane_id = $display->title_pane; ?>
<div class="<?php print $classes; ?> <?php print $display->content[$pane_id]->css['css_class']; ?>" <?php print $id; ?>>

3. In Page Manager, editing my custom panel page, under "Content", clicked the gear icon of the content pane that I had already added, then "CSS Properties" then I specified "section-tabs" (without quotes and without prepending a dot (.)) as my CSS class for this content pane. (Specify your own class, this was just my case.)

The class "section-tabs" now appears alongside the other panel pane classes in the rendered HTML for this page.

My next step is to hunt down where $classes is being generated in Panels and try a more permanent fix there and if so, offer a patch.

Allow me to sheepishly withdraw my solution. Because of some php notices about calling undefined properties and such, I removed my modified template from my theme directory and it is now working (that is, the classes are being added). The only thing I had done differently, is that I had added classes in the CSS Properties of multiple content panes instead of just the one, when it wasn't working.

kclarkson’s picture

for anybody looking. I had the same issue. All I did was remove the "." in front of my css class.

Would be nice to have instructions underneath each CSS Selector that says "add ID#'s and Classes without the period".

wranvaud’s picture

I'm having this problem too, using Drupal 7.15, Panels 7.x-3.3, AT Core 7.x-2.3 and Corolla 7.x-2.2.
I didn't modify the templates, did not had a dot before the class, cleared the cache and so on and so forth...
I had to use skinr to add css to panes (I was hoping not to use skinr since Panels+AT+Corolla should be enough in principle).

oblongmedulla’s picture

With my install I was having this issue- If I hit save on the Panel Content tab. It would appear to save. However If you hit save on the edit panel tab it does save. so I would make my panel changes hit save, then goto edit and hit save- this seems to work on my version of the install... Perhaps there is an issue with the save function on the panels content tab?

apmsooner’s picture

My experience on this leads to the style settings for the pane. If you set the pane to style of 'system block', the class doesn't get applied. Just don't do that.... and it will work.

CmKeen’s picture

Same issue.
I think I tried everything but some classes are not used, some well.

alaugh’s picture

Have the same issue here. Hoping to resolve it soon. I've attached an image for clarification. Thanks in advance.

mrweiner’s picture

@alaugh I'm not sure that this applies to the rest of the thread, but your h1 styles aren't being applied to that element (I'm assuming) because h1 is being added as a div class. To apply a style in this scenario, your stylesheet would have to be like this:

.h1 {
    color: blue;
    }

as opposed to if it were actually assigned as a header, in which case your stylesheet would read like this (as I'm assuming it already does):

h1 {
    color: blue;
    }

Notice the period before h1 in the first one, and the lack of it in the second.

wickwood’s picture

Version: 7.x-3.2 » 7.x-3.4

Looks like this is a very old issue, so maybe I'm doing something wrong or there is a solution somewhere.

According to my tests using Panels 7.x-3.4, the CSS ID only gets rendered when I select "No Style" for the style.

I would expect nothing for "No markup at all", but I would expect all of the other choices to include the CSS Properties that are set for the pane.

Thanks for any help in advance!
Steve

wickwood’s picture

I figured out away around the issue of Panels not rendering the anchor CSS Id's if you select any option of styling like System Block as I was doing.

The way around this is to create a new pane with Custom Content, but leave it blank. That is no body content or title, but make sure to make it reusable.

Then insert this Empty Custom Content above each section pane that does have content and set the CSS ID to be the anchor.

Similarly, a piece of reusable content with a link back to the top section can be inserted after each real content section.

Also there is brand new module, Anchors Panels Navigation, that adds some smooth navigation between sections. The author of the module also posted a great tutorial on adding anchors to panels pages which can be found at http://yaremchuk.ru/blog/anchors-panels-navigation-module.

Perhaps others have already figured this out, but for me I spent quite a long time trying to get this to work.

Steve

Chocard’s picture

I could not solve the problem, but the information I gathered might help someone more knowledgable than me in CTools solve it.

When trying to view a panel in preview mode, it does work. $vars in template_preprocess_panels_pane() is set correctly. However, when displaying the actual panel, $content->css_id is empty. And rightly so : the css_id field is not actually in the database.

$ select pid, css from panels_pane where css like "%front%" and subtype="custom";
+-----+-----------------------------------------------------------+
| pid | css |
+-----+-----------------------------------------------------------+
| 88 | a:2:{s:6:"css_id";s:0:"";s:9:"css_class";s:8:"frontbox";} |
| 89 | a:2:{s:6:"css_id";s:0:"";s:9:"css_class";s:8:"frontbox";} |
| 90 | a:2:{s:6:"css_id";s:0:"";s:9:"css_class";s:8:"frontbox";} |
| 92 | a:2:{s:6:"css_id";s:0:"";s:9:"css_class";s:8:"frontbox";} |
+-----+-----------------------------------------------------------+

Then I guess there's something missing in panels_save_display(), but I cannot figure out what.

I ended up filling the database myself, then it works.

---Edit

If you want to do the same, do not forget to put the right string length in the serialized field :
update panels_pane set css='a:2:{s:6:"css_id";s:8:"box-asic";s:9:"css_class";s:8:"frontbox";}' where pid = '92';

Lord Pachelbel’s picture

This is still happening in the latest dev release. No matter what display style I pick for my Panels page variant, the IDs and classes I add to content panes do not appear in the rendered page source.

blakefrederick’s picture

I'm also experiencing this same issue with the latest dev release.

nDigitHQ’s picture

Yeah this is still an issue. I was able to work around it, though.

It appears that the first row is the only one that isn't working. I put an empty row at the top of the panel and viola -- the second row was then able to use CSS classes.

Canvas > Column > Empty Row and Row #2 > Region #1 and Region #2 (held within Row #2)

emtaylor561’s picture

Can confirm this. I was having this issue and classes were applied after creating a new row.

urmila26’s picture

ADD class in row issue -
In panel layout When i add class into first row is the only one that isn't working. & if i put an empty row at the top of the panel row then the second row was then able to use CSS classes.
e.g
Canvas > Column > Empty Row and Row #2 > Region #1 and Region #2

coreteamvn’s picture

i had the same issue. when i added a class or id to a panel, it would not pick up. in my case it worked when the .css classes were all lowercases: .frontpagecontainer worked while .frontpageContainer did not work