Last updated January 24, 2011. Created by LEternity on January 17, 2011.
Log in to edit this page.
This is a short and painless intro into generating lovely rounded corners for your divs in Drupal 7.
- Download the latest version of jquery-corner from http://jquery.malsup.com/corner/.
- Save it under YOURTHEME/js/jquery.corner.js
- Create an empty file YOURTHEME_corner.js in the same directory
- In your already existing YOURTHEME.info, add scripts[] = js/jquery.corner.js and scripts[] = js/YOURTHEME_corner.js
- Flush your cache!!!!!
- and follow the instructions below
In the YOURTHEME_corner.js, add the following:
(function ($) {
Drupal.behaviors.YOUTHEME = {
attach: function(context, settings) {
// list every element that you would like to adorn with corners below
$("#block-user-login h2").corner("tl tr 4px"); // this is just an example, customize as you'd like, tl = top left
}
}
})(jQuery);Done! For questions, contact me at www.ZUROSS.com.
Comments
Error in js?
I had to modify YOURTHEME_corner.js to get this to work properly:
;(function($) {Drupal.behaviors.a3 = {
attach: function(context, settings) {
$("#header").corner("tl tr bl br 8px"); // this is just an example, customize as you'd like, tl = top left
}
}
})(jQuery);
(note extra brackets)
You are absolutely right.
You are absolutely right. Forgot two brackets. Tutorial above now includes these corrections.
Did not work :(
hi,
I followed the instruction exactly, but nothing happened!!
Perry.
Make sure that no other
Make sure that no other script interferes with the rounded corner script.
Nice!
Works like a charm with Danland 7.x-1.0 theme. Thanks!
Round corner in danland
Hi,
I did exactly what it's written and i can't get round corner in danland.
I just want to have round corner on my sidebar-left and sidebar-right.
Could you give me what you wrote in danland_corner.js that you put in the scripts folder?
Did you do something else to make it work with danland?
Please answer me...
Thanks a lot
Awesome.
This worked great for me on the Zen theme. Thanks!!
Lol. These rounded corner
Thanks kindly - worked like a charm.
Hi. I'm Ethan.
Try on CSS3 for size
Eeesh... why not just use CSS3. Although not all users have CSS3-ready browsers, each major vendor is pretty much caught up on this. Using CSS to accomplish this is better for accessibility, and page speed, and takes a massive amount of confusion out of extra markup, classnames, or images needed to pull off a "nice-to-have" themeing feature.
.some-region-name {
/* Chrome and Safari */
-webkit-border-radius: 5px;
/* Firefox */
-moz-border-radius: 5px;
/* Opera */
-o-border-radius: 5px;
/* W3C standard--when adopted across the board */
border-radius: 5px;
/**
* You can optionally specify the shape of all, opposite, or each corner
* with the following:
* border-radius: 5px 10px; /* All corners will be 5px round tall and stretched 10px long*/
* border-radius: 5px 10px / 3px 5px; /* Top left and bottom right will be 5x10. Top right and bottom left will be 3x5. */
* border-radius: top-left / top-right / bottom-right / bottom-left; /* Where each corner gets its own dimensions */
**/
}
rounded corners
Thank you very much for that targeted lightweight CSS3 solution. it rocked.
Internet Explorer
The main problem with CSS3 rounded corners is that it's not supported in Internet Explorer 8 or older. Most of our clients are still running IE7.
Oliver
http://oliverdavies.co.uk
Yes, js script works well,
Yes, js script works well, thanks to you.
How to have it automaticaly, with all blocks of a region (Zen theme)?
With your js script, we have to update the script each times a new block is done. I don't want User calls me each times he creates a new block. Is there a solution?
uncornering tip
This was a really useful tutorial. I'd like to add to it!
In my use case I wanted all blocks in either of the 2 sidebars to have rounded corners except blocks that have the square class (which I can add on the fly using skinr, but that's another story).
Rather than specify each block individually, I can corner the blocks generally then uncorner more specifically, something like this:
(function ($) {
Drupal.behaviors.YOURTHEME = {
attach: function(context, settings) {
// add a 10px round corner to all 4 corners of div.corner in either of the sidebars
$("#sidebar-first-inner div.corner").corner("");
$("#sidebar-second-inner div.corner").corner("");
// remove the corner from any div.corner inside an element with square class
$(".square div.corner").uncorner();
}
}
})(jQuery);
uncornering
I just noticed that this answers the question from @sahuni above.
Just be less specific with your selectors and you can corner as many elements as you wish.
I get it to work
Its worked in IE8, but i see a white background at the bottom of the corner effect. Can i made transparent this white background?
Just wondering why you would
Just wondering why you would use jquery instead of cc3. Personally i use css3 techniques and then add modernizer so that i have all the css3 tricks in my toolbox... for ie6 .. well i dont really care.
Any idea on how to make it
Any idea on how to make it work on an Omega subtheme?
Thanks.
Edit:
Found the solution. Just follow the intructions but place the code on the Omega root theme. Not in the subtheme.
Possible to make this (jquery
Possible to make this (jquery corner) work in Drupal 6?
Would this be correct for D6?
(function($) {Drupal.behaviors.YOUTHEME = function(context, settings) {
$("#header .section")
.corner("tl tr bl br 9px"); // this is just an example, customize as you'd like, tl = top left
}
}(jQuery));