Annonce

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

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

draconis
Membre
2023-01-17
4

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

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.

https://wtf.roflcopter.fr/pics/ZdWmUKme/KueAZNEF.png

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)

Hors ligne

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

Hannah
Équipe Piwigo
2019-08-20
13

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

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>

Hors ligne

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

draconis
Membre
2023-01-17
4

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

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

https://wtf.roflcopter.fr/pics/J0yT61g7/wLDVIFWT.jpg

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

Cordialement,
Draconis

Hors ligne

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

dreamer
Membre
St Cyr/mer (83)
2006-02-26
1076

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

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+


Photos, Musiques, Camping-car,, Vidéo et le tout nouveau Recettes le tout en 14.2.0

Hors ligne

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

dreamer
Membre
St Cyr/mer (83)
2006-02-26
1076

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

Re

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

A+


Photos, Musiques, Camping-car,, Vidéo et le tout nouveau Recettes le tout en 14.2.0

Hors ligne

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

draconis
Membre
2023-01-17
4

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

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)

Hors ligne

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

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2024 · Contact