Publié il y a 3 mois

Le concept est d'avoir tous les titres de niveau 3 (h3) avec des quotes avant et après. Ces quotes peuvent être du texte (") ou des images. Ce petit tutorial explique comment activer ces quotes avec les pseudo-elements :before et :after

Voici le résutat final qu'on aimerait obtenir. On remarquera que ça fonctionne aussi bien sur une que sur plusieurs lignes.

h3 exemple avec quotes

Première chose à faire, les images quotes avec un éditeur d'image (tel que GIMP). Ici, c'est simplement deux images avec fond transparent ou blanc de 7x7 px.

Gimp screenshot

Crée donc deux images quote_begin.gif et quote_end.gif que tu enregistres sur ton serveur, à un endroit qui est accessible avec une URL.

Ensuite, le CSS. Les trois blocs qui suivent définissent le style du titre h3 ( h3 { } ), ce qui vient avant ( h3:before { } ) et ce qui vient après. ( h3:after { } ). Les margin, padding et autres seront bien sur à adapter en fonction du style, et de la taille de ton titre

h3 { 
  font-size: 1.08em;
  font-weight: 500; 
  margin-bottom: 1em; 
  margin-top: 0.5em;
}
h3:before {
  content: url(quote_begin.gif);
  position:relative;
  top: -10px;
  width: 15px;
  padding-right: 5px; 
}
h3:after {
  content: url(quote_end.gif);
  position:relative;
  bottom: -6px;
  width: 15px;
  padding-left: 5px; 
}

Avec la règle content:url(quote_x.gif);, les images quote_begin.gif et quote_end.gif doivent être situés dans le même répertoire que la feuille de style. On peut ici adapter le chemin ou mettre un lien d'un serveur externe.

Afficher l'article
Publié il y a 6 mois

Voici une astuce pour renommer en masse des fichiers avec bash directement. Le but est d'obtenir, au lieu de artiste - album - numero - titre.mp3 quelque chose de plus simple comme numero - titre.mp3.

Lire la suite de l'article  |  Lire les 5 commentaires
Publié il y a 7 mois

Rien de plus facile. Enfin...

egrep -r '^\$db_url' * | grep -v username | cut -d'=' -f2
Lire la suite de l'article
Publié il y a 8 mois

Problématique : J'ai un champ image et un champ URL. Je voudrais que lorsque je clique sur l'image, l'url renseignée dans l'autre champ se charge. Et en même temps, j'aimerais que l'image affichée soit générée via imagecache. Fastoche !

Lire la suite de l'article
Publié il y a 1 an

Loutre.ch est maintenant sous Drupal 7. Quelques petits changements au niveau des vues, sinon tout est pareil. Il ne me reste qu'à trouver un module de nuages de tags pour le pied de page.

Lire la suite de l'article
Publié il y a 1 an

Ça fait tout juste deux ans que le blog est ligne.

Lire la suite de l'article