I really like the feature where I can set a class name and id on individual pieces of content added to my mini panels or panel pages. However I'd also like to be able to specify a class name at the top level. At present a panel id is automatically generated from the machine name entered and it's also possible to specify certain styles for each panel and region. However the styles only consist of 'list', 'rounded corners', 'system block' or 'no style'. It's not possible for me to specify my own custom style. So I'd like to be able to specify a class name to use at the mini panel / panel page level - which could possibly be done by a new option in the 'Display settings' menu.
I need this feature for where a varying number of mini panels will be added to a page. I want the majority of them to have one consistent style. I can get so far using the class name on the content, but unfortunately not the full way. At present I have to specify the mini panel id in the css file, and as there could be a varying number of these mini panels, this isn't ideal.
Cheers,
Stella
Comments
Comment #1
merlinofchaos commentedOh yeah, this definitely could go in. Panel pages used to have CSS boxes, and this didn't make it into the newest round. Page manager should probably have one for the page, and Mini panels could have one for the mini panel.
Comment #2
merlinofchaos commentedOn second thought, you're even more right. If it's in the display settings everything will get it automatically.
Comment #3
Chris Einkauf commentedSpeaking of this type of functionality, it'd be nice if I could assign a div class to a row. As I understand it, the OP was talking specifically about assigning a class name to the entire panel or mini-panel. What I'm talking about is a row within a panel, which would have multiple regions.
For example, let's say I have a panel for the purpose of customizing the node view. Within that panel, I have the canvas, then the main column, and within that main column I have 3 rows. Each of those rows contains multiple regions, which I've grouped together because they're similar. I'd like to use CSS to put a box around each group of regions (i.e. around each "row").
I'm pretty sure that it's possible right now to create an entry in css for each of my rows because each row has its own unique class name, but this means I'd have to create lots and lots of css entries. It'd be nice to just be able to assign a "mybox" class to each row while I'm creating the panel.
Comment #4
merlinofchaos commentedYou should probably file that as a separate request.
Comment #5
Chris Einkauf commentedThanks for the response Earl.. I've posted the separate issue here: #531316: Provide option to assign CSS class to whole row
Comment #6
Sunshiney commentedHmm... I'm currently adjusting css on the first panels page I've ever created, using the RC version on D6. When I read Stella's post that "At present a panel id is automatically generated from the machine name entered," I searched the source code for my page to find where an id had been put into a div (assume it's a div), as I need that specificity. But, I could find no such panel ID inserted into the html code, so I added my own div id. It would be handy to have a panel ID associated with a div.
I'm new to panels (and Drupal), so I'm wondering what Stella meant?
POSTSCRIPT: Just finished wandering around inside the panel page creation form. I see there is a place for CSS ID under General. Am I assuming correctly that the ID is not automatically generated but instead must be manually inserted into the form and then is created?
Comment #7
merlinofchaos commentedA quick look into this tells me that it's harder than I thought, because the layout system does not provide a method to inject a class for the overall layout. So it'd add yet more divs.
Comment #8
Mike_Waters commentedPanels does provide class names that are unique, at least in a flexible layout (IME).
For instance, in my two-column flex layout the top-level divs that contain each column have the following class names:
No other elements on the page share these class names, so in effect they are IDs. You could use some quick jquery to give these elements IDs, if you like, since they are uniquely adressable.
I would even venture the guess that many/most block elements of a panel page could be uniquely identified using a hierarchy of class names... (I have never had a problem, personally, though the class name hunt-and-peck is less than fun).
Obviously it would be fantastic if we were able to set these ourselves, so I'll subscribe and hope that this workaround helps somebody....
Comment #9
stella commentedYes the class names with the ids is what I'm using at the moment, but every time I edit the panel and change the layout slightly, these ids change and I have to update my css file. Also when you have multiple panel pages, this quickly becomes a nightmare, trying to (a) search through the html to find the correct id for each page and (b) in terms of maintenance whenever an id changes.
Comment #10
Mike_Waters commentedI feel your pain, I am in the same boat.
I use firebug's plugin firefinder (css/xpath searcher) to locate 'panel-flexible-column-' for columns, for rows and regions ... you get the idea.
I've found that generally, the panels-created divs don't have much layout information, with the exception of padding here-and-there. As long as you give an id to the content items inside of the regions, the style you apply to those content divs will be more or less adhered to. When you find exceptions to this, deal with them.
Like:
This really helped line up my columns properly with other blocks that were outside of the panels, and hasn't caused any of it's own problems.
Comment #11
merlinofchaos commentedOk, I checked in a fix to allow the Flexible layout to apply classes to regions. This doesn't do anything if you're using a non-flexible layout, but I think that's ok.
Also, I just realized there's an error in the original post:
This is absolutely untrue. Styles are plugins and you can easily create styles to do whatever you need.
Comment #12
stella commentedAwesome! thank you!