Tutorials

Start learning SharePoint now!

Events

View up and coming events.

Contact Us

We would love to hear from you!

Customizing SharePoint Portal Server 2003

4
By shane.perran in : CSS and Usability, SharePoint // Jul 18 2006

While browing posts yesterday I noticed an article on customizing SPS 2003

In the article Luis talks about customizing the SPS.CSS style sheet located on the file system.  I just wanted to note that editing default files is unsupported due to the possibility of service pack overwrites etc.  As such, the team was kind enough to leave us with OOTB functionality allowing us to point to another style sheet.  This eliminates the need to edit default files but also allows us to do some of these customizations that Luis has pointed out.  All you have to do is add one easy extra step.  First “Copy/Paste” the SPS.CSS file and rename it.
To point to a new style sheet in SharePoint Portal Server 2003:

  1. Copy/Paste and Rename the SPS.CSS style sheet
  2. Click on site settings
  3. Select Change portal site properties and SharePoint site creation settings (under the “general heading”)
  4. At the bottom you can point to your new style sheet.

It’s great to see people starting to post about SharePoint Portal Server 2003 customization as I’ve had a lot of requests for information on SPS 2003.

I hope this tip helps,

About the Author

shane.perran has written 606 articles for SharePoint Nation.

4 Responses to "Customizing SharePoint Portal Server 2003"

  1. Mike July 18, 2006 5:21 am

    I’m wondering if this is the best approach…, of course it is the way MSFT has meant it but what effort would it take to backup your customized SPS.CSS before you do the upgrade? By adding it the SharePoint way the SPS.CSS is still loaded which means 32Kb of useless data across the line. On most intranets probably not a big deal but certainly something to think about imho.

  2. shane July 18, 2006 5:26 am

    Mike,

    I would be far more worried about the several hundred k work of javascript which has to load up.

    I certainly agree with taking all things into consideration and I would recommend this approach 100 out of 100.

    Cheers,

  3. SharePoint Products and Technologies - Pointing to Share the Knowledge : How to customize/personalize your Microsoft Office SharePoint Portal Server 2003 in true detail!!! July 18, 2006 8:03 am

    [...] How to customize/personalize your Microsoft Office SharePoint Portal Server 2003 in true detail!!! 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, thank 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 FilesCommon FilesMicrosoft Sharedweb server extensions60TEMPLATELAYOUTS1033STYLES 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 filescommon filesmicrosoft sharedweb server extensions60TemplatesImages 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: /_layouts/1033/PortalProperties.aspx”>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… [...]

  4. Steve September 7, 2006 9:38 pm

    You are now part of the BUZZ, SharePoint BUZZ

    Visit http://www.sharepointbuzz.com

Leave a Reply

You must be logged in to post a comment.