Piwigo.org

Katryne · 2018-02-26 16:53:28

Bonjour !

Sur mon site de test, j'ai essayé de modifier (un peu, en local) BootStrap DarkRoom. Pas grand chose, rien de structurel, des couleurs de background, les polices ou un border pour les images. Mais il y a une zone qui me résiste, c'est le menu déroulant admin. J'ai une zone de fond qui reste en blanc et je dois ruser pour choper les items de menus qui jouent à cache-cache.

Voilà une image.

Que devrais-je modifier, s'il vous plait ?

http://photos.katrynou.fr/
Piwigo 2.9.3 MERCI POUR LA MAJ !!!
Système d'exploitation: Linux
PHP: 7.0.27 (Montrer les informations) [2018-02-26 16:35:56]
MySQL: 5.5.59-0+deb7u1-log [2018-02-26 16:35:56]
Bibliothèque graphique: External ImageMagick 6.8.9-9

Enfin, quand je dis pas grand chose, yen a quand même un bout ...)

Code:

/* Dans cette fenêtre, écrivez les informations pour configurer votre galerie Piwigo.*/
@font-face {font-family: 'Macondo Swash Caps';src: url(fonts/MacondoSwashCaps-Regular.ttf) format('truetype');font-weight: normal;font-style: normal;}
@font-face {font-family: 'Crafty Girls';src: url(fonts/CraftyGirls.ttf) format('truetype');font-weight: normal;font-style: normal;}
body {
  color: rgb(0,0,0)!important;
  background-color: rgb(189, 183, 172);
}
a, a:visited {color:rgb(255, 207, 9);background: rgb(96, 86, 70));text-decoration: none;font-weight:normal;text-shadow:rgb(0,0,0) -1px -1px 0;}
a:focus {outline-offset: 0;}

a:hover,.navbar-dark .navbar-brand a:hover, .navbar-dark a.navbar-brand:hover {
  color:rgb(0,0,0)!important;text-decoration:none;text-shadow:rgb(255, 207, 9) -1px -1px 0;font-weight:normal;}
.navbar-default .navbar-nav>li>a,
.navmenu-default .navmenu-nav>li>a {color: rgb(255, 207, 9);font-weight:normal;text-shadow:none;}
.jumbotron,
.navbar-contextual .navbar-toggle:focus,
.navbar-contextual .navbar-toggle:hover,
.navbar-main
  {
  background-color: rgb(114, 107, 89)!important;
  color: rgb(255, 207, 9)!important;
    font-weight:normal;
}
.navbar-default,
.navmenu-default,
.navbar-main .navbar-toggle:focus,
.navbar-main .navbar-toggle:hover,
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover 
  {color: rgb(255, 207, 9) !important;rgb(255, 207, 9)
  font-weight:normal;
  text-shadow:none;font-size:2rem;}
div.dropdown-menu {background-color:rgb(255, 207, 9)}
div.navbar-header {max-width:45%;}
.navbar-dark .navbar-brand a, .navbar-dark a.navbar-brand, .navbar-dark .navbar-nav .nav-link {
  color:rgb(255, 207, 9)!important;text-shadow:rgb(0,0,0) -1px -1px 0;text-decoration:none;}
a.navbar-brand, a.navbar-brand.mr-auto {
  float: left;
  padding:1% 0 0 0;
  font-family: 'Crafty Girls';
  color: rgb(255, 207, 9) !important;
  font-weight:normal;
  text-shadow:rgb(0,0,0) -1px -1px 0;
  font-size: 3vw;
  line-height: 5.5rem;
  width:45vw !important;
}
div.nav-breadcrumb.d-inline-flex, nav.navbar.navbar-expand-lg.navbar-contextual.navbar-dark.bg-light.sticky-top.mb-2 div.container {
  color:rgb(255, 207, 9)!important;background-color:rgb(96, 86, 70)!important;}
#iammRPicImg, span#iammRPicNameU {width:20vw;text-align:center;}
.navbar.navbar-default.navbar-contextual.affix-top,
nav.navbar.navbar-default.navbar-fixed-top.navbar-contextual.affix,
  div#infopanel.col-lg-8.col-md-10.col-sm-12.col-xs-12.col-center edul.nav.nav-tabs.nav-justified li.active a
  {background-color: rgb(96,86,70);color:red;}
