Improving #SharePoint Forms

Over the next few weeks I will be writing a series of posts on how to improve the out of the box SharePoint forms by using simple CSS and jQuery solutions.  These solutions will help improve usability as well as enhance the look and feel.  Look for the first post later this week.

As a point of reference this is what we will be starting with.

Standard SharePoint Form

Stay tuned for more soon.

Displaying a rotating header image with caption

Nothing makes a site look good like nice images. Using a large header graphic on you Sharepoint site can help direct users to some important information or announcement. Many non-SharePoint images use this technique to add interest to their site and attract visitors. Doing something like this in SharePoint will make your site a lot less ‘SharePointy’ (my made up word for sites that look like SharePoint). Here is how I did it.

Rotating images with captions

Read the rest of this entry »

CSS-Tricks AnythingSlider in SharePoint

Chris Coyier from CSS-Tricks built this really cool jQuery plugin that creates a content slider that will support any regular HTML in the slides. This is cool because many sliders I have used had limitations on what could be on the slides and did not offer many of the featuers the AnythingSlider does.

AnythingSlider in SharePoint

Setup

To get this working in SharePoint you will need to make sure you have a reference to jQuery in the page somewhere as well as a list for the slider to read from. For my example I am using an out of the box annoucements list.  You will also need the files for the plugin download the anythingSlider plugin from css-tricks.com.

• In SharePoint Designer add a dataview webpart to the page with any field from your annoucements list.
• Switch to code view and find the first <xsl> tag. It should be right after the closing <DatasSources> tag.
• Right click on the tag and choose “Select Tag”. Press delete, don’t worry we will be adding in our own xsl.

• Paste the following xsl into the page where you deleted the code.

Read the rest of this entry »

Image Slideshow with captions

This is a very simple image slide show script that uses jQuery, SharePoint webservices and the default images library to show images with captions. All the content is pulled from default fields in the images library but feel free to add more fields and customize the code to fit your needs. 

Slide show with captions

Read the rest of this entry »

Resizable textareas in SharePoint edit forms

So one of the things that I have had end users complain to me about is the size of the text boxes on the new and edit forms of lists like the contacts list and announcement list. On a recent non-SharePoint project I used a jQuery plugin to create a resizable text area so I tried to implement it in SharePoint. Here is what happened.

I downloaded the Textarea Resize JavaScript jQuery plugin, saved in a SharePoint library along with the latest version of jQuery.

Selecting the Element

In order for the jQuery code to work it has to know which elements on the page you want to work with.

Here is the code SharePoint renders for a text box:

<textarea name="ctl00$m$g_3fa2cde8_0ea8_4421_814f_6a6d292fbe54$ctl00
$ctl04$ctl0ctl00$TextField"
rows="15"
cols="20" id="ctl00_m_g_3fa2cde8_0ea8_4421_ctl00_TextField" title="Body"
class="ms-long" dir="none"></textarea>

There are two problems:

1.  ASP.NET creates very long and hard to use IDs
2. The class ms-long culd apply to other elements on the page that I dont want to use the effect on.

Read the rest of this entry »

Adding Suggestions to the Sharepoint search box : Part 2

In Part 1 of this post we used a simple javascript to display suggestions on a custom search box. After I wrote that post I was thinking it would make more sense to read the suggestions from a list instead of a JavaScript file. This post will explain how to setup the list and edit the JavaScript to read the suggestions from a list. The idea is that an administrator could manage the list and help guide users toward specific information instead of getting numerous un-related results like in those commercials for bing.

Assuming you already have the search box setup as described in Part one of this post all you will need to do is change the javascript and add some code to the page. Read the rest of this entry »

Styling SharePoint Blog Comments: Part 2

As promised I went ahead and styled the comment form on a standard SharePoint blog.  I wanted to make it look better than this but there are some limitations because of the way the page is coded with so many nested tables. 

Better looking comment form

I kept the styles pretty simple but this should be a good starting point for someone wanting to do something more complex.
Read the rest of this entry »

Styling SharePoint Blog Comments

Out of the box the comments on SharePoint blogs dont look that good. 

Standard SharePoint blog comments

 Here is a way to fix that problem. Just add this CSS to the page and things should start looking alot better. Read the rest of this entry »

Better page titles in SharePoint

When working with multiple browser windows open its hard to tell one from the other because most SharePoint pages don’t offer a useful title. So in most cases you will see something like this (I am using the dreaded IE 6 unfortunately). As you can see most SharePoint pages only show the title of the page. On the home page of some sites the site name is shown as well.

Useless Page Titles

Ideally the page title should not only tell you the title of the page you are looking at but also what site you are on. Chris Coyier of CSS-Tricks talks more about different options in this post. After some experimenting I was able to get this working in SharePoint.
Read the rest of this entry »

Annoucements Slider using SP Web Services

This is a simple news slider I put together using SharePoint web services, jQuery and the Easy Slider Plugin from CSS Globe. You can get the plugin here. The Web Part points to the local site’s Annoucements list and display the title, body and a link to view the item. The jQuery connection to the SharePoint web service is based on code from Jan Tielens.

Read the rest of this entry »