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

Re: Style des vignettes d'album avec Bootstrap Darkroom

2025-01-12T13:09:25Z

Voilà ce que ça donne au final :

Re: Style des vignettes d'album avec Bootstrap Darkroom

2025-01-11T18:43:56Z

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

2025-01-11T18:39:53Z

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

2025-01-11T18:34:41Z

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

2025-01-11T18:27:00Z

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

2025-01-11T18:14:27Z

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

2025-01-11T17:43:34Z

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

2025-01-11T15:20:18Z

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

2025-01-10T13:52:13Z

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

2025-01-10T08:30:17Z

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

2025-01-10T07:37:48Z

É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

2025-01-08T18:32:42Z

Ç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

2025-01-07T18:00:57Z

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

2025-01-07T17:41:07Z

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

2025-01-07T15:04:23Z

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. :-)