Dave Cavins » SharePoint Design

Switch Themes Without a Page Refresh: Part 2

davecavins — Mon, 14 Jun 2010 14:50:09 +0000

So in part one of this post we got all the CSS and other theme file we needed to stuck them in a document library.

With JavaScript you can change the CSS file a page uses without requiring a page refresh. I have used this technique many times on non-SharePoint sites but there are some special challenges implementing this in SharePoint. Most of the scripts I have used in the past use the alternate style sheet method as describred by A List Apart here. That method works fine but I had to find another way because I was already using that script to allow users to change the font size. After some research I found this script from CSS Newbie that worked pretty well without using alternate style sheets.

The problem

While the script works just fine on regular HTML pages it cause problems in SharePoint here is why :

 $("link").attr("href",$(this).attr('rel'));

This line of code basically finds all the linked CSS files in the page and changes thier value to point to the new style sheet you select. This is fine on a site that just uses one CSS file but in SharePoint bad things happen. In most cases we dont want to completely remove the reference to core.css. For most themes many elements don’t need to be changed so we only have to write the CSS to change them and let core.css do the rest. If you remove core.css its like using a global reset (discussed in more detail here) which means you will have to restyle everything. So them point is we want to leave core.css in the page and just add our theme.

To do this I had to make some changes to the master page to create to interface users will use to swap themes.

Edit the Masterpage

Here is the code I added to the masterpage. This can be styled to look however you want and can be added anywhere in the page that makes sense.


	Reset CSS
	Verdant
	Belltown
	Petal

In addition to this we also need to add a link to our css file to the master page. I put it at the end of the head section.

I added a class to the link so that we can use jQuery to target only that css link and change it to match the theme the user selects. Initially I left the href value blank but if you want to apply some default styles you would just add the link to the css file there.

Use jQuery to Swap the CSS

So here is the code I used to swap the stylesheet. The main thing I changed is on lines 7 and 12. I changed the selector so it will only target tags with a class of ‘altStyle’. This allows us to swap themes without breaking the link to core.css.

Resources

You will need jQuery either locally or linked from Google. Just update the link on line 1 as needed.
In the code above you will notice a link to cookie.js, this is the jQjuery cookie plugin that you will need in order to save users’ theme selections. In the code above on line 13 you will see where I create a cookie named css. For testing purposes you can uncomment line 10 to see what the cookie value is on page load. You can download the plugin from here. jQuery Cookie Plugin
You can see the original code I started from in this script from CSS Newbie

Conclusion

While this is a very simple solution it is a quick way to add in some fuctionality that many users want without alot of custom code or requiring the user to navigate to multiple pages. Users like to feel that they have some control over the site (even if its just changing the color). Feel free to post any questions or comments.

Switch Themes Without a Page Refresh: Part 1

davecavins — Mon, 07 Jun 2010 19:03:26 +0000

Many sites offer the ability for users to change the color and style of the site to fit their preference. SharePoint has this feature to some extend through themes but changing themes is not a very simple process and requires browsing to several pages.

Users need to be able to switch themes and have the setting saved
No page refresh
Should be able to use both out of the box themes and custom themes

So first I needed to get the CSS files and images for the themes I wanted to use. When you assign a theme to a site all the files for the theme are copied to a folder named _themes in the root of the site.

_themes folder

So what I did was assign each theme I wanted to use to the site one at a time. With SharePoint designer I copied the files folders for each theme into a document library called Site Styles. Each folder contains all the resources needed or the theme to work.

Here is what I ended up with

Site Styles Library

If I wanted to create a custom theme I could just add another folder with my custom CSS and images.

This same technique can be used when developing your own custom theme, just copy one that is similar to what you want and use the alternate CSS link on the master page settings page to add it to the site. Inside of the folder for each theme is a file named theme.css. Link to that file and SharePoint will apply the theme to the site.

Alternate CSS URL

Now everything we have done so far is pretty basic and easy to do but we will pull all this together with some simple edits to the master page to complete the solution. In part 2 I’ll explain how we use JavaScript to switch styles and set a cookie to remember the users theme choice.

Anything Slider in SharePoint – Update

davecavins — Fri, 23 Apr 2010 17:49:05 +0000

