Anpassung / Customization Phoca Gallery

[phg4thg]

Kurz dazwischen gequatscht :-)

Zurzeit sehe ich in der user.css es so:

Code: Select all

#.pswp__ui--fit, .pswp__top-bar {
#  background-color: #000000 !important;
#}
#.pswp__bg {
#  background: #151515 !important;
#}

Wieso sind da jetzt # vor den Zeilen?
Codes haben dadurch keine Wirkung.

das war der Sinn, ich wollte die Anpassung in der user.css deaktivieren, damit man sehen kann, dass die Theme-Umschaltung bei mir nicht tut.

Wenn ich Benno richtig verstehe, sollte das eigentlich gehen?

Grüße thg

[phg4thg]

In beiden Fällen ist die Detailansicht:

okay, bei mir ist sie immer hell, ich hätte grundsätzlich erwartet, dass sich auch die Detail-Ansicht je nach Mode-Switch ändert.

Und so willst Du es, wenn ich Dich richtig verstanden habe, doch haben?!

Falls ja, schalte zum Testen mal die /media/com_phocagallery/css/custom/custom.css
ab.

Wenn's von Anfang an so gewesen wäre, hätte ich ja nicht nach einer Lösung gesucht.

Die aktuell in der user.css auskommentierten Zeilen ändern die Farben in dunkel, aber der Mode-Switch dürfte, wenn die Zeilen aktiv sind, dann sowieso nichts mehr bewirken, richtig?


Grüße thg

[christine]

okay, bei mir ist sie immer hell, ich hätte grundsätzlich erwartet, dass sich auch die Detail-Ansicht je nach Mode-Switch ändert.

a) Ja, weil Du in der custom.css stehen hast:

Code: Select all

.pswp__bg {
  background: #FFFFFF !important;
}

Und in der user.css, wie sie derzeit sind, die Codes ungültig sind. Die mit den #

b) Auskommentieren tut man so: Hier nur irgendeine Klasse als Beispiel:

/*.irgendwas {
hier ist ein code
hier ist ein code
}*/

c) wenn Du in der user.css [siehe Beispiel bei a] eine andere Farbe nimmst, wird diese genommen!

Weil die user.css wird NACH der custom.css geladen und hat daher Vorrang.
Deswegen der Vorschlag von Benno, die custom.css zu de-aktivieren.

d) also weg mit dieser custom.css und in der user.css Codes richtig stellen.

Liebe Grüße
Christine

[phg4thg]

okay, bei mir ist sie immer hell, ich hätte grundsätzlich erwartet, dass sich auch die Detail-Ansicht je nach Mode-Switch ändert.

a) Ja, weil Du in der custom.css stehen hast:

Code: Select all

.pswp__bg {
  background: #FFFFFF !important;
}

die custom.css greift meines Wissens nicht (siehe: https://www.phoca.cz/documentation/86-j ... g-user-css), das war jedenfalls mein erster Versuch die Farben dunkel zu bekommen, aber egal was ich dort eingetragen hatte, änderte sich die Farbe nicht.

Leider finde ich nicht mehr, wo ich die custom.css angelegt habe, aber gezogen wird sie offenbar sowieso nicht, denn wenn ich den Background aus der user.css rauswerfe wird der weiß und wenn er drin ist, dunkel grau (0x151515), so wie in der user.css definiert.

Und in der user.css, wie sie derzeit sind, die Codes ungültig sind. Die mit den #

b) Auskommentieren tut man so: Hier nur irgendeine Klasse als Beispiel:

/*.irgendwas {
hier ist ein code
hier ist ein code
}*/

Uuups, zulange nix mit dem Zeug gemacht und zuviel gebashed :-D

c) wenn Du in der user.css [siehe Beispiel bei a] eine andere Farbe nimmst, wird diese genommen!

Weil die user.css wird NACH der custom.css geladen und hat daher Vorrang.
Deswegen der Vorschlag von Benno, die custom.css zu de-aktivieren.

d) also weg mit dieser custom.css und in der user.css Codes richtig stellen.

