L'Agora sur Chronica – Style des vignettes d'album avec Bootstrap Darkroom

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Katryne) — Sun, 12 Jan 2025 13:09:25 +0000

Voilà ce que ça donne au final :

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Polowigo) — Sat, 11 Jan 2025 18:43:56 +0000

Pas encore et, honte à moi, je n'ai même pas encore uploadé les photos des fêtes !

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Katryne) — Sat, 11 Jan 2025 18:39:53 +0000

Suffira de bien choisir la vignette représentante. Bon, maintenant, je vais bien m'appliquer et préparer un beau post sur le grand forum. As-tu appliqué la technique sur ton Piwigo ?

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Polowigo) — Sat, 11 Jan 2025 18:34:41 +0000

J'en dis que c'est bien lisible maintenant.
Un poil juste pour la catégorie DOCUMENTS, il faut espérer que tu n'auras pas énormément d'images blanches.

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Katryne) — Sat, 11 Jan 2025 18:27:00 +0000

Merci, je m'arrachais les cheveux... Voilà ! J'ai même passé à 62 et la transparence est à 0.6 au repos et 0.7 en hover. Que t'en dis ?

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Polowigo) — Sat, 11 Jan 2025 18:14:27 +0000

Il te faut passer la height en 52px au lieu de 38px.

Pour gagner en lisibilité, peut-être que diminuer un peu la transparence ne serait pas trop gênant. À voir.

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Katryne) — Sat, 11 Jan 2025 17:43:34 +0000

Là, c'est très correct sur le site de test, Mais sur Images & Docs, j'y arrive pas à cause de mes titres sur 2 lignes.

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Katryne) — Sat, 11 Jan 2025 15:20:18 +0000

Je crois que je tiens un bon compromis transparence/contraste du texte. Mais il faudra quand même choisir les phots représentantes, car je n'arrive pas à assurer partout une lisibilité acceptable. J'ai mis sur le titre un text-shadow contrasté et qui colle aux lettres.

Ce qui donne avec Bootstrap Darkroom:

 .card-title,.card-title a {font-family: 'Raleway';color:white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;}
.card-thumbnail {
  overflow: hidden;
}
.card-thumbnail .card-body {
  position:absolute;
  bottom: -14px;
  width: 100%;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  height: 38px;
  line-height: 1;
  background:rgba(38,41,111,0.5);
  -webkit-transition:all 200ms ease-out;
  -moz-transition:all 200ms ease-out;
  -ms-transition:all 200ms ease-out;
  -o-transition:all 200ms ease-out;
  transition:all 200ms ease-out;
}
.card-thumbnail .card-footer {
  position:absolute;
  bottom: -42px;
  width: 100%;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  height: 28px;
  line-height: 1;
  background:rgba(38,41,111,0.5);
  -webkit-transition:all 200ms ease-out;
  -moz-transition:all 200ms ease-out;
  -ms-transition:all 200ms ease-out;
  -o-transition:all 200ms ease-out;
  transition:all 200ms ease-out;
}

.card-thumbnail:hover .card-body, .card-thumbnail:hover .card-footer {
  background:rgba(38,41,111,0.7);
}
.card-thumbnail:hover a, .card-thumbnail:hover .card-footer > .ellipsis {
  color: #fff;
}
.card-thumbnail:hover .card-body {
  bottom:28px;
}
.card-thumbnail:hover .card-footer {
  bottom:0;
}

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Polowigo) — Fri, 10 Jan 2025 13:52:13 +0000

Personnellement, je préfère nettement les couleurs des backgounds de blackland.

Et je te déclare GMT (Grande Maîtresse du Temps) : tu postes quand tu veux tu choises.

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Katryne) — Fri, 10 Jan 2025 08:30:17 +0000

On attend un peu avant de poster sur le "grand forum" ? Je ne suis pas sure d'avoir encore trouvé l'équilibre parfait, le contraste lisible entre les backgrounds et la couleur des textes. Tout dépend des couleurs du thème.

J'en suis là sur le site vivant : https://album.chauvigne.info/
et là sur le site de test : https://blackland.legtux.org/

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Polowigo) — Fri, 10 Jan 2025 07:37:48 +0000

Évidemment si on ne met pas le display...

Donc, si l'on souhaite centrer verticalement les titres des albums :

.card-thumbnail .card-title {
  display: inline-block;
  vertical-align: middle;
}

À condition d'avoir la même valeur en height et line-height, exemple à adapter :

.card-thumbnail .card-body {
...
  height: 52px;
  line-height: 52px;
...
}

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Polowigo) — Wed, 08 Jan 2025 18:32:42 +0000

Ça n'est pas gagné : j'ai beau directiver vertical-align: middle !important;, c'est totalement inefficace.

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Polowigo) — Tue, 07 Jan 2025 18:00:57 +0000

C'est parfait !...
... enfin presque : vu que je suis assez pointilleux, centrer verticalement les titres - surtout ceux sur une seule ligne - serait la cerise sur le gâteau.
Un petit vertical-align: middle; quelque part ? Ou bien en jouant sur les paddings ?

C'est vrai que les vignettes rectangulaires sont top.

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Katryne) — Tue, 07 Jan 2025 17:41:07 +0000

Demain, je ferai ... Sur le site vivant, j'ai dû adapter, à cause des titres parfois longs qui se mettent sur 2 lignes. En hover, j'ai donné un look spécial au texte, full css, hein, pas de js. Ça change, je ne sais pas si c'est en mieux, moi j'aime très beaucoup et les vignettes rectangulaires, moins hautes, rendent la page moins longue, parce qu'avec la carte, le nuage de mots-clefs et la liste des commentaires, ça n'en finissait plus...Voilà : https://album.chauvigne.info/

Re: Style des vignettes d'album avec Bootstrap Darkroom

null@example.com (Polowigo) — Tue, 07 Jan 2025 15:04:23 +0000

Tu as raison, un nouveau message dans la section Style avec les liens idoines me semble indiqué car je crains que personne ne viennent scinder la discussion initiale.

Je te laisse faire car tu seras mieux placée pour indiquer le pourquoi du comment, avec les codes des couleurs adoptées. :-)