Hinweis aus dem Team: Hintergrund selber gestalten.

Seit geraumer Zeit gibt es teamintern einen neuen Trend. “Wer verschönert wie seine Communote-Nutzeroberfläche?”. Egal ob ein einfaches Holzmuster oder passend zur Jahreszeit, eine Winterlandschaft. Da Communote bisher kein Theming anbietet, zeigen wir heute wie sie ihr eigenes Communote Theme selber gestalten können. Alles was Sie dafür brauchen sind wenige CSS-Kenntnisse, einen modernen Webbrowser (Mozilla Firefox, Google Chrome oder Opera) und eine Style-Erweiterung (Addon) für diesen.

Zuerst installieren Sie das Style-Addon in ihrem Browser. Es gibt verschiedene Addons folgende sind uns bekannt: Include CSS für Opera, Stylish für Chrome und Firefox.

Wie sie eine Erweiterung im Firefox installieren, können Sie hier detailiert nachlesen. Wie sie Communote unter Opera gestalten können, können Sie in dem Artikel unseres Kollegen Adrian Mörchen nachlesen. Wie sie mit Include CSS unter Opera Seiten Layouts bearbeiten können zeigt ihnen dieses kurze Video. Ich werde mich in diesem Artikel am Chrome orientieren, die Änderungen sollten in allen Browsern gleich funktionieren.

Um im Google Chrome eine Erweiterung zu installieren, klicken Sie auf das Schraubenschlüssel-Symbol im oberen rechten Rand. Danach wählen Sie den Punkt “Tools” und darunter den Punkt “Erweiterungen”. Es öffnet sich nun das Übersichtfenster für alle bisher installierten Addons. Wenn Sie noch keine Erweiterungen installiert haben, weist sie das Fenster darauf hin und bietet ihnen eine Link zur Galerie an. Klicken Sie auf den Link und suchen Sie in der Galerie nach “Stylish”. Folgen Sie den Anweisungen.

Nach dem Sie das jeweilige Addon installiert haben, öffnen wir dieses und legen einen neuen Stil an. Im Chrome klicken wir wieder auf das Schraubenschlüssel-Symbol und danach auf “Tools” und “Erweiterungen”. Jetzt sehen wir, dass das Übersichtfenster uns “Stylish” anzeigt. Um einen neuen Stil anzulegen klicken Sie auf “Optionen” unterhalb von “Stylish”. Klicken Sie danach auf “Write a Style”. Nun öffnet sich das Editorfenster von “Stylish”. Sie haben nun die Möglichkeit dem neuen Stil einen Namen zugeben und den neuen Stil zu aktivieren.

Um sich die oben gezeigte Winterlandschaft anzeigen zu lassen, müssen sie folgenden CCS-Code einfügen:

body{
background-image: url(http://good-wallpapers.com/pictures/4501/snow_stranges_wallpaper.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
}

body #tinymce {
background-image: none;
}

#cn-body-wrapper, #cn-header {
background-color: rgba(235, 233, 230, 0.7);
}

#cn-header .cn-topmenu-arrow, #cn-topmenu-arrow {
display: none;
}

Unterhalb des “Code”-Eingabefelds, in welches sie den oben gezeigten CSS-Code eingefügt haben, klicken Sie hinter “Anwenden auf:” auf den “genauer”-Button. Wählen Sie in den nun angezeigten Drop-Down-Menü “URLs beginnend mit” aus. In das Eingabefeld dahinter geben Sie die URL zu ihrer Communote Installation. Egal ob die ihres Online-Accounts oder ihrer Inhouse-Installation. Zum Schluss klicken Sie auf Speichern. Nun können Sie “Stylish” schließen und ihr Communote sollte nun so aussehen wie das Bild oben.

Firefox- Nutzer fügen den gleichen CSS-Code ein ergänzen aber zu Beginn noch eine Zeile:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("Domain zu ihrem Communote, z.B. communote.com"){
    body{
     background-image: url(http://good-wallpapers.com/pictures/4501/
snow_stranges_wallpaper.jpg);
     background-repeat:no-repeat;
     background-attachment: fixed;
     }

    body #tinymce {
     background-image: none;
     }

    #cn-body-wrapper, #cn-header {
     background-color: rgba(235, 233, 230, 0.7);
     }

    #cn-header .cn-topmenu-arrow, #cn-topmenu-arrow {
     display: none;
    }
}

Sie möchten keine Winterlandschaft? Suchen Sie sich, am besten Online z.B. hier, ein Bild ihrer Wahl und ersetzten die Url in “background-image: url(..);” mit der Ziel-Url ihres Wunschbildes. Mit den rgba-Angaben von #cn-body-wrapper und #cn-header können Sie noch Einfluss auf die Farbe des Inhaltbereichs nehmen.

Sollte etwas nicht so aussehen wie Sie es sich vorgestellt haben, dann deaktivieren Sie ihren Stil und erstellen einfach einen neuen.

Wir wünschen ihnen viel Spaß bei der Umgestaltung ihres Communote.

The post Hinweis aus dem Team: Hintergrund selber gestalten. appeared first on Communote.