web-dev-qa-db-ja.com

CSSクラスをモーダルフォームモジュールに追加する方法

私の問題

Modal Forms モジュールを使用して作成されたモーダルフォームのスタイルを設定するのに役立つCSSクラスを追加しようとしています。

現在、ユーザーログインフォームとユーザー登録フォームがありますが、フォーム固有のCSSクラスはありません。

enter image description here

例1

入力ボックスの高さをスタイルするには：

すべてのフォームですべてのフォーム入力を編集する<input>で「form-text」を使用するか、ユーザーがログインに失敗した場合に「edit-name--1」になる「edit-name」を使用する必要があります。 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>

例2

ラベル「ユーザー名とパスワード」を変更するために使用できる唯一のタグはedit-passです

<div class="form-item form-type-password form-item-pass">
    <label for="edit-pass">
    ...
</div>

これにより、フォームの入力に失敗するたびにedit-pass--xが変更され、CSSがリセットされます。

フックフォーム変更を使用してCSSクラスを挿入するにはどうすればよいですか？

私が試したこと

ユーザーログインフォームの配列を印刷しました（print_rを使用して、ログインする必要があるため、ログインするとユーザーログインが機能しないため、dpmを使用できません）。最初のチャンクは次のとおりです。

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

挿入してみた

[#class] => 'TEST';

[name]やその他のわずかなバリエーションがありますが、どれも機能しません。私がこれをひどく説明したなら、もっと多くの例をあげることができます。

EDIT-RajeevKソリューション-十分な粒度

次の行を変更フォームに追加しました。

名前の配列：

$form['name'][#prefix] = '<div class = "usernamelogin">';
$form['name'][#sufix] = '</div>';

配列を渡す：

$form['name'][#prefix] = '<div class = "CAPTAINTEST">';
$form['name'][#sufix] = '</div>';

そして最終結果は次のようになります。

enter image description here

これはページがどのように見えるかです（私はdivが何を含んでいるかを示すためにfirebugを使用しています）。

enter image description here

または、CAPTAINTESTを選択すると、次のようになります。

enter image description here

うまくいけば、これはいくつかのことを助けるでしょうし、提案のためにRajeevKを応援します。フォームの個々の要素を制御することを望んでいましたが、モジュールをハックすることなく、より細かい設定が可能かどうか誰かが知っていますか？

（これが私のフォームの変更です：

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.';
7formsthemingjavascript
2
Dominic Woodman

＃attributes を使用して、要素にいくつかのクラスを追加できます。

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

次のようなものを出力します（入力要素に追加されたクラス）：

<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>
1
Saulius

すべての前処理とすべてを考慮して、ここに何か不足している可能性がありますが、drupalは、CSSのスタイル設定に十分な粒度を提供しないため、選択する要素が非常に多くなるため、クラスを追加せずにこのCSSを検討してください、含まれている要素の階段を下るときにいくつか選択します。

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

これはあなたの特定の質問（クラスの追加）に対する回答ではないことは知っていますが、ここで（個々の要素のスタイリング）が抱えている問題に対するより簡単な解決策だと思います。

0
Marcel

パッチを使用して 「モーダルスタイル」を含むクラスをモーダルウィンドウに追加します。

いくつかのモーダルでは、それぞれに異なるスタイルを設定する必要があります。現在、CTools Modalは、CSSクラスをモーダルコンテナーに追加しません。
これをmodal.jsに追加しました。

0
Dimetry

フォームフィールドに#prefixおよび#sufixを使用して、希望のクラスまたはIDを追加できます。ユーザーのログインフォームを変更する場合は、このようなことを試すことができます-

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

私はこのコードをテストしていませんが、動作するはずです。動作するかどうかを教えてください。

0
RajeevK