Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
I like the theme but I am wondering, is there a way to round the buttons and the border? I would think this is done in css with an image maybe? Not sure though as my css is fairly weak. Any ideas on how to achieve this?
Thanks
Comments
Comment #1
MM10 CreditAttribution: MM10 commentedashleymch--
did you resolve this already?
Comment #2
Luca C. CreditAttribution: Luca C. commentedI 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
Comment #3
ghede CreditAttribution: ghede commentedIt 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;
}
Comment #4
aDaisy CreditAttribution: aDaisy commentedCheck this out: http://adaptivethemes.com/rounded-corner-tools-and-techniques
Comment #5
ghede CreditAttribution: ghede commentedI 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
Comment #6
HS CreditAttribution: HS commentedJim,
Thanks for the tip. Where did you change #pagewrapper to #page?
Edit..OK got it :)
Comment #7
HS CreditAttribution: HS commentedJust to add to this. The rounded corners did not seem to work on IE8. Anyone else have this issue?
Comment #8
HS CreditAttribution: HS commented@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!
Comment #9
ghede CreditAttribution: ghede commented@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.
Comment #10
HS CreditAttribution: HS commented@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.
Comment #11
MiraKimura CreditAttribution: MiraKimura commentedExcellent! TQ!
http://www.polipd.edu.my/
Comment #12
dietman CreditAttribution: dietman commentedin ie 6 it does not work
Comment #13
oadaeh CreditAttribution: oadaeh at Flatt and Sons commentedThis 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.