Astuce Dotclear - mettre en avant un billet sur la page d'accueil

Je voulais laisser en haut de page sur ce blog certains billets que je jugeais intéressants. Dotcleår propose donc la fonctionnalité de "billet sélectionné". Mais de base, ça ne fait rien si le thème ne gère pas cette fonctionnalité. C’est uniquement utile si on affiche le widget qui va bien.

Prenons donc le thème minimal et adaptons-le. Vous pouvez prendre n’importe quel thème et y tenter d’appliquer les modifications ci-dessous.

Fichier home.html

Dans ce fichier, j’ai dupliqué la boucle (celle qui affiche les billets). La première boucle, je l’ai modifié pour ne prendre qu’un billet qui a le statut sélectionné :

<tpl:Entries selected="1" lastn="1">

La seconde, je l’ai modifié pour afficher tous les billets, y compris les billets sélectionnés :

<tpl:Entries>

Petit souci ici : ça reprend les billets de la première boucle. Apparemment, Dotcleår ne gère pas cette histoire de doublons, à voir par la suite si c’est faisable.

Une fois que vous avez fait ça, c’est quasi terminé. Ne reste plus qu’à gérer l’habillage de votre billet mis en avant. J’ai trouvé quelque chose qui fonctionne à peu près pour mettre un petit ruban en haut à droite du billet. Pour cela, il faut ajouter dans le votre première boucle le code suivant :

<div class="ribbon-wrapper-green"><div class="ribbon-green">À la une</div></div>

J’ai aussi ajouté la classe CSS .selected au <div> de mon billet mis en avant.

On a donc ce code :

    <tpl:Entries selected="1" lastn="1"> 
      <div id="p{{tpl:EntryID}}" class="post selected {{tpl:EntryIfOdd}} {{tpl:EntryIfFirst}}" lang="{{tpl:EntryLang}}" xml:lang="{{tpl:EntryLang}}">
      <div class="ribbon-wrapper-green"><div class="ribbon-green">À la une</div></div>
      <h2 class="post-title"><a
      href="{{tpl:EntryURL}}">★ {{tpl:EntryTitle encode_html="1"}}</a></h2>
      <!-- notez la jolie étoile pour mettre en avant le billet sélectionné -->

Notez la jolie

FIchier style.css

Place à la décoration, voici le code à ajouter (ce n’est surement pas le meilleur code CSS pour faire ça) :

.selected {
  position: relative;
}
 
.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}
 
.ribbon-green {
  font-weight: bold;
  font-size:  15px;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #6dcff6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6dcff6), to(#3399CC)); 
  background-image: -webkit-linear-gradient(top, #6dcff6, #3399CC); 
  background-image:    -moz-linear-gradient(top, #6dcff6, #3399CC); 
  background-image:     -ms-linear-gradient(top, #6dcff6, #3399CC); 
  background-image:      -o-linear-gradient(top, #6dcff6, #3399CC); 
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}
 
.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #4070B3;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}
 
.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

Le résultat en image :