Как применить к стилям CSS кнопку отправки формы поиска в Drupal? - PullRequest
Новая
       17

Как применить к стилям CSS кнопку отправки формы поиска в Drupal?

0 голосов
/ 18 марта 2011

Я абсолютно сыт по горло этим. Я пытался в течение недели пробовать другой код, изменять разные значения и т. Д. Я просто не могу обработать кнопку поиска Drupal (6).

Я хочу иметь возможность менять кнопки отправки для таких событий, как hover, active и тому подобное. Одна из самых больших проблем заключается в том, что я не могу понять, как изменить код php, поэтому эти стили CSS применяются только к кнопке отправки запроса, а не ко всем остальным кнопкам на сайте.

Вот код, который у меня сейчас полуработающий. Прямо сейчас еще одна проблема, с которой я сталкиваюсь, заключается в том, что тег span продолжает показывать размер только 45x16px, я применил свойства width и height как 54x28, но это ничего не меняет. 

function phptemplate_button($element) {
  // Make sure not to overwrite classes.
  if (isset($element['#attributes']['class'])) {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
  }
  else {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'];
  }

  // We here wrap the output with a couple span tags
  return '<span class="button"><span><input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ')  .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." /></span></span>\n";
}

span.button  {
    background-image: url('images/go-button.png');
    background-repeat: no-repeat;
    border: none;
    width: 53px;
    height: 28px;
}
span.button:hover {
    background-image: url('images/go-button-gifsmooth.gif');
    background-repeat: no-repeat;
    border: 0;
}
span.button:active {
    background-image: url('images/go-button-pressed.png');
    background-repeat: no-repeat;
    border: 0;
}
span.button span input {
    background: transparent;
    border: 0;
    color: transparent;
    padding: 0;
    cursor: pointer;
}

1 Ответ

0 голосов
/ 18 марта 2011

Если вы хотите задать тему поиска для главной страницы поиска сайтов (www.example.com/search), вы можете использовать это в template.php : 

function phptemplate_button($element) {
  // Check that the buttons belongs to the site search page
  if ($element['#value'] == 'Search' && $element['#id'] == 'edit-submit') {
    // Make sure not to overwrite classes.
    if (isset($element['#attributes']['class'])) {
      $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
    }
    else {
      $element['#attributes']['class'] = 'form-'. $element['#button_type'];
    }

    // We here wrap the output with a couple span tags
    return '<span class="button"><span><input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ')  .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." /></span></span><div style='clear:both;'></div>\n";
  }
  else {
    return '<input type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ')  .'id="'. $element['#id'].'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." />\n";
  }
}

Чтобы изменить кнопку для «поиска темы» в заголовке или «поисковом блоке», вам нужно будет создать файл tpl с именем search-theme-form.tpl.php или search-block-form.tpl.php и поместите его в каталог вашей темы. Затем введите код, подобный следующему: 

// This is for the theme search... for search block, $search['search_block_form']
<?php print $search['search_theme_form']; ?>
<span class="button"><span><input type='submit' name='submit-form' value='TEST' class='this-submit'/></span></span>
<?php print $search['hidden']; ?>

Чтобы сделать отображение диапазона правильного размера, я получил его, добавив display: block; к стилю span.button. Она может немного перемещать кнопку, но с помощью большего количества CSS вы можете получить ее где угодно.

...