Goobi workflow Unicorn-Theme

jan · 1. Oktober 2018 um 14:41

Liebe Community,

auf den Goobi Anwendertagen wurde die Möglichkeit gezeigt, mit benutzereigenem CSS das Aussehen von Goobi workflow anzupassen. Als Gimmick wurde auch ein Theme mit einem Einhorn gezeigt.
Gelungen fand ich das aber nicht wirklich. Deswegen habe ich mich hingesetzt und mit der Unterstützung von @marc.lettau-poelchen ein viel hübscheres Unicorn-Theme für Goobi workflow entworfen.

Sie können es ganz einfach selber verwenden, indem Sie den folgenden CSS Code in der “Benutzerkonfiguration” im Reiter “Allgemein” in die Box “Individuelle CSS Styleangaben” einfügen:

#main {background-color: transparent;}
#main .breadcrumbs {background: #ffd2e9}

#navigation {background: #ff99cc}

#navigation #brand {
  background-image: url(https://community.goobi.io/uploads/default/original/1X/00cbc0912dde3df139c0a9ead97118baf05e56ca.png);
    background-repeat: no-repeat; 
  background-position: left center;
}

body {
  background-image: url(https://community.goobi.io/uploads/default/original/1X/8a18632f4348f5f62f7d9ba0adc38a731a7a8838.jpeg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}

a {color:#666};

#navigation .dropdown-menu  {border-color: #ff99cc}
#navigation .user .dropdown.open {border-color: #ff99cc}
#navigation .user .dropdown > a:hover {background: #FE3EA0}
#navigation .user .icon-nav > li > a:hover  {background: #FE3EA0}
#navigation .user .dropdown.open {background: #FE3EA0}
#navigation .main-nav > li > a:hover {background: #FE3EA0}
#navigation .main-nav > li.open > a {background: #FF6BB6}
#navigation .main-nav > li.open > a:hover {background: #FE3EA0}
#navigation .main-nav > li > a .caret {border-top-color: #fff}
#navigation .dropdown-menu > li > a:hover {background: #FF6BB6}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus a:hover {background: #FE3EA0}

.box.box-color .box-title {border-color: #ff99cc; background: #ff99cc}
.box.box-bordered.box-color .box-title {border-color: #ff99cc}
.box.box-bordered.box-color .box-content  {border-color: #ff99cc}

.alert-info {background-color: #FFD2E9; color:#666;}

.btn.btn-primary {background-color: #ff6bb6}
.btn.btn-primary:hover{background-color: #fe3Ea0}

#metseditorImage {background-color: transparent} 
#metseditorImageImage {background: transparent}
#BildArea2 .box-content {background: transparent}
#pageSelectBox .box-title {background-color:white;} 
#pagRight .box-title {background-color:white;} 
#left {border-right-color:#FE3EA0}
#metseditorImage .btn {background:transparent;}
#metseditorImage .btn.btn-primary {background:#ff6bb6;}

Anregungen und Modifikationen bitte gerne hier in den Thread. Inspirieren lassen habe ich mich hier.

Viele Grüße von

Jan

Schlueter_HAAB · 1. Oktober 2018 um 15:13

Hallo Jan,
steht die Box “Individuelle CSS Styleangaben” allen Nutzern zur Verfügung? Oder muss man sich diese Möglichkeit erst vom Admin freigeben lassen?

Viele Grüße, Andreas

jan · 1. Oktober 2018 um 15:18

Hallo Andreas,

die Funktionalität ist noch recht neu, eventuell ist die Funktion bei Euch in der Einrichtung noch nicht installiert. Wenn es installiert ist findest Du es hier:

Wenn nicht, dann schreib fix und wir installieren das Update.

Liebe Grüße,

Jan

steffen · 1. Oktober 2018 um 15:52

Ihr spinnt doch. Kaum bin ich aus’m Büro …

Das habt Ihr hoffentlich nicht während der Arbeitszeit gemacht.

Aber gut sieht’s aus.

jan · 1. Oktober 2018 um 15:55

Ich bin jetzt laut Uptime meines Rechners seit 11h und 16min hier, wenn ich davon die Mittagspause und das Styling abziehe, dann sollte ich auf meine 8h kommen

steffen · 1. Oktober 2018 um 15:55

Man achte vor allem auf die Details. Sogar das Goobi-Logo hab ihr ersetzt. Verbrecher!

Schlueter_HAAB · 20. Dezember 2018 um 07:01

Winterlich:

jan · 20. Dezember 2018 um 07:13

Anabelle · 23. März 2022 um 11:03

Hallo Jan,

Danke für den CSS Code. Ich haben den Code für ein eigenes Farbeschem angepasst und die Umsetzung über die “Benutzerkonfiguration” hat gut funktioniert.

Im METS-Editor wird bei mir in der Navigation und bei “Vorheriges Bild”/“Nächstes Bild” die voreingestellte Farbe (hellblau) nur teilweise durch die gewünschte Farbe (dunkelblau #003366) ersetzt. Dunkelblau werden nur “Pagnierung”, “Strukturdaten” und “Metadaten” angezeigt. Das andere sind im Screenshot Schwärzungen. Auf den anderen Seiten werden die Navigationsleiste und “Vorheriges Bild”/“Nächstes Bild” vollständig in dunkelblau angezeigt.

Was müsste ich noch für den METS-Editor ergänzen bzw. verändern?

Hier der von mir veränderte Code (Gelöscht wurden nur die Zeilen zu den background-images):

#main {background-color: transparent;}
#main .breadcrumbs {background: #fafafa}

#navigation {background: #003366}

a {color:#000000};

#navigation .dropdown-menu  {border-color: #cccccc}
#navigation .user .dropdown.open {border-color: #cccccc}
#navigation .user .dropdown > a:hover {background: #cccccc}
#navigation .user .icon-nav > li > a:hover  {background: #cccccc}
#navigation .user .dropdown.open {background: #cccccc}
#navigation .main-nav > li > a:hover {background: #cccccc}
#navigation .main-nav > li.open > a {background: #cccccc}
#navigation .main-nav > li.open > a:hover {background: #cccccc}
#navigation .main-nav > li > a .caret {border-top-color: #fff}
#navigation .dropdown-menu > li > a:hover {background: #cccccc}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus a:hover {background: #003366}

.box.box-color .box-title {border-color: #cccccc; background: #003366}
.box.box-bordered.box-color .box-title {border-color: #cccccc; color: #000000}
.box.box-bordered.box-color .box-content  {border-color:#cccccc}

.alert-info {background-color: #003366; color:#ffffff;}

.btn.btn-primary {background-color: #003366}
.btn.btn-primary:hover{background-color: #000000}

#metseditorImage {background-color: transparent} 
#metseditorImageImage {background: transparent}
#BildArea2 .box-content {background: transparent}
#pageSelectBox .box-title {background-color:white;} 
#pagRight .box-title {background-color:white;} 
#left {border-right-color:#cccccc}
#metseditorImage .btn {background:transparent;}
#metseditorImage .btn.btn-primary {background: #003366;}

Vielen Dank und viele Grüße
Anabelle

jan · 23. März 2022 um 12:12

Hallo @Anabelle

hier musst Du mal nach den entsprechenden Selektoren (CSS-IDs oder CSS-Klassen) gucken. Es kann sehr gut sein, dass dort die Struktur anders ist und mehr Anweisungen benötigt werden.

Weißt Du wie Du an die Informationen kommst?

Viele Grüße von

Jan

Anabelle · 23. März 2022 um 14:18

Hallo @jan

vielen Dank für Deine Antwort.
Über den Inspektor habe ich mir die Klassen anzeigen lassen und tatsächlich wird bei einigen Selektoren noch die alte Farbe angezeigt:

Hier die CSS-Selektoren:
#pageMenu (Screenshot 1)
#navigation (richtige Farbe)
#prevImage (Screenshot 2)
#nextImage (Screenshot 2)

Und die CSS-Pfade:

html body main div#pageWrapper.page-wrapper div#pageMenu.page-menu
html body main div#pageWrapper.page-wrapper div#pageMenu.page-menu nav#navigation.page-menu__navigation (richtige Farbe)
html body main div#pageWrapper.page-wrapper div#pageContentWrapper.page-content-wrapper div#pageContentRight.page-content__right.ui-resizable div.page-content__right-inner span#mainimagearea form#openseadragonform div#objectControlWrapper.image__object-control-wrapper nav#imageNavigation.image__navigation ul.clean li button#prevImage.btn.btn–icon.btn–icon-blue
html body main div#pageWrapper.page-wrapper div#pageContentWrapper.page-content-wrapper div#pageContentRight.page-content__right.ui-resizable div.page-content__right-inner span#mainimagearea form#openseadragonform div#objectControlWrapper.image__object-control-wrapper nav#imageNavigation.image__navigation ul.clean li button#nextImage.btn.btn–icon.btn–icon-blue

Ich weiß leider nicht, wie die richtige Syntax für die “Benutzerkonfiguration” lautet.
Mit #metseditorImage pageMenu.page-menu {background: #003366;} bzw .#metseditorImage .btn.btn–icon.btn–icon-blue {background-color: #003366;} hat es nicht geklappt.

Vielen Dank für Deine Hilfe!
Anabelle

Sreenshot 1

Anabelle · 23. März 2022 um 14:20

Screenshot 2

Anabelle · 24. März 2022 um 11:07

Hallo @jan
vielen Dank noch mal für den Hinweis auf die Selektoren! Jetzt hat es funktioniert.

.btn.btn–icon.btn–icon-blue {background-color: #003366}

.page-menu {background-color: #003366;}

Viele Grüße
Anabelle

jan · 25. März 2022 um 07:44

Hallo @Anabelle

bedeutet das, dass jetzt alles so ist wie Du es Dir vorgestellt hast? Kannst Du eventuell das finale CSS dann hier mit einem Screenshot und einer kleinen Erklärung dazu posten? Fände ich ganz spannend

Beste Grüße von

Jan

Anabelle · 28. März 2022 um 16:19

Hallo @jan ,
ja, mit dem ergänzten Code hat es gut funktioniert, die gewünschten Hintergründe zu verändern. Die orangen und grauen Boxen wurden beibehalten.
Teilweise wurde auch die Schriftfarbe in Schwarz (#000000) geändert (s. Kommentare im Code), u.a. Boxeninhalte, z.B. Metadatenbox metseditor oder Benutzerkonfiguration. Wenn dieses nicht gewünscht ist, kann einfach die Zeile gelöscht werden.

Viele Grüße
Anabelle

Vorgehen: Benutzername > Benutzerkonfiguration > Allgemein > Individuelle CSS Styleangaben > CSS Code > Speichern

Hier der Code:

/* Blau als Hintergrund u.a. für Navigation, Buttons und einige Boxen: #003366 (Pantone 294 RGB 0/51/102); Blaugrau: #cccccc (RGB 204/204/204) dazu 90 % Tint Blaugrau für Breadcrumbs: #fafafa;
Weiß: #ffffff; Schwarz u.a. für btn.btn-primary:hover: #000000 */

#main {background-color: transparent;}
#main .breadcrumbs {background: #fafafa}

#navigation {background: #003366}

a {color:#000000};

#navigation .dropdown-menu {border-color: #cccccc}
#navigation .user .dropdown.open {border-color: #cccccc}
#navigation .user .dropdown > a:hover {background: #cccccc}
#navigation .user .icon-nav > li > a:hover {background: #cccccc}
#navigation .user .dropdown.open {background: #cccccc}
#navigation .main-nav > li > a:hover {background: #cccccc}
#navigation .main-nav > li.open > a {background: #cccccc}
#navigation .main-nav > li.open > a:hover {background: #cccccc}
#navigation .main-nav > li > a .caret {border-top-color: #fff}
#navigation .dropdown-menu > li > a:hover {background: #cccccc}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus a:hover {background: #003366}

.box.box-color .box-title {border-color: #cccccc; background: #003366}
.box.box-bordered.box-color .box-title {border-color: #cccccc; color: #000000}
.box.box-bordered.box-color .box-content {border-color:#cccccc}
.form-control {color:#000000;} /* Schriftfarbe von Boxeninhalt u.a. Metadatenbox metseditor, Benutzerkonfiguration*/

.alert-info {background-color: #003366; color:#ffffff;}

.btn.btn-primary {background-color: #003366}
.btn.btn-primary:hover{background-color: #000000}
.btn.btn–icon.btn–icon-blue {background-color: #003366} /* Buttons metseditor */

.page-menu {background-color: #003366;} /* Navigation metseditor /
.page-content-wrapper {color:#000000;} / teilweise Schriftfarbe metseditor Mitte und Rechts */

#metseditorImage {background-color: transparent}
#metseditorImageImage {background: transparent}
#BildArea2 .box-content {background: transparent}
#pageSelectBox .box-title {background-color:white;}
#pagRight .box-title {background-color:white;}
#left {border-right-color:#cccccc}
#metseditorImage .btn {background:transparent;}
#metseditorImage .btn.btn-primary {background: #003366;}