Ja, weiß ich doch, hatte bestimmt irgendwo geschrieben.

Dann ist das aber immer dunkel (was in diesem Fall völlig okay ist), aber meinem Verständnis nach sollte sich die Farbe der Detail-Ansicht abhängig vom Theme-Switcher ändern.


Der Theme-Umschalter scheint wohl in der "/media/templates/site/phoca_premiere/js/template.js" gemacht zu werden, hab' mal versucht, das so zu erweitern, dass dort beim allerersten Besuch (also noch kein Cookie vorhanden) automatisch "Dark" gewählt wird, tut aber auch nicht.

Code: Select all

    /**
     * Light Dark Theme Switcher
     */

    const forceTheme = document.documentElement.getAttribute('data-bs-theme-force');

    if (!forceTheme) {

      const getStoredTheme = () => localStorage.getItem('theme');
      const setStoredTheme = theme => localStorage.setItem('theme', theme);
    
      const getPreferredTheme = () => {
        const storedTheme = getStoredTheme();
        if (storedTheme) {
          return storedTheme;
        } else {
          /* Voreinstellung auf dunkel */
          return 'dark';
        }
    
        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
      }
      ...

Muss ich eben die "Force"-Einstellung nutzen und dann ist es immer dunkel ...


Grüße thg

[Benno]

Hi,

Dann ist das aber immer dunkel (was in diesem Fall völlig okay ist), aber meinem Verständnis nach sollte sich die Farbe der Detail-Ansicht abhängig vom Theme-Switcher ändern.

Nein, wie oben geschrieben ändert der Light- Dark Mode Switch nichts am Hintergrund der Detail-Ansicht Photoswipe.
Bilder werden nun mal mit dunklem Hintergrund neutraler repräsentiert, als mit hellem Hintergrund. Das ist ausdrücklich meine persönliche Meinung, die aber in vielen Museen Fakt ist... Ich war gerade in der Banksy Ausstellung hier in Bielefeld (Großartig!! und schwerstens empfehlenswert) und da war es auch nicht anders...

Freundliche Grüße,
Benno

[christine]

Hallo,

die custom.css greift meines Wissens nicht, das war jedenfalls mein erster Versuch die Farben dunkel zu bekommen, aber egal was ich dort eingetragen hatte, änderte sich die Farbe nicht.

Doch, die greift. Wenn ich dort eine andere Farbe reingeben würde (bleiben wir beim Beispiel: .pswp__bg) und in der user.css steht nichts davon, wird es von der custom.css genommen.

Es wird ja sowohl die custom.css als auch die user.css geladen.
Hast ja selber gesagt, dass Du Punkt c) weißt.

Beispiele: Beim Template Cassiopeia erstellt man eine user.css.
Es gibt auch Templates die eine custom.css hat. (Helix, Gantry) etc.
Man braucht aber nicht beide.

Liebe Grüße
Christine

[phg4thg]

Hi,

Dann ist das aber immer dunkel (was in diesem Fall völlig okay ist), aber meinem Verständnis nach sollte sich die Farbe der Detail-Ansicht abhängig vom Theme-Switcher ändern.

Nein, wie oben geschrieben ändert der Light- Dark Mode Switch nichts am Hintergrund der Detail-Ansicht Photoswipe.
Bilder werden nun mal mit dunklem Hintergrund neutraler repräsentiert, als mit hellem Hintergrund. Das ist ausdrücklich meine persönliche Meinung, die aber in vielen Museen Fakt ist... Ich war gerade in der Banksy Ausstellung hier in Bielefeld (Großartig!! und schwerstens empfehlenswert) und da war es auch nicht anders... :idea:

okay, das erklärt, weshalb der Mode-Switch nichts am Aussehen ändert.

Trotzdem ist und bleibt der Hintergrund bei mir weiß mit mittel-grauen Balken oben und unten, wenn ich die Anpassungen in den CSS-Dateien lösche.

[Benno]

Hi,

Trotzdem ist und bleibt der Hintergrund bei mir weiß mit mittel-grauen Balken oben und unten, wenn ich die Anpassungen in den CSS-Dateien lösche.

