vivi's SharePoint Space: SharePoint Customization

Create KPI List in WSS v2.0 or WSS v3.0

Tue, 24 Jul 2007 21:39:40 GMT

In MOSS 2007, there is a KPI Web Part and KPI list. It is very useful for management to see the current status of the key performance indicator of the company. However, this feature is not available in either WSS v3.0 or v2.0.

With the current WSS v2.0 on hand, I have developed a similar KPI list and Web Part to mimic the features in MOSS 2007.

Here are the steps:

1. Create a list called "KPI List" with columns:

- Indicator (changed from Title)

- Value

- Goal

- Warning

- Status (Calculated Value)

2. What I want to show is:

Red: Value < Warning

Yellow: Warning <= Value <= Goal

Green: Value > Goal

3. Based on the condition above, create a function for the Status column:

Status =(IF(AND(Value>=Warning,Value<=Goal),"Yellow",IF(Value>Goal,"Green",IF(Value<Warning,"Red"))))

By Chad's request, I'm gonna explain more details on steps 4-6:

4. On the homepage, add KPI list by status=red, status=yellow and status=green, so you will have three modules of data.

- To do this, you add the KPI list web part to the page, and then Modify Shared Web to apply filter Status = Red, Status = Yellow and Status = Yellow. It means you have to add KPI list WP three times with different filters.

5. Open FrontPage 2003, convert to XSLT list, change the style to the one you prefer.

- Open the page in FrontPage 2003, right click on the WP, and then Convert to XSLT Data View. This gives you more option to change to the styles you like.

- Then enable the WP menu, select Style.

- I chose "Repeating Form", and here is how it looks.

- Then you can change the font color/size.

6. Insert the icons in front of the list item.

- Add a column in the Red WP to have a space for Red icon.

- Then insert the icon. The icon is displayed according to the line items, which means if Pipeline now changes to Yellow status, it will be shown in the Yellow WP with the yellow icon. Of course you need to add the yellow and green icons first to the Yellow WP and the Green WP respectively.

Finish Product.

How to Create a WSS Theme II

Wed, 12 Apr 2006 21:21:51 GMT

Via Brad Covelle:

This is actually more complicated than I had originally thought, so I spent some time doing it myself and verifying the steps below. These are the exact steps I went through and was successful in creating a theme for my WSS site.

Open FrontPage 2003, Click on Format -> Theme -> then on the task pane that opens you can either modify an existing theme and save it, save it with a different name, or click “Create a new theme…” at the bottom of the task pane.
Then on the screen that opens you can modify the colors, text, fonts… and then click “Save As” and just save it in the default location and give it a one word name.
The theme will be saved in C:\Documents and Settings\<username>\Application Data\Microsoft\Themes\<theme name>
Then go to http://support.microsoft.com/default.aspx?scid=kb;en-us;295409&Product=fp2000 create the Unpack_elm.vbs script, place it in the folder from #3 and run it. Then delete the vbs file out of that folder once the files have been unpacked.
Copy the entire folder to C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\template\themes
Open C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\template\layouts\1033\spthemes.xml with NotePad.
Add a template by adding the lines below:

<TemplateID>halloween</TemplateID> (this value should match the name of the folder you copied)

<DisplayName>Halloween</DisplayName> (this value can be anything, it will be displayed to the user)

<Description>Description</Description> (again any value is fine, this value is unused by SharePoint)

<Thumbnail>../images/thice.png</Thumbnail> (this image won’t be used and so you can use this value or leave it blank)

<Preview>../images/thice.gif</Preview> (This value is a .gif file of a screen shot of your theme applied to a site, it should be 300 x 179 and located here: C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES)

</Templates>
8. Perform an iisreset on the SharePoint server and now when you choose to Apply a Theme to a site your custom theme will be listed and you can apply it.

Add your company logo without site definitions or unghosting

Fri, 02 Dec 2005 17:43:59 GMT

Via Shane Perran

Posted on November 09, 2005

In the last tip I quickly showed you how to use a theme to remove the logo.gif logo that shows up in the top left of all SharePoint sites by default.

The tip was based on adding the following class to your theme.css file:

.ms-bannerframe td img {
display:none;
}

Let's take this one more step:

One of the most commonly asked for customizations I get and I would guess most people get is "Can I add my company logo to the page".

The answer is most definately yes. In the past this has generally been done using a custom site definition or by editing the page in FrontPage 2003 which unghosts the site. There is another alternative that I have never seen mentioned, adding it via the theme and it's actually quite easy.

Now that we have removed the logo.gif from the page using the method above, we have a blank top bar to work with. We also know that ms-bannerframe is applied to a table which extends across the entire top of the screen.

Based on this we can create a background-image that will a) extend across the entire screen and b) hold the company logo.

Quick steps to accomplish this:

Add the class above to your stylesheet to remove the logo.gif.
Create a background image with your company logo placed to the far left. You don't want your image to tile so you need to make it nice and wide 1600pixels recommended.
Edit the ms-bannerframe class to display your background image.
Specify the height in ms-bannerframe. It should be the same height as your background image.

It should read
(pixels are relevent only to YOUR design obviously).

.ms-bannerframe {
background-image:url (yourimage.gif);
repeat:no-repeat;
height:50px;
}

One small glitch! - The navigation is going to overlap your company logo because we hid the original logo.gif that was there.

That's easy to work around. We also know the .ms-banner class is applied to the top navigation which is overlapping the logo. Just add a little left padding to push that over.

To add left padding add this to your ms-banner class:
/* The padding should be about the same width of your company logo */
.ms-banner: {
padding-left: 50px;
}

That should do it. Simple but effective way of adding your own custom company logo to a SharePoint site without site definitions or unghosting.

Before

After

With a little thought you can accomplish a lot through your theme.css.