Rounding the corners?

ashleymch--
did you resolve this already?

I am trying to figure that out as well, unfortunately with no success:
I have tried installing the module Rounded_corners (Jquery pugins) but doesn't seem to work properly.
I know the author find a way as if you look at http://www.signalkuppe.com/

I hope someone can help us!

Thanks

It looks like he does it using the new border-radius properties - http://www.the-art-of-web.com/css/border-radius/

If you view his page source, I took this from fx.css?G. When I get time I'll play and see if I can implement this in my own site.

body #pagewrapper{
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

body #utilities #plinks ul li a{
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
}

Check this out: http://adaptivethemes.com/rounded-corner-tools-and-techniques

I added this to the top of /marinelli/layout.css and it worked just fine. I now have rounded corners :) I only had to change #pagewrapper to #page.

body #page{
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

body #utilities #plinks ul li a{
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
}

Adding this will give you rounded corners on the blocks. Still undecided if I like it or not.

.defaultblock{
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

Jim

Jim,

Thanks for the tip. Where did you change #pagewrapper to #page?

Edit..OK got it :)

Just to add to this. The rounded corners did not seem to work on IE8. Anyone else have this issue?

@Jim: Thanks for the tip mate, but for somereason my layout.css does not have 'body #utilities #plinks ul li a{'

Instead I have '#utilities #plinks ul li {'

I added the change in css there But the change did not show up on the primary menu links? Any idea what's going on?

Thanks!

@HS: I'm certainly no expert on this, but these changes are (as far as I'm aware) not supported by IE. They are advanced CSS3 properties. I don't believe that CSS3 has been formally adopted yet and using these will probably cause validation errors.

That said, this is, in comparison to the many workarounds out there for rounded corners, very easily accomplished.

Regarding your issue with the primary links not rounding = I simply added the whole lot to the top of 'layout.css' and changed #pagewrapper to #page. I believe you need to add the 'body #utilities #plinks ul li a'. A default install of the theme does not include that code.

I have slightly modified the original CSS in my previous post changing the code for the .defaultblock to only include the upper corners. Try adding this complete code to the top of 'layout.css' and see what happens. Don't forget to clear your caches.

body #page{
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

body #utilities #plinks ul li a{
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
}

.defaultblock{
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
}

@ghede

Thanks mate! I just added the following to layout.css and it sorted the primary links. I appreciate your help.

body #utilities #plinks ul li a{
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
}

You're right IE8 is not compatible with the the latest CSS version. But degrades gracefully enough, meaning it appears without rounded corners. Just like the original theme.

Excellent! TQ!

http://www.polipd.edu.my/

in ie 6 it does not work

This issue is being closed because it is against a branch for a version of Drupal that is no longer supported.
If you feel that this issue is still valid, feel free to re-open and update it (and any possible patch) to work with the 7.x-4.x branch.
Thank you.