web-dev-qa-db-fra.com

Ajouter un attribut de style pour afficher les champs

Je voudrais ajouter un attribut de style à chaque champ de titre à mon avis. J'ai créé un champ pour une couleur. J'ai essayé de réécrire le résultat comme ceci:

<h2 style="color: [field_color];">[title_1]</h2>

Mais l'attribut style sera supprimé. J'utilise Drupal 7.

Toute aide appréciée.

viewstheming
12
Ksn

Vous pouvez définir une classe dans le champ de titre à l'aide des paramètres de style, comme illustré ci-dessous. Vous pouvez utiliser des remplacements de jetons dans les paramètres de style pour définir la classe dans le champ de titre.

enter image description here

En utilisant un petit javascript ou jquery, lisez le champ de classe de titre et définissez la même couleur que le nom de classe en utilisant la propriété CSS .

4
Anil Sagar

Vous pouvez créer un tpl pour ce champ (exemple: views-view-field-MY-VIEW-NAME-page.tpl.php), dans ce tpl vous pouvez ajouter le jeton en écrivant ceci:

<h2 style="color: <?php print $field->last_tokens['[field_color]'] ?>;"><?php print $field->last_tokens['[title_1]'] ?></h2>
1
David Motilla

J'ai également dû inclure la valeur d'un champ comme couleur en ligne pour un champ particulier. Après avoir parcouru le Web pour une solution facilement personnalisable, j'ai fini par faire ceci:

  1. Ajoutez la valeur de la couleur en tant que jeton de classe CSS, tout comme l'image dans le post précédent.

  2. Réécrivez la fonction hook_preprocess_views_view_field () comme ceci:

     function hook_preprocess_views_view_fields(&$vars) {
  $view = $vars['view'];

  // Loop through the fields for this view.
  $previous_inline = FALSE;
  $vars['fields'] = array(); // ensure it's at least an empty array.
  foreach ($view->field as $id => $field) {

    // render this even if set to exclude so it can be used elsewhere.
    $field_output = $view->style_plugin->get_field($view->row_index, $id);
    $empty = $field->is_value_empty($field_output, $field->options['empty_zero']);
    if (empty($field->options['exclude']) && (!$empty || (empty($field->options['hide_empty']) && empty($vars['options']['hide_empty'])))) {
      $object = new stdClass();
      $object->handler = & $view->field[$id];
      $object->inline = !empty($vars['options']['inline'][$id]);

      $object->element_type = $object->handler->element_type(TRUE, !$vars['options']['default_field_elements'], $object->inline);
      if ($object->element_type) {
        $class = '';
        if ($object->handler->options['element_default_classes']) {
          $class = 'field-content';
        }

        if ($classes = $object->handler->element_classes($view->row_index)) {
          if ($class) {
            $class .= ' ';
          }
          $class .= $classes;
        }

        $class_array = explode(' ', $class);
        foreach ($class_array as $cid => $candidate) {
          // Find the color hex code.
          if (preg_match('/([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?\b/', $candidate)) {
            $style = 'color:#' . $candidate . ';';
            unset($class_array[$cid]);
          }
        }

        $pre = '<' . $object->element_type;
        if ($class) {
          $pre .= ' class="' . implode(' ', $class_array) . '"';
        }
        if ($style) {
          $pre .= ' style="' . $style . '"';
        }
        $field_output = $pre . '>' . $field_output . '</' . $object->element_type . '>';
      }

      // Protect ourself somewhat for backward compatibility. This will prevent
      // old templates from producing invalid HTML when no element type is selected.
      if (empty($object->element_type)) {
        $object->element_type = 'span';
      }

      $object->content = $field_output;
      if (isset($view->field[$id]->field_alias) && isset($vars['row']->{$view->field[$id]->field_alias})) {
        $object->raw = $vars['row']->{$view->field[$id]->field_alias};
      }
      else {
        $object->raw = NULL; // make sure it exists to reduce NOTICE
      }

      if (!empty($vars['options']['separator']) && $previous_inline && $object->inline && $object->content) {
        $object->separator = filter_xss_admin($vars['options']['separator']);
      }

      $object->class = drupal_clean_css_identifier($id);

      $previous_inline = $object->inline;
      $object->inline_html = $object->handler->element_wrapper_type(TRUE, TRUE);
      if ($object->inline_html === '' && $vars['options']['default_field_elements']) {
        $object->inline_html = $object->inline ? 'span' : 'div';
      }

      // Set up the wrapper HTML.
      $object->wrapper_prefix = '';
      $object->wrapper_suffix = '';

      if ($object->inline_html) {
        $class = '';
        if ($object->handler->options['element_default_classes']) {
          $class = "views-field views-field-" . $object->class;
        }

        if ($classes = $object->handler->element_wrapper_classes($view->row_index)) {
          if ($class) {
            $class .= ' ';
          }
          $class .= $classes;
        }

        $object->wrapper_prefix = '<' . $object->inline_html;
        if ($class) {
          $object->wrapper_prefix .= ' class="' . $class . '"';
        }
        $object->wrapper_prefix .= '>';
        $object->wrapper_suffix = '</' . $object->inline_html . '>';
      }

      // Set up the label for the value and the HTML to make it easier
      // on the template.
      $object->label = check_plain($view->field[$id]->label());
      $object->label_html = '';
      if ($object->label) {
        $object->label_html .= $object->label;
        if ($object->handler->options['element_label_colon']) {
          $object->label_html .= ': ';
        }

        $object->element_label_type = $object->handler->element_label_type(TRUE, !$vars['options']['default_field_elements']);
        if ($object->element_label_type) {
          $class = '';
          if ($object->handler->options['element_default_classes']) {
            $class = 'views-label views-label-' . $object->class;
          }

          $element_label_class = $object->handler->element_label_classes($view->row_index);
          if ($element_label_class) {
            if ($class) {
              $class .= ' ';
            }

            $class .= $element_label_class;
          }

          $pre = '<' . $object->element_label_type;
          if ($class) {
            $pre .= ' class="' . $class . '"';
          }
          $pre .= '>';

          $object->label_html = $pre . $object->label_html . '</' . $object->element_label_type . '>';
        }
      }

      $vars['fields'][$id] = $object;
    }
  }

}

