Switch Themes Without a Page Refresh: Part 2

 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. 

Read the rest of this entry »

Switch Themes Without a Page Refresh: Part 1

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. 

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.  For this solution there were several requirements.

• 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

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.

<Xsl>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
	<xsl:output method="html" indent="no"/>
	<xsl:decimal-format NaN=""/>
	<xsl:param name="dvt_apos">&apos;</xsl:param>
	<xsl:variable name="dvt_1_automode">0</xsl:variable>
	<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
		<xsl:call-template name="dvt_1"/>
	</xsl:template>
	<xsl:template name="dvt_1">
		<xsl:variable name="dvt_StyleName">Table</xsl:variable>
		<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
		<xsl:variable name="RowLimit" select="3" />
		<xsl:variable name="dvt_RowCount" select="count($Rows)" />
		<xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />
		   <link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
		<script type="text/javascript" src="js/jquery.easing.1.2.js"></script> <script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"></script> <div class="anythingSlider">
			<div class="wrapper">
		<ul>
			<xsl:call-template name="dvt_1.body">
				<xsl:with-param name="Rows" select="$Rows" />
				<xsl:with-param name="FirstRow" select="1" />
				<xsl:with-param name="LastRow" select="$RowLimit" />
			</xsl:call-template>
		</ul>
		</div>
        </div>
	</xsl:template>
	<xsl:template name="dvt_1.body">
		<xsl:param name="Rows" />
		<xsl:param name="FirstRow" />
		<xsl:param name="LastRow" />
		<xsl:for-each select="$Rows">
			<xsl:variable name="dvt_KeepItemsTogether" select="false()" />
			<xsl:variable name="dvt_HideGroupDetail" select="false()" />
			<xsl:if test="(position() &gt;= $FirstRow and position() &lt;= $LastRow) or $dvt_KeepItemsTogether">
				<xsl:if test="not($dvt_HideGroupDetail)" ddwrt:cf_ignore="1">
					<xsl:call-template name="dvt_1.rowview" />
				</xsl:if>
			</xsl:if>
		</xsl:for-each>
	</xsl:template>
	<xsl:template name="dvt_1.rowview">
		<li>
		<div class="textSlide">
			<h3><a href="/{@FileDirRef}/DispForm.aspx?ID={@ID}" title="{@Title}"><xsl:value-of select="@Title" /></a></h3>
			<xsl:value-of select="@Body" disable-output-escaping="yes" />
		</div>
		</li></xsl:template>
	</xsl:stylesheet>
</Xsl>

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

<xsl:variable name="RowLimit" select="6" />

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.

<SharePoint:SPDataSource runat="server" DataSourceMode="List" SelectCommand="&lt;View&gt;&lt;Query&gt;&lt;OrderBy&gt;&lt;FieldRef Name=&quot;Created_x0020_Date&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;/OrderBy&gt;&lt;/Query&gt;&lt;/View&gt;"

 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.

Adding Comments to a List Part 2

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.   

Read the rest of this entry »

Adding Comments to a List Part 1

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.

1. Go to the list settings page and click ‘Create Column’
2. Name the column ‘Comments‘ (the name does not really matter. Set the type to ‘Lookup‘
3. 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.  Read the rest of this entry »

Improving #SharePoint Forms – Hints

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:

<script type="text/javascript">
$("input[title='Author']").inputHintBox({
	className:'simple_box',
	html:'Who is the author of this quote?',
	incrementLeft:-25,
	incrementTop:-15
	});
</script>

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

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.

<Xsl>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
	<xsl:output method="html" indent="no"/>
	<xsl:decimal-format NaN=""/>
	<xsl:param name="dvt_apos">&apos;</xsl:param>
	<xsl:variable name="dvt_1_automode">0</xsl:variable>
	<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
		<xsl:call-template name="dvt_1"/>
	</xsl:template>
	<xsl:template name="dvt_1">
		<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
		    <link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script> <script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">
        function formatText(index, panel) {
		  return index + &quot;&quot;;
	    }
        $(function () {
            $(&apos;.anythingSlider&apos;).anythingSlider({
                easing: &quot;easeInOutExpo&quot;,
                autoPlay: true,
                delay: 3000,
                startStopped: false,
                animationTime: 600,
                hashTags: true,
                buildNavigation: true,
         	pauseOnHover: true,
     	startText: &quot;Go&quot;,
     	stopText: &quot;Stop&quot;,
	navigationFormatter: formatText
            });
            $(&quot;#slide-jump&quot;).click(function(){
                $(&apos;.anythingSlider&apos;).anythingSlider(6);
            });
        });
    </script>
<div class="anythingSlider">
	<div class="wrapper">
		<ul>
		<xsl:call-template name="dvt_1.body">
			<xsl:with-param name="Rows" select="$Rows" />
			</xsl:call-template>
		</ul>
		    </div>
        </div>
	</xsl:template>
	<xsl:template name="dvt_1.body">
		<xsl:param name="Rows" />
		<xsl:for-each select="$Rows">
			<xsl:call-template name="dvt_1.rowview" />
		</xsl:for-each>
	</xsl:template>
	<xsl:template name="dvt_1.rowview">
		<li>
		<div class="textSlide">
<!-- display the item title and a link to the item -->
<h3><a href="/{@FileDirRef}/DispForm.aspx?ID={@ID}" title="{@Title}"><xsl:value-of select="@Title" /></a></h3>
<!-- display the body of the item  -->
	<xsl:value-of select="@Body" disable-output-escaping="yes" />
	</div>
	</li></xsl:template>
</xsl:stylesheet>
</Xsl>

• 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

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 »