Goobi workflow Unicorn-Theme

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

4 Likes

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

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 :unicorn::rainbow:

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.

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

1 Like

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

1 Like

Winterlich:

3 Likes

:snowflake::snowman::christmas_tree::santa:

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

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

Hallo @jan

vielen Dank für Deine Antwort. :slight_smile:
Ü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

Screenshot 2

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

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

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

Viele Grüße
Anabelle

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

Beste Grüße von

Jan :slight_smile:

1 Like

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

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

1 Like