2

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.

enter image description here

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:

enter image description here

This is what the page looks like (I'm using firebug to show what the div contains).

enter image description here

Or if I select CAPTAINTEST it looks like:

enter image description here

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.';
1
  • You can give permission to anonymous user to see developer message to access devel output.
    – RajeevK
    Aug 10, 2013 at 16:45

4 Answers 4

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>
0

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.

3
  • It sort of works. It gives a little more control but the granularity I was hoping for, the form doesn't build as I would expect it to and the divs surround large chunks of the form rather than individual elements. I posted an edit in the main question to show what happened. Aug 11, 2013 at 16:51
  • @DominicWoodman You have passed both DIV for name field I think.. You need styling also as I see name field surrounded by the DIV class given by me and it ends after that, so now you have control over name field. Same you can do for pass, submit etc
    – RajeevK
    Aug 11, 2013 at 16:55
  • Unfortunately the div ends up surrounding most of the form (I guess some quirk of how it is built) so if I pad usernamelogin, it ends up padding the whole box that's highlighted blue in the first image. I was hoping to just style itself. (thank you for the quick response!) Aug 11, 2013 at 17:02
0

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).

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.