[résolu]Affichage different pour le teaser et pour la version complète

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,

le développement de mon site touche à sa fin, cependant il me reste encore tout ce qui touche à l'affichage et l'adaptation d'un thème avant sa mise ne ligne. Mon problème concerne l'affichage des mes biens (c'est un site immobilier).

Sur une page, j'ai ma liste de biens sous forme de teaser (une image et 3 champs CCK).
Je souhaite leur appliquer un style qui sera différent de l'affichage complet (4 images et une dizaine de champs CCK). Comment faire pour que mon style.css ne s'applique qu'à mes biens en teaser? J'ai tenté de renommer style.css en style-teaser.css, mais sans succès.

merci :)

Forum : 
Version de Drupal : 

pour l'instant je pars d'un garland pour quelques tests, j'ai 3 jours pour adapter un thème et finir la mise en page, je bosse un peu dans l'urgence là en fait, d'autant que j'avais pas vraiment abordé le theming sous Drupal auparavant...

apparemment .node-teaser n'a pas été mis en place car si j'utilise div.field-field-img, la mise en forme s'applique, mais si je met .node-teaser.div.field-field-img, ça ne marche pas.

il te suffit de mettre le module contemplate. Celui-ci te permettra, par type de contenu, de définir un template : pour ton noeud, un pour ton teaser et un 3em mais j'ai plus en tête lequel. Les 2 premier t'intéressent et couvrent ton besoin apparement

ca correspond pourtant a ce que tu veux ^^. en gros tu vas juste changer les class css appliquées et les champs affichés. ton css va rester dans tes fichier css.
tu peux te créer un second ficher css nommé style-teaser.css il te suffit de le déclarer dans le fichier .info du theme que tu utilise

Bon la solution de Contemplate ne va pas, ça me pourrit une partie de la mise en forme.
Il n'y a pas moyen de choisir un css selon la page sur laquelle on est?
mon soucis pour faire simple c'est sur mon teaser, j'ai une photo et 3 champs CCK
j'ai appliqué ça:

div.field-field-img {
float: left;
margin-right: 10px;
}

div.field-group-info {
margin-left: 220px
}

mon image est a gauche, le texte a droite et reste dans une colonne a droite quand on réduit la page.

Mais dans la partie complete j'ai une grande image, et trois petite les une sous les autres a droite de la grande. Donc le texte se met bien en dessous, mais mon margin-left reste appliqué, alors qu'il ne faudrait pas.

quand j'utilise contemplate pour rectifier le tir, mes label se mettent en H3 et au dessus alors que dans le display field des champs CCK; ils sont bien en inline...

En activant Contemplate, je reprend le nom de mes classes

div.field-field-description, div.field-field-price, div.field-field-surface
{
margin-left: 220px;
color: #0F0;
display: inline;
}

il ne prends en compte que le color: #0F0;

je suis désespéré là :(

euh ... pourquoi tu fais pas 2 class css

div.field-field-description, div.field-field-price, div.field-field-surface
{
margin-left: 220px;
color: #0F0;
display: inline;
}

ET par exemple

div.field-field-description-teaser, div.field-field-price-teaser, div.field-field-surface-teaser
{
margin-left: 220px;
display: inline;
}

tout l'intérêt de contemplate est de mettre des mise en forme ou du css différent selon teaser / node

Bon ça y est j'ai presque réussi, en fait c'est ma balise display: inline qui perturbais une bonne partie de l'affichage.

Cependant, mes labels s'affichent toujours AU DESSUS des champs, et ça j'arrive pas a faire en sorte que ça rentre dans l'ordre.

Déjà merci pour la première partie, mais j'ai encore besoin d'aide pour ce point...

Ah j'ai trouvé il me semblait bien qu'il y avait un moyen classique pour ton problème de label sur une autre ligne

quand tu vas dans admin -> type de contenu tu vas sur ton type de contenu et dans l'onglet en haut "afficher les champs" la tu pourras choisir d'afficher ou de cacher les labels mais aussi de les afficher sur la même ligne

m'est avis que le css de base implémente un style pour les balise label

label{
..
..
..}

donc a moins que tu ne l'overrides, il se peut que ton inline ne soit pas pris en compte donc je t'invite a utiliser la manip que je t'ai décrit

La manip que tu m'as décrite elle a déjà été faite, mais lorsque j'active contemplate, ça fait ce problème là.

J'essaie depuis un moment plus de choses, actuellement j'en suis à:

Fichier contemplate:

<div class="field field-type-image field-field-mainimg">
  <div class="field-items">
      <div class="field-item"><?php print $node->field_mainimg[0]['view'] ?></div>
  </div>
</div>

<div class="field field-type-number-integer field-field-mandat-teaser">
  <h3 class="field-label-teaser">Mandat</h3>
  <div class="field-items">
      <div class="field-item"><?php print $node->field_mandat[0]['view'] ?></div>
  </div>
</div>

<div class="field field-type-text field-field-description-teaser">
  <h3 class="field-label-teaser">Descriptif</h3>
  <div class="field-items">
      <div class="field-item"><?php print $node->field_description[0]['view'] ?></div>
  </div>
</div>

et dans mon CSS:

div.field-field-mainimg {
float: left;
margin-right: 10px;
}
a.lightbox-processed {
margin-bottom: 10px
}

div.field-field-mandat-teaser {
margin-left: 250px;
}

div.field-field-description-teaser {
margin-left: 250px;
}

div.field-field-monthly-rent-teaser{
margin-left: 250px;
}

div.field-label-teaser {
display:inline;
font-weight:normal;
}

En fait mon affichage est parfait, jusqu'à ce que j'active mon fichier contemplate pour pouvoir mettre un simple margin left...

A partir de là, mes labels sont en h3 (je sais pas pourquoi il m'a choisi cette valeur) et au dessus du champs correspondant.

si tu veux un div et pas un h3 il te suffit de le remplacer

ou alors tu rempalce :
div.field-label-teaser {
display:inline;
font-weight:normal;
}

par

.field-label-teaser {
display:inline;
font-weight:normal;
}
car la ton style ne s'applique qu'aux items "div" de class .field-label-teaser donc tu n'es pas prêt d'avoir ton inline

d'accord très bien, perso j'ai contourné le problème avec

div.field-label-teaser {
display:inline;
font-weight:bold;
margin-top: 30px;
}

div.field-item-teaser {
display:inline;
}

et

<div class="field field-type-number-integer field-field-mandat-teaser">
  <div class="field-label-teaser">Mandat :</div>
      <div class="field-item-teaser"><?php print $node->field_mandat[0]['view'?></div>
</div>

ça marche aussi :)

En tout cas merci de ton aide!