CSS und HTML in Sharepoint und Google Sites

Gepostet am: Nov 06, 2011 12:16:15 PM

Heute stand ich vor der Frage, wie man schnell und einfach schöne CSS-Buttons für Google Sites baut. Dafür gibt es eine große Reihe von Tools und online-Plattformen. Ich habe mich für CSSButtonGenerator.com entschieden. Warum genau diese Plattform? Sie war eine der ersten Auflistungen bei der Google Suche. 

1. Man generiert auf oben genannter Seite den CSS-Code

CSS-Code

.myButton {     -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;     -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;     box-shadow:inset 0px 1px 0px 0px #ffffff;     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );     background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');     background-color:#ededed;     -moz-border-radius:6px;     -webkit-border-radius:6px;     border-radius:6px;     border:1px solid #dcdcdc;     display:inline-block;     color:#777777;     font-family:arial;     font-size:15px;     font-weight:bold;     padding:6px 24px;     text-decoration:none;     text-shadow:1px 1px 0px #ffffff;}.myButton:hover {     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );     background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');     background-color:#dfdfdf;}.myButton:active {     position:relative;     top:1px;}

Das primäre Problem dabei ist, dass man diesen Code so nur in einer CSS-Datei verwenden kann. Das ist aber gerade bei Google Sites und Sharepoint nicht ganz so einfach. Der Code muss also nicht in eine CSS-Datei sondern je nach Plattform unterschiedlich eingebunden.

Sharepoint

Im Gegensatz zum Einbinden eines Stylesheets, den man immer wieder verwenden kann (siehe hier), wird der CSS-Code direkt im entsprechenden Webpart von entsprechenden HTML-Tags umschlossen:

einbinden CSS

<style type="text/css">/* direkter CSS-Code */ </style>

Google Site

Google Sites ist da aber noch komplizierter. Leider unterstützt Google Sites selbst die unter Sharepoint erwähnte Methode nicht. Kurz zusammengefasst: man kann keine eigenen Style Sheets verwenden und man kann auch kein CSS direkt im Dokument verwenden. Lediglich gewissen inline-CSS-Attribute sind erlaubt. Für komplexe Buttons nicht die richtige Lösung.  Sonst bekommt man von Google Sites folgende Fehlermeldung:

Daher ein ganz anderer Denkansatz: Da es ja auch auf Google Sites die Möglichkeit gibt Javascript zu verwenden - das richtige Gadget vorausgesetzt - dann müsste es doch auch möglich sein mittels Javascript den Stylesheet zu wechseln bzw. zu erweitern. Soweit die Überlegung - nun zur Umsetzung. Nach einiger Recherche bin ich auf folgende Seite gestoßen, die Erklärt wie man mittels Javascript die CSS-Dateien ändern kann. 

Anmerkung: Es gibt noch einen anderen Lösungsansatz. Hierfür muss man aber ein eigenes Gadget für jede Anforderung bauen.  Im konkreten Fall würde das folgendermaßen funktionieren. 

Auf http://code.google.com/intl/de-DE/apis/gadgets/docs/legacy/gs.html#GGE gibt man im Editor folgendes ein: [Link] Daraufhin wählt man auf Google Sites Einfügen > weitere Gadgets > Gadget per URL hinzufügen > URL zuvor erstelltes Gadget 

Ergebnis