Fachlicher Hintergrund
Viele Unternehmen nutzen den SharePoint 2010. Da diese Unternehmen meist auch ein Corporate Design verfolgen, müssen Designanpassungen am SharePoint – insbesondere an den Masterpages und css-Datein vorgenommen werden.
>> mehr…
SharePoint Designer 2010
Der SharePoint Designer 2010 ist ein Tool, welches bei der Installation von SharePoint mitinstalliert wird. Es besteht jedoch auch die Möglichkeit, von einem Clientrechner auf dem SharePoint Server zu verbinden. Hierzu muss der SharePoint Designer 2010 nachträglich auf dem Client installiert werden.
Prerequisites
- Die Datei v4.master kopieren und umbenennen.
- Die Datei corev4.css kopieren und umbenennen.
Design anpassen
In die neue erstellte MasterPage muss noch folgendes CodeSegment hinzugefügt werden, um die neu erstellte CSS-Datei einzubinden.
1: <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/myStyle.css %>"
2: After="corev4.css" runat="server" />
Um die Topnavigation dahingehend anzupassen, das eine Dropdown entsteht, muss in dem AspMenu mit der ID TopNavigationMenuV4 der Masterpage folgende Änderungen vorgenommen werden:
- StaticDisplayLevels=“2“
- MaximumDynamicDisplayLevels=“1“
Im Anschluss muss noch die neue CSS-Datei (myStyle.css) angepasst werden.
In den folgenden CSS-Klassen werden Änderungen wie Farbe, Größe, Abstände, etc. angepasst.
Hier passen wir das Portal so an, dass es 80% der Bildschirmbreite einnimmt.
1: /*links und rechts einen Rand von 10% setzen*/
2: body
3: {
4: font-family:Verdana,Arial,sans-serif;
5: font-size:8pt;
6: /* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:#676767;
7: /* [ReplaceColor(themeColor:"Light1")] */ background-color:#fff;
8: margin:0px;
9: padding:0% 10% 0% 10%;
10: }
11: /*Ribbon Bereich auf eine Breite von 80% der Seite setzen*/
12: .s4-pr
13: {
14: width:80%;
15: }
16: /*Titel und Navigations Bereich auf eine Breite von 80% der Seite setzen*/
17: .s4-title
18: {
19: padding:0px 0px 0px 10px;
20: margin:0px;
21: min-height:64px;
22: /* [RecolorImage(themeColor:"Light2",method:"Filling",includeRectangle:{x:0,y:1023,width:1,height:12})] */ background:url("/_layouts/images/bgximg.png") repeat-x -0px -1023px;
23: /* [ReplaceColor(themeColor:"Light2")] */ background-color:#f9f9f9;
24: word-wrap:break-word;
25: -ms-word-wrap:break-word;
26: overflow-x:hidden;
27: width:80%
28: }
29: /*unteren Bereich auf eine Breite von 80% der Seite setzen*/
30: .s4-widecontentarea
31: {
32: width:80%;
33: }
Fazit
Ein Corporate Design, auch für SharePoint im Unternehmen, ist wichtig. Hier muss man jedoch aufpassen, das man nicht zu viel Corporate macht. Dies führt schnell zu Fehlern bei der SharePoint-Ausführung.
Es gibt aber auch Seiten, bei denen nur schwer zu erkennen ist, das es sich um einen SharePoint handelt: