By terryallan on

I have a Drupal 6 site which uses the Views module to selectively obtain content to display in panes on my front page, courtesy of the Panels module. I have now decided to fill the background of the panes with a colour which is just a little different from the background of the front page but it looks as though this is not an easy process.

Can anyone advise on the best way forward?

I am aware of the Colour Panes Feature and the Page Style module but the first is just a patch which according to the author requires some work and the demonstration of the second shows me that it doesn't do what I want.

The Panels Header Frame module offered a different but perhaps acceptable solution by creating a custom header bar but it looks as though it would require considerable CSS work for implementation of what I need.

Have I missed a simple alternative approach?

Thanks

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

You can add an id to the panel page (under general settings) then in your themes style.css add something like

#your-panel-id .panel-pane  {
 background-color: #EEE;
}

If needed you can add a css id and/or class to each panel for more specific rules.

terryallan’s picture

terryallan commented

Thanks for this pointer. I was trying similar things but without success. I will have another go. Hopefully with your comment I may be more confident that what I was doing was along the right lines.

terryallan’s picture

terryallan commented

For information to Drupal enthusiasts having the same problem I added the following code to the style.css file of my theme (Newsflash from Roopletheme). This worked well with Safari but not with IE and Firefox.

#pane1 { color: #fcf7f7'; links: #0d0c0d; background-color: #F9EEF4; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #ccc;
padding: 10px;
}

#pane2 { color: #fcf7f7'; links: #0d0c0d; background-color: #F9EEF4; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #ccc;
padding: 10px;
}

#pane3 { color: #fcf7f7'; links: #0d0c0d; background-color: #F9EEF4; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #ccc;
padding: 10px;
}

#panetop { color: #fcf7f7'; links: #0d0c0d; background-color: #F9EEF4; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #ccc;
padding: 10px;
}

#panebottom { color: #fcf7f7'; links: #0d0c0d; background-color: #F9EEF4; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #ccc;
padding: 10px;
}

This gave me all that I wanted in terms of curved corners and background colour fill for my panes (pane1, pane2, pane3, panetop - I have nothing in panebottom). See the linked screen shot. Unfortunately I was using Safari 4.0.4 on a G5 Mac with MacOS 10.5.8 and not checking other browsers and not checking what could happen on a PC. Here is what I discovered:

As described above it works perfectly in Safari 4.0.4
Firefox 3.0.16 on the Mac lost the background colours to all the panes
IE 7.0.5730.13 running under Windows XP on an Intel MacBook Pro lost colour on two of the four panes . "Programme News" and "News from Participants" had no colour
IE 6.0.29000.2180 on a PC laptop running under Windows XP did exactly the same
IE 8.0.6001.18702 running under Windows XP on a PC laptop lost all background colours in all panes.

I expected not to have the rounded corners in IE of course and I did not

Incidently the right hand sidebar in Newsflash was displaced to a variety of places including under the left sidebar and under the main content area in different versions of IE (6.0 and 7.0) and on different computers. It worked consistently well in Safari and in Firefox. IE 8.0 placed it where it should be - on the right hand side of the screen - I am thankful of that!

Can anyone offer any fixes for my background colour issue in the panes? I will be happy at this stage just to get the background colour in the panes for IE 6, 7 and 8 and in Firefox working.