10 months ago

Protonet/Soul Login Branding anpassen

Category: CSS

Wir haben unsere Protonet Installation per CSS dahingehend angepasst, das Protonet Logo(s) im Login-Bereich sowie im Backend weitgehend entfernt bzw. unterdrückt werden (Grund dafür v.a. die kürzlich kundgemachte Insolvenz, und Werbung machen möchte ich solange nicht, solange die Weiterentwicklung des Systems in den Sternen steht).

Das Setzen der folgenden Zeile in "Settings > System > Personalize" / CSS Feld blendet das Logo im Login aus:


html.signed-out #new_user h2 { display: none; }

Es kann, solange das CSS noch nicht vollständig geladen ist, das Logo kurz einmal aufblitzen. Optimal umgesetzt wäre diese Anpassung sicher, das Logo komplett aus dem Markup zu entfernen, aber das ginge nur mit tiefergehendem Eingreifen ins System, und unser Approach mit CSS ist leicht reversibel und nicht riskant.

Wir haben darüber hinaus noch weitere folgende CSS Anpassungen vorgenommen, im im angemeldeten Backend das Vorkommen von "Protonet" im Menü bzw. Sidepanel zu ersetzen:


// Protonet Schriftzug links oben und links unten entfernen, eigenen beliebigen Namen setzen
.invert.logo-text:after {
   background-image: none !important;
   content: "KOLLEKTIVKREATIV";
   font-size: 19px;
   line-height: 16px;
}

// höheren Abstand links unten wegen längerem Namen
.main-nav.collapsed .nav-logo:after {
    bottom: 190px;
}

// Logofarbe ändern, hier auf grün
.main-nav .nav-logo a {
    color: #5d9e04;
}

// andere Grafik statt dem weissen Hexagon setzen, hier ein grünes Hexagon
.invert.logo-hexagon:before {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MS40MTQyMTsiPiAgICA8cGF0aCBkPSJNMTIuODYxLDcyLjA5OEMxMi40MTksNzEuODQgMTIuMDU5LDcxLjIxOSAxMi4wNTksNzAuNzEyTDEyLjA1OSwyOS4yODJDMTIuMDU5LDI4Ljc3NSAxMi40MTksMjguMTUzIDEyLjg2MSwyNy45MDFMNDkuMTk5LDcuMTlDNDkuNjQxLDYuOTM2IDUwLjM2Miw2LjkzNiA1MC44MDIsNy4xOUw4Ny4xMzksMjcuOUM4Ny41ODMsMjguMTU1IDg3Ljk0MSwyOC43NzcgODcuOTQxLDI5LjI4NEw4Ny45NDEsNzAuNzE0Qzg3Ljk0MSw3MS4yMjEgODcuNTg0LDcxLjg0NSA4Ny4xMzksNzIuMDk3TDUwLjgwMiw5Mi44MTJDNTAuMzYsOTMuMDYyIDQ5LjYzOSw5My4wNjIgNDkuMTk5LDkyLjgxMkwxMi44NjEsNzIuMDk4TDEyLjg2MSw3Mi4wOThaIiBzdHlsZT0iZmlsbDpyZ2IoOTMsMTU4LDQpO2ZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==);
}

Wir haben diese CSS Anweisungen übrigens in ein eigenes, separates CSS geschrieben und auf einen Webserver gelegt. In der SOUL selber laden wir dieses CSS dann mit der Anweisung


@import url("https://domain/pfadzumfile/protonet.css");

Damit kann ich jederzeit Änderungen im CSS machen, ohne in SOUL selber hantieren zu müssen - und ohne Gefahr zu laufen, dort ev CSS zu schreiben, das das Backend "ausser Gefecht setzt" und ich dann nicht mehr in die Settings komme (die SOUL hat auch umfangreichere Selektoren wie :before, ... beim Speichern "geschluckt", das wird hiermit auch umgangen.

  • This article is my 14th oldest. It is 303 words long.