li#btn-grid.active a {background-color: rgba(0,0,0,.2);}
body#thePicturePage div#the_page div#theImageComment.container {text-align:justify !important;}
ul.nav.navbar-nav li.dropdown.open ul.dropdown-menu {z-index:10100;}
div#tagCloudCanvas canvas#awesomeCloudtagCloudCanvas {max-midth:98%;z-index:80;}
#ato_header, #ato_header_closed:not(.smartpocket),.bg-light {color:rgb(255, 207, 9);
  background-color:rgb(96, 86, 70)!important;background-image:none!important;}
#ato_header > ul > li a,div#ato_header ul li.parent.right.multiviewa.icon-cog-alt.ato-min-1 {
  background-color:rgb(96, 86, 70)!important;color:rgb(255, 207, 9)!important;text-shadow:none;text-decoration:none;}
.card-thumbnail .card-body, .card-thumbnail .card-footer, .card {background-color: rgb(114, 107, 89)!important;}
a.icon-menu {background-color:rgb(96, 86, 70)!important;background-image:none!important;color:rgb(0,0,0)!important;}
div.d-inline-block, div#thumbnails p {color:rgb(0,0,0)!important;text-shadow:rgb(255, 207, 9) -1px -1px 0;}
#osmmap, #theImage img {
 box-shadow: 5px 5px 20px #404040; 
 border-color: rgb(255, 207, 9);
 border-style: solid;
 border-width: 0;
 display: block;
 padding:1%;
margin:1rem auto;
text-align:center;
}
div.imageComment p {line-height:1;}
div.imageComment br {content: "";margin: 0.4em;display: block;font-size: 24%;}

Guillaume C · 2018-02-27 18:01:00

Bonjour,

As-tu essayé ceci :

Code:

#ato_header > ul ul {
  background:#FEFEFE;
  box-shadow:rgba(0, 0, 0, 0.5) 3px 3px 5px;
  display:none;
  left:0;
  margin:0;
  min-width:100%;
  padding:0;
  position:absolute;
  top:27px;
}

Je vois que "OpenStreetMap" fonctionne chez toi, il ne fonctionne plus sur mon site depuis quelques mois, malgré le correctif apporté par Teekay dans la dernière version... Tu as fait quelque chose de spécial ?

Katryne · 2018-02-27 18:25:26

Merci merci. Ya déjà du mieux. J'ai juste changé le #FEFEFE, car c'est justement celui-là que je veux remplacer par le marron. Certes il se -//:---\spam encore en hover et j'ai toujours du mal à choper le menu déroulant avant qu'il se fasse la malle.

Pour OSM, je ne me souviens pas avoir rien fait de spécial, même pas appliqué le correctif dont tu causes : ça marche, c'est tout et ça a marché du 1er coup, je crois bien. Pourquoi pas chez toi ? Peut-être une spécificité d'hébergement, une version de php ... Je ne suis pas un cador du code, j'essaie juste un peu tout en mode itératif, jusqu'à ce que d'un coup, ça corresponde à ce que je veux. Mais après, pour refaire ce que j'ai fait, c'est coton de remonter la piste ...

Guillaume C · 2018-02-27 21:10:31

Il fonctionne mais la carte ne s’affiche pas, comme s’il y avait un calque devant. Je n’ai pas encore pris le temps de chercher d’où vient le problème.

Avec firebug ou équivalent, tu sais afficher le html et sélectionner l’élément qui pose problème, directement dans le code ;-)

Dernière modification par Guillaume C (2018-02-27 21:11:06)

Katryne · 2018-02-27 21:18:16

J'utilise la barre web developer (la vieille, j'aime pas le nouveau binz avec un bouton) mais comme la zone que je cherche à identifier ne se voit qu'en hover, je n'arrive pas à la coincer assez longtemps pour l'encadrer avec l'outil de recherche du css.

Pour la carte, as-tu essayé plusieurs navigateurs, et en désactivant les extensions, pour le cas où ce serait par ex. un cache-pub qui jouerait les empêcheurs de tourner en rond. As-tu un lien, que je vois ?

Guillaume C · 2018-03-03 18:11:15

