it-swarm-vi.com

Làm thế nào để sử dụng một tệp mẫu để tạo chủ đề cho một biểu mẫu?

Trong khi các nút, nhận xét, khối và nhiều thứ khác trong Drupal được theo chủ đề bằng cách sử dụng các tệp mẫu chủ đề (như node.tpl.php), các biểu mẫu là một câu chuyện khác nhau. Không có tệp mẫu chủ đề cho các biểu mẫu . Làm cách nào tôi có thể nhận được một biểu mẫu cụ thể để sử dụng mẫu chủ đề tùy chỉnh?

49
Chaulky

Hoàn toàn hợp lý khi muốn sử dụng tệp tpl để hiển thị biểu mẫu. Bạn có thể sử dụng nhiều CSS ngoại lai và #prefix/#suffix thuộc tính để đạt được kết quả tương tự, nhưng bằng cách sử dụng tpl, bạn không phải làm lộn xộn việc tách lớp logic và lớp trình bày của mình và không phải nhắm mục tiêu các bộ chọn CSS xấu như #user-login label. Đây là một ví dụ trong Drupal 7 ...

huyền thoại/template.php:

function mytheme_theme($existing, $type, $theme, $path) {
    // Ex 1: the "story" node edit form.
    $items['story_node_form'] = array(
        'render element' => 'form',
        'template' => 'node-edit--story',
        'path' => drupal_get_path('theme', 'mytheme') . '/template/form',
    );

    // Ex 2: a custom form that comes from a custom module's "custom_donate_form()" function.
    $items['custom_donate_form'] = array(
        'render element' => 'form',
        'template' => 'donate',
        'path' => drupal_get_path('theme', 'mytheme') . '/template/form',
    );

    return $items;
}

custom_donate_form ():

function custom_donate_form($form, &$form_state) {
    $form['first_name'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('First name')),
    );
    $form['last_name'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Last name')),
    );
    $form['address'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Address')),
    );
    $form['city'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('City')),
    );
    $form['state'] = array(
        '#type' => 'select',
        '#options' => array(
            'default' => 'State',
            '...' => '...',
        ),
    );
    $form['Zip'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Zip')),
    );
    $form['email'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Email')),
    );
    $form['phone'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Phone')),
    );
    $form['submit'] = array(
        '#type' => 'submit',
        '#value' => 'Submit',
    );

    return $form;
}

huyền thoại/mẫu/biểu mẫu/donate.tpl.php:

<div class="row">
    <div class="small-12 medium-12 large-8 columns">

        <div class="row">
            <div class="small-12 columns">
                <h5>Contact Information</h5>
            </div>
        </div>

        <div class="row">
            <div class="small-12 large-6 medium-6 columns">
                <?php print render($form['first_name']); ?>
            </div>
            <div class="small-12 large-6 medium-6 columns">
                <?php print render($form['last_name']); ?>
            </div>
        </div>

        <div class="row">
            <div class="small-12 medium-6 large-6 columns">
                <?php print render($form['address']); ?>
            </div>

            <div class="small-12 medium-6 large-6 columns">
                <?php print render($form['city']); ?>
            </div>
        </div>

        <div class="row">
            <div class="small-12 medium-3 large-3 columns">
                <?php print render($form['state']); ?>
            </div>

            <div class="small-12 medium-3 large-3 columns">
                <?php print render($form['Zip']); ?>
            </div>

            <div class="medium-6 large-6 columns"></div>
        </div>

        <div class="row">
            <div class="small-12 medium-6 large-6 columns">
                <?php print render($form['email']); ?>
            </div>

            <div class="small-12 medium-6 large-6 columns">
                <?php print render($form['phone']); ?>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="small-12 medium-12 large-8 large-offset-2 columns">
            <?php print render($form['submit']); ?>
        </div>
    </div>
</div>

<!-- Render any remaining elements, such as hidden inputs (token, form_id, etc). -->
<?php print drupal_render_children($form); ?>

Cái này đang sử dụng Foundation , cho chúng ta một dạng như thế này:

enter image description here

73
Charlie Schliesser

