Die wichtigsten CSS Klassen der Core.css für ein erstes Branding

Wenn man eine MOSS oder WSS Seite einer ersten Individualiserung unterziehen möchte, dann richtet sich das Augenmerk ganz automatisch auf die Elemente:

• Globale Navigation
• Schnellstartleiste
• Seitenkopf
• Logo
• Seitenränder

Um einen schnellen Einstieg zu finden, muss man sich erst einmal durch den “Klassendschungel” der Core.css kämpfen, um die Abschnitte zu finden, die zu den oben genannten Elementen führen.

Nachstehend die Klassen aus der Core.css, die zum Ziel führen…..

.ms-bannerContainer{
 background-image: none;
 background-position: right top;
 background-repeat: repeat-y;
 background-color: #d3dce7;
 padding-right: 10px;
 padding-left: 5px;
}

// Der Abschnitt direkt unter dem Seitenkopf. Sozusagen der Hintergrund der globalen Navigation.

.ms-globalbreadcrumb{
 font-size: 8pt;
 text-align: right;
 background-color: #d3dce7;
 padding: 2px 10px 2px 5px;
 background-image: url(’verlauf.jpg’);
 background-repeat: repeat;
}
// Seitenkopf ganz oben. Hintergrund der Elemente “Meine Webseite”, “Meine Hyperliks”, “Willkommen”. Geht jedoch in x-Richtung über die komplette Seite..

ms-globalbreadcrumb a{
text-decoration:none;
color:#666666;
}
.ms-globalbreadcrumb{
text-decoration:none;
color:#666666;
}
.ms-globalbreadcrumb a:hover{
text-decoration:underline;
color:#000000;
}
.ms-globalleft{
float:left;
}
.ms-globalright{
float:right;
}
.ms-globallinks{
font-size:8pt;
background:transparent;
font-family:tahoma;
}
.ms-globallinks a{
 color: #FFFFFF;
 text-decoration: none;
 font-family: tahoma;
}
.ms-globallinks{
 color: #FFFFFF;
 text-decoration: none;
 font-family: tahoma;
}

.ms-sitetitle
{
 font-weight: bold;
 color: #00285d;
 padding: 4px 6px 7px 10px;
 vertical-align: middle;
 margin: 0;
 font-style: normal;
 font-variant: normal;
 font-size: 16pt;
 line-height: normal;
 font-family: verdana;
}
.ms-sitetitle a
{
 font: 11pt verdana;
 font-weight: bold;
 color: #00285d;
 text-decoration: none;
}
h1.ms-sitetitle{
 padding: 0 0 0 5px;
 line-height: 110%;
}
// Der Abschnitt direkt unterhalb des Seitenkopfs. Dort wo der Titel der Seite steht, sowie das Seitenlogo plaziert ist

td.ms-titleimagearea{
 height: 100%;
 text-align: left;
}

.ms-topnav{
 border: solid 1px #c2dcff;
 border-left: solid 1px #ffffff;
 border-bottom: none;
 background-image: none;
 background-repeat: repeat-x;
 font-family: Tahoma;
 font-size: 8pt;
 background-color: #00285d;
 color: #FFFFFF;
}
.ms-topnav a{
display:block;
white-space:nowrap;
padding:1px 8px 0px 8px;
height:18px;
}
.ms-topnavselected{
 border-bottom-width: 0px;
 border-color: #00285d;
 border-style: solid;
 border-width: 1px;
 color: #ff7b00;
 background: none;
 background-repeat: repeat-x;
 font-weight: bold;
 border-left: solid 1px #e3efff;
 background-color: #FFFFFF;
}
.ms-topnavselected a{
 color: #ff7b00;
}
.ms-topNavHover{
 border-bottom-width: 0px;
 border-color: #d26500;
 border-style: solid;
 border-width: 1px;
 background-image: none;
 background-color: #FFFFFF;
 border-left: solid 1px #ffffff;
 color: #ff7b00;
 text-transform: uppercase;
 text-decoration: underline;
}
.ms-topNavHover a{
 color: #ff7b00;
}
.ms-topNavFlyOuts{
 background-color: #00285d;
 font-family: Tahoma;
 font-size: 8pt;
 color: #FFFFFF;
 font-weight: normal;
}
.ms-topNavFlyOuts a{
 display: block; *;
 min-width: 120px;
 color: #FFFFFF;
 padding: 4px 8px 4px 8px;
}
.ms-topNavFlyOutsHover{
 background-color: #ff7b00;
 color: #FFFFFF;
 font-weight: bold;
}
// Die globale Navigation bis zum ersten Flyout-Menü