Bonjour Katryne,
Sorry pour la réponse tardive...
J'ai déjà essayé en désactivant les autres plugins et rien n'y a fait.
Depuis l'autre jour, j'ai testé avec un autre thème et le problème persiste. C'est donc lié à mon installation de Piwigo et non à Bootstrap Darkroom.
J'ai finalement désactivé OpenStreetmap en attendant une prochaine màj du plugin.
Bon WE

flop25 · 2018-03-05 17:28:39

Bonjour

@Katryne
je vois trop tard que la solution a déjà été donnée mais bon là voilà aussi en image ^^
Quand vous avez un menu au survol, vous pouvez toujours faire clique droit Inspecter même si le menu a disparu

Petits conseils sur votre site bien joliment fait:
je mettrais une légère transparence de smenus pour éviter un effet trop agressif du jaune:
div.dropdown-menu {
background-color: rgba(255, 207, 9, 0.9);
}
et pour les détails d'albums :
div.d-inline-block, div#thumbnails p {
color: rgb(0,0,0) !important;
text-shadow: rgb(255, 207, 9) -1px -1px 0;
}
vous avez mis en texte en noir et l'ombre en jaune, mais cela nuit grandement à la lisibilité

pour osm je vous enjoins à créer un nouveau fil de discussion :)

Dernière modification par flop25 (2018-03-05 17:29:18)

Katryne · 2018-03-05 20:43:15

Merci flop25, pour l'appréciation et pour les conseils. C'est difficile de prendre un peu de hauteur quand on est toujours le nez sur le guidon. Et les commentaires sont donc bienvenus.

J'ai beau essayer, je ne trouve pas comment changer le background de ce menu admin en hover. J'ai toujours un fond gris pale pour la fin de la ligne.

J'ai essayé un truc du genre :

Code:

#ato_header > ul ul li >a:hover { background:rgb(96, 86, 70);}

Mais ça ne veut rien savoir

Et toujours des difficultés à choper l'item de menu avant que tout se rétracte.

Et promis ! Si on recause d'OSM avec Guillaume, on ira ailleurs dans un beau fil tout neuf.

flop25 · 2018-03-05 21:11:40

Là vous sélectionnez juste le a, le lien qui a largeur du texte. Ce qu'on vous as indiqué c'est le ul, la liste en entier

Katryne · 2018-03-05 21:27:42

M'sieur m'sieur, je l'ai déjà fait ça. Le ul, je l'ai déjà stylé avec ça, comme on me l'a recommandé :

Code:

#ato_header > ul ul { background:rgb(96, 86, 70);}

Et cela a bien badigeonné de marron tout le fond du menu admin. Quand il est au repos. Car au survol des liens, quand on essaye de sélectionner un item de menu, la fin de la ligne a un background gris pâle.

flop25 · 2018-03-05 21:29:26

Haaaaaa dans ce cas ça doit être le li en hover

flop25 · 2018-03-05 21:30:02

Ps vous avez fait des progrès impressionnants depuis vos débuts ici Félicitations

Katryne · 2018-03-05 21:44:19

Eureka ! Allelujah !

Code:

#ato_header > ul ul li:hover { background:rgb(96, 86, 70)!important;}

Merci de votre soutien !

Piwigo.org

Annonce

#1 2018-02-26 16:53:28

Modification Bootstrap Darkroom

Code:

#2 2018-02-27 18:01:00

Re: Modification Bootstrap Darkroom

Code:

#3 2018-02-27 18:25:26

Re: Modification Bootstrap Darkroom

#4 2018-02-27 21:10:31

Re: Modification Bootstrap Darkroom

#5 2018-02-27 21:18:16

Re: Modification Bootstrap Darkroom

#6 2018-03-03 18:11:15

Re: Modification Bootstrap Darkroom

#7 2018-03-05 17:28:39

Re: Modification Bootstrap Darkroom

#8 2018-03-05 20:43:15

Re: Modification Bootstrap Darkroom

Code:

#9 2018-03-05 21:11:40

Re: Modification Bootstrap Darkroom

#10 2018-03-05 21:27:42

Re: Modification Bootstrap Darkroom

Code:

#11 2018-03-05 21:29:26

Re: Modification Bootstrap Darkroom

#12 2018-03-05 21:30:02

Re: Modification Bootstrap Darkroom

#13 2018-03-05 21:44:19

Re: Modification Bootstrap Darkroom

Code:

Pied de page des forums