Llamas rule the world! » opera http://blog.scrobble.me Maybe they will be defeated by the ducks someday. Sun, 01 Jan 2012 15:52:44 +0000 en hourly 1 Tipp: Communote mittels CSS aufhübschen http://blog.scrobble.me/2011/12/tipp-communote-mittels-css-aufhubschen/ http://blog.scrobble.me/2011/12/tipp-communote-mittels-css-aufhubschen/#comments Tue, 20 Dec 2011 18:40:27 +0000 Adrian http://blog.scrobble.me/?p=499 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:

  1. body{
  2.  background-image: url(http://www.backgroundlabs.com/backgrounds/131.jpg);
  3.  background-attachment: fixed;
  4. }
  5. #cn-body-wrapper{
  6.  background-color: rgba(255, 140, 120, 0.75);
  7.  margin-top: 15px !important;
  8.  -moz-box-shadow: 0px 1px 4px #000 !important;
  9.  box-shadow: 0px 1px 4px #000 !important;
  10. }
  11. #cn-header .cn-topmenu-arrow, #cn-topmenu-arrow {
  12. display: none;
  13. }
  14. body#tinymce {
  15.      background-image: none;
  16. }
  17. #cn-header #cn-topmenu {
  18.     top: 8px !important;
  19. }
  20. #cn-logo img {
  21.     display: none !important;
  22. }
  23. #cn-header {
  24.     height: 35px;
  25.     background-color: rgba(255, 255, 255, 0.85) !important;
  26. }
  27. #cn-header .cn-topmenu-arrow, #cn-topmenu-arrow {
  28.     display: none;
  29. }
  30. #cn-communote #cn-header {
  31.     -moz-box-shadow: 0px 1px 4px #000 !important;
  32.     box-shadow: 0px 1px 4px #000 !important;
  33. }
  34. #cn-logout {
  35.     position: absolute;
  36.     right: 165px;
  37.     top: 22px;
  38.     z-index: 40;
  39. }
  40. #cn-footer-communote img, #cn-header img{
  41.  display: none;
  42. }

 

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

 

 

 

  1. body{
  2. background-image: url(http://blog.scrobble.me/wp-content/gallery/communote/background_wood.jpg);
  3.  background-attachment: fixed;
  4. }
  5. #cn-body-wrapper {
  6.  background-color: rgba(235, 233, 230, 0.7);
  7. }
  8. #cn-header .cn-topmenu-arrow, #cn-topmenu-arrow {
  9. display: none;
  10. }
  11. body#tinymce {
  12.      background-image: none;
  13. }
  14. #cn-footer-communote img{
  15.   display: none;
  16. }

 

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

 

 

 

  1. body{
  2. background-image: url(http://good-wallpapers.com/pictures/4501/snow_stranges_wallpaper.jpg);
  3.  background-repeat: no-repeat;
  4.  background-attachment: fixed;
  5. }
  6. #cn-body-wrapper {
  7.  background-color: rgba(235, 233, 230, 0.7);
  8. }
  9. #cn-header .cn-topmenu-arrow, #cn-topmenu-arrow {
  10. display: none;
  11. }
  12. body#tinymce {
  13.      background-image: none;
  14. }
  15. #cn-footer-communote img{
  16.   display: none;
  17. }

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.

flattr this!

]]> http://blog.scrobble.me/2011/12/tipp-communote-mittels-css-aufhubschen/feed/ 3 Userscript: SAB Enhanced http://blog.scrobble.me/2009/05/userscript-sab-enhanced/ http://blog.scrobble.me/2009/05/userscript-sab-enhanced/#comments Fri, 01 May 2009 16:10:33 +0000 Adrian http://adrian.sinnev.de/blog/?p=175 user_profile1Ich habe schon ne ganze Weile ein Userscript bei mir rumliegen, welches das Sellaband Hauptmenü etwas verbessert. Es packt lediglich 3 Links dazu. Diese sind dafür aber umso nützlicher. Heute habe ich noch ein weiteres geschrieben, das einen etwas schnelleren Zugriff auf die eigenen Profildaten erlaubt.

Die Skripte sind hier und hier verfügbar. Der Screenshot zeigt beide Skripte in Aktion.

Falls jemand Interesse daran hat die Skripte zu verbessern oder weitere zu entwickeln soll er sich bei mir melden. Ich habe ich ein Repository bei xp-dev.com angelegt. Ich denke mit maximal 5 Leuten könnte man ein paar nützliche Sachen entwickeln. An Ideen soll es nicht mangeln.

]]> http://blog.scrobble.me/2009/05/userscript-sab-enhanced/feed/ 0 Kai als Nachwuchsstar http://blog.scrobble.me/2009/03/kai-als-nachwuchsstar/ http://blog.scrobble.me/2009/03/kai-als-nachwuchsstar/#comments Mon, 23 Mar 2009 12:50:19 +0000 Adrian http://adrian.sinnev.de/blog/?p=142 Wie auch immer er dazu gekommen ist. Vielleicht kommt er ja jetzt als Seifenopernstar raus.

]]> http://blog.scrobble.me/2009/03/kai-als-nachwuchsstar/feed/ 0