I have been unsuccessfully trying to create my client's design of a highly stylized box in Drupal 6 using Panels 3.

Thank You so very Much!! I have sent in an official request. I am so grateful for all and any help.

Willa

Make a Box Request through here, and let me know in detailed the kind of box you would like to have, the color codes included.

I will make the Boxes and post them to the library, so you can download them, and use it as a Panels style. Instant satisfaction.

Thank you so very much for answering. That is really kind, considering the time of year. And, your analysis is excellent. I have no idea where the eight images live, I have only found the obvious ones (styles/corners/). Are they generated on the fly by c-tools, using the existing pngs? I tried to create the transparent pngs using GIMP. It looked great in GIMP, but did not actually work on the site (using Firefox). And, a discussion on Drupal.org has the whole package for transparency, which I tried, but those results were a little quirky as well. (http://drupal.org/node/546752)

My goal has been to simply color the areas using css. Using Firebug, I am able to do this by selecting, e.g.:

.rounded-corner .r-edge {

background: transparent url(.... plugins/styles/bcm-m-1/shadow-r.png) repeat-y scroll right 0;

}

and changing to -> background: #F7EB16 url(.... plugins/styles/bcm-m-1/shadow-r.png) repeat-y scroll right 0;

It works there. Unfortunately, when I apply this strategy to my css it ignores the call, even when I added your earlier suggestion to another, !important! .  Am I trying to do something that is not possible using css? Or, am I just doing it incorrectly?

My client's design for the entire site relies on various colors of rounded corners. So if I find the solution for one, I can move forward. Would my issue be moot if I switched from flexible to a different layout style?  Thank you, again, so very much!

Willa

Hi Willa,

Short answer: there are 2 solutions to accomplish your task:

1. Create a rounded rectangle in Photoshop, slice out the required parts, and override the current Panels style's images.
2. Same as solution one, except you don't override the current Panels style's images. Instead, you create another style and use apply it to future Panels.

Both solutions above require altering some css codes.

Long answer:

A closer examination of how the current Panels style you used shows that the structure of the box is divided into 8 parts which require the use of images. There are namely:

• top left
• top middle
• top right
• middle left
• middle right
• bottom left
• bottom middle
• bottom right

The very central of the entire box (i.e. middle middle, from the naming convention just described) does not require the use of image since you can specify the color alone by css (i.e. background: #RRGGBB). The rest requires images because of the rounding and shadow effects.

If you happen to use Firefox, and have the Firebug plugin, you can examine the top left part, and see that it is using the corner-bits.png. I assume you have figured this out because the PNG file is no longer the default one, but one which has the background which is cyan and that sort of matches your background color.

I suggest not to put the cyan background color for your PNG file at all. Afterall, that's what the PNG file is for - to have transparency. In Photoshop, you can turn the visibility of the background off so that the background now have the gray and white mosiacs to indicate the transparency. See here to have a better picture.

Since your title has a background color of yellow, your top left, top middle, and top right images should have yellow colors as well. Similarly, your bottom left, bottom middle, and bottom right images should have gray to match the content body.

As for CSS codes, you realise that the padding is pretty big at the moment - there is a big padding between the box's edges to your content. Currently:

.rounded-corner .wrap-corner .r-edge {padding: 5px 24px}

I suggest changing to

.rounded-corner .wrap-corner .r-edge {padding: 5px 2px}

to see an instant improvement. From there, you can further optimize to suit your needs.

Sorry, forgot to mention, I'm using the flexible layout with rounded corners.