CSS par type

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Bonjour j'aurai aimé savoir si on pouvait un peu comme CSS injector créer des règles pour attribuer un css pour un type de node ?

exemple : le services.css je voudrais qu'il ne soit utilisé que pour les node de type services

Merci d'avance

cordialement

Forum : 

Hello,

Tu peux surtout créer un template par type de contenu (dans le dossier de ton thème, tu dupliques le fichier node.tpl.php en node-nomdetontypedecontenu.tpl.php) dans lequel tu y précises une classe css spécifique. Reste plus qu'à renseigner les attributs dans ton css général.

Bonjour Wabby,
Merci pour votre post.
Je souhaitais savoir ce que vous entendez pas préciser une classe css spécifique? S'agit-il des div et class que l'on peut voir dans les fichiers template ".tpl.php" par défaut?
Aussi, est-il possible de créer un fichier css spécialement pour le node-nomdetontypedecontenu.tpl.php ?
Merci pour vos conseils

comme wabby le dis il est sans doute plus simple de faire une template de suggestion (node-mon_type.tpl.php) de modifier les id et les class et ensuite de faire ton css dans le style.css.

je ne vois pas l'utilité de faire X fichier css. Mais si vraiment tu veux faire des fichier css pour les activer utilise la commande drupal_add_css(chemin_du_css);

oui, d'autant plus qu'il faudrait vraiment qu'il y ait un intérêt particulier à avoir X type de contenu avec X fichiers CSS. Niveau ergonomie, c'est pas vraiment le top pour l'utilisateur.

quand on arrive à ce genre de fonctionnement, c'est peut-être qu'il faut repenser le site autrement :-)

bonjour,

pourquoi ne pas simplement t'appuyer sur les class générées dans la balise body (dans ton cas : node-type-services et section-services)
c'est ce que je fais pour ma part et jutilise le theme "basic". ensuite je sais pas si le theme que tu utilise propose cette fonction.

bon courage

Alex

Bonjour
Merci à tous pour m’avoir répondu, et aussi rapidement.
Concernant le post d'Alex, en fait, je n'ai pas de "node-type-services" et "section-services" dans style.css.

J’ai fais quelques tests mais cela n’a pas pour le moment fonctionné, je dois certainement être à une virgule prés de la solution.
En fait dans le body de mon theme (nigraphic) j’ai cela (qui correspond à une bande blanche):

.mainColBottom{
width:676px;
height: 16px;
background: url(images/bg_maincol_bottom.gif) center bottom; }

Mon but est de changer l’image de ce background UNIQUEMENT dans la page appelée «Page3 » (aussi node/3). J’ai procédé comme cela :

1) J’ai dupliqué le fichier « node.tpl.php » et l’ai renommé en « node-node-3.tpl.php »

2) J’ai déclaré une nouvelle classe dans ce nouveau fichier « node-node-3.tpl.php », savoir :

< div class = "mainColBottomPage3"></div> 

3) Puis j’ai indiqué dans le fichier « style.css » :

.mainColBottomPage3{
width:676px;
height: 16px;
background: url(images/bg_maincol_bottomPage3.gif) center bottom; }

Mais cela ne fonctionne pas.
Ma nouvelle image est prise en compte en l’integrant dans la classe d’origine .mainColBottom mais pas dans la nouvelle classe .mainColBottomPage3.

Cela fait un moment que je suis dessus mais je n’ai toujours pas eu de déclic pour comprendre le fonctionnement de Drupal dans ce domaine. Le reste, ça va a peu près, mais là je bloque!

Peut-être pourriez-vous encore me donner votre avis.
Vous remerciant encore pour votre aide

Voici la fonction dans template.php du thème basic, ce qui gère les classes dans le body des pages :
(ne pas oublier de remplacer "nom-de-mon-theme" par le nom de ton thème). Après je suis pas dev j'essaie juste de faire avancer les choses et d'aider au max.

