Piwigo.org

draconis · 2023-01-18 00:10:00

Bonjour/Bonsoir,

Je suis très intéressé par la personnalisation utilisée sur le site de démo n°4 : https://demo4.piwigo.com. J'ai cherché un petit moment sur le forum, j'ai peut-être employé de mauvais termes mais je n'ai rien trouvé et je suis complètement novice en css.

Je souhaiterais placer un Bouton comme la flèche sur la photo qui scroll vers le bas et les différents albums.

J'utilise Addtional Page comme plugin, le thème bootstrap_darkroom. De plus la présentation parle de l'habillage Cyborg, je suis tombé sur ce fil mais je ne comprends pas grand choses.

Cordialement,
Draconis

Version de Piwigo: 13.4
Version de PHP: 8
Version de MySQL: 10.4
URL Piwigo: https://piwigo.draconis.me

Dernière modification par draconis (2023-01-18 12:21:24)

Hannah · 2023-01-18 09:38:20

Bonjour draconis,

Pour avoir le même bouton que sur la demo4, il faut ajouter ce code html dans

"Configuration > Options > Général > Bannière des pages"

Code:

</div> <!-- it'a trick to close #theHeader, so that next div can be position:absolute bottom -->

<div class="browse-down">
<a href="#content" class="fa fa-arrow-circle-down" aria-hidden="true"></a>

Ensuite dans LocalFilesEditor CSS il faut ajouter

Code:

.browse-down {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 10px;
  font-size: 50px;
}
.browse-down a {
  color: #fff;
  text-shadow: 0 0 15px black;
}
.browse-down a:hover {
  text-decoration:none !important;
}

Efin dans le plugin statistics il faut rajouter ce script

Code:

<script type="text/javascript">
$(document).ready(function() {
    $(window).scroll(function () {
        if (this.scrollY > 20) {
            $(".browse-down").fadeOut();
        } else {
           
            $(".browse-down").fadeIn();
        }
    });
});
</script>

draconis · 2023-01-18 09:55:26

Un grand merci à vous Hannah, pour vos explications très claires cela fonctionne parfaitement.

J'avais une dernière question. J'ai réussi à trouver l'habillage Cyborg dans les paramètres de bootstrap.
Comme expliqué dans la documentation sur les modification CSS, j'ai réussi à identifier les balises html afin de changer la couleur des liens et celle du fond général du site. Mais je n'arrive à trouver comment modifier le fond des "boîtes" qui présente chaque catégories.

En image ce sera plus simple

Comment remplacer le gris dans le fond de paysage par la même couleur que le fond général du site ?

Cordialement,
Draconis

dreamer · 2023-01-18 10:58:35

Salut

En utilisant [[extension by Piwigo Team] LocalFiles Editor] Editor, tu vas l'onglet CCS et tu écris ceci

Code:

.card {
    background-color: #282828 !important;
}

#282828 étant ta couleur de fond d'origine, donc à toi de chercher la couleur que tu désires.

A+

dreamer · 2023-01-18 11:42:45

Re

Si tu cherches ta couleur, regardes ceci : https://htmlcolorcodes.com/fr/

A+

draconis · 2023-01-18 12:20:02

Merci dreamer.

J'avais déjà repéré la couleur, il me manquait à trouver la bonne balise. Je n'étais pas loin je faisais mes essais avec ".card-body".

Après ces petits travaux esthétiques, il me reste à travailler un petit logo et je pourrais attaquer le gros du travail : créer la galerie.

Ma problématique est résolue, encore merci à vous deux. Je modifie le sujet en résolu et le titre pour que cela soit plus explicite.

Dernière modification par draconis (2023-01-18 12:23:06)

Piwigo.org

Annonce

#1 2023-01-18 00:10:00

[résolu] bootstrap_darkroom inspiré du site démo 4

#2 2023-01-18 09:38:20

Re: [résolu] bootstrap_darkroom inspiré du site démo 4

Code:

Code:

Code:

#3 2023-01-18 09:55:26

Re: [résolu] bootstrap_darkroom inspiré du site démo 4

#4 2023-01-18 10:58:35

Re: [résolu] bootstrap_darkroom inspiré du site démo 4

Code:

#5 2023-01-18 11:42:45

Re: [résolu] bootstrap_darkroom inspiré du site démo 4

#6 2023-01-18 12:20:02

Re: [résolu] bootstrap_darkroom inspiré du site démo 4

Pied de page des forums