УрокКнопка разной ширины с закруглёнными уголками

Одна из сложностей, с которой я столкнулся едва начав работать с друпалом - это как сделать все кнопки с закруглёнными уголками, да ещё чтобы ширина у каждой кнопки менялась в зависимости от длины слова(фразы) на ней. Стандартный хтмл друпала не позволяет это сделать, т.к. для моей задачи необходимо обернуть кнопку ещё хотя бы в 1 дополнительный класс. С помощью некоторого кода я всё-таки смог это сделать:

function phptemplate_button($element) {
  if (isset($element['#attributes']['class'])) {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
  }
  else {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'];
  }
 
  if (stristr($element['#attributes']['style'], 'display: none;') || 
      stristr($element['#attributes']['class'], 'fivestar-submit')  || 
      is_array($element['#upload_validators'])) {
    return '<input type="submit" '. (empty($element['#name'])  ? '' : 'name="'. $element['#name'] .'" ')   .'id="'. $element['#id'].'" value="'. check_plain($element['#value'])  .'" '. drupal_attributes($element['#attributes'])  ." />\n";
  }
  else {
    return '<span class="button"><input  type="submit" '. (empty($element['#name']) ?  '' : 'name="'. $element['#name'] .'" ')   .'id="'. $element['#id'].'" value="'.  check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." /></span>\n";
  }
}

Этот код просто засовываем в наш template.php, чистим кэш друпала и наслаждаемся.

Здесь на кнопку навешивается <span class = "button">, который можно в дальнейшем обработать в своём файле стилей. К тому же здесь есть проверка, если кнопка не видна, или эта кнопка - "звезда" в модуле fivestar, то никаких изменений кнопка не получит.

Осталось поколдовать над стилями:

span.button {
    background:url("images/button.png") no-repeat scroll right -36px transparent;
    border:medium none;
    cursor:pointer;
    display:inline-block;
    height:36px;
    margin-right:10px;
    padding:0 4px 0 0;
}
 
span.button input {
    background:url("images/button.png") no-repeat scroll left top transparent !important;
    border:medium none !important;
    color:#FFFFFF !important;
    cursor:pointer;
    display:block !important;
    font-size:14px !important;
    height:36px !important;
    line-height:36px !important;
    margin:0 !important;
    padding:0 10px 0 16px !important;
    white-space:nowrap !important;
}

Именно таким образом сделаны кнопки на моём сайте. Картинка button.png состоит из двух частей :

button_0.png

Верхняя часть - это кнопка слева почти до самого конца, именно почти - потому что правые несколько пикселей занимает нижняя часть моей картинки, это указано у span.button смещением фона на 36 пикселей вниз.

Как из http://www.имяСайта сделать переадресацию на http://имяСайта или наоборот
Разворачивающийся тизер при клике на заголовок ноды
Навигация

Похожие материалы

Комментарии

Аватар пользователя D.Choomc
D.Choomc написал:

Спасибо сенсей))
И этот код переопределяет вывод ВСЕХ кнопок?

11.09.2010 00:05
Аватар пользователя SplasH
SplasH написал:

незачто) да, всех))

11.09.2010 00:18
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

А что делать если фон у кнопок прозрачный?

18.01.2011 21:17
Аватар пользователя SplasH
SplasH написал:

так на примере у кнопок прозрачный фон :)

18.01.2011 22:20
Аватар пользователя Александр
Александр написал:

Хм... А если IE 6...? Тогда всё это теряет смысл...

20.08.2011 11:03
Аватар пользователя Александр
Александр написал:

Упс... Ссори... Всё получается как надо и в IE 6... Просто увидел что такие кнопочки на вашем сайте открыл его в IE 6 и увидел весьма неприятную картинку...

20.08.2011 11:43
Аватар пользователя SplasH
SplasH написал:

Александр, а почему вы не посмотрели мой сайт в IE4 ?) Там наверное тоже не всё так хорошо ;) IE6 официально умер. Смысла что-то делать под него нет.

21.08.2011 16:35
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Здравствуйте,

Решил сделать Вашим способом себе меню, только у меня кнопки должны менять цвет при наведении на них. Проблема в том, что при наведении курсора на правый уголок кнопки - он цвет меняет, а левая часть нет.

Подскажите, может есть способ решить и эту проблему?

Заранее благодарен!

29.08.2011 22:50

Комментировать

                                                                      
         88   88        88    ad888888b,   88888888ba     ad88888ba   
         88   88        88   d8"     "88   88      "8b   d8"     "8b  
         88   88        88           a8P   88      ,8P   Y8a     a8P  
         88   88aaaaaaaa88        aad8"    88aaaaaa8P'    "Y8aaa8P"   
         88   88""""""""88        ""Y8,    88""""""8b,    ,d8"""8b,   
         88   88        88           "8b   88      `8b   d8"     "8b  
 88,   ,d88   88        88   Y8,     a88   88      a8P   Y8a     a8P  
  "Y8888P"    88        88    "Y888888P'   88888888P"     "Y88888P"
Enter the code depicted in ASCII art style.