I have created a subtheme from the Zurb Foundation base theme for Drupal 7.

I am trying to:

  • Add "data-equalizer" and "data-equalizer-watch" to the html output of the core Search Form Block.
  • Change the Search button text to a glyph-icon
  • Add/Remove some classes from the Search Button
  • Change the column sizes

Unfortunately, it currently appears to look like this with a simple markup: enter image description here

The current HTML output looks like this:

<div class="row collapse">
<div class="small-8 columns">
    <div class="form-item form-type-textfield form-item-search-block-form">
        <label class="element-invisible" for="edit-search-block-form--2">Search </label>
        <input title="Enter the terms you wish to search for." type="text" id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text">
<div class="small-4 columns"><button class="secondary button radius postfix expand form-submit" id="edit-submit--3" name="op" value="Search" type="submit">Search</button>

When building my own test form with HTML and CSS (for design purposes), I was able to achieve the desired look for my search in the topbar in a dropdown that appeared like this:

enter image description here

The code I used for that is here:

<div class="row collapse" data-equalizer>
<div class="small-10 columns">
    <input type="text" name="search_block_form" placeholder="Search..." id="nav-input" class="postfix" data-equalizer-watch>
<div class="small-2 columns">
    <button name="op" id="nav-button" class="postfix"><i class="step fi-magnifying-glass size-72" data-equalizer-watch></i></button >

The current html output of the Drupal Search Block Form also adds the classes "secondary" and "radius" and I want to remove those.

I know what I want the html output to look like but am unsure as to how to make the output exactly what I want it to be.

I have looked online at several different theme hooks but none seem to do the trick and have limited to me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.