Siehe: https://www.phoca.cz/forum/viewtopic.p ... 74#p183074

Die PG Standard Detail-Ansicht Photoswipe ist dunkel und nicht 'weiß mit mittel-grauen Balken oben und unten'. Überprüfe Deine .css Files.

Freundliche Grüße,
Benno

[phg4thg]

Hallo,

die custom.css greift meines Wissens nicht, das war jedenfalls mein erster Versuch die Farben dunkel zu bekommen, aber egal was ich dort eingetragen hatte, änderte sich die Farbe nicht.

Doch, die greift. Wenn ich dort eine andere Farbe reingeben würde (bleiben wir beim Beispiel: .pswp__bg) und in der user.css steht nichts davon, wird es von der custom.css genommen.

Meine Aussage bzgl. der custom.css dürfte falsch gewesen sein, ich hatte da wohl nie mit den Farben experimentiert, sondern nur mit dem "ph-si-image", was aber nicht geklappt hatte.

Es wird ja sowohl die custom.css als auch die user.css geladen.
Hast ja selber gesagt, dass Du Punkt c) weißt.

Jupp, genauso ist das!

Die custom.css habe ich nun auch "wiedergefunden":
Components -> Phoca Gallery -> Styles -> Custom

Dort hatte ich zunächst Ausblenden des Icons im dem TNs drin was nicht funktionierte:

Code: Select all

.ph-si-image {
  display: none;
}

Erst der Umzug in die user.css führte zum Erfolg, daher habe ich dann auch dort wg. dem Hintergrund probiert.

Beispiele: Beim Template Cassiopeia erstellt man eine user.css.
Es gibt auch Templates die eine custom.css hat. (Helix, Gantry) etc.
Man braucht aber nicht beide.

Okay.

Ich habe jetzt mal in der custom.css eingetragen:

Code: Select all

.pswp__bg {
  background: #FF0000 !important;
}
body .pswp__caption__center {
  font-size: 16px;
  line-height: 20px;
  color: #0000FF;
}
body .pswp__button--share {
  display: none;
}

und gleichzeitig die Farb-Einträge aus der user.css rausgenommen:

Code: Select all

.phModParticlesItemContent  {
  text-align: right;
}
.ph-si-image {
  display: none;
}

Ergebnis ist, das der Hintergrund rot ist und der Text blau ist, so wie es definiert ist.
Nur, ich kann mich nicht erinnern die weißen Werte je in der custom.css eingetragen hatte, damit habe ich mich erst sehr viel später beschäftigt, weil das Weiß nicht zum Dark-Mode passen wollte.

Aber egal, ich mache die custom.css nun leer und schreibe alles in die user.css, dann ist das Thema erledigt!

Interessant ist, dass der Eintrag:

Code: Select all

.pswp__button--share {
  display: none;
}

in der custom.css funktioniert, in der user.css aber zwingend den "!important" braucht, muss ich nicht verstehen, beim ph-si-image geht's auch so.

Vielen lieben Dank nochmal für Eure Mühe und Eure Geduld, eine neue Frage ist schon aufgekommen, aber dafür mache ich einen neuen Thread mit passendem Titel.


Viele Grüße thg

[phg4thg]

Die user.css sieht nun so aus:

Code: Select all

/* Banner-Text der Start-Seite rechts */
.phModParticlesItemContent  {
  text-align: right;
}

/* kein Icon in den Thumbnails der Uebersichtsseite */
.ph-si-image {
  display: none;
}
/* kein Teilen-Button in der Detail-Ansicht */
.pswp__button--share {
  display: none !important;
}

/* Detail-Ansicht: Text tuerkis, top-bottom schwarz, Hintergrund dunkel-grau */
.pswp__caption__center {
  font-size: 16px !important;
  line-height: 20px !important;
  color: #64C8EB !important;
}
.pswp__ui--fit, .pswp__top-bar {
  background-color: #000000 !important;
}
.pswp__bg {
  background: #151515 !important;
}