This post its dedicated to all you people, looking for the magic path to customize in detail your institutional SharePoint Portal Server 2003.
Talking about this topic, we have to talk about Heather Solomon, and her great Blog dedicated specially to publish and share great tips, know-how's, and best practices for customize SPS 2003.
Also there are other interesting blogs about customization like GraphicalWonder from Shane Perran, and Microsoft Resources, like SharePointCustomization.com
But well, even do this brilliant SharePoint MVPs and Bloggers have done an amazyng work untill know, I haven't found a guide step by step, in detail telling exactly wich part or section from the style sheet to edit. Well, I have made some screenshots that could help us all, to know a little bit more what to change and where...So here we go...
After begin, I would like to comment an important tip, thanks Shane for your email. As he said on an email received from him, Microsoft does not recommend change the default style sheets used by SharePoint, I mean is not supported, but instead we can do a few steps before editing the style sheet, making a copy from the original file, make the necesary changes there and finally specify SharePoint to load this new css file, finally a customized copy from the original one, so to do this few steps you should check Shane's Post (And for that Im going to change the following lines where I explain wich style sheet use).
So, after review the comments from Shane's Post, you will be ready for make changes to your copy of sps.css stylesheet located here:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES
To customize the color of the frame up the navegation bar, you should open your new stylesheet file
And change the line that says border-top. You'll see something like this...
If you want to move the links from right to center or left...like MySite or Help?
Search for .ms-banner on the same file and change the value from text-align.
You'll have something like this.
An important tip, how to change the logo from the Portal Site:
You should go to c:\program files\common files\microsoft shared\web server extensions\60\Templates\Images and find the image with the name: SiteLogo.gif, you could replace your corporate Logo with the same name and rename the original one, and thats it, or you can also, change the original specified Logo from this URL:
http://<servername>/_layouts/1033/PortalProperties.aspx and find the text box where you can specify the new image from your own.
Now, If you want to change the color of the Navigation Top Grad Menu, you should change this image for the one with the colors of your preference.
Once you have change that image...you'll see something like this...
Check also this line of code and edit your own image to change WebPart Header Color...partgradp.gif
You should also check this lines of code to change the lines between the TopGrad Image at the Navigation Barr...
Border-top
And border-bottom
Before the changes...
After that...
Now, to change the style of the borders from each of the links from the Portal Areas, that corresponds to each link as Home, Topics, News and Sites, check this lines of code from the same file that we are working on (your copy of the original sps.css)
Before made changes you should see this.
After changing this lines of code...
You will see it like this...
Now, obviously you can see the border colors from the Topics Area that is selected on the previous image, well to change the color you should change this lines of code...
And after that you will see something like this...
Ok, so far we have finish changes to the TopGrad Menu Bar, know on we will see some other details...
To change the color of the search box...
You should change this line of code...
And you'll have something like this...
Ok, now to change the color of the watermark text from the left side you should change this line of code...
And you'll see something like this...
Now on, to change the color from the Topics Area
You should see something like this...
Now, to change the color of the Topic Subdivision area...change the line selected from the image
And you'll see something like this...
Know, what if we want to change also the color from the onmouseover links from that same section, the subdivision links from Topics...
We should change this line of code...
And when you do a onmouseover to some of these links, you'll se something like this...
To change the color to the Title Portal, we should change this line of code...
And then you'll se something like this...
And, to be sure that the title from other areas like for example Sites will have the color that you want, we should check this section of code...
And we'll have something like this...
Well I really hope this few tips to customize in detail a SharePoint Portal Server 2003 help you...Remember that at the endyou must specify to SharePoint the new stylesheet allready customized...for this you can check Shane's Post
Please, feel free to comment about this to know what else you would like to know about SharePoint....and would really help you...
