Transparent background for rounded corners

Here's a patch and few updated png files (should apply both to the module). They create seamless rounded corners that apply to any background (see the attached screenshot of panel in Wabi theme).

I used the same look as the original rounded corners in current Panels 6.x-3.x-dev (2009-08-06), but created completely new set of png files for geometry and transparency considerations. I've included corners.png file which is not used by the style. It is for those who need a starting point for the chopped-up border images.

Since this feature improves the panels's internal style, I think it makes no sense to create a new plugin, hence this patch.

Please review for committing to 6.x-3.x-dev.

How bad do the transparent gifs look in IE?

I'm not sure we actually care, mind you.

These attached are PNGs. In IE8 they look OK. I know there was no transparency in older IE (don't remember when they did fix it), but I'm with you - who cares? See attached IE8 window screenshot.

Works great for me, thank you iva2k.

As far as IE6 is concerned, there is a module http://drupal.org/project/pngfix Haven't used it though.

After some discussions with others, there is enough support for IE6 left in the internet that I am leery of putting out something that will totally break existing sites on IE.

Does it really break the sites for IE6? As far as I see, only the transparency does not work in IE6. Which is equivalent to the status quo with white-colored corners.

As far as I could see via browsershots, the transparency is not supported, but corners seem to be inplace. Whereas without this patch or the colored corners patch panels looked "dirty" on all pages with darker backgrounds.

I applied the patch here
The same site on IE6 (disregard the error-popup, the panel is slightly behind it) here (click on the image to see the non-transparent corners)

So my personal result is: Without the patch/manually coloring the corners/adjusting the theme, all visitors see ugly corners. With the patch only IE6 users have ugly corners, page still works.

Besides that I fully agree that sites still have to be compatible with IE6.

It doesn't just not work, it prints some really out-there color.

For IE6 case the PNG may need to be adjusted.

merlinofchaos:

It doesn't just not work, it prints some really out-there color.

That color is what IE6 decides to print instead of transparency. Anybody knows how to make that color white?

I will give it a try, but first need installing IE6.

Another thought - can we use two sets of PNGs depending on browser?

Possibly yes, the CSS should be able to handle selecting a different png for IE6.

I checked PNGs in IE6.0.2900.2180 SP2 - the corners are white. This looks exactly the same as without the patch, so I can confirm that it degrades "nicely".

merlinofchaos:

It doesn't just not work, it prints some really out-there color.

What color do you see? Can you attach a screenshot?

Ok, I applied this and unfortunately you have fundamentally changed the look of the corners with the new graphics. People will complain about that. They need to look exactly the same, otherwise it should be a different style.

@merlinofchaos:

Ok, I applied this and unfortunately you have fundamentally changed the look of the corners with the new graphics. People will complain about that. They need to look exactly the same, otherwise it should be a different style.

Thank you for checking it out. I expected a different outcome though.

In all my tests it looked exactly as it looked before in the following cases:

• if transparent PNGs do not work in the browser and background is not white
• on all-white backgrounds in any browser

I designed the patch to look on the screen exactly the same but with transparent in the corners outside of the roundings, and in my tests I consider that it was achieved (see my screenshot above). I checked it in the two most used themes - Garland and Acquia Marina. I'm just clueless of what is the fundamental piece of look that I missed but you can see. I don't understand "you have fundamentally changed the look of the corners". I want to understand what you mean so I can address that. Do you have a screenshot (or two) to illustrate the change that you see?

Your version of the rounded corners are just a solid white line. The normal version has a bit of shadow to it.

Maybe this can go in as a new style then? It would be nice to have the transparent corners since I'm being bitten by the same issue. I tried to make them transparent and ran into the next issue where the lines for the sides shows through etc so I'm glad to see that someone has taken up fixing this. Thanks!

@merlinofchaos
Actually it is not a solid white line, but grey #DDDDDD in the proposed images. I studied the original, and it has two 1-px lines - the inner one is #EAEAEA, and the outer is #D6D6D6. I agree it is not exactly the same, but in my view that is not exactly "fundamentally different" either. I understand that they could look the same or very different depending on specific LCD monitor. I think now I understand what you mean.

Attached is a new .zip with a pack of png files with exactly the same colors as in the original style. It will work with the above patch (I included patched code files in that zip file as well for people who find patching difficult to do).

Will you accept the patch & PNGs now, or do you want anything different?

@cmorgan
Attached is a .zip with a new style which provides the look from the original submission (1-px gray border). Just uncompress it into modules/panels folder and flush all caches. You will see new 'Rounded corners T1Gray' style (T1Gray stands for transparent 1-pixel gray color). You can change PNGs to your liking or replace it with PNGs from #15.

Am i the only one to get two lines of the background color on both top & bottom of content area? This in Firefox 3.5.3 and IE8.

Also, there was a padding setting that wasn't correct, but i managed to fix that one.

See the screenshot, it's pretty straightforwarding...

#Edit: Oh yeah, the theme is quite buggy, so that may be it.

Cheers

@HLopes
Can you also attach a screenshot of how it looks with the original corners style (without the transparency)? It would help a great deal to narrow down the source of your issue. BTW, you did not say what the theme was.

subscribe

For whatever reason this doesnt seem to work for me. I've run the patch, replaced the png's and I end up with no transparent corners, and added lines outside the corners. see attached image...

thanks for any help......I reallllllllly need transparent corners......

@butteryak
Did you flush all the caches? Is the problem specific to a certain theme?

So weird,
I had flushed the cache earlier, but it didnt make a diff, I just did it again, just for good measure, and it worked. huh......anyway.....thanks for the nudge.......if at first you don't succeed........

yeah! transparent corners!

Transparent corners is an often requested feature and a welcome addition if it can be done without breaking in IE6.

Could and probably should use conditional comments in CSS to load the original image versions instead of transparent PNGs:

The div opening tag is indented too far.

Is Apadding a typo?

Apadding is not a typo. I used that shorthand to quickly remove the line from CSS (makes it into an ignore. much faster than /* */ comments during debugging). Missed it from the patch - the whole line should be removed. Do you want whole patch rerolled for that? I noticed that it takes months to get back and forth on something as simple as that feature.

We could also just supply a setting so that the existing installs are unchanged, but with a checkbox you can switch to the transparent frames.

IMO this is really a symptom of a larger issue, that the rounded corners was really just meant to be a reference style, and that I'd always fantasized that some enterprising person or group would create a module that contained a bunch of styles, possibly adjustable. See the color panes issue for an example of what I mean by adjustable.

Sadly said module has never happened, though there is a site around somewhere that contains a big collection of panels styles for different panes. Not being on drupal.org, though, these styles are hard to find.