Bạn phải triển khai hook_form_alter () trong một mô-đun hoặc template.php và đặt thuộc tính của biểu mẫu # theme:

/**
 * Implements hook_form_alter().
 */
function hook_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'user_login') {
    $form['#theme'] = array('overwrite_user_login');
  }
}

Sau đó thực hiện chủ đề mới:

/**
 * Implements hook_theme().
 */
function hook_theme($existing, $type, $theme, $path){
  return array(
    'overwrite_user_login' => array(
      'render element' => 'form',
      'template' => 'form--user_login',
      'path' => $path . '/templates',
    ),
  );
}

Và sau đó thêm biểu mẫu - user_login.tpl.php với mã theo dõi để hiển thị biểu mẫu:

<?php print drupal_render_children($form) ?> 
17
mrded

Mặc dù cá nhân bạn có thể sử dụng giải pháp của kiamlaluno.

Lý do của bạn để cần một tệp mẫu cho một biểu mẫu là gì? Nếu đó là vì bạn muốn đánh dấu hơi khác nhau cho một hình thức hiện có? Nếu vậy thì bạn có thể sử dụng hook_form_alter() để sửa đổi biểu mẫu trước khi nó được hiển thị. Sử dụng API biểu mẫu, bạn có thể sửa đổi tất cả các trường biểu mẫu tiêm các phần tử html, v.v.

Dưới đây là ví dụ về hook_form_alter() mà tôi đã tạo để sửa đổi tiêu chuẩn drupal khối biểu mẫu đăng nhập:

/**
 * Implements hook_form_alter().
 */
function MYMODULE_form_alter(&$form, &$form_state, $form_id) {

  switch ($form_id) {
    case 'user_login_block':

      // Form modification code goes here.
            $form['divstart'] = array(
                '#value' => '<div style="background-color: red;">',
                '#weight' => -1,
            );

            $form['instruct'] = array(
                '#value' => '<p>Enter your username and password to login</p>',
                '#weight' => 0,
            );          

            $form['divend'] = array(
                '#value' => '</div>',
                '#weight' => 4,             
            );
      break;
  }
}

Ví dụ trên bao bọc toàn bộ biểu mẫu trong DIV có kiểu nội tuyến để chuyển màu nền thành màu đỏ. Nó cũng thêm một đoạn văn bản trợ giúp vào đầu mẫu.

Đây là dạng đăng nhập người dùng của tôi trông giống như bây giờ khi mã ở trên được tải:

Customised login form

Xem tham chiếu API biểu mẫu để biết thêm thông tin: Tham chiếu API biểu mẫ

13
Camsoft

Tôi sẽ luôn tạo kiểu bằng cách thêm vào tệp CSS của mình bằng các bộ chọn để xác định phần tử được tạo kiểu như sau cho biểu mẫu đăng nhập lõi

#user-login
{
   border:1px solid #888;
   padding-left:10px;
   padding-right:10px;
   background-image: url(http://www.zaretto.com/images/zlogo_s.png);
   background-repeat:no-repeat;
   background-position:right;
}

#user-login label
{
    display: inline-block;
}

Ở trên tôi chỉ cần thêm vào sites/all/themes/theme-name/css/theme-name.css

Nếu những gì bạn cần tạo kiểu không có ID hoặc bộ chọn đủ chính xác thì cần phải sử dụng phương pháp hook để sửa đổi HTML cũng thêm định danh.

IMO sử dụng kiểu nội tuyến trên các phần tử là thực tiễn rất tệ cần được loại bỏ và thay thế bằng cách sử dụng classid

1
Richard Harrison

Để tạo chủ đề cho một biểu mẫu, bạn có thể sử dụng một css tùy chỉnh, như được giải thích trong Chủ đề Drupal 7 Biểu mẫu (Bao gồm CSS và JS).

Về cơ bản bạn cần thực hiện các bước sau:

  1. Đăng ký đường dẫn đến biểu mẫu bằng hook_menu ()
  2. Xác định hình thức
  3. Đăng ký một chức năng chủ đề với hook_theme ()
  4. Viết chức năng chủ đề
  5. Tạo các tệp CSS và JavaScript
0
shasi kanth