25.04.2011

В одном из проектов дизайнер скруглил все что только можно, начиная с кнопок и полей форм, заканчивая блоками. Для того, чтобы сделать круглые углы у блоков я давно использую скрипт jquery.corner.js. Но с помощью этого скрипта можно лишь закруглить блок с фоном. А вот когда закруглению нужно подвергнуть лишь border блока, то этот метод уже не работает.

Ну, раз уж упомянул о jquery.corner.js, то вот небольшой пример, как можно ей воспользоваться. В файл из ваше темы page.tpl.php вставляем:

 
<script type="text/javascript" src="<?php echo base_path().path_to_theme()."/js/jquery.corner.js"; ?>"></script>
 
<script type="text/javascript">
  $(document).ready(function(){
  $(".rounded-div").corner("20px");
});
</script>

Все DIV-ы с классом .rounded-div будут иметь закругленные углы с радиусом 20px. Но, как я уже сказал, этот способ не поможет вам в случае, когда скруглить нужно border блока. И вот тут у меня возникла неожиданная сложность. Я думал, что найду какую-нибудь другую библиотечку и так же с помощью ява-скрипта загну углы бордюра. Но не тут то было.

Первая статья, которая мне попалась на глаза: http://dimox.net/cross-browser-border-radius-rounded-corners/ . Вроде все черным по-белому написано что надо делать. Но у меня почему-то не срабатывало на IE. Не знаю почему, может из-за какого-то другого ява-скрипта из Друпала, может еще из-за чего, но в общем не смог я заставить работать этот способ.

Я решил, что сама библиотека border-radius.htc не совершенна, поэтому решил попробовать другую http://css3pie.com. Даже модуль для Друпала есть, который подключает эту библиотеку. Стал пробовать скруглять углы с ее помощью. Не работает хоть ты тресни.

Вернулся к варианту с картинками.
http://drupaleasy.com/blogs/ultimike/2009/04/adding-rounded-block-border...
Правда в приведенной ссылке рассказывается, как это делается для блока, а мне нужно было для превью материала, поэтому если кто-то тоже захочет сделать превью с закругленной обводкой, то в файле из вашей темы node.tpl.php допишем сверху и снизу:

<?php if ($page == 0): ?>
  <div class="rounded_border">
  <div class="wrap-corner">
    <div class="t-edge"><div class="l"></div><div class="r"></div></div>
    <div class="l-edge">
      <div class="r-edge">
<?php endif; ?>
 
....
 
<?php if ($page == 0): ?>
        </div>
      </div>
      <div class="b-edge"><div class="l"></div><div class="r"></div></div>
    </div>
  </div>
<?php endif; ?>

Еще одно небольшое замечание. Скорее всего, вам понадобится приподнять заголовок в таком скругленном блоке. Для этого нужно в css файле добавить что-то типа:

.rounded_border h2 {
  margin-top: -10px;
}