Annonce

#1 2021-05-31 19:17:58

biache
Membre
Jacou
2021-05-29
45

Votre avis est toujours utile !

Bonjour/Bonsoir,

Il y a fort fort longtemps j'avais fait des essais avec phpwebgallery puis dans mon club photo on a déployé un piwigo 2.4 avec succès (150 utilisateurs, concours internes, etc..) puis me suis endormi et là en me reveillant je suis retourné voir piwi et j'ai vraiment aimé cette nouvelle mouture.

Avant de me décider a activer l'hébergement Piwigo.com j'aimerais un retour sur le look & feel de la personnalisation que j'ai appliquée

Ici

Vos retours sont utiles sur la perception générale

- Bootstrap Darkroom variante Simplex, sans Jumbotron
- Additional pages pour gérer la page du carroussel en plein écran
- Inspiré de https://guillaumecyriaque.be/ pour mettre les liens Linkedin et Contact

Les petits points que je n'ai pas trouvé comment faire :
- garder un footer personnalisé mais avec moins d'espace au dessus de lui (exemple sur page accueil, gros espace entre image et footer)
- modifier couleurs de texte et bouton (localfiles editor ou custom css, sans résultat)
- gérer un module de commande de tirage; mais je pense que sur piwigo.com ce ne sera pas possible
- gérer du contenu adulte, pas de plugin disponible sur piwigo.com, une astuce ?
- autosize ne met pas la plus grande taille disponible (qui devrait être XL)


Merci à vous !


Version de Piwigo: version essai piwigo.com
URL Piwigo: https://biache.piwigo.com

Hors ligne

#2 2021-05-31 20:40:37

Katryne
Membre
Provence
2016-12-03
1030

Re: Votre avis est toujours utile !

Ah ! Notre-Dame en mode Diaporama, qui jaillit de la nuit ! Magique ...


https://photos.revestou.fr/ - https://dardennes.revestou.fr/ - http://photos.katrynou.fr/
Piwigo 11.5.0 -  Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.25 - MySQL: 5.7.33-log
Bibliothèque graphique: External ImageMagick 6.9.10-23
Test Piwigo 12.1 : https://gabandjo.legtux.org/

Hors ligne

#3 2021-06-01 20:47:09

Guillaume C
Membre
Belgium
2014-04-08
334

Re: Votre avis est toujours utile !

Plus propre qu’un copier-coller de mon code source : https://guillaumecyriaque.be/index.php? … _de_piwigo

Hors ligne

#4 2021-06-01 21:50:57

biache
Membre
Jacou
2021-05-29
45

Re: Votre avis est toujours utile !

Guillaume C a écrit:

Plus propre qu’un copier-coller de mon code source

Par contre les autres aspects de personnalisation ne sont pas possibles en hébergement piwigo.com

Et sinon un petit retour sur les choses a améliorer ou qui vont bien ?

Hors ligne

#5 2021-06-02 08:06:23

gbo
Membre
Martigues
2006-11-01
1170

Re: Votre avis est toujours utile !

Moi, je dis bravo !

Pour la présentation de la galerie et les trés belles photos qui la compose.
J'ai toujours des craintes sur délai de chargement des pages avec de grandes photos, mais avec piwigo  pas de soucis.


Merci à Guillaume pour le partage.

Hors ligne

#6 2021-06-02 12:04:20

biache
Membre
Jacou
2021-05-29
45

Re: Votre avis est toujours utile !

gbo a écrit:

Moi, je dis bravo !
Pour la présentation de la galerie et les trés belles photos qui la compose.
J'ai toujours des craintes sur délai de chargement des pages avec de grandes photos, mais avec piwigo  pas de soucis.
Merci à Guillaume pour le partage.

Oui c'est fluide, franchement rien a dire.

Merci de ton retour Gbo.

Des idées sur pourquoi la perso des couleurs via localfiles editor ou via champ custom css du thème ne marche pas ?
D'après ce que j'ai compris c'est soit l'un, soit l'autre

