CMS Drupal

В одном из проектов дизайнер скруглил все что только можно, начиная с кнопок и полей форм, заканчивая блоками. Для того, чтобы сделать круглые углы у блоков я давно использую скрипт 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;
}

Комментарии

Выберите нужный метод показа комментариев и нажмите "Сохранить установки".

pie.htc (с сайта http://css3pie.com) прекрасно работает (даже в ie6). Никаких модулей устанавливать не надо. Нужен всего лишь один файл pie.htc.

Пример рабочего css:

.rounded-div {
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(/sites/all/themes/mytheme/pie.htc);
position: relative;
}

admin аватар

Я понял свою ошибку.
Вместо

behavior: url(/sites/all/themes/mytheme/pie.htc);

я писал
behavior: url(pie.htc);

по образу и подобию
background: url(images/bg.gif)

С фоновым рисунком значит так можно, а для behavior нет.

Отправить комментарий

Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступны HTML теги: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • Строки и параграфы переносятся автоматически.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <1c7>, <drupal5>, <drupal6>, <javascript>, <php>. Beside the tag style "<foo>" it is also possible to use "[foo]".