SharePoint Grind

Categories

All Site Content

Home

December 21

CSS Image Sprites in SharePoint 2010

by Susan Henry

on 12/21/2009 7:02 PM

Image sprites are nothing new, but their use in web design is trendy right now for good reason. An image sprite is basically one image that contains a bunch of other ones. By using a sprite, like the one on the left, which is used in SharePoint 2010 to display many icons, you can reduce the number of HTTP requests made and thus improve browser load times. Sprites have been around for a long time and have been used in video games as well as other applications. Take a look at the Wikipedia article as well as this article from A List Apart.

By using CSS to map out the position of each individual image in the sprite, you can use this one master image to display several different icons on the page. Just take a look at the CSS below…

element.style {

display:inline-block;

height:16px;

overflow-x:hidden;

overflow-y:hidden;

position:relative;

width:16px;

}

element.style {

left:0 !important;

position:absolute;

top:-420px !important;

}

The image itself is contained within a SPAN tag that has a specified height and width of 16px X 16px to match the size of the RSS icon. Look at the first block of code above and note that the height and width are specified as well as the overflow-x and overflow-y properties. The overflow value of “hidden” means that the rest of the image that does not fit in the 16px box will be clipped or hidden for the user.

The second block of code is used to display the RSS Feed icon at the bottom of a blog site by using positioning. The background positioning informs the browser where to position the sprite image. The RSS icon is located 420px from the top of the entire image sprite, so the value for left and top in our element style allows us to see just that particular icon in this sprite.

0 Comment(s)

December 12

Slides from SharePoint Saturday (Branding w/ CSS & Master Pages)

by Susan Henry

on 12/12/2009 3:14 PM

Please download my slide deck from SharePoint Saturday DC and Kansas City this December... This is also the presentation I gave at SPS Raleigh in early November as well.

sp brandingScreenshot.PNG

Thanks for all those who attended my session at both events. I had a great time and hope you enjoyed the session. Feel free to contact me with any questions :)

SharePoint Branding Presentation.pdf

0 Comment(s)

December 10

Welcome to the new SharePoint Grind site!

by System Account

on 12/10/2009 8:51 AM

New and improved on SharePoint 2010!! I will be moving over my posts from the old site very soon! In the meantime you can still read the old posts here: Old Site

0 Comment(s)

November 17

Installing SharePoint 2010 Beta on Windows 7

by Susan Henry

on 11/17/2009 1:35 PM

Category: SharePoint 2010; Administration

Today I set out to install SharePoint Server 2010 on my local machine running Windows 7 Professional. This was one of the things I was most looking forward to about 2010, being able to develop locally is not only great for the developers out there, but also for us SharePoint Branding folks, i.e. web designers. It makes life SOOOOOO much easier when you don’t have to wrangle virtual machines in order to build out some master pages! So, needless to say, I was really looking forward to making this setup happen for myself.

So, there is an article you can follow on MSDN, which guides you through MOST of what you’ll need to do w/ the current beta that’s out there. However, when it comes to getting the configuration wizard to complete successfully, you’ll need to follow some extra steps, unsupported ones at that. Until the Hot fix comes out this is the only way you’ll get your installation up and running.

First, you’ll need to download the beta from TechNet or MSDN. Save it in a folder SharePoint2010 (or whatever you want to call it) off the C drive. When your download is complete run the command line to extract the installation files. This step is described in the MSDN article: Setting Up the Development Environment for SharePoint Server

So, once you’ve extracted everything you should see a list of folders like the following:

Inside the Files –> Setup folder you’ll find the config.xml file. Make a backup before you make the modifications outlined in the MSDN article and then add the setting id to allow windows client install inside the <configuration> tag. You can copy and past from the MSDN article, the following line:

Save your config.xml file and then you’re ready to install all the pre-requisites.

If you’re running Windows 7 you’ll want to install the additional prerequisites listed, like the Geneva Framework, ADO.NET Data Services v 1.5, and SQL Server Analysis Services. Just follow the list of items in Step 7 in the MSDN article to do so and you’ll be golden.

Once those installs are complete you can copy and paste the script they provide into the command prompt, but just remember to remove any line breaks. The first time around, this script ran fine for me, but it didn’t activate the Non-HTTP Activation and that caused my configuration wizard to fail.

So…

Once you get to the point where you’re double checking all of the Windows Features are turned on, make sure that the checkbox for Windows Communication Foundation Non-HTTP Activation is selected. That’s under the Microsoft .NET Framework 3.5.1 section.

Now, you’ll want to do a reboot before you proceed with the installation.

During the Installation if you get the following error, you may have a typo in config.xml file. Double-check that…

Setup is unable to proceed

If everything goes forward you’ll be prompted to enter you product key and the install should start. I configured my dev environment as a Standalone install. If all goes well, you’ll be ready to run the Config Wizard. This is where you will run into problems. Luckily, there are people out there who’ve already figured it out and pre-Hot Fix, you’re going to have to modify an XML file in order to get the Config Wizard to finish Step 8 – Creating Sample Data… There’s already a blog post on this from Mike Hacker: SharePoint 2010 Beta on Windows 7

