轉換一個CSS樣式的搜索框在Drupal主題中使用？

Question

我正在使用Drupal 6，致力於將靜態HTML和CSS文件轉換爲Drupal主題。到目前爲止，大部分進展順利。我如何主題搜索表單，但對於Drupal 6主題？

我對此感到困惑的是，我是否將template.php文件與 search-theme-form.tpl.php文件一起使用？我可以在search-theme-form.tpl.php文件中導入我的style.css工作表嗎？或者我可以直接粘貼到我的CSS中？

我已將搜索框上傳到此處，以便您瞭解其行爲和外觀。 http://nside-elite.techiedesign.net/testsearchform/testsearchform.html

這是我原來的CSS：

#searchwrap { 
    width: 330px; 
    height: 51px; 
    margin-right: auto; 
    position: relative; 
    margin-left: auto; 
    top: 150px; 
} 
#searchboxwrapper { 
    height: 28px; 
    float: left; 
    width: 277px; 
} 
#searchbuttonwrapper { 
    width: 53px; 
    height: 28px; 
    float: right; 
} 
.preload { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 1px; 
    height: 1px; 
    visibility: hidden; 
    overflow: hidden; 
} 
.searchbox { 
    background-position: top; 
    background-color: #515151; 
    background-image: url('Images/searchbox-shadow.png'); 
    border: 2px #333333 solid; 
    outline: none; 
    background-repeat: repeat-x; 
    height: 20px; 
    margin-right: 3px; 
    float: right; 
    margin-top: 1px; 
    width: 250px; 
    text-indent: 5px; 
    font-size: 10pt; 
    color: #1D1D1D; 
    font-style: italic; 
    font-family: Arial; 
} 
.searchbutton { 
    background: url('Images/go-button.png'); 
    background-repeat: no-repeat; 
    cursor: pointer; 
    width: 53px; 
    height: 28px; 
    border: 0px; 
} 
.searchbutton:hover { 
    background: url('Images/go-button-gifsmooth.gif'); 
    background-repeat: no-repeat; 
    border: 0px; 
} 
.searchbutton:active { 
    background: url('Images/go-button-pressed.png'); 
    background-repeat:no-repeat; 
    border: 0px; 
} 
.searchbox:focus { 
    border: 2px; 
    border-color: #6B6B6B; 
    border-style: solid; 
} 

和HTML：

<div id="searchboxwrapper"> 
    <input name="Text1" type="text" class="searchbox" value="Search Nside Elite" onfocus="if(this.value == 'Search Nside Elite'){this.value = '';this.style.fontStyle='normal';this.style.color='#BFBFBF';}" onblur="if(this.value == '') {this.value='Search Nside Elite';this.style.fontStyle='italic';this.style.color='#222222'}" /> 
</div> 
<div id="searchbuttonwrapper"> 
    <input name="searchbutton" type="button" value="" title="Search" class="searchbutton" /> 
</div> 

沒有人在Drupal的論壇會給我一天的時間。我會很感激你可以提供的任何幫助。我不熟悉PHP。

謝謝！

Answer 1

你一定會使用template.php，即準備在.tpl.php文件中打印變量的位置。在這種情況下，您想要將一個預處理函數添加到search_theme_form掛鉤中。到新的預處理功能附加到主題鉤子寫像這樣的template.php功能：

function MYTHEME_preprocess_search_theme_form(&$variables) { 
    //do stuff 
} 

您將要清除高速緩存中的任何變化出現之前。這是您可以添加要在模板上打印的內容的位置。

function MYTHEME_preprocess_search_theme_form(&$variables) { 
    $variables['whatever'] = 'hi there'; 
} 

在模板後面，你可以通過寫print $ whatever來調用它;並會打印該值。通常情況下，我不會更改search_theme_form.tpl.php，所以我不打擾在我的主題中重新聲明它，並使用drupal的默認值。

這裏是我爲search_theme_form添加自己的預處理函數以刪除表單元素上的愚蠢標籤以及讓文本字段的默認值在焦點上消失的示例。

function MYTHEME_preprocess_search_theme_form(&$variables) { 
    unset($variables['form']['search_theme_form']['#title']); 
    unset($variables['form']['search_theme_form']['#printed']); 
    $variables['form']['search_theme_form']['#value'] = 'Search'; 
    $variables['form']['search_theme_form']['#attributes'] = array('onfocus' => "if (this.value == 'Search') {this.value = '';}"); 
    $variables['search']['search_theme_form'] = drupal_render($variables['form']['search_theme_form']); 
    $variables['search_form'] = implode($variables['search']); 
} 

我希望這可以回答你的一些問題，並指出你在正確的方向。