My Problem
I'm trying add CSS classes to help me style the modal forms created using the Modal Forms module.
I have a User Login and a User Register form at the moment, but they have no form specific CSS classes.
Example 1
To style the height of the input boxes:
I either have to use "form-text" in <input>
which will edit all form inputs across all forms or "edit-name" which will become "edit-name--1" if the user fails to login and the break the css.
<div class="form-item form-type-textfield form-item-name">
<input id="edit-name" class="form-text required"
type="text" maxlength="60" size="25" value="" name="name">
</div>
Example 2
To alter the labels "username & password" the only tag I can work with is edit-pass
<div class="form-item form-type-password form-item-pass">
<label for="edit-pass">
...
</div>
Which will change edit-pass--x
every time they fail to complete the form correctly, resetting the css.
How would I insert CSS classes using hook form alter?
What I've tried
I printed out the array for the user login form (using print_r, can't use dpm because have to be logged in and user login won't work if you're logged in), here's the first chunk of it.
Array ( [name] => Array ( [#type] => textfield
[#title] => Username
[#size] => 25
[#maxlength] => 60
[#required] => 1
[#description] => Enter your drupaltest2 username. )
[pass] => Array ( [#type] => password
[#title] => Password
[#description] => Enter the password that accompanies your username.
[#required] => 1 [#size] => 25 )
[#validate] => Array ( [0] => user_login_name_validate
[1] => user_login_authenticate_validate
[2] => user_login_final_validate )
[actions] => Array ( [#type] => actions
[submit] => Array ( [#type] => submit
[#value] => Log in ) )
I tried inserting
[#class] => 'TEST';
into [name]
and other slight variations but none of them work. I can give more examples if I've explained this badly.
EDIT -- RajeevK Solution -- Not enough granularity
I added the following lines into my alter form:
Name array:
$form['name'][#prefix] = '<div class = "usernamelogin">';
$form['name'][#sufix] = '</div>';
Pass array:
$form['name'][#prefix] = '<div class = "CAPTAINTEST">';
$form['name'][#sufix] = '</div>';
And the end results looks like this:
This is what the page looks like (I'm using firebug to show what the div contains).
Or if I select CAPTAINTEST it looks like:
Hopefully this will help some though and cheers to RajeevK for the suggestion. I was hoping to control individual elements of the forms, does anyone know whether it would be possible to get more granularity without having to hack the module?
(Here's my form alter:
function mytheme_form_user_login_alter(&$form, &$form_state, $form_id) {
//override to change text in user sign in box
drupal_set_title('');
$form['name']['#title'] = 'Username/Email';
$form['name']['#description'] = '';
$form['name']['#prefix'] = '<div class = "usernamelogin">';
$form['name']['#sufix'] = '</div>';
$form['pass']['#description'] = '';
$form['pass']['#prefix'] = '<div class = "CAPTAINTEST">';
$form['pass']['#sufix'] = '</div>';
$form['actions']['submit']['#value'] = 'Sign In.';