Make sure you read carefully, he’s instructing you to open the client.config file and remove two lines of code with the allowInsecureTransport attribute. If you’ve already run the config wizard, that will be in the error log where it says “Failed to create sample data”

Go to the SharePoint Root under WebClients\Profile… The full path is here: “C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\WebClients\Profile”

Make a backup of client.config and then open in Notepad. Find those two lines of code, line 56 and 90 and remove both of the attributes for allowInsecureTransport:

Save your config.xml, (you may have to allow full control to your account in order to have write access), and then re-run the Configuration Wizard.

At that point, everything should go off without a hitch and you should be the proud owner of a new SharePoint Server 2010 installation on your Win 7 machine! :)

If you run into any problems or have other tips, please share!!

0 Comment(s)

October 21

Creating a Content Type Inheriting from Event

by Susan Henry

on 10/21/2009 2:44 PM

Category: Content Types

If you need to create a content type that inherits from the “Event” content type, you will notice that OOTB it’s not listed in the List Content Types group. That’s because it is in the _Hidden group and in order to use it you will have to be sneaky enough to move it out of there!

So, in order to do this you’ll need to go to a Calendar on your site and go to the Settings page. From there you need to turn on Content Type Management in the Advanced Settings. Once you’ve selected “Allow management of content types?”, you’ll be able to see the Content Types listed for the Calendar list and there you’ll find the “Event” Content Type.

Now you can actually go into the List Content Type for Event and from there you’ll be able to dive even deeper and go to the Parent Content Type by following the link in the List Content Type Information Section at the top of the page:

This link takes you to the Site Content Type for “Event” and from there you can modify the Group that Event is listed under, thus making it visible for you to use when creating new content types that inherit from this one. Once you’re on the Event page, just go to the “Name, description, and group” link in the Settings area and add it to the List Content Types group.

Now you’ll be able to create a new content type that inherits from the Event parent type.

0 Comment(s)

October 19

New SharePoint 2010 Stuff @ Microsoft.com

by Susan Henry

on 10/19/2009 2:53 PM

Category: SharePoint 2010

Today, on day 1 of SP Conference a TON of new SharePoint 2010 content is being released all over the web. It will be hard to keep up with it all, but just wanted to share some of the stuff I’ve found this morning. On the Microsoft Download Center there are lots of new diagrams and articles that have been released today. Check out this list below and check back for more as I find them. I particularly enjoyed the Microsoft SharePoint Server 2010 Evaluation Guide, which is a great overview for those of us that are new to the 2010 platform.

You can download that guide here: SP Server 2010 Evaluation Guide

Check out this learning plan too: SharePoint 2010: Developer and IT Professional Learning Plan

Here are some other great new releases:

Developers:

SharePoint 2010: Developer Platform White Paper
SharePoint 2010: SharePoint Developer Platform Wall Poster
SharePoint 2010: Professional Developer Evaluation Guide and Walkthroughs

Admin & Info Arch:

BI & Information Architecture:

Search:

Search Environment Planning for Microsoft SharePoint Server 2010

Search Architectures for Microsoft SharePoint Server 2010

Design Search Architectures for Microsoft SharePoint Server 2010

Search Technologies for SharePoint 2010 Products

0 Comment(s)

October 19

Neat Find: Visio Stencils for SharePoint

by Susan Henry

on 10/19/2009 2:46 PM

Category: Resources; Tips & Tricks

So, recently I needed to create a process flowchart for a reservation system built on top of SharePoint. Being the perfectionist that I am, I really wanted to find some Visio stencils or shapes that represented the SharePoint objects I was referring to in my flowchart. There was nothing in Visio 2007 that came close and I really didn’t want to create anything myself, so I started digging.

I came across quite a few downloads on the Microsoft site that had some neat shapes I could use, but for the SharePoint entities like, Calendars, Lists, Workflows, etc. I was still out of luck. Then I came across Maxime Bombardier’s Visio 2007 stencil and voila! So, if you ever need to create something similar, check this out:

Visio Stencils for SharePoint 2007 sites and servers

There are a few other great posts out there, like this one from Dave Hunter that lists some other resources, including the one above: Visio Shapes for SharePoint

Of course, when Visio 2010 becomes available you can look forward to built in templates for building SharePoint 2010 Workflows, which sounds very cool. Check out this blog post to see some of the screenshots of the process. There are lots of really neat stencils to represent workflow actions, terminators, conditions, etc. All the more reason to upgrade I guess…

0 Comment(s)

September 07

SharePoint Branding Inspiration

by Susan Henry

on 9/7/2009 3:03 PM

Category: Resources; SharePoint Branding