.ms-quicklaunchnavsep{
background-color:#83b0ec;
}
.ms-quicklaunch table td{
border-top:1px solid #add1ff;
}
.ms-quicklaunch span.ms-navheader{
 background-color: #aaaaaa;
 border-top: solid 1px #f2f8ff;
 border-left: solid 1px #f2f8ff;
 padding: 1px 4px 4px 4px;
}
.ms-quicklaunch table.ms-navheader td{
 background-color: #d3dce7;
 border-top: solid 1px #f2f8ff;
 border-left: solid 1px #f2f8ff;
 padding: 1px 4px 4px 4px;
 border-top-color: #FFFFFF;
}
.ms-quicklaunch table.ms-navsubmenu2 td{
border:none;
}
.ms-navsubmenu1{
 width: 100%;
 border-collapse: collapse;
 background-color: #d3dce7;
}
.ms-navsubmenu2{
width:100%;
background-color:#f2f8ff;
margin-bottom:6px;
}
table.ms-navheader td{
background-image:none;
}
.ms-navheader a{
 font-weight: bold;
 color: #00285d;
 text-decoration: none;
}
.ms-navheader2 a:hover{
color:#000000;
text-decoration:underline;
}
.ms-navheader a:hover{
 color: #ffb700;
 text-decoration: underline;
}
.ms-navItem a{
 color: #00285d;
 text-decoration: none;
}
.ms-navItem a:hover{
 background-image: none;
 background-repeat: no-repeat;
 background-position: left top;
 font-family: tahoma;
 background-color: #dee6f0;
 color: #ff7b00;
}
.ms-navitemstatic{
color:#4c4c4c;
}
.ms-navheaderstatic{
color:#4c4c4c;
}
.ms-quicklaunchouter{
 border-bottom: solid 1px #83b0ec;
 border-right: solid 1px #83b0ec;
 border-right-color: #00285d;
 border-bottom-color: #00285d;
}
.ms-quicklaunchouter{
margin:0px 1px 2px 1px;
}
table.ms-recyclebin td{
 background-color: #dedce7;
 width: 100%;
 border-top: solid 1px #ffffff;
 border-left: solid 1px #ffffff;
 padding: 3px 5px 7px 3px;
}
table.ms-recyclebin td a{
 font-weight: bold;
 color: #ffb700;
 text-decoration: none;
}
table.ms-recyclebin td a:hover{
 color: #ffb700;
 text-decoration: underline blink;
 font-weight: bold;
}
.ms-quickLaunch{
 border: solid 1px #6f9dd9;
 border-bottom: solid 1px #6f9dd9;
 font-size: 8pt;
 font-family: tahoma;
 line-height: 10pt;
 background-color: #d3dce7;
}
.ms-quicklaunchheader{
 padding: 2px 6px 4px 6px;
 font-weight: normal;
 color: #00285d;
 background-image: none;
 background-repeat: repeat-x;
 background-color: #d3dce7;
 border-left: solid 1px #f2f8ff;
 font-size: 8pt;
}
.ms-nav{
 background-color: #d3dce7;
 background-image: none;
 background-repeat: repeat-x;
 font-family: tahoma;
}
.ms-globalTitleArea{
 padding: 0px;
 text-align: right;
 background-image: url(’naspa-verlauf.jpg’);
 background-position: right top;
 background-repeat: repeat;
 overflow: auto;
 background-color: #d3dce7;
 line-height: 200%;
}
// Alles was zum Schnellstartmenü auf der linken Seite gehört

.ms-globalTitleAreaSeparator{
background-color:#ffffff;
background-image:url(’http://lmz-projekt/_layouts/images/siteTitleBKGD.gif’);
background-position:right;
background-repeat:repeat-y;
}
.ms-pagetitleareaframe{
 background-image: none;
 background-repeat: repeat-x;
 background-position: left top;
 background-color: #b4cce2;
 text-align: center;
}
Div.ms-titleareaframe{
 background-image: none;
 background-repeat: repeat-x;
 background-color: #b4cce2;
 text-align: center;
}
TD.ms-titleareaframe{
 background-image: none;
 background-repeat: no-repeat;
 background-position: left top;
 background-color: #b4cce2;
 text-align: center;
}
.ms-pagetitleareaframe table{
 background-image: none;
 background-repeat: no-repeat;
 background-position: 332px 4px;
 height: 54px;
 background-color: #b4cce2;
}
.ms-pagemargin{
 background-color: #b4cce2;
 background-image: none;
 background-position: 0px;
 height: 100%;
}
td.ms-rightareacell div.ms-pagemargin{
 background-color: #b4cce2;
 background-image: none;
 background-repeat: repeat-x;
 height: 100%;
 border-left: solid 1px #83b0ec;
}
.ms-bodyareacell{
vertical-align:top;
height:100%;
width:100%;
}
.ms-pagebottommarginright{
 background: #b4cce2;
}
.ms-pagebottommarginleft{
 background: #b4cce2;
}
.ms-pagebottommargin{
background:#b4cce2;
}
.ms-bodyareapagemargin{
 background: #b4cce2;
 border-top: 1px solid #6f9dd9;
}
// Alles rund um die Seite (also um den Platzhalter für die eigentlichen Webparts herum)

Ich hoffe es hilf für einen ersten Start etwas weiter.

Dieser Eintrag wurde am 26.8.2008 um 15:39 verfasst und befindet sich in Web, MOSS 2007, SharePoint. Sie können alle Antworten zu diesem Eintrag über den Feed RSS 2.0 mitverfolgen. Hinterlassen Sie eine Antwort oder einen Trackback-Link zu Ihrer eigenen Homepage.

| Drucken