it-swarm-es.com

¿Cómo utilizar un archivo de plantilla para crear un tema?

Si bien los nodos, comentarios, bloques y muchas otras cosas en Drupal están temáticos usando archivos de plantilla de tema (como node.tpl.php), los formularios son una historia diferente. No hay archivos de plantilla de tema para formularios ¿Cómo puedo obtener un formulario en particular para usar una plantilla de tema personalizado?

49
Chaulky

Es completamente razonable querer usar un archivo tpl para mostrar un formulario. Puedes usar muchos CSS extraños y #prefix/#suffix propiedades para lograr resultados similares, pero al usar tpl's no tienes que saturar la separación de tus capas de lógica y presentación y no tienes que apuntar a selectores CSS feos como #user-login label. Aquí hay un ejemplo en Drupal 7 ...

mytheme/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;
}

mytheme/template/form/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); ?>

Esto está usando Foundation , que nos da un formulario como este:

enter image description here

73
Charlie Schliesser

Debe implementar hook_form_alter () en un módulo o template.php y establecer la propiedad del formulario # 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');
  }
}

Luego implemente un nuevo tema:

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

Y luego agregue el formulario: plantilla user_login.tpl.php con el siguiente código para representar el formulario:

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

Aunque es posible que pueda usar la solución de kiamlaluno, yo personalmente no lo haría.

¿Cuál es su razón para necesitar un archivo de plantilla para un formulario? Si es porque quieres un marcado ligeramente diferente para un formulario existente? Si es así, puede usar hook_form_alter() para modificar el formulario antes de que se represente. Usando la API de formulario, puede modificar todos los campos de formulario, inyectar elementos html, etc.

Aquí hay un ejemplo de hook_form_alter() que he creado que modifica el estándar drupal bloque de formulario de inicio de sesión:

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

El ejemplo anterior envuelve todo el formulario dentro de un DIV que tiene un estilo en línea para convertir el color de fondo en rojo. También agrega un párrafo de texto de ayuda al comienzo del formulario.

Así es como se ve mi formulario de inicio de sesión de usuario una vez que se carga el código anterior:

Customised login form

Consulte la referencia de la API del formulario para obtener más información: Referencia de la API del formulario

13
Camsoft

En realidad, nunca he necesitado usar un archivo de plantilla para un formulario.
Por lo que puedo ver, Drupal usa funciones de tema, cuando un formulario o parte de un formulario debe representarse de una manera particular; una función de tema que llamadas drupal_render () normalmente es suficiente para cualquier propósito.

Para responder a la pregunta, crear un archivo de plantilla para un formulario no es diferente de crear un archivo de plantilla que no sea para un formulario.

Defina una función de tema, utilizando como función de tema el nombre de la devolución de llamada del generador de formularios. El código debe ser similar al siguiente:

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

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

Si el formulario contiene el valor $form['field_1'], Su valor estará disponible en el archivo de plantilla como $field_1. El archivo de plantilla también podrá usar cualquier valor pasado de template_preprocess_mymodule_form().

12
kiamlaluno

Siempre diseñaría agregando a mi archivo CSS usando selectores para identificar el elemento que se diseñará de la siguiente manera para el formulario de inicio de sesión principal

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

Lo anterior simplemente lo agrego a sites/all/themes/theme-name/css/theme-name.css

Si lo que necesita para diseñar no tiene una ID o un selector suficientemente preciso, entonces es necesario usar el enfoque hook para modificar el HTML y agregar identificadores.

La OMI que usa el estilo en línea en los elementos es un muy mala práctica que debe ser obsoleto y reemplazado por el uso de class y id

1
Richard Harrison

Para crear un tema en un formulario, puede usar un CSS personalizado, como se explica en Themeing Drupal 7 Forms (Incluyendo CSS y JS).

Básicamente, debe realizar estos pasos:

  1. Registre una ruta al formulario usando hook_menu ()
  2. Define el formulario
  3. Registre una función de tema con hook_theme ()
  4. Escribe la función del tema
  5. Crea los archivos CSS y JavaScript
0
shasi kanth