function nom-de-mon-theme_preprocess_page(&$vars, $hook) {

  // Don't display empty help from node_help().
  if ($vars['help'] == "<div class="help"><p></p>\n</div>") {
    $vars['help'] = '';
  }

  // Classes for body element. Allows advanced theming based on context
  // (home page, node of certain type, etc.)
  $body_classes = array($vars['body_classes']);
  if (user_access('administer blocks')) {
   $body_classes[] = 'admin';
}
  if (theme_get_setting('nom-de-mon-theme_wireframe')) {
    $body_classes[] = 'with-wireframes'; // Optionally add the wireframes style.
  }
  if (!empty($vars['primary_links']) or !empty($vars['secondary_links'])) {
    $body_classes[] = 'with-navigation';
  }
  if (!empty($vars['secondary_links'])) {
    $body_classes[] = 'with-secondary';
  }
  if (module_exists('taxonomy') && $vars['node']->nid) {
    foreach (taxonomy_node_get_terms($vars['node']) as $term) {
    $body_classes[] = 'tax-' . eregi_replace('[^a-z0-9]', '-', $term->name);
    }
  }
  if (!$vars['is_front']) {
    // Add unique classes for each page and website section
    $path = drupal_get_path_alias($_GET['q']);
    list($section, ) = explode('/', $path, 2);
    $body_classes[] = nom-de-mon-theme_id_safe('page-'. $path);
    $body_classes[] = nom-de-mon-theme_id_safe('section-'. $section);

    if (arg(0) == 'node') {
      if (arg(1) == 'add') {
        if ($section == 'node') {
          array_pop($body_classes); // Remove 'section-node'
        }
        $body_classes[] = 'section-node-add'; // Add 'section-node-add'
      }
      elseif (is_numeric(arg(1)) && (arg(2) == 'edit' || arg(2) == 'delete')) {
        if ($section == 'node') {
          array_pop($body_classes); // Remove 'section-node'
        }
        $body_classes[] = 'section-node-'. arg(2); // Add 'section-node-edit' or 'section-node-delete'
      }
    }
  }
  /*  // Check what the user's browser is and add it as a body class
      // DEACTIVATED - Only works if page cache is deactivated
      $user_agent = $_SERVER['HTTP_USER_AGENT'];
      if($user_agent) {
        if (strpos($user_agent, 'MSIE')) {
          $body_classes[] = 'browser-ie';
        } else if (strpos($user_agent, 'MSIE 6.0')) {
          $body_classes[] = 'browser-ie6';
        } else if (strpos($user_agent, 'MSIE 7.0')) {
          $body_classes[] = 'browser-ie7';
        } else if (strpos($user_agent, 'MSIE 8.0')) {
          $body_classes[] = 'browser-ie8';
        } else if (strpos($user_agent, 'Firefox/2')) {
          $body_classes[] = 'browser-firefox2';
        } else if (strpos($user_agent, 'Firefox/3')) {
          $body_classes[] = 'browser-firefox3';
        }else if (strpos($user_agent, 'Safari')) {
          $body_classes[] = 'browser-safari';
        } else if (strpos($user_agent, 'Opera')) {
          $body_classes[] = 'browser-opera';
        }
      }
 
  /* Add template suggestions based on content type
   * You can use a different page template depending on the
   * content type or the node ID
   * For example, if you wish to have a different page template
   * for the story content type, just create a page template called
   * page-type-story.tpl.php
   * For a specific node, use the node ID in the name of the page template
   * like this : page-node-22.tpl.php (if the node ID is 22)
   */
 
  if ($vars['node']->type != "") {
      $vars['template_files'][] = "page-type-" . $vars['node']->type;
    }
  if ($vars['node']->nid != "") {
      $vars['template_files'][] = "page-node-" . $vars['node']->nid;
    }
  $vars['body_classes'] = implode(' ', $body_classes); // Concatenate with spaces
}

/*
*   This function creates the NODES classes, like 'node-unpublished' for nodes
*     that are not published, or 'node-mine' for node posted by the connected user...
*  
* @param $vars
*   A sequential array of variables to pass to the theme template.
* @param $hook
*   The name of the theme function being called ("node" in this case.)
*/

Pour le nom de ton template node-node-3.tpl.php as tu essayé page-node-3.tpl.php et surtout vidé le cache ?

Bon courage

Alex

PROBLEME RESOLU !!!

Oui en effet Alex, merci beaucoup :), j’avais mal nommé mon nouveau fichier tpl.
Ainsi: « page-node-3.tpl.php » fonctionne ad-mi-ra-ble-ment !
Merci aussi pour la fonction dans template.php du thème basic qui gère les classes dans le body des pages.

Aussi et juste pour corriger une coquille dans mon dernier post pour ceux qui pourraient être intéressés:
Dans 1) c'est le fichier « page.tpl.php » que j'aie dupliqué et non pas « node.tpl.php ».

Encore un GRAND merci à Wabby, ced_sdml et Alex (poluske) pour leur aide, qui servira à beaucoup d'autres membres du forum Drupal.

May the force be with you !! (ced_sdml) ;)

Marie