Anpassen von SharePoint 2010-Webpart-Benutzeroberflächen (Wrox)

SharePoint 2010

Zusammenfassung: Lernen Sie, wie Sie mithilfe von Microsoft SharePoint Designer 2010 das Erscheinungsbild von Webpartkopfzeilen in Microsoft SharePoint 2010 nur mit einem Cascading Stylesheet (CSS) oder aber mit Hintergrundbildern ändern.

Wrox-Logo

Bücher von Wrox zu SharePoint

Das Webpart ist eine der wichtigsten Komponenten auf der SharePoint-Webseite, und die standardmäßigen SharePoint-Webparts enthalten minimale Designelemente, die keine farbigen Hindergründe, Rahmen usw. aufweisen. Deshalb sollten Sie eventuell die Webparts anpassen, um Ihre Website mit einem Branding zu versehen und deren Benutzerfreundlichkeit zu optimieren.

Wenn Sie Webpartlösungen mit Microsoft Visual Studio 2010 erstellen oder eine Webpartseite in SharePoint Designer 2010 bearbeiten, können Sie das Branding der Webparts-Benutzeroberfläche in die Entwicklungsphase integrieren. Üblicherweise erstellt der Designer mit SharePoint Designer ein Modell, das HTML und CSS beinhaltet, und übergibt das Modell dann an den Entwickler. Der Entwickler implementiert das Markup in der Webpartentwurfsphase. Der Back-End-Code befindet sich in der Assembly, und das Branding wird auf einen CSS-Dateiordner oder auf die Formatbibliothek in der Inhaltsdatenbank verteilt. In Abbildung 1 ist ein Beispiel für ein visuelles Webpart dargestellt, für welches das Branding in SharePoint Designer 2010, aber die Codeerstellung in Visual Studio 2010 vorgenommen wurde.

Abbildung 1. Branding eines visuellen Webpart in SharePoint Designer 2010

Visuelles Webpart mit Branding in SharePoint Designer

In anderen Szenarien könnten Sie das Branding und das Erstellen des Webparts nur mithilfe von SharePoint Designer in einer Lösung ohne Code vornehmen, oder Sie könnten sowohl die Codeerstellung als auch das Branding nur mit Visual Studio ausführen.

In diesem Artikel wird beschrieben, wie Sie die Kopfzeile des Webparts in SharePoint mithilfe von SharePoint Designer 2010 anpassen. Sie können das benutzerdefinierte Webpart entwerfen und benutzerdefiniertes Markup mit Ihren eigenen Klassen und Regeln anwenden. Mit der Benutzeroberfläche für das benutzerdefinierte Webpart ist beinahe alles möglich, aber Sie müssen über grundlegende Kenntnisse von HTML und CSS verfügen.

Die Webparts in SharePoint werden in Tabellen gerendert, und jede Kopfzeile enthält fünf Zellen. Sie können die ms.WPHeader-Klasse für die Tabellenkopfzeile verwenden alle Zellen in dieser Zeile ändern.

In Beispiel 1 ist dargestellt, wie Sie eine graue Hintergrundfarbe auf die Tabellenkopfzeile und die Zellen des Webparts anwenden.

Abbildung 2. Graue Hintergrundfarbe für die Tabellenkopfzeile des Webparts

Graue Hintergrundfarbe für Webpart-Tabellenüberschrift

Fügen Sie der benutzerdefinierten CSS-Datei das folgende Cascading Stylesheet (CSS) hinzu.

/* All cells (TDs) in the table row (TR) */
.ms-WPHeader TD{
background-color: #f7f7f7;
border-bottom:1px transparent!important;
padding:3px;
}
/* Web Part title */
.ms-WPTitle {
color: #333;
font-weight:bold;
}
/* Linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #333!important;
text-decoration:none!important;
}
/* Hover */
.ms-WPTitle a:hover {
color:red!important;
}