Comme vous pouvez le voir, j'ai ajouté ces lignes:

$style = '';
$class_array = explode(' ', $class);
foreach ($class_array as $cid => $candidate) {
  // Find the color hex code.
  if (preg_match('/([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?\b/', $candidate)) {
    $style = 'color:#' . $candidate . ';';
    unset($class_array[$cid]);
  }
}

Et changez la ligne sous:

$pre = '<' . $object->element_type;
if ($class) {
  $pre .= ' class="' . implode(' ', $class_array) . '"';
}
if ($style) {
  $pre .= ' style="' . $style . '"';
}
1
Pol Dellaiera

La solution la plus simple que j'ai pu trouver était d'insérer la valeur comme attribut de données. Ensuite, dans mon JavaScript, je prends la valeur du champ de données et met à jour le CSS pour refléter le changement.

0
Hawkee

J'ai eu ce même problème et je l'ai résolu en créant un modèle nommé

views-view-field--field_name_here.tpl.php

Dans mon cas, le code que j'ai utilisé pour créer le code HTML dont j'avais besoin était:

<?php

$bg_color = $variables["row"]->field_field_button_background_color[0]["raw"]["rgb"];
$link_title = $variables["row"]->field_field_slideshow_item_cta_link[0]["raw"]["title"];
$link_url = $variables["row"]->field_field_slideshow_item_cta_link[0]["raw"]["url"];

echo '<a style="background-color:'.$bg_color.'" href="'.$link_url.'">'.$link_title.'</a>';

Activation du module Devel et utilisation

dpm($row);

dans le fichier modèle était TRÈS utile. Je n'aurais pas pu comprendre ça sans ça.

0
evanmcd

Je fais juste quelque chose de similaire et voici ce que j'ai fait:

1- Créez une vue avec des champs de couleur et de titre.

2- Créez un "views-view-fields.tpl" personnalisé pour cette vue. (Un modèle personnalisé uniquement pour le champ de couleur, m'a montré une erreur)

3- À field->content ligne ajouter/remplacer ce dont vous avez besoin ....<h2 style="color: #<?php print $field->content; ?>">

////A partir de maintenant, je ne l'ai pas testé, mais ça devrait fonctionner correctement////

4- Exclure le champ de titre et l'afficher sur l'en-tête/groupe

5- Créez un "views-view-unformatted.tpl" personnalisé pour cette vue.

6- Dans cette vue, nous ajoutons <?php print $title; ?></h2> après <?php print $row; ?>. (nous ajoutons le titre et fermons la balise H ouverte dans le premier modèle)

DERNIÈRE ÉDITION:

Vous pouvez simplement utiliser les vues PHP pour imprimer tout ce dont vous avez besoin et le style ne sera pas filtré.

0
Federico Arena

ajoutez un nom dans le champ anil suggéré puis ouvrez style.css dans votre dossier de thème et tapez ".my-css-name" suivi des résultats css souhaités tels que:

.my-css-name {couleur: rouge; fond: vert; }

0
aaronStarK