Avez vous un exemple simple de config couleur sur les  boutons et liens avec bootstrap darkroom ?

J'ai essayé avec déclaration balises CSS en .X ou en #X

Exemple:

Code:

#a {
    color: #b90309;;
    text-decoration: none;
    background-color: transparent;
}
#nav-pills {
    color: #ff0;
    background-color: #d9230f;
}
#nav-link.active {
    color: #f0f;
    background-color: #d9230f;
}
#nav-link {
    color: #b90309;;
    background-color: #fff;
}

Hors ligne

#7 2021-06-02 14:33:25

gbo
Membre
Martigues
2006-11-01
1170

Re: Votre avis est toujours utile !

Je ne connais pas les spécificités du thème bootstrap darkroom

.X cible l’élément de  classe "X "alors que #X cible l’élément dont l’ID est "X"

Essaye en ajoutant !important avant le ;
exemple →   #a{ color: red !important;}

Hors ligne

#8 2021-06-02 14:51:37

biache
Membre
Jacou
2021-05-29
45

Re: Votre avis est toujours utile !

Ca marche !  si je met le !important dans le localfilleseditor et sur les classes

merci ....  1 point traité !

Hors ligne

#9 2021-06-02 18:44:22

Katryne
Membre
Provence
2016-12-03
1030

Re: Votre avis est toujours utile !

Benoit, avec Bootstrap Dark oom, ya du css perso que j'arrive pas à passer via Local File Editor. Comme le nuage de mots clefs.
Mais j'ai réussi en mettant le code, exactement le même, dans la config du thème. Regarde, en cliquant sur Configuration de Bootstrap Darkroom, ya un champ pour entrer du css.


https://photos.revestou.fr/ - https://dardennes.revestou.fr/ - http://photos.katrynou.fr/
Piwigo 11.5.0 -  Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.25 - MySQL: 5.7.33-log
Bibliothèque graphique: External ImageMagick 6.9.10-23
Test Piwigo 12.1 : https://gabandjo.legtux.org/

Hors ligne

#10 2021-06-03 21:30:56

biache
Membre
Jacou
2021-05-29
45

Re: Votre avis est toujours utile !

Rigolo car moi c'est que par le localfiles editor que ça marche ;)

Hors ligne

#11 2021-06-03 23:39:37

biache
Membre
Jacou
2021-05-29
45

Re: Votre avis est toujours utile !

Bon j'ai un peu arrangé le style avec changement couleurs et petits effets ainsi que l'icone d'information sur la page photo en plus grand et visible

Les petits points qui restent et dont je suis preneur d'astuces :
- garder un footer personnalisé mais avec moins d'espace au dessus de lui (exemple sur page accueil, gros espace entre image et footer) ?
- gérer du contenu adulte, pas de plugin disponible sur piwigo.com, une astuce ?
- autosize ne met pas la plus grande taille disponible (qui devrait être XL) ?
- si on active le plugin copyright alors il apparait  2 fois dans le bloc d'informations, bug ?

Et bien que pas réalisable je pense sur piwigo.com, une idée comment gérer un module de commande de tirage ?

Voici le contenu de mon css (via localfiles editor) :

Code:

