Adrian Mörchen

Schlagwort: theme

  • Tipp: Communote mittels CSS aufhübschen

    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

    communote_weihnacht1 communote_weihnacht2

     

     

     

    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

    communote_wood1 communote_wood2

     

     

     

    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

    communote_snow1 communote_snow2

     

     

     

    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:

    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

    communote_howto

     

    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.