•  » Styles
  •  » Modification Bootstrap Darkroom

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

Katryne
Membre
Provence
2016-12-03
228

Modification Bootstrap Darkroom

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.

https://image.prntscr.com/image/7gjSoBGCTOmbds1QdtOVHA.png

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%;}

https://photos.revestou.fr/  (Test même config: http://photos.katrynou.fr/)
Piwigo 2.9.4 -  Système d'exploitation: Linux
PHP: 7.2.1 - MySQL: 5.5.59-0+deb7u1-log
Bibliothèque graphique: External ImageMagick 6.8.9-9

Hors ligne

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

Guillaume C
Membre
2014-04-08
125

Re: Modification Bootstrap Darkroom

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 ?

Hors ligne

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

Katryne
Membre
Provence
2016-12-03
228

Re: Modification Bootstrap Darkroom

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 montre 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 ...


https://photos.revestou.fr/  (Test même config: http://photos.katrynou.fr/)
Piwigo 2.9.4 -  Système d'exploitation: Linux
PHP: 7.2.1 - MySQL: 5.5.59-0+deb7u1-log
Bibliothèque graphique: External ImageMagick 6.8.9-9

Hors ligne

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

Guillaume C
Membre
2014-04-08
125

Re: Modification Bootstrap Darkroom

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)

Hors ligne

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

Katryne
Membre
Provence
2016-12-03
228

Re: Modification Bootstrap Darkroom

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 ?


https://photos.revestou.fr/  (Test même config: http://photos.katrynou.fr/)
Piwigo 2.9.4 -  Système d'exploitation: Linux
PHP: 7.2.1 - MySQL: 5.5.59-0+deb7u1-log
Bibliothèque graphique: External ImageMagick 6.8.9-9

Hors ligne

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

Guillaume C
Membre
2014-04-08
125

Re: Modification Bootstrap Darkroom

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

Hors ligne

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

flop25
Équipe Piwigo
2006-07-06
6381

Re: Modification Bootstrap Darkroom

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


Images attachées

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

Hors ligne

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

Katryne
Membre
Provence
2016-12-03
228

Re: Modification Bootstrap Darkroom

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.

https://framapic.org/tUq9GM73uVvU/qQaBUSCW54DJ.png

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.


https://photos.revestou.fr/  (Test même config: http://photos.katrynou.fr/)
Piwigo 2.9.4 -  Système d'exploitation: Linux
PHP: 7.2.1 - MySQL: 5.5.59-0+deb7u1-log
Bibliothèque graphique: External ImageMagick 6.8.9-9

Hors ligne

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

flop25
Équipe Piwigo
2006-07-06
6381

Re: Modification Bootstrap Darkroom

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

Hors ligne

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

Katryne
Membre
Provence
2016-12-03
228

Re: Modification Bootstrap Darkroom

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.


https://photos.revestou.fr/  (Test même config: http://photos.katrynou.fr/)
Piwigo 2.9.4 -  Système d'exploitation: Linux
PHP: 7.2.1 - MySQL: 5.5.59-0+deb7u1-log
Bibliothèque graphique: External ImageMagick 6.8.9-9

Hors ligne

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

flop25
Équipe Piwigo
2006-07-06
6381

Re: Modification Bootstrap Darkroom

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

Hors ligne

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

flop25
Équipe Piwigo
2006-07-06
6381

Re: Modification Bootstrap Darkroom

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

Hors ligne

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

Katryne
Membre
Provence
2016-12-03
228

Re: Modification Bootstrap Darkroom

Eureka ! Allelujah !

Code:

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

Merci de votre soutien !


https://photos.revestou.fr/  (Test même config: http://photos.katrynou.fr/)
Piwigo 2.9.4 -  Système d'exploitation: Linux
PHP: 7.2.1 - MySQL: 5.5.59-0+deb7u1-log
Bibliothèque graphique: External ImageMagick 6.8.9-9

Hors ligne

  •  » Styles
  •  » Modification Bootstrap Darkroom

Pied de page des forums

Propulsé par FluxBB