There is a great site out there, WSSDemo.com, which is run by Ian Morrish and provides a comprehensive list of many public-facing SharePoint sites. If you haven’t checked this out and you are considering branding a SharePoint site, you should do so ASAP. I think it’s really important to find inspiration and explore what’s possible when it comes to web design of any kind. For SharePoint Designers this is even more crucial because too often you will approach a branding project from within the SharePoint box and looking at other designs that have been created will broaden your horizons. clip_image001

Most of you probably already know that the Ferrari website is built on SharePoint, but there are TONS of other great sites as well and you can see some of the amazing things people have been able to do with SharePoint Branding.

So, take a look through the list Ian has compiled at http://www.wssdemo.com/Pages/topwebsites.aspx and see just how many public-facing SharePoint sites are out there. He has even created many different views for you to find what’s out there.

Here are a few of the sites I saw that made me smile. I just think it’s awesome to see how SharePoint can be transformed into stuff like this…

clip_image002 clip_image003
clip_image004 clip_image005

clip_image006

0 Comment(s)

September 06

Channel 9 – SharePoint Development Videos

by Susan Henry

on 9/6/2009 1:25 PM

Category: Resources

If you haven't checked out Channel 9 before, you should. It's a great resource with developer focused video content and they have tons of SharePoint-centric videos on the site. I've found some great stuff on the site, like Ted Pattison's video on how to configure Forms Based Authentication with WSS 3.0: http://channel9.msdn.com/shows/In+the+Office/Anonymous-Access-and-Forms-Authentication-with-WSS-30/

Take a look on the site and check out all the great SharePoint tagged videos they have!

http://channel9.msdn.com/tags/Sharepoint/

0 Comment(s)

September 04

Uncustomized vs. Customized Pages in SharePoint

by Susan Henry

on 9/4/2009 3:27 PM

Category: Designer; Master Pages; SharePoint Branding

In SharePoint 2003 the concept of Ghosting and Unghosting described what happened to your files when they were modified or customized. With SharePoint 2007 that terminology and the process by which customizations are handled has changed drastically. Instead SharePoint 2007 and WSS 3.0 are built on top of ASP.NET 2.0 and use the Virtual Page Parser. Thus, the process has changed and so has the name. With the next version of SharePoint right around the corner it’s probably a good idea to use the newer naming convention of Uncustomized/Customized and understand what it’s all about…

Anyone who has worked with SharePoint “branding” in any capacity has encountered the following message when trying to save changes to any of the files in your site’s file system. You get the Site Definition Page Warning message…

The question is, what does it mean??? When you say “Yes”, what actually happens? Why do your files (i.e., aspx pages, master pages, etc) then have this little blue “i” next to them??? These are questions you should be asking because it’s important to understand how your changes are affecting the bigger picture within your SharePoint environment. The best way to understand this is to dive a little deeper into the guts of SharePoint.

You’ll notice if you hover over the page it actually tells you what that symbol means, “Page is customized”…

A brief background here… SharePoint is a site-provisioning engine that supports user site creation and a large number of sites. Every SharePoint site is part of a larger container, the site collection, which lives inside a content database within SQL Server. Each content database contains all of the files, lists, libraries, and data that make up your SharePoint site.

However, some of these files, like the ASPX pages and Master Pages, don’t actually live in the content database, not out-of-the-box at least. In lieu of these files residing in the content database there are instances or pointers back to the original files that live on the SharePoint server itself, inside the 12 Hive. This virtualized file system means that site pages and application pages are served up by ASP.NET from the 12 Hive by the instances or “pointers” in your site’s content database.

Once you make your changes to one of these files you are “customizing” that file and essentially creating your own version that will be stored in the content database. Once a file is customized it no longer points back to the SharePoint server file system and is instead pulled directly from the content database. This is the main distinction between uncustomized and customized files in SharePoint…

Uncustomized means that the source of the file lives on the file system NOT in the content database. Only an instance or pointer exists in the content database. This is how all Master Pages and ASPX pages start out.

Customized means that the source of the file lives ONLY in the site collection’s content database. When an end-user requests a customized page, SharePoint loads all markup from the database.

The diagram below gives a visual representation of the process by which Uncustomized files are served to an end-user.

With all that said, why should you care whether or not your files are customized???

Depending on your environment, you’ll want to understand where the majority of content is being served from because there may be performance issues if you are constantly fetching customized pages from the database. You’ll also want to keep in mind that the more files you customize, the more you’ll have to keep track of. When you consider upgrade scenarios, disaster recovery, or major design changes, the more customized files you have to keep track of, the more overhead you’re faced with.

The biggest red flag I’ve seen is when people create a multitude of customized ASPX pages that are detached from a Master Page. If that sounds familiar, you should probably take a step back and reassess your game plan. I say that only as a word of caution because the more customized files you have, the more difficult it becomes to maintain. Just try to use the tools like Master Pages and Cascading Stylesheets to your advantage so that you don’t end up pulling your hair out later on.

Once you’ve customized a page, you can always revert back to the original, i.e. the site definition. You can find that option on the file menu and it will create a copy of your customized file and replace the original with what exists on the server.