19.09.2009
In diesem Beitrag wird beschrieben, wie Sie für eine SharePoint Masterpage eine CSS-Klasse finden und verändern können.
Zunächst zur Aufgabenstellung
Die Hintergrundfarbe des Symbol für Suche starten soll an das CI angepasst werden. Aktuell entspricht die Farbe dem Standard-SharePoint Design.
Ziel ist folgendes Layout
Jetzt muss man wissen, das es sich hier um ein SharePoint Webcontrol handelt, also eine ASPX-Komponente.
Und das müssen wir für die Umsetzung wissen
- Wo finde ich die ASPX-Komponenten?
Sie ist auf einer Standard-Masterpage im PlaceHolder SearchArea
Hier findet wir folgendes Element:
<SharePoint:DelegateControl runat=”server” ControlId=”SmallSearchInputBox” />
Jetzt müssen wir wissen, für welches Control die ID SmallSearchInputBox steht.
Antwort: Es handelt sich hier um ein SharePoint Webcontrol. Die Datei in unserem Beispiel heißt SearchArea.ascx und befindet sich im Ordner
~\12\TEMPLATE\CONTROLTEMPLATES.
- Woher weiß ich das?
Dazu muss man die Infrastruktur des SharePoint auf dem Server kennen. Die Tilde ~ steht für einen zu konfigurierenden Pfad, in diesem Beispiel wurde der Standardpfad beibehalten nämlich c:\Programme\Gemeinsame Dateien\Microsoft Shared\web server extensions
In der relativen URL 12\TEMPLATE\CONTROLTEMPLATES werden SharePoint Webcontrols als ASCX-Seiten abgelegt.
Wen wir SearchArea.ascx analysieren, dann treffen wir auf die unten abgebildeten Zeilen.
<div class=”ms-searchimage”><a target=’_self’ href=’javascript:’ onClick=”javascript:SubmitSearchRedirect(<%=strEncodedUrl%>);javascript:return false;” title=<%SPHttpUtility.AddQuote(SPHttpUtility.HtmlEncode(SearchImageToolTip),Response.Output);%> ID=onetIDGoSearch><img border=’0′ src=”/_layouts/images/gosearch.gif” alt=<%SPHttpUtility.AddQuote(SPHttpUtility.HtmlEncode(SearchImageToolTip),Response.Output);%>></a></div>
</td>
Jetzt wissen wir, welche CSS-Regel das Aussehen des Suchbildes definiert, nämlich ms-searchimage. Die Regel selbst befindet sich in der CSS-Datei core.css.
In dieser Datei finden Sie die Original CSS-Regel.
.ms-searchimage{
border:solid 1px #7f9db9;
border-left:solid 1px #9ed6ff;
background-color:#e9f2fd;
padding-left:3px;
padding-right:3px;
padding-bottom:2px !important;
padding-top:2px !important;
}
Jetzt geht es ganz einfach. Diese Regel in die eigene CSS-Datei kopieren und dann die Hintergrundfarbe überschreiben.
Zum Beispiel:
.ms-searchimage{
border: solid 1px #7f9db9;
border-left: solid 1px #9ed6ff;
background-color: #FEC253;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 2px !important;
padding-top: 2px !important;
}
Wir erhalten das gewünschte Ergebnis.
Wichtig ist, dass wir die Originalregel in einer eigenen CSS-Datei überschreiben und nicht in der core.css, die unverändert bleiben sollte. Wenn wir schon mit CSS arbeiten, dann sollten wir auch die Kaskadierung nutzen.