Redesigning SharePoint

I’ve never been a big fan of SharePoint, but it had become obvious that installing WSS 3.0 would allow me to get a very functional document library and knowledge base online for internal users in a very short time frame. I recently heard that the second rule of the Army is, “If it’s stupid but it works, it isn’t stupid.” It rung very true.

So now I have it and I needed to redesign it. There were two main suggestions I found online about redesigning SharePoint:

1. Surrender to SharePoint Designer
2. Do not edit “core.css”

First, SharePoint Designer is a descendant of FrontPage. That’s enough to convince a seasoned web developer not to use it. Second, I was careful and backed up files before changing them. I could easily revert back. Third, all changes were made in a development environment and thoroughly tested before being released to the wild.

User-testing helped me to design the version of a SharePoint installation that we both want and need in Photoshop, but changes to a Cascading Style Sheet weren’t going to do it.

To get the results I needed, I edited several of the master pages and user control pages, the “core.css”, two images as well as adding a theme-specific style sheet and images.

Lessons Learned and Best Practices

• Set up a test environment and restore a recent copy of the SharePoint back up. Test your design changes here. Obvious and worth it.
• Create your own theme, but choose the one that looks the most similar to copy. There are plenty of places that will tell you how to create your own theme by copying an existing one, renaming it and then making your edits so I’ll skip that. By choosing one with a similar color scheme to your goal, you can save yourself a lot of time searching through tons of code.
• Don’t be afraid to make changes, just make sure that you have a back up. Some of the design changes I made forced me to edit the master and user control files. What really surprised me was that some design changes could ONLY be made by editing the “core.css”.
• Import a Style Sheet. Use it as much as possible. (It’s worth noting that many sources online recommend this. They also say not to edit the master pages, but then say you have to add the code to import this new CSS file to the default.master. Confusing.)
• Use GIFs over PNGs for images. PNGs looked great in everything but Internet Explorer. Only GIFs survived cross-browser testing.

Where Are All The Files You Will Need?

• Images: Local Drive\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES
• Cascading Style Sheets: Local Drive\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
• Default.Master: Local Drive\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\GLOBAL
• Other Helpful Code Files (Notably Application.Master): Local Drive\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS
• The Themes: Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES
• SPTHEMES.XML (Defines the themes available): Local Drive\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033

Related Articles

• SharePoint Research
• Migrating SharePoint
• Getting Site Search to Work

Related posts

1. Migrating SharePoint
2. SharePoint Research
3. The Thinly-Sliced Billboard
4. WSS 3.0 Site Search Not Working
5. Common Pleas