Wenn Sie einen Rahmen um die Kopfzeile wünschen, können Sie die oberen und unteren Ränder für alle Zellen in der Zeile festlegen. Da jedoch die erste und die letzte Zelle denselben Klassennamen verwenden, können Sie mithilfe von first:child die Startzelle und die Endzelle trennen.

Abbildung 3. Kopfzeile mit Rahmen

Auf Überschrift angewendeter Rahmen

Wenn Sie einen Rahmen auf die Kopfzeile aller Webparts auf der SharePoint-Seite anwenden möchten, fügen Sie Ihrer benutzerdefinierten CSS-Datei den folgenden CSS-Code hinzu.

/* All TDs in the table row */
.ms-WPHeader TD{
background-color: #f7f7f7;
border-top:1px #ccc solid!important;
border-bottom:1px #ccc solid!important;
padding:3px;
}
/* Border to the sides */
.ms-WPHeader td:first-child {
border-left:1px #ccc solid;
border-right:0px!important;
}
.ms-wpTdSpace {
border-right:1px #ccc solid!important;
}
/* Web Part title */
.ms-WPTitle {
color: #333;
font-weight:bold;
}
/* Linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #333!important;
text-decoration:none!important;
}
/* Hover */
.ms-WPTitle a:hover {
color:red!important;
}

Abbildung 4. Kopfzeile und Textkörper von Webparts mit Rahmen

Auf Überschrift und Text von Webparts angewendeter Rahmen

Wenn Sie einen Rahmen auf die Kopfzeile und den Textkörper aller Webparts auf der SharePoint-Seite anwenden möchten, fügen Sie in Ihrer benutzerdefinierten CSS-Datei den folgenden CSS-Code ein.

/* Webpart table */
.s4-wpTopTable{
padding:0px!important;
margin:0px!important;
border:1px #dbddde solid!important;
}
/* All TDs in the table row */
.ms-WPHeader TD{
background-color: #f7f7f7;
border-bottom:1px #ccc solid!important;
padding:2px;
}
/* Web Part title */
.ms-WPTitle {
color: #333;
font-weight:bold;
}
/* Linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #333!important;
text-decoration:none!important;
}
/* Hover */
.ms-WPTitle a:hover {
color:red!important;
}

Das nächste Beispiel veranschaulicht, wie Sie andere betroffene Elemente anpassen, indem Sie einen Rahmen für den Textkörper der Webparts festlegen. Die allgemeine s4-TopTable-Klasse wird von mehreren anderen Elementen in SharePoint verwendet. Beispielsweise wird diese Klasse vom Suchfeld verwendet, und wenn Sie keinen Rahmen um dieses Element wünschen, können Sie mit dem folgenden Code festlegen, dass für das Suchfeld kein Rahmen verwendet wird.

.s4-search Table, .s4-wpcell-plain {
 border:0px!important;
}

Abgerundete Ecken werden oft verwendet, um einer Benutzeroberfläche ein moderneres Aussehen zu verleihen. Es gibt mehrere Möglichkeiten, um abgerundete Ecken zu erstellen. In diesem Beispiel werden Hintergrundbilder für die Ecken und für den mittleren Bereich verwendet. Die linken und rechten Ecken haben eine Abmessung von 7 x 33 Pixel, und das Bild in der Mitte von 14 x 33 Pixel.

Abbildung 5. Webpartkopfzeilen mit abgerundeten Ecken

Webpartüberschriften mit abgerundeten Ecken

Wenn Sie abgerundete Ecken für alle Webpartkopfzeilen auf der SharePoint-Seite erstellen möchten, fügen Sie in Ihrer benutzerdefinierten CSS-Datei den folgenden CSS-Code ein.