#sidebar .handle{color:rgba(255,255,255,.75);background-color:#346c9d;border-top:1px solid #336D99;border-bottom:1px solid #336D99;border-left:1px solid #336D99;box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2)}
#sidebar .handle a{color:rgba(255,255,255,.75)}
#sidebar .handle a:focus,#sidebar .handle a:hover{color:#fff}
#sidebar .info h4{color:rgba(255,255,255,.75)}
#sidebar .info .imageInfo>dd>a{color:rgba(255,255,255,.75)}
#sidebar .info .imageInfo>dd>a:focus,#sidebar .info .imageInfo>dd>a:hover{color:#fff}.slick-next:before,.slick-prev:before{color:#212529}.navbar-brand a:first-child:before{font-size:1.015625rem!important}.navbar.navbar-transparent.navbar-sm{margin-top:-112px!important}
#sidebar{position:absolute;right:-250px;text-align:left;z-index:100}
#sidebar .handle{margin-top:10px;float:right;border-bottom-left-radius:8px;border-bottom-right-radius:0px;border-top-left-radius:0px}
#sidebar .handle a{display:block;padding:15px;color:#fff;font-size:1.8em}
#sidebar .handle a:hover,#sidebar .handle a:focus{color:#eee}
#sidebar .handle .fa{font-size:1.8em}
#sidebar .info{float:right;;border-bottom-left-radius:8px;border-bottom-right-radius:0px;border-top-left-radius:0px;width:250px;padding:20px}
#sidebar .info dl{margin-bottom:0}
#sidebar .info button{max-width:240px}
#sidebar .info{color:rgba(255,255,255,.75);background-color:#264f73 !important;border-top:1px solid #264f73;border-bottom:1px solid #264f73;border-left:1px solid #264f73;box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2)}
a{color:#264f73;font-weight:750;text-decoration:none;background-color:transparent}
.btn-primary{color:#fff;background-image:linear-gradient(#346c9d,#264f73 6%,#346c9d);background-repeat:no-repeat;-webkit-filter:none;filter:none;border:1px solid #336D99}
.btn-primary:disabled{color:#fff;background-color:#264f73;border-color:#264f73}
.btn-outline-primary{color:#264f73;border-color:#264f73}
.btn-outline-primary:hover{color:#fff;background-color:#264f73;border-color:#264f73}
.btn-outline-primary:disabled{color:#264f73;background-color:transparent}
.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#264f73;border-color:#264f73}
.btn-link{font-weight:750;color:#264f73;text-decoration:none}
.dropdown-item:focus,.dropdown-item:hover{color:#fff;text-decoration:none;background-color:#264f73}
.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#264f73}
.custom-control-input:checked~.custom-control-label::before{color:#fff;border-color:#264f73;background-color:#264f73}
.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before{border-color:#264f73;background-color:#264f73}
.custom-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;background-color:#264f73;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}
.custom-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#264f73;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}
.custom-range::-ms-thumb{width:1rem;height:1rem;margin-top:0;margin-right:.2rem;margin-left:.2rem;background-color:#264f73;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;appearance:none}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-image:linear-gradient(#346c9d,#264f73 6%,#346c9d);background-repeat:no-repeat;-webkit-filter:none;filter:none;border:1px solid #336D99}
.page-link{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#264f73;background-color:#fff;border:1px solid #eee}
.page-link:hover{z-index:2;color:#fff;text-decoration:none;background-color:#264f73;border-color:#264f73}
.page-item.active .page-link{z-index:1;color:#fff;background-color:#264f73;border-color:#264f73}
.badge-primary{color:#fff;background-color:#264f73}
.progress-bar{display:flex;flex-direction:column;justify-content:center;color:#264f73;text-align:center;white-space:nowrap;background-color:#264f73;transition:width .6s ease}
.list-group-item.active{z-index:2;color:#fff;background-color:#264f73;border-color:#264f73}
.border-primary{border-color:#264f73!important}
.text-primary{color:#264f73!important}
.bg-primary{background-image:linear-gradient(#346c9d,#264f73 6%,#346c9d);background-repeat:no-repeat;-webkit-filter:none;filter:none;border:1px solid #336D99}
.btn-primary:hover{background-image:linear-gradient(#346c9d,#264f73 6%,#346c9d);background-repeat:no-repeat;-webkit-filter:none;filter:none;border:1px solid #336D99}
.a {color: #264f73 !important}
.nav-pills {color: #264f73;font-weight: 900 !important;}
.nav-pills .nav-pills .show {color: #264f73;font-weight: 750 !important;}
.card-title {color: #264f73 !important}
.copyright {color: #333 !important}
.card-title.ellipsis.recent {color: #264f73 !important}

Et celui de perso footer :

Code:

[lang=Default]
<i><small>- Les photos de ce site ne sont pas libres de droit et nécessitent une autorisation explicite pour tout usage et repartage - (c) Copyright <b>Biache Benoit</b></small></i>
<style>
  .sticky-container {
    position: fixed;
    top: 90%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0px;
    margin: 0px;
    left: -130px;
    width: 175px;
    z-index: 100000 !important;
  }
  .sticky li {
    list-style-type: none;
    background-color: #bbb;
    color: #fff;
    height: 45px;
    padding: 0px;
    margin: 0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor: pointer;
                box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2);
    opacity: 0.75;
  }
  .sticky li:hover {
    margin-left: -90px;
    -webkit-transform: translateX(90px);
    -moz-transform: translateX(90px);
    -o-transform: translateX(90px);
    -ms-transform: translateX(90px);
    transform:translateX(90px);
    opacity: 1;
  }

  .sticky li a, .sticky li a:hover, .sticky li a:active {
    text-decoration:none;
    color:#fff;
  }
  .sticky li span {
    font-size: 24px;
    float: right;
    margin: 1px 1px;
    margin-right: 2px;
    width: 43px;
    height: 43px;
    text-align:center;
    vertical-align:central;
    line-height: 45px;
  }
  .sticky li p {
    float: right;
    padding: 0px;
    margin: 0px;
    text-transform: uppercase;
    text-align: center;
    line-height: 45px;
  }
</style>
<div id="socialshare" class="sticky-container">
<ul class="sticky">
<li style="background-color:#3371b7; border-radius: 0 0 10px 0;">
<a href="https://www.linkedin.com/shareArticle?mini=true&url=$url$" target="_blank" title="Partagez sur LinkedIn"><p>LinkedIn </p></a>
</li>
<li style="background-color:#000; border-radius: 0 0 10px 0;">
<a href="/index.php?/contact" title="Contactez-moi"><span><i class="fa fa-paper-plane" aria-hidden="true"></i></i></span><p>Contact</p></a>
</li>
</ul>
</div>
<script type="text/javascript">
(function(){window.addEventListener("DOMContentLoaded",function(){
    var url=document.location;
    var links=document.getElementById("socialshare")
                      .getElementsByTagName("a");
    for (var i=0;i!=links.length;i++){
        links[i].setAttribute("href",
            links[i].href.replace("$url$",url));}})})();
</script>
[/lang]
[lang=en]
<i><small>- The photos on this site are not free of rights and require explicit authorization for any use and sharing - (c) Copyright <b>Biache Benoit</b></small></i>
<style>
  .sticky-container {
    position: fixed;
    top: 90%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0px;
    margin: 0px;
    left: -130px;
    width: 175px;
                box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2);
    z-index: 100000 !important;
  }
  .sticky li {
    list-style-type: none;
    background-color: #bbb;
    color: #fff;
    height: 45px;
    padding: 0px;
    margin: 0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor: pointer;
    opacity: 0.75;
  }
  .sticky li:hover {
    margin-left: -90px;
    -webkit-transform: translateX(90px);
    -moz-transform: translateX(90px);
    -o-transform: translateX(90px);
    -ms-transform: translateX(90px);
    transform:translateX(90px);
    opacity: 1;
  }

  .sticky li a, .sticky li a:hover, .sticky li a:active {
    text-decoration:none;
    color:#fff;
  }
  .sticky li span {
    font-size: 24px;
    float: right;
    margin: 1px 1px;
    margin-right: 2px;
    width: 43px;
    height: 43px;
    text-align:center;
    vertical-align:central;
    line-height: 45px;
  }
  .sticky li p {
    float: right;
    padding: 0px;
    margin: 0px;
    text-transform: uppercase;
    text-align: center;
    line-height: 45px;
  }
</style>
<div id="socialshare" class="sticky-container">
<ul class="sticky">
<li style="background-color:#3371b7; border-radius: 0 0 10px 0;">
<a href="https://www.linkedin.com/shareArticle?mini=true&url=$url$" target="_blank" title="Share on LinkedIn"><p>LinkedIn </p></a>
</li>
<li style="background-color:#000; border-radius: 0 0 10px 0;">
<a href="/index.php?/contact" title="Contact me"><span><i class="fa fa-paper-plane" aria-hidden="true"></i></i></span><p>Contact</p></a>
</li>
</ul>
</div>
<script type="text/javascript">
(function(){window.addEventListener("DOMContentLoaded",function(){
    var url=document.location;
    var links=document.getElementById("socialshare")
                      .getElementsByTagName("a");
    for (var i=0;i!=links.length;i++){
        links[i].setAttribute("href",
            links[i].href.replace("$url$",url));}})})();
</script>
[/lang]

Nota: Edité pour mettre le css a jour

Dernière modification par biache (2021-06-04 09:48:09)

Hors ligne

#12 2021-06-04 09:07:33

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

Re: Votre avis est toujours utile !

Salut

En ce qui concerne le grand écart de ton footer et ce qui ne te sert à rien, mets ceci dans ta page accueil

Code:

.content-grid, .pt-3, .copyright {display:none;}

Comme ceci, il ne restera que ton menubar en haut et ton diaporama !!

A+


beauxvoyages.fr/photos (photos), beauxvoyages.fr/jukebox (musiques) et tout nouveau beauxvoyages.fr/camping (camping-car) le tout en version 11.5.0

Hors ligne

#13 2021-06-04 09:53:30

biache
Membre
Jacou
2021-05-29
45

Re: Votre avis est toujours utile !

dreamer a écrit:

Salut

En ce qui concerne le grand écart de ton footer et ce qui ne te sert à rien, mets ceci dans ta page accueil

Code:

.content-grid, .pt-3, .copyright {display:none;}

Comme ceci, il ne restera que ton menubar en haut et ton diaporama !!

A+

Nickel, mis dans la section Style de chaque langue dans la page additionnelle .

Merci @Dreamer ;)

Allez ca progresse ... me reste donc ..

- gérer du contenu adulte, pas de plugin disponible sur piwigo.com, une astuce ?
- autosize ne met pas la plus grande taille disponible (qui devrait être XL) ?
- si on active le plugin copyright alors il apparait  2 fois dans le bloc d'informations, bug ?

Et bien que pas réalisable je pense sur piwigo.com, une idée comment gérer un module de commande de tirage ?

Hors ligne

#14 2021-06-04 10:12:13

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

Re: Votre avis est toujours utile !

re

Quand je mets des photos, je demande dans Configuration --> Options --> Tailles de photo (toutes les dimensions) 
ensuite je vais toujours dans les Options --> Afficher --> Page de la photo -->  Activer l'icône "Tailles de photo"
comme ceci, ton visiteur pourra voir toutes les tailles dont la taille originale qui si elles dépassent les dimensions de ton écran sera ouverte dans une autre fenêtre !!


beauxvoyages.fr/photos (photos), beauxvoyages.fr/jukebox (musiques) et tout nouveau beauxvoyages.fr/camping (camping-car) le tout en version 11.5.0

Hors ligne

#15 2021-06-04 10:29:59

biache
Membre
Jacou
2021-05-29
45

Re: Votre avis est toujours utile !

J'aime bien réduire les choix et donc simplifier pour l'utilisateur
Du coup je n'ai mis en taille que M et XL (en sus de Carré et Miniature fixés par défaut).
Et oui j'ai activer le choix Activer l'icône Tailles de photo

Mais je pensais que le plugin aurait, si la taille est compatible avec le viewport courant, mis XL plutôt que M
Or il ne le fait pas

Hors ligne

Pied de page des forums

Propulsé par FluxBB

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