It seems that the big problem for me with Panels and adding CSS is that the selectors that are used to style elements are a little too broad. Let me explain: I use Panel Panes exclusively. I also may use Minipanels within Panel Panes themselves. But whatever content I want to display, I use Panels to do it.
So what I wind up with are CSS selectors (.block, html, etc) that are broader than I need them to be. I change the CSS for a border in a Panel Pane for a View and it also adds a border to an Image that I display in the Header via a Panel Pane. No good. So this is what I do to work around this. I have a SS too but it is a mess. I’ll try to explain it.
Look at the image… there are numbers in red that correspond to this explanation:
1 – create a Custom Style for your Panel Pane with the Panels editor. Don’t put much in it. You can use this to do all you styling but what I am trying to do it pin these elements down in CSS so that I have total control. Or more control anyway. Assign this Custom Style to any individual Panel Pane that you want to have these stylings. **
2 and 3- The Style has been assigned to a Panel Panes individually. Looking at the Firebug stuff (yes, I’m just using Chrome at the moment) you can see that each of these Panel Panes Elements now derives their styles from the .pane-plain-box.bs1 selector. So when I make a change to the one selector, only the two Panes that have been assigned that style are affected.
Now, I have to copy that css file to my subtheme and add it to the .info file. As long as I don’t change the style in the Drupal Stylizer or change it on the Panel Pane, the CTools generated name should stay the same and I should not have to worry about the file being overwritten and my changes lost. I think…. I’ll know after a bit but I think that this will work.
There may be a better way to do this. If there is please tell me and I will eat crow all day long. This isn’t the best way to do this I am sure….
I
landie.tech 