/* All TDs in the table row */
.ms-WPHeader TD{
background-image: url('/Style Library/MSDN/Images/WP-mid.jpg');background-repeat:repeat-x;
border:0px!important;
border-top:1px #fff solid!important;
padding-left:1px; padding-right:1px;
height:33px
}
/* Left cell */
.ms-WPHeader td:first-child {
width:5px;
background-image:url('/Style Library/MSDN/Images/WP-left.jpg')!important;background-repeat:no-repeat;
}
/* Right cell */
.ms-wpTdSpace {
width:7px;
background-image:url('/Style Library/MSDN/Images/WP-right.jpg')!important;background-repeat:no-repeat;
background-color:transparent!important;
}
/* Arrow */
.ms-WPHeaderTdMenu{
background-color:transparent!important;
border:0px!important;
}
/* Content in the Web Part */
.ms-wpContentDivSpace {
padding:10px!important;
margin:0px!important;
border:0px!important;
}
/* Web Part title */
.ms-WPTitle {
padding-left:10px;
font-family:Arial, Helvetica, sans-serif!important;
color: #fff;
font-weight:bold;
}
/* Linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #fff;
text-decoration:none!important;
}
/* Hover title */
.ms-WPTitle a:hover {
color:#333!important;
text-decoration:none!important;
}

Abbildung 6. Webpartkopfzeilen mit abgerundeten Ecken und Rahmen

Webpartüberschriften mit abgerundeten Ecken und Rahmen

Wenn Sie abgerundete Ecken für die Webpartkopfzeilen erstellen und Rahmen für alle Webparts auf der SharePoint-Seite festlegen möchten, fügen Sie in Ihrer benutzerdefinierten CSS-Datei den folgenden CSS-Code ein.

/* All TDs in the table row */
.ms-WPHeader TD{
background-image: url('/Style Library/MSDN/Images/WP-mid.jpg');background-repeat:repeat-x;
border:0px!important;
border-top:1px #fff solid!important;
padding-left:1px; padding-right:1px;
height:30px
}
/* Left cell */
.ms-WPHeader td:first-child {
width:5px;
background-image:url('/Style Library/MSDN/Images/WP-left.jpg')!important;background-repeat:no-repeat;
}
/* Right cell */
.ms-wpTdSpace {
width:7px;
background-image:url('/Style Library/MSDN/Images/WP-right.jpg')!important;background-repeat:no-repeat;
background-color:transparent!important;
}
/* Arrow */
.ms-WPHeaderTdMenu{
background-color:transparent!important;
border:0px!important;
}
/* Content in the Web Part */
.ms-wpContentDivSpace {
padding:10px!important;
margin:0px!important;
margin-top:0px!important;
border:0px!important;
border:1px #dbddde solid!important;overflow:hidden
}
/* Web Part title */
.ms-WPTitle {
padding-left:10px;
font-family:Arial, Helvetica, sans-serif!important;
color: #fff;
font-weight:bold;
}
/* Linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #fff;
text-decoration:none!important;
}
/* Hover title */
.ms-WPTitle a:hover {
color:#333!important;
text-decoration:none!important;
}

Christian Stahl arbeitet seit 2003 als Berater, Trainer und Referent für Microsoft SharePoint-Technologien und hat sich auf das SharePoint-Branding und die Front-End-Entwicklung spezialisiert. Er ist nicht nur ein SharePoint Server MVP, sondern auch ein Microsoft Certified Trainer (MCT). Christian ist Mitverfasser von "Beginning SharePoint 2010 Administration" (herausgegeben durch Wrox), unterhält einen Blog und leitet die SharePoint Designers-Community. Auf Twitter finden Sie Christian unter dem Namen @cstahl.

