How to add css classes to modal forms module

Question

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.';

Answer 1

You can use #attributes to add some classes to the elements:

$form['name']['#attributes'] = array('class' => array('your-class'));

Will output something like this (class added to input element):

<div class="form-item form-type-textfield form-item-name">
  <label for="edit-name">Username <span title="This field is required." class="form-required">*</span></label>
  <input type="text" maxlength="60" size="60" value="" name="name" id="edit-name" class="your-class form-text required">
  ...
</div>

Answer 2

You can use #prefix and #sufix for a form field to add class or ID of your wish. You can try something like this if you are altering user login form --

function MYMODULE_form_alter(&$form, &$form_state, $form_id){//replace MYMODULE with your module name
  if($form['#id'] == 'user-login'){
    $form['name'][#prefix] = '<div class = "my-class-login">';
    $form['name'][#sufix] = '</div>';
  }
}

Though I haven't tested this code but it should work. Inform me whether its working or not.

Answer 3

Maybe I am missing something here, considering all the preprocessing and all, but rarely drupal gives you not enough granularity for styling css as it creates so many elements to choose from. Consider this CSS without adding classes, pick some when going down the stairs of containing elements:

.popups-container #modal-content #user-login .form-item-name label {
  CSS
}
.popups-container #modal-content #user-login .form-item-name .form-text {
  CSS
}

I know this is not an answer to your specific question (adding classes), but I think it is a simpler solution for the problem you have here (styling individual elements).

Answer 4

You can use patch to add class containing the "modal style" to modal window.

With several modals, we have the need for different styling of each. Currently, the CTools Modal does not add any CSS classes to the modal container.
We have added this to modal.js and it works for us.