Was kann mein Browser?

HTML5Wir Entwickler stoßen ja während unserer täglichen Arbeit immer wieder über extrem nützliche Tools. Viele davon bleiben in unseren Bookmarks verborgen und jeder benutzt sie, ohne darüber zu reden. Deshalb kann es durchaus sein, dass Einige das Tool, dass ich mal der breiten Masse näherbringen möchte, schon kennen.

Wer hat nicht schon mal verzweifelt über einem Konzept gebrütet und festgestellt, dass die abgegrenzten Browserversionen nicht mit der geforderten Frontend-Funktionalität zusammenpassen? Welcher Entwickler hat noch nicht stundenlang an CSS geschraubt, um dann hinterher festzustellen, dass es in Browser XYZ doch nicht läuft, weil man auf „moderne“ CSS Funktionalitäten gesetzt hat? Gott sei Dank gibt es im Internet ja abertausende Seiten, die sich mit HTML5, CSS3 und JavaScript auseinandersetzen und einem hier weiterhelfen. Aber wird die gewünschte Funktionalität nun auch wirklich von der aktuellen Opera-Version unterstützt? Und unterstützt der Android Browser von Android Gingerbread nicht vielleicht doch WebSockets? Was kann mein Browser? weiterlesen

SharePoint 2010 RTE Styles

Sharepoint 2010 bringt ja einen durchaus brauchbaren Rich Text Editor für Page Content Bereiche und das Content Editor Webpart mit. Jetzt ist es ja aber nun üblich, dass man nicht jedes Mal sein komplettes Text-Layout mühsam im RTE einstellen möchte, sondern man möchte ja eigentlich zumindest häufig genutze Formatierungsoptionen wiederverwenden können. Microsoft hat hier mitgedacht und bringt Styles mit, die wiederverwendet werden können. Diese sind bequem im Editierungsmodus über das Ribbon erreichbar.

Sharepoint 2010 Standard Styles

Nun muss man aber zugeben, die Styles, die Microsoft dort hinterlegt hat, sind nicht unbedingt das, was man als User erwartet und vor allem entsprechen Sie erstmal keinem Corporate Design. Aber auch hier hat Microsoft mitgedacht, und so kann man eigene Styles relativ leicht hinzufügen.

Man legt sich einfach eine CSS-Datei an und fügt dort CSS-Klassen ein, deren Name mit ms-rteStyle- beginnt. Zusätzlich muss man noch das CSS-Attribut -ms-name einfügen, dass den Titel des Styles in dem Dropdown angibt.

Eine solche CSS-Klasse könnte in etwa so aussehen:

.ms-rteStyle-Notification
{
	-ms-name: "Hinweistext";
	border: 1px solid #7F0000;
	background: #FFD800;
	padding: 5px;
	color: #7F0000;
}

Wie kommt das ganze nun in meinen Sharepoint wird sich der Leser nun wahrscheinlich denken. Nun ja, man muss nun lediglich diese CSS-Datei in seinem Sharepoint einbinden. Da ich gerne vieles am Sharepoint umstyle, arbeite ich mit Visual Studio Solutions, die eigene Masterpages deployen und dort ein komplettes Branding mitbringen. Hier binden wir dann einfach die zusätzlich CSS Datei in der Masterpage ein und deployen die Solution. Natürlich gibt es auch noch andere Wege, so kann man z.B. die CSS-Datei in den Style Library Ordner hochladen, eine Kopie der v4.master anlegen, dort die CSS Datei eintragen  und in den Site Master Page Settings diese eigene Masterpage referenzieren, oder, oder, oder. Eventuell gehe ich noch mal in einem anderen Blogbeitrag auf dieses Thema ein, aber hier geht es erstmal nur um die RTE Styles.

Sharepoint interpretiert jede in der Masterpage eingebundene CSS-Datei und überführt alle Klassen, die dem oben gezeigten Schema entsprechen in das Style-Dropdown, so dass es dort einfach durch den Benutzer ausgewählt werden kann. Wichtig ist hier, dass außer dem entsprechenden Klassennamen und dem -ms-name Attribut mindestens ein weiteres CSS-Attribut angegeben wird.

Final sieht unser Beispiel dann etwa so aus

Angepasset RTE Styles im Sharepoint

Wie man sieht, sind hier schon weitere Styles eingebunden und ganz am Ende der Liste erscheint unser Beispiel-Style. An dieser Stelle muss ich aber leider darauf hinweisen, dass man diese Styles nur bedingt stapeln kann, man kann also nicht Hinweistext mit z.B. Interner Link kombinieren, solange es sich um den gleichen Bereich handelt, dem der jeweilige Style zugewiesen werden soll. Wenn man nur einem einzelnen Wort innerhalb eines Absatzes einen anderen Style geben möchte, funktioniert das schon mitunter. Ich selbst empfinde es aber von der Handhabung als etwas „frickelig“

Was für Text geht, geht natürlich auch für Bilder. Hier lautet das Präfix des CSS-Klassennamen etwas anders, die Herangehensweise ist aber identisch.

.ms-rteImage-CustomImageStyle
{
-ms-name: "Image Style";
border: 2px dotted #666;
margin: 10px;
}

Dies sieht als Ergebnis so aus:

Benutzerdefinierter RTE Style für Bilder

Im Screenshot sieht man auch sehr schön, dass dort in den Bildtools neben den Bildformatvorlagen auch noch der Button für Position ist. Auch dieser lässt sich ähnlich der oben genannten Methode überschreiben. Hier lautet das Präfix ms-rtePosition.

.ms-rtePosition-LeftTop
{
	-ms-name: "Links mit Rahmen";
	float: left;
	padding: 10px;
	border: 1px solid grey;
	margin-right: 10px;
	margin-bottom: 10px;
}

Man kann auch bestehende Style überschreiben. Die von Microsoft definierten CSS-Klassen sind:

Für Text:

.ms-rteStyle-Comment
.ms-rteStyle-Normal
.ms-rteStyle-Highlight
.ms-rteStyle-Byline
.ms-rteStyle-Tagline
.ms-rteStyle-Comment
.ms-rteStyle-References
.ms-rteStyle-Caption

Bilder:

.ms-rteImage-0
.ms-rteImage-1
.ms-rteImage-2
.ms-rteImage-3
.ms-rteImage-4

Positionen:

.ms-rtePosition-1
.ms-rtePosition-2
.ms-rtePosition-3
.ms-rtePosition-4
.ms-rtePosition-5

Durch die hier genannten Optionen, die Styles, Image Styles und Image Positions anzupassen, sind einem eigentlich keine Grenzen gesetzt. Wer gerne mit jQuery arbeitet, sich aber immer geärgert hat, dass im in RTE Textbereichen eventuell passende Selektoren fehlen, kann auch hier mit den RTE Styles arbeiten. Hier ist es zwar etwas störend, dass man immer mindestens ein zusätzliches CSS-Attribut angeben muss, aber hier kann man im Zweifel auch einfach ein beliebiges Attribut mit Default-Wert (oder sowieso schon gesetztem Wert einfügen.

Ich hoffe, dieser kleine Exkurs in die Welt der RTE Styles war halbwegs hilfreich.