Several people have asked how to change the under of items displayed in the slider and how to change the sort order.

Item Limit

To change the number of items displayed use the code below.



	
	
	'
	0
	
		
	
	
		Table

On line 13 change the RowLimit to the number of items you would like to show. For example if you wanted to show 6 items you would change line 13 to this

Sort Order

Changing the sort order can be done through SharePoint Designer once you are using the updated code

Click on the arrow to show the common data view tasks.
Click on ‘Sort and Group’ the second option.
Make changes as needed.

If dont want to do it that way there is another option.

Open the page in SharePoint Designer
In code view find this ‘SharePoint:SPDataSource’ you will need to edit this tag.
Find the SelectCommand and add/edit the OrderBy attibute.
See the code below for an example. (Ordered by Created Date in Ascending order). Its basically a CAML query.


 If you are not sure how to get it all set up look to my previous post on the Anything Slider.  If you have questions please post a comment.


Related posts:
CSS-Tricks AnythingSlider in SharePoint
Dynamic Drive’s Featured Content Slider in Sharepoint
Switch List Displays with JQuery and CSS

Adding Comments to a List Part 2

davecavins — Thu, 25 Mar 2010 19:28:05 +0000

So here is what we have done so far from Part 1

Create a custom list to hold our comments
Link the list with an Annoucements list using lookup columns
Create a page to display a single annoucement and the realted comments from our comments list.

This is what it looks like:

What we have so far.

All we need to do now is setup a form on the page to allow users to create new comments on the item they are viewing.

Adding the New Comment Form

Open the page in SharePoint Designer and add a Custom List form to the page below the comments list.

Insert a custom list form

Choose the comments list and select the new item form option

Your page should look something like this:

So now we have a form that we can use to add comments to our comments list but the problem is we need to make sure each comment is associated with the right Annoucement.

Associating the Comment

To associate the comment with the right Annoucement we need to set the value of the post field to corespond with the annoucement we are viewing. To do this we will use a parameter.

In the Common Data View Tasks pane click on Parameters
Create a new parameter (the name does not really matter). Set the parameter to get its value from the query string variable item.

So now we have the ID of the Annoucement and we just need to use that value to populate the Post column. To do this we will edit the comment form.

Click on the small arrow beside the Post field on the comments form and choose Format Item As > Text Box

Now we need to set the value of the text box to our variable.

In code view do a search for asp:TextBox
The code will look something like this

{@post}” __designer:bind=”{ddwrt:DataBind(‘i’,concat(‘ff2′,$Pos),’Text’,'TextChanged’,'ID’,ddwrt:EscapeDelims(string(@ID)),’@post’)}” />

Change the text attribute from {@post} to {$you-param-name}
Save the page and test it. When you load the page the text box should populate with the ID of the Annoucment that is being displayed (the same value as in the qurey string variable). Update the value of the query string variable just to make sure it is changing the text box value.
Once you have verified that the parameter is working properly you can hide the text box by adding the class ms-hidden to the holding it and the holding the label.
Test the form and verify it is working.

Redirect

When you tested the form you probably noticed that instead of bringing you back the the annoucements page you were taken to the AllItems view of the comments list. This is normal but not what we want. To fix this we will have to make a few more small edits to the comments form.

In SharePoint Designer delete the OK and Cancel buttons on the comments form (dont worry we will replace them)
In code view paste this code where you want the save button to be.
Set the redirect parameter to the url of whatever page you want to send people to.
Test the form and make sure everything works

Conclusion

Using this method you can add the ability to post comments to lists that are not blogs. Once you have everything setup and working its pretty simple to make the form and the comments look better using CSS. If you have questions feel free to post a comment.

As a result of some acusations of plagarism I am adding links to some other resources somewhat related to this topic. The point of this blog is not to duplicate or take credit for the effort of others.

Adding Comments to a List Part 1

davecavins — Mon, 15 Mar 2010 22:05:43 +0000

In SharePoint 2007 the only lists that offer a comments feature are the posts list in the Blog site template. Wouldn’t it be nice to allow people to post comments on other types of lists like announcements or documents? Well after lots of trial and error I figured out how to do it.

What you will need

Two Lists
SharePoint Designer
Basic knowledge of HTML

