I'm printing search_form directly in my theme, and disabling search block. While trying to customize search_form, I've ran into a road block that is driving me nuts, and I'm hoping someone can point me in the right direction.
The problem I'm having is with the wrapper div around the textfield and textfield label. Here's what I have done so far:
In template.php I've set the form variable in preprocess_page to print in page.tpl, and modified search_form with hook_form_id_alter as follows:
/**
* Preprocess vars for page.tpl.php
*/
function MY_THEME_preprocess_page(&$vars) {
// RENDER SEARCH FROM INSIDE PAGE TEMPLATE:
$MY_THEME_search_init = drupal_get_form('search_form');
$MY_THEME_search = drupal_render($MY_THEME_search_init);
$vars['MY_THEME_search'] = $MY_THEME_search;
// ....
}
/**
* Implements hook_form_id_alter().
*/
function MY_THEME_form_search_form_alter(&$form, &$form_state, $form_id) {
// Get theme settings for search text
$search_btn_txt = t('GO');
if (theme_get_setting('search_button_text')) {
$search_btn_txt = theme_get_setting('search_button_text');
}
$search_placeholder_txt = t('Search');
if (theme_get_setting('search_placeholder_text')) {
$search_placeholder_txt = theme_get_setting('search_placeholder_text');
}
// Change form to load into grid.
if (!empty($form['basic'])) {
$form['basic']['#attributes']['class'] = array(
'row',
);
};
// Style submit button and change submit button text.
if (!empty($form['basic']) && !empty($form['basic']['submit'])) {
$form['basic']['submit'] = array(
'#prefix' => '<div class="medium-4 columns search-submit-button">',
'#suffix' => '</div>',
'#type' => 'submit',
'#value' => $search_btn_txt,
'#attributes' => array(
'class' => array(
'secondary',
'small button',
'radius',
)
)
);
$form['basic']['keys']['#attributes']['placeholder'] = $search_placeholder_txt;
$form['basic']['keys']['#title_display'] = 'invisible';
}
// dpm($form);
}
Which yeilds the following HTML output:
<form class="search-form" action="/search/node" method="post" id="search-form" accept-charset="UTF-8">
<div>
<div class="row form-wrapper" id="edit-basic"><div class="form-item form-type-textfield form-item-keys">
<label class="element-invisible" for="edit-keys">Enter your keywords </label>
<input placeholder="Search" type="text" id="edit-keys" name="keys" value="" size="40" maxlength="255" class="form-text" />
</div>
<div class="medium-4 columns search-submit-button">
<input class="secondary small button radius form-submit" type="submit" id="edit-submit" name="op" value="GO" />
</div>
</div>
<input type="hidden" name="form_build_id" value="form-_0V7BWFHStxpoNNjNI_NE7L9emlRG4vxHYhiCe0_HUM" />
<input type="hidden" name="form_token" value="GjYd8266DDN0dv5E-XDEeZVYXoZECuNgDBx_FD5S2m8" />
<input type="hidden" name="form_id" value="search_form" />
</div>
</form>
I'm trying to change all of the classes on <div class="form-item form-type-textfield form-item-keys">
; but, it doesn't show up at all in the array output by devel krumo.
After some research, I discovered that theme_form_element appears to be adding the div wrapper. So, I added it to template.php and started to play around with it. The problem is that theme_form_element is general in nature, and it looks like all Drupal forms run through it.
I can't figure out how to target this div wrapper in the specific form, search_form. Can anyone help please?
Thanks so much!
Comments
What is your actual goal?
What is your actual goal? Why do you think you need to modify the css?
I'm putting the elements of
I'm putting the elements of the form into a grid framework in my theme. As you can see by the code above, every element has been taken care of except this one elusive div.
--------------------
Todd
UPDATE
Update:
I was able to "technically" get the search_form laid out into the grid by adding to MY_THEME_form_search_form_alter the following:
Which produced:
Just injecting another wrapper to finalize the grid classes. But, it's just not clean at all because the original wrapper
<div class="form-item form-type-textfield form-item-keys">
is still there.What I'd really like to do is just alter that original wrapper that theme_form_element places around the textfield and label; but, like I said, to me theme_form_element seems to be generic, without the possibility of targeting a specific form element within a specific form ID.
...any help is surely appreciated.
--------------------
Todd
I'm still trying to figure
I'm still trying to figure out how to get rid of this wrapper:
<div class="form-item form-type-textfield form-item-keys">
On a specific form id.
...any help is surely appreciated.
--------------------
Todd
Better late than never...
I am just adding this here in case anyone comes across this post looking for a solution.
What you are looking to do is override theme_form_element by implementing, YOURTHEME_form_element.
If you add a custom property to the form elements you wish to modify, for example with a textfield,
then inside your YOURTHEME_form_element, look for that property by adding,
instead of seeing only,
you will now have 'class-to-add-to-wrapper' add to the div wrapping the textfield,
Hello.
Hello.
How to delete this wrapper
div
(class="form-type-textfield form-item-key form"
)? Thisdiv
break my Semantic UI action input element.Please help me!