(I've seen some related issues in panels queue, but since I'm going to post a functional patch, creating a new feature request)

Panels 6.x-3.x-dev (2009-08-06) have rounded corners style that looks well only on white background. Would be nice to have transparent images and appropriate CSS to look nice on any color background.

CommentFileSizeAuthor
#35 Schermata 2011-03-09 a 15.23.28.png645.06 KBkastorino
#20 Screenshot.jpg8.92 KBbutteryak
#17 screenshot.JPG10.71 KBhlopes
#16 panels-rounded_corners_T1Gray_20090919.zip5.55 KBiva2k
#15 panels-rounded_corners_transparent20090919.zip5.64 KBiva2k
#3 round-corners-IE8.jpg108.43 KBiva2k
#1 panels-rounded_corners_transparent20090811.patch3.32 KBiva2k
#1 panels-rounded_corners_transparent20090811.zip2.8 KBiva2k
#1 panels-rounded_corners_transparent20090811_screenshot.jpg36.29 KBiva2k

Comments

iva2k’s picture

iva2k commented
Status: Active » Needs review
StatusFileSize
new panels-rounded_corners_transparent20090811_screenshot.jpg36.29 KB
new panels-rounded_corners_transparent20090811.zip2.8 KB
new panels-rounded_corners_transparent20090811.patch3.32 KB

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.

merlinofchaos’s picture

merlinofchaos commented

How bad do the transparent gifs look in IE?

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

iva2k’s picture

iva2k commented
StatusFileSize
new round-corners-IE8.jpg108.43 KB

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.

digi24’s picture

digi24 commented

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.

merlinofchaos’s picture

merlinofchaos commented

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.

digi24’s picture

digi24 commented

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.

merlinofchaos’s picture

merlinofchaos commented

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

iva2k’s picture

iva2k commented

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?

merlinofchaos’s picture

merlinofchaos commented

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

iva2k’s picture

iva2k commented

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?

merlinofchaos’s picture

merlinofchaos commented
Status: Needs review » Needs work

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.

iva2k’s picture

iva2k commented
Status: Needs work » Active

@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?

merlinofchaos’s picture

merlinofchaos commented

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

cmorgan’s picture

cmorgan commented

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!

iva2k’s picture

iva2k commented
Status: Active » Needs review
StatusFileSize
new panels-rounded_corners_transparent20090919.zip5.64 KB

@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?

iva2k’s picture

iva2k commented
StatusFileSize
new panels-rounded_corners_T1Gray_20090919.zip5.55 KB

@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.

hlopes’s picture

hlopes commented
StatusFileSize
new screenshot.JPG10.71 KB

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

iva2k’s picture

iva2k commented

@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.

perhenrik’s picture

perhenrik commented

subscribe

butteryak’s picture

butteryak commented
StatusFileSize
new Screenshot.jpg8.92 KB

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......

digi24’s picture

digi24 commented

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

butteryak’s picture

butteryak commented

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!

nedjo’s picture

nedjo
he/him/his
Primary language English
commented
Status: Needs review » Needs work

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:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

+++ panels/plugins/styles/corners/panels-rounded-corners-box.tpl.php	2009-08-11 20:08:17.000000000 -0700
@@ -10,12 +10,14 @@
+	    <div class="wrap-content">
+          <?php print $content; ?>
+        </div>

The div opening tag is indented too far.

+++ panels/plugins/styles/corners/rounded_corners.inc	2009-08-11 20:28:06.000000000 -0700
@@ -189,7 +207,7 @@ $idstr .wrap-corner .b-edge .r {
-  padding: 5px 24px;
+  Apadding: 5px 24px;

Is Apadding a typo?

iva2k’s picture

iva2k commented

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.

merlinofchaos’s picture

merlinofchaos commented

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.

hlopes’s picture

hlopes commented

iva2k: The theme i was using is voodoo. Bad theme, bad, bad theme. :D

http://templates.entheosweb.com/template_number/21771.asp

Normal images would have white corners.

I have fixed the issue (bad css) and revamped the theme to tableless. Working fine now, thanks.

alfie78’s picture

alfie78 commented

I have tried all what iva2k said to do but the corner becomes worse. a little straight line comes over the rounded corners. what should I do?
if I do something wrong?

I have changed the tpl.php file and also the .inc file and override all .png images.
I use my defined theme and a firefox 3.5

any helps will be appreciated.

iva2k’s picture

iva2k commented

@alfie78 Try flushing all caches...

hlopes’s picture

hlopes commented

@alfie78:

The description you gave looks a lot like the problem i've had. See my screenshot above on reply #17.
I'm guessing it's an CSS issue, maybe some overlapping of properties.

Try setting all the paddings and margins inside the panel to 0, something like this:

#user-profile *{
margin:0 !important;
padding:0 !important;
}

just to rule out issues with css.

Also, Firefox + Firebug can be of great help tracking css issues.

If not that, be aware that a gradient on the background could give some issues as well - not sure though.

hlopes’s picture

hlopes commented

Same problem on another site.

Lines over and under the panels.

Just used the files from reply #16, caches cleared, some minor CSS adjustments, et voilá.

alfie78’s picture

alfie78 commented

thank you!

I have done what you said, and the problem is solved.

sdboyer’s picture

sdboyer commented

I'd like to be able to pick between what's here and #635632: Source files for rounded corner pngs?...reasons for one approach versus the other, please?

squiggy’s picture

squiggy commented

subscribing

PMatwyuk’s picture

PMatwyuk commented

subscribing

kastorino’s picture

kastorino commented
Version: 6.x-3.x-dev » 7.x-3.0-alpha2
Assigned: Unassigned » kastorino
Status: Needs work » Active
StatusFileSize
new Schermata 2011-03-09 a 15.23.28.png645.06 KB

Is there any solution for D7 version? I don't have a plain background, and if i put a transparent background in the shadow images that's the result...

Gerben Zaagsma’s picture

Gerben Zaagsma commented

subscribing

ronline’s picture

ronline commented

subscribing

Melissamcewen’s picture

Melissamcewen commented

subscribe

clashar’s picture

clashar commented
Version: 7.x-3.0-alpha2 » 7.x-3.x-dev
japerry’s picture

japerry
Location KOMK
commented
Issue summary: View changes
Status: Active » Closed (outdated)

Drupal 7 is no longer supported, closing.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.