What is the best way to create standards-based, cross-browser compatible rounded corners in Drupal?

不羁岁月 提交于 2019-11-30 10:10:51

Define a class like "roundy-corner" and use the jQuery corner plugin like so:

$('.roundy-corner').corner();

You will need the jQuery roundy corner plugin:

http://www.malsup.com/jquery/corner/

I like to use JavaScript here because it doesn't require any additional markup in the source document; the script will insert placeholder elements as needed. Also, in the far, far future when we all have flying cars and IE supports border-radius, you can replace it with pure CSS.

Some Drupal-specific notes to use the suggested rounded corners plugin:

  1. Download jquery.corner.js and put it to your Drupal installation's scripts folder. Make sure to set the file permissions correctly.
  2. Load the script in your (Zen) theme by adding the following line to template.php: drupal_add_js('scripts/jquery.corner.js');
  3. Assign rounded corners to any part of the page by adding styling commands again to template.php. Note that you need to hook them with drupal_add_js method. For instance:
drupal_add_js(
  "$(document).ready(function() {
       $('#primary a').corner('top round 4px');
       $('.block-inner h2.title').corner('top round 4px');
   });",
  'inline'
);

That's it!!! Beautiful rounded corners with no images!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!