it-swarm-eu.dev

Jak použít soubor šablony k motivu formuláře?

Zatímco uzly, komentáře, bloky a mnoho dalších věcí v Drupal) jsou tematicky vytvářeny pomocí souborů tematických šablon (jako je node.tpl.php), formuláře jsou odlišným příběhem. Jak mohu získat konkrétní formulář pro použití vlastní šablony motivu?

50
Chaulky

Je zcela rozumné chtít použít tpl soubor k zobrazení formuláře. Můžete použít spoustu cizích CSS a #prefix/#suffix vlastnosti k dosažení podobných výsledků, ale pomocí tpl nemusíte zaplňovat oddělení vašich logických a prezentačních vrstev a nemusíte zacílit na ošklivé selektory CSS jako #user-login label. Zde je příklad v Drupal 7 ...

mýtus/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;
}

mýtus/šablona/forma/darovat.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); ?>

Používá se Foundation , což nám dává podobnou formu:

enter image description here

73

Musíte implementovat hook_form_alter () do modulu nebo template.php a nastavit vlastnost # theme ve formuláři:

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

Poté implementujte nové téma:

/**
 * 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',
    ),
  );
}

A pak přidejte formulář - user_login.tpl.php šablona s následným kódem pro vykreslení formuláře:

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

I když možná budete moci použít řešení kiamlaluna, osobně bych to neudělal.

Jaký je váš důvod pro potřebu souboru šablony pro formulář? Pokud je to proto, že chcete pro existující formulář trochu odlišné označení? Pokud ano, můžete použít hook_form_alter() k úpravě formuláře před jeho vykreslením. Pomocí Form API můžete upravit všechna pole formuláře vstříknout html prvky atd.

Zde je příklad hook_form_alter(), který jsem vytvořil a který modifikuje standardní drupal blok přihlašovacího formuláře:

/**
 * 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ýše uvedený příklad obtéká celý formulář v DIV, který má inline styl pro změnu barvy pozadí na červenou. Na začátek formuláře také přidá odstavec nápovědy.

Takto vypadá můj přihlašovací formulář, jakmile se načte výše uvedený kód:

Customised login form

Další informace naleznete v odkazu Form API Reference: Form API Reference

14
Camsoft

Vlastně jsem nikdy nepotřeboval použít soubor šablony pro formulář.
Pokud vidím, Drupal základní kód používá tematické funkce, když je třeba určitým způsobem vykreslit formulář nebo část formuláře; motivová funkce, která volání drupal_render () je obvykle dostačující pro jakékoli účely.

Chcete-li odpovědět na otázku, vytvoření souboru šablony pro formulář se neliší od vytvoření souboru šablony, který není pro formulář.

Definujte funkci motivu pomocí funkce zpětného volání tvůrce formuláře jako funkce funkce. Kód by měl být podobný následujícímu:

/**
 * Implementation of hook_theme().
 */

 function mymodule_theme() {
   return array(
     'mymodule_form' => array(
       'template' => 'mymodule-form',
       'file' => 'mymodule.admin.inc',
       'arguments' => array('form' => NULL),
     ),
   );
 }

Pokud formulář obsahuje hodnotu $form['field_1'], Bude jeho hodnota k dispozici v souboru šablony jako $field_1. Soubor šablony bude také moci použít jakékoli hodnoty předané z template_preprocess_mymodule_form().

13
kiamlaluno

Vždy bych styl přidal do svého souboru CSS pomocí selektorů k identifikaci prvku, který má být stylizován, pro základní přihlašovací formulář

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

Výše uvedené jednoduše přidám do sites/all/themes/theme-name/css/theme-name.css

Pokud to, co potřebujete pro styl, nemáte ID nebo dostatečně přesný selektor, je nutné použít přístup hook k úpravě HTML a přidat identifikátory.

IMO používající inline styl na elementech je velmi špatný postup, který by měl být zastaralý a nahrazen pomocí class a id

1

K motivu formuláře můžete použít vlastní css, jak je vysvětleno v motivace Drupal 7 formulářů (včetně CSS a JS).

V zásadě musíte provést tyto kroky:

  1. Zaregistrujte cestu k formuláři pomocí hook_menu ()
  2. Definujte formulář
  3. Zaregistrujte funkci tématu pomocí hook_theme ()
  4. Napište funkci motivu
  5. Vytvořte soubory CSS a JavaScript
0
shasi kanth