Die folgenden technischen Redakteure haben an Microsoft SharePoint 2010-Artikeln von Wrox mitgearbeitet:

  • Matt Ranlett ist ein SQL Server MVP und war über viele Jahre eine feste Institution der .NET-Entwicklercommunity in Atlanta. Als Gründungsmitglied von Atlanta Dot Net Regular Guys hat Matt mehrere regionale Benutzergruppen gegründet und leitet diese. Nach der Arbeit verbringt er viele Stunden mit lokalen und nationalen Communityaktivitäten, wie beispielsweise der SharePoint 1, 2, 3!-Reihe, der Organisation von drei Codecamps in Atlanta, der Tätigkeit als Vice President of Technology im Vorstand von INETA sowie Auftritten bei mehreren Podcasts wie z. B. .Net Rocks und dem ASP.NET-Podcast. Dennoch fand Matt kürzlich Zeit, sich mit einer wunderbaren Frau namens Kim zu verheiraten, die er bei der Aufzucht von drei riesigen Hunden unterstützt. Matt arbeitet derzeit als Seniorberater für Intellinet und gehört dem Team an, das mithilfe von innovativen Lösungen für den Erfolg von Unternehmen sorgt.

  • Jake Dan Attis. Was Muster, Praxis und Steuerung im Hinblick auf die SharePoint-Entwicklung betrifft, sind Sie bei Jake Dan Attis goldrichtig. Er ist von Moncton, Kanada, in die Region Atlanta gezogen und hat einen Abschluss in angewandter Mathematik, ist aber ein hundertprozentiger SharePoint-Hardcoreentwickler. Normalerweise nimmt Dan an Community-Events in der Region Atlanta teil, hält dort Vorträge oder organisiert derartige Events, wie beispielsweise Codecamps, SharePoint-Samstage und die SharePoint-Benutzergruppe in Atlanta. Wenn Dan einmal nicht in Visual Studio arbeitet, verbringt er gerne Zeit mit seiner Tochter Lily, schaut sich Hockey und Football an und kostet weltweite Biersorten.

  • Kevin Dostalek kann über 15 Jahre Erfahrung in der IT-Branche sowie über 10 Jahre Erfahrung in der Verwaltung großer IT-Projekte und der Führung von IT-Personal aufweisen. Er hat Projekte für Unternehmen ganz unterschiedlicher Größe geleitet und hatte verschiedene Funktionen inne, wie beispielsweise Entwickler, Architekt, Business Analyst, technischer Leiter, Manager Entwicklung, Projektmanager, Programm-Manager und Mentor/Coach. Darüber hinaus hat Kevin zwischen 2005 und 2008 auch als Vice President eine Lösungsbereitstellungsabteilung für einen MS Gold Partner mittlerer Größe geleitet und war später auch als Vice President of Innovation and Education tätig. Anfang 2010 gründete Kevin das Unternehmen Kick Studios, das Beratungs-, Entwicklungs- und Schulungsservices für die Spezialbereiche SharePoint und Social Computing anbietet. Seitdem ist er auch bei zahlreichen Benutzergruppenversammlungen, Treffen und Konferenzen im ganzen Land als Referent aufgetreten. Weitere Informationen zu Kevin finden Sie in seinem Blog "The Kickboard".

  • Larry Riemann verfügt über mehr als 17 Jahre Erfahrung im Entwurf und der Entwicklung von Geschäftsanwendungen für einige der weltweit größten Unternehmen. Larry ist ein unabhängiger Berater, Eigentümer von Indigo Integrations und bietet SharePoint-Beratung ausschließlich über SharePoint911 an. Er ist Autor, veröffentlicht Artikel und hält gelegentlich Vorträge auf Konferenzen. In den letzten Jahren befasste er sich in erster Linie mit SharePoint, dem Entwickeln und Erweitern von über SharePoint hinausgehender Funktionalität. Neben seiner Arbeit an SharePoint ist Larry ein ausgebildeter .NET-Architekt und verfügt über umfangreiches Know-how in Sachen Systemintegration, Unternehmensarchitektur und Hochverfügbarkeitslösungen. Weitere Informationen zu Larry finden Sie in seinem Blog.

  • Sundararajan Narasiman ist ein technischer Architekt bei der Content Management & Portals Group von Cognizant Technology Solutions, Chennai, und verfügt über mehr als 10 Jahre Branchenerfahrung. Sundararajan ist in erster Linie als Architektur- und Technologieberater für die SharePoint Server 2010-Stapel- und Mainstream .NET 3.5-Entwicklung tätig. Er ist ein begeisterter Programmierer und interessiert sich auch für Extremprogrammierung und EDT.

Anzeigen: