Planet-Libre

Nicolas Lœuillet : Astuce Dotclear - mettre en avant un billet sur la page d'accueil

mardi 23 juillet 2013 à 15:01

Je voulais laisser en haut de page sur ce blog certains billets que je jugeais intéressants. Dotclear 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é :

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

Petit souci ici : ça reprend les billets de la première boucle. Apparemment, Dotclear 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 :

À la une

J'ai aussi ajouté la classe CSS .selected au

de mon billet mis en avant.

On a donc ce code :

     
      
      À la une
      ★ {{tpl:EntryTitle encode_html="1"}}

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 :

Original post of Nicolas Lœuillet.Votez pour ce billet sur Planet Libre.