I’ll assume you already have a list setup on which you want to allow users to comment. For this example I will use a standard Annoucements list.

So the first thing we need to do is create a list to hold our comments. I just used the following columns:

Title
Body
Post (lookup to main list’s ‘Title’ column)

In the main list you will need to add a column that points back to the comments list.

Go to the list settings page and click ‘Create Column’
Name the column ‘Comments‘ (the name does not really matter. Set the type to ‘Lookup‘
The lookup should get information from the comments list you created. The column should be set to the lookup column in the comments list. See the screenshot below. This column will show us the number of comments each item in our list has.

Ok so now that we have the two lists pointing to each other we need to show the comments on a page with our list item.

Add a couple of items to each list just for testing purposes.
Create a blank web part page.
Add a data view web part to the page to display the Annoucements list.
Create a parameter on the dataview named item and set it to get the variable from the query string.
Note : Whatever link user click to get to this page will need to pass the item ID as a variable in the query string in order for this solution to work. In my example I am passing the ID in the ‘item’ variable but you can use whatever you want.

set up parameter
Adjust the filter settings so that the list is filtered using the parameter that has been created. You can test to verify this is working by putting “?item=1” and the end of the url and the list item with an ID of 1 should be displayed.

Filter using the parameter
Add a web part to the page below the data view to display your comments list. Create a web part connection to filter the comments list based on the Title of the Annoucement list item.
Get Sort Filter from

Click Next

Test the page and you should see one annoucement and the related comment. In my next post we will create a form so that users can create new comments.

Improving #SharePoint Forms – Hints

davecavins — Mon, 22 Feb 2010 17:22:39 +0000

When users are asked to enter information in a form sometimes it helps to give them a hint regarding what types of information should be entered. Out of the box you can enter a description of each field that will be displayed. If you want something more dynamic here is how to do it.

Add jQuery to the page using the method described in this post
Download the jQuery Hint Box plugin and link it to the page.
Call the script and set the options for the position and html content of the hint. Here is an example:

The above script simply selects the field using its title attribute then sets the css class for the element, its contents and position.

Here is the CSS I used for my example.

.simple_box{
	border:1px solid gray; background:url('/_layouts/images/toolgrad.gif');
	font-size:xx-small; color:#444; padding:7px;
}

Here it is in action.

hints

Improving #SharePoint Forms

davecavins — Tue, 26 Jan 2010 02:43:15 +0000

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

davecavins — Thu, 21 Jan 2010 03:20:00 +0000

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

Setup

Create an Image Library to hold your header images, I named my list ‘Headers’. You can add additional fields to the list if you want but its not necessary for this to work.
Find the images you want to use and re-size them to all be the same dimensions, I used 600px x 200px.
Upload the images to the library and fill in the meta data for each one. Just make sure the ‘Title’ field has something in it because that is what we will use for our captions.

The hard part

Ok really its not hard at all.

In SharePoint Designer and add a data view web part to the page. It does not matter what fields you show in the DVWP the important part is that it is pulling its contents from the Image Library you created.
Switch to ‘split view’ and find the tag. It should be right after the tag in the code. Right click on the tag and choose ‘Select’ tag. Press delete.
Split view

XSL tag

Select Tag
Paste this code where the tag used to be.



	
	
	'
	0
	
		
	
	
		Table

How it works

This code displays the items from our list in an unordered list and then using the jQuery method explained here it randomly chooses one to display. Initially they are all hidden by this css.

You can remove this from the xsl code and put it in your own external style sheet if you want. If you look at the article on CSS Globe where I got the code from there is also a way to make it show images randomly on page refresh.To diplay the captions I am using the Captify jQuery plugin. If you notice in the xsl I am adding a class of ‘captify’ to each image, this is all the plugin needs to work. We just need to reference the plugin file and call the function like this:

In closing

I have seen other methods of showing random content in the Data View Web Part such as this one:

However when I experimented with it there were issues with it choosing id’s that were not in the list and therefore nothing would display. If any one knows of an alternative solution please let me know.Overall this can be a very powerful tool for sharing information with your users. With a few small edits to the code and the list you can easily make each slide link to a page or a list item on your site.

If you have trouble getting this working on your site make sure the references to jQuery and the Captify script are correct, if they are right and you still have issues feel free to post a comment and I’ll do what I can to help out.

Resources

CSS-Tricks AnythingSlider in SharePoint

davecavins — Mon, 07 Dec 2009 20:10:42 +0000

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 tag. It should be right after the closing 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.

Important: Adjust the links on the code so that point to your local copies of the css easing and plugin files.

Notes

I made a few small changes in the css file to make things work better with SharePoint. In page.css file I deleted several of the classes so they would not interfere with SharePoint’s styles. In the xsl I used a div with a class of .textslide to wrap the content so I had to change that in page.css as well. To keep long annoucements from breaking the design I set the overflow on the .textslide div to hidden. Below is the code I used in page.css.

/*hide content that is too long */
.textSlide { padding: 10px 30px; overflow:hidden; }
.textSlide h3  { font: 20px Georgia, Serif; margin-bottom:12px; }
.textSlide h4  { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
.textSlide ul  { list-style: disc; margin: 0 0 0 25px; }
.textSlide ul li  { display: list-item; }

I did not make any changes to slider.css. It may be easier to just combine the tow files to keep things simple and reduce page load times.

Conclusion

The AnythingSlider plugin is lightweight, powerful and easy to customize. Adding this type of functionality that is common on regular websites to a SharePoint site can help guide users to important information and of course make your site ‘cooler’ than the average SharePoint site.

The code above just shows all the items in the list but once you have it working it is easy to add your own sort/filter parameters to the data view so only certain items are shown.

The slider could also be implemented to run off of the SharePoint list web service the same way I did in this post. If you have any questions or comments feel free to post.

Image Slideshow with captions

davecavins — Tue, 10 Nov 2009 17:12:01 +0000

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

Setup

To get this slideshow up and running there are a few things we have to do to prepare.

Create a standard image library. You can add additional fields if needed but the list needs to have all of the out of the box fields.
Get jQuery. Either link to the latest version from Google or download it and put it in a location on your server.
Download the s3 slider plugin and put it somewhere on your server.

Querying the SharePoint List

I am using the techniques described by Jan Tielnes for querying SP lists with javascript. Here is the code.

Configuring the query.

In the code above I am querying a list named ‘Pictures’ and returning the title, link to the file, file name, file type, description and the ID. To change the name of the list just update this tag with the appropriate list name.

Name of the List you want to use

Note: If you have renamed a default Image library the name may not have actually changed from SharePoint’s perspective so double check by browsing to the list and reading the URL string.

If you want to include data from other fields in the html output just add the field names to the ‘ViewFields’ section of the soap envelope.

You will also need to add a reference to the field in the ‘liHtml’ variable. When referencing fields in the variable remember to put ‘ows_’ in front of the field name.

Remember the field name that is displayed through the SharePoint UI is not always the real field name. In this post Heather Solomon describes a good way to find the real field names.

The CSS

I made a few changes to the CSS to set the size of the slideshow and the colors and fonts for the captions

 #s3slider {width: 450px; height: 300px; position: relative; overflow: hidden; border:1px solid #666;}
#s3sliderContent {width: 450px; position: absolute; top: 0; margin-left: 0;}
.s3sliderImage {float: left; position: relative; display: none;}
.s3sliderImage span {
   position: absolute;
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 5px 13px;
   width: 449px;
   background-color: #fff;
   filter: alpha(opacity=70);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
   color: #000;
   display: none;
   top: 0;
}
.s3sliderImage span h3{margin:1px;	padding:1px; font:normal italic 18px/14px Georgia, serif;}
.s3sliderImage span a{float:right;color:#fff;background:#333;padding:2px;text-decoration:none;margin-top:5px;}
.clear {clear: both;}

Download all the the code in a .dwp here

Resizable textareas in SharePoint edit forms

davecavins — Mon, 02 Nov 2009 15:01:21 +0000

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:

There are two problems:

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

So all we have left to use is the title attribute. With jQuery we can select elements based on thier title. There are more details on using jQuery selectors on the jQuery website. To select our text box with the title “Simple Text” we use the following code:

$('textarea[title="Simple Text"]')

A quick way to check and be sure your selector is working is to call the addClass function in jQuery and change the background color or border color of the element.

Trial and Error

So after I verified the selector was working I applied the plugin but nothing happened. After some testing I realized the script would not work on the rich text box because SharePoint has a JavaScript that runs to initialize the WYSIWYG editor. I am still experimenting so if I get it working on the rich text field I will post and update. For now it only works with the plain text field.

Here is the code I used:

I just put the code in a content editor webpart on the EditFomr.aspx and NewForm.aspx pages. To add the CEWP to the page just add “&ToolPaneView=2″ to the end of the url to get the toolbar.

Adding Suggestions to the Sharepoint search box : Part 2

davecavins — Wed, 28 Oct 2009 16:07:37 +0000

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.

Setup

Do everything from the first post
Add a link to jQuery somewhere on the page.
Create a custom list called ‘Suggestions’. It just needs to have the default title field. Create at least one item in the list and in the title enter several comma separated words.
Add the code below to the page.

The code above get the items from the Suggestions list, seperates them with commas and puts them in a hidden div with an ID of data. Now we just need to edit the searchfield script to read in the information from our hidden div. To do this edit searchfield.js line 26 to call the GetItemsFromSP function and set the suggestionText variable to be equal to the contents of our hidden div. Here is the code.

/**/*/*/*/**/
	GetItemsFromSP();
	var suggestionText =  $(“#data”).html();

Test the page and make sure it works by typing the first few letters of one of the words in you list item.

Conclusion

This is very similar to Jan Tielens’ SharePoint Search-as-You-Type with jQuery solution but I wanted the search box to still be usable even if there are no suggestions. In Jan’s solution the ‘search box’ does not actually do anything when the magnifying glass is clicked. There are likely better ways to do this and if you know of one please post a comment.

Styling SharePoint Blog Comments: Part 2

davecavins — Fri, 16 Oct 2009 14:00:45 +0000

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.

This code includes the code from part 1 with some minor changes. The new styles for the comment form are commented.

Note: To be sure this code does not affect the styling of other forms on the page and other web parts it would be best to open the page in SharePoint Designer and wrap the web part in a div some the styles can be targeted to affect only items inside the div.

Styling SharePoint Blog Comments

davecavins — Fri, 09 Oct 2009 20:36:19 +0000

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.

&lt;style type=&quot;text/css&quot;&gt;
/* wraps the title of each comment */
.ms-commenttable {border:0px;}
/* the title of each comment */
h4.ms-CommentTitle{font-size:x-small;border:0px;}
/* wraps the body of each comment */
div.ms-CommentBody {
	background:url('../../images/comm_top.gif') top 0px no-repeat;
	margin-bottom:12px;
	padding:18px 0 0 0;
}
/* wraps the text of each comment */
div.ms-CommentBody div {
	border:1px solid #ccc;
	border-top:0px;
	padding:15px;
	line-height:18px;
	}
/* wraps the meta info (author, date, etc.)	for each comment */
.ms-CommentFooter {
	background:url('/_layouts/images/square.gif') 5px 50% no-repeat;
	padding:3px;
	margin:0px;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
}
.ms-CommentFooter span {padding-left:18px;}

/* wraps all comments */
.ms-commentsWrapper {
	background:#fff;
	margin:5px;
	border:0px;
}
/* header style for 'Comments' and 'Add a Comment' */
h3.ms-CommentHeader{
	padding-left:35px;
	background:url('/_layouts/images/menunewdiscussion.gif') top left no-repeat
}
&lt;/style&gt;

Without editing the code of the page there are some limitations on what can be done. I did not make too many drastic changes but this code should be a good starting point for making your ShaerPoint blogs look better.

Better looking comments

Here is the image I used in the CSS (right click save as). The other two images are referenced from the 12 hive and should work automatically on any WSS or MOSS installation.

In a future post I will try to do something about the comment form.

Better page titles in SharePoint

davecavins — Mon, 28 Sep 2009 17:36:00 +0000

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.

Find the following tag in your page layout.

Out of the box this tag and its contents just show the title of the current page. Put the code below inside the asp:Content tags.

Now your page title should be something like this
Site Name : Page Title
Which is far more useful when you have multiple windows open.