Author blog http://www.cnblogs.com/rickie Reprinted Articles Because I have been doing some custom SPS UIs, I have collected some useful information from the Internet. I think there are still many friends who need this. The repost did not pay for the author, I hope that the author doesn't want to see it. If you have any questions, I can find me, I immediately delete it.
Custom SPS Battle Record Series
Written by: rickie lee
Dec. 15, 2004
This series mainly records the process of individuals when customizing the SPS page or some attempts thereof, there is an error or need to improve, welcome. Thank you.
This article uses SPS's built-in attributes or CSS to customize the page look of the SPS Portal Site.
1. First create a CSS file in the specified directory, and configure the relevant properties of the SPS
(1) Creating a custom CSS file in the following SPS directory, such as CustomStylesheet.css, is used to customize the appearance of the SPS page.
C: / Program Files / Common Files / Microsoft Shared / Web Server Extensions / 60 / Template / Layouts / 1033 / Styles
(2) Configure the properties of the SPS to support custom STYLEEET
Browse to the portal instance with an account that has administrator privileges.
Access Portal sites as an administrator.
Click Site Settings, and the CLICK CHANGE Portal Site Properties and SharePoint Site Creation Settings.
Update the location of cascading style sheet file strength with the follow value:
Click on Site Settings and further click Change Portal Site Properties and SharePoint Site Creation Settings. In the new page displayed, update the set of Custom Cascading Style Sheet:
/ _Layouts / [Loc id] /styles/customstylesheet.css
The Portal Site Now Renders HTML Elements Based on The Following Order of Cascading Style Sheets:
OWS.CSS (Windows SharePoint Services Style Sheet)
SPS.CSS (SharePoint Portal Server Style Sheet)
CustomStylesheet.css (CSS file created above)
2. Create a specific directory to store resources required by SPS
Generally, when customizing SPS pages, you need to create some resource files, such as images or logo, etc., here is recommended to create a new directory in the following SPS directory:
<% SystemDrive%>: / program files / common files / Microsoft Shared / Web Server Extensions / 60 / Template / Images
For example, create a directory name: rickie
<% SystemDrive%>: / program files / common files / microsoft shared / web server extensions / 60 / template / images / rickie
The corresponding resource file can then be stored in the above directory, you can access the following URL:
/ _Layouts / images / rickie / [image name] 3. Edit custom CSS file
First open the CSS file created by the first step described above, and add the following:
.ms-phnavtableone
{
Padding-left: 10px;
Padding-top: 1px;
Padding-bottom: 1px;
}
.ms-phnavtableone a
{
Font-family: tahoma;
FONT-SIZE: 70%;
Font-weight: bold;
Color: blue;
Text-decoration: none;
}
.ms-phnavtableone a: hover
{
TEXT-DECORATION: underline;
}
.ms-phnavTableOne is used to define or control the external table of Horizontal Navigation Bar. Refresh the SPS page to see the custom effect.
.ms-phnav1wrapper {
Background-image: none;
Border-top: 1px Yellow Solid;
Border-bottom: 1px Yellow Solid;
Background-color: # ffcc00;
Background-repeat: no-repeat;
}
.ms-phnavmidc1sel, .ms-phnavmidc0sel
{
Border-top: Black 1PX SOLID;
Border-left: black 1px solid;
Border-Right: Black 1PX Solid;
Border-bottom: Black 1PX solid;
}
.ms-phnavmidc1sel a, .ms-phnavmidc0sel a
{
Color: Green;
}
The above elements are used to control the appearance of Horizontal Navigation Bar:
.ms-phnav1wrapper: Wrapper over Horizontal Navigation Bar
.ms-phnavmidc [n] (sel): Middle Center of An Area in The Horizontal Navigation Bar
Div.ms-titleAreAframe
{
Border-top: 3px solid # 4d917c;
}
.MS-SBTABLE
{
Background-color: # 4d917c;
}
.ms-sblbcorner
{
Background-image: URL (/ _ layouts / images / rickie / cornerbl.gif);
}
.ms-sbtopconerner
{
Background-Image: URL (/ _ layouts / images / rickie / cornertop.gif);
}
The above elements are used to control the appearance of Search Box, where the following two patterns are used to reference the user's own IMAGES files, which are used to control the display of the left corners of the Search Box.
OK. Customize the page appearance of the SPS Portal Site Temporary, now you can refresh the page to see the effect. References:
1. Daniel McPherson, Branding a SharePoint Portal Server 2003 Site: Part 2, How to Apply Your Own Corporate Brand, http://msdn.microsoft.com/office/default.aspx?pull=/library/en-us/odc_sp2003_ta /HTML/Office_SharePointHowToApplybrand.asp
2. Dino Dato-on, Jinger Zhao, Customizing SharePoint Sites and portals: style sheet class reasoning tables, part 3, http://msdn.microsoft.com/office/default.aspx?pull=/library/en-us/ ODC_SP2003_TA / HTML / ODC_SPSCUSTOMizingsharePointsites3.asp3. Rickie, Custom SPS Battle Record Series
