Leider unterstützt Communote von Haus aus kein Theming, also das Anpassen der Oberfläche an die eigenen Bedürfnisse. Über spezielle Kundenanpassungen ist dies natürlich trotzdem möglich.

Fast jeder Browser ermöglicht es über Erweiterungen zusätzliches CSS zu einer Seite zu laden. So ist es mit wenigen Befehlen möglich das Standardlayout von Communote etwas aufzuhübschen. Im folgenden möchte ich einfach ein paar Beispiele zeigen.

Beispiel 1: Etwas Weihnachtliches

Das Beispiel zeigt Communote in einem etwas weihnachtlichen Aussehen. Folgende Einstellungen wurden verändert:

1. Hintergrundbild (Das Bild stammt von http://www.backgroundlabs.com/detail/link-131.html)
2. Etwas Transparenz und Farbe im Hauptbereich
3. Der Header wurde etwas schmaler gemacht (Mehr Platz für den Inhalt!)

Um den Effekt zu erreichen ist folgender CSS-Code notwendig:

body{
 background-image: url(http://www.backgroundlabs.com/backgrounds/131.jpg);
 background-attachment: fixed;
}
#cn-body-wrapper{
 background-color: rgba(255, 140, 120, 0.75);
 margin-top: 15px !important;
 -moz-box-shadow: 0px 1px 4px #000 !important;
 box-shadow: 0px 1px 4px #000 !important;
}
#cn-header .cn-topmenu-arrow, #cn-topmenu-arrow {
display: none;
}
body#tinymce {
     background-image: none;
}
#cn-header #cn-topmenu {
    top: 8px !important;
}
#cn-logo img {
    display: none !important;
}
#cn-header {
    height: 35px;
    background-color: rgba(255, 255, 255, 0.85) !important;
}
#cn-header .cn-topmenu-arrow, #cn-topmenu-arrow {
    display: none;
}
#cn-communote #cn-header {
    -moz-box-shadow: 0px 1px 4px #000 !important;
    box-shadow: 0px 1px 4px #000 !important;
}
#cn-logout {
    position: absolute;
    right: 165px;
    top: 22px;
    z-index: 40;
}
#cn-footer-communote img, #cn-header img{
 display: none;
}

Beispiel 2: Klassischer Holzhintergrund

Das erste Beispiel zeigt ziemlich viele Veränderungen. Das zweite Beispiel ist etwas schlichter und verändert lediglich den Hintergrund zu einem klassischen Parkett-Laminat-Holz-Look. Das Bild stammt von http://stenosis.deviantart.com/art/Wood-Wallpaper-59069393

body{
background-image: url(https://adrian.moe/rchen/wp-content/gallery/communote/background_wood.jpg);
 background-attachment: fixed;
}
#cn-body-wrapper {
 background-color: rgba(235, 233, 230, 0.7);
}
#cn-header .cn-topmenu-arrow, #cn-topmenu-arrow {
display: none;
}
body#tinymce {
     background-image: none;
}
#cn-footer-communote img{
  display: none;
}

Beispiel 3: Winterlandschaft als Fotohintergrund

Auch hochauflösende Fotos eignen sich oft als Hintergrund. So macht das Arbeiten doch gleich viel mehr Spaß. Das Foto stammt von http://good-wallpapers.com/nature/4501

body{
background-image: url(http://good-wallpapers.com/pictures/4501/snow_stranges_wallpaper.jpg);
 background-repeat: no-repeat;
 background-attachment: fixed;
}
#cn-body-wrapper {
 background-color: rgba(235, 233, 230, 0.7);
}
#cn-header .cn-topmenu-arrow, #cn-topmenu-arrow {
display: none;
}
body#tinymce {
     background-image: none;
}
#cn-footer-communote img{
  display: none;
}

Kurzanleitung: Wie geht das?

Für die meisten Browser gibt es Erweiterungen, um solche Effekte erzielen zu können. Hier ein paar Beispiele:

• Opera: Easy User CSS
• Firefox: Stylish
• Chrome: Stylish
• Alle Anderen: Weiß ich nicht.

Nach der Installation von Easy User CSS in Opera kann das Theme wie folgt angewandt werden:

1. Seite besuchen, die man anpassen will, z.B. https://www.communote.com/microblog/global
2. Easy User CSS-Knopf rechts oben klicken (Blatt Papier mit Stift drauf)
3. CSS einfügen oder reinschreiben
4. Speichern drücken

An der Stelle noch Vielen Dank an Christopher für den Fix für den TinyMCE im Firefox, sowie die Idee und Umsetzung des schmalen Headers im ersten Beispiel.