Dave Cavins » SharePoint Designer

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.

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

Displaying document titles as links.

davecavins — Tue, 29 Dec 2009 16:23:33 +0000

On a recent project I had to migrate a large number of documents from a legacy system into SharePoint. In the old system users to choose what text would be displayed as the link. In most cases users chose not to use the actual file name as the link text.

The Problem

In SharePoint users don’t have as much control of what gets displayed. There is a ‘Title’ field but it can’t be used in a calculated column and on the standard document library it is not a required field.

Technically the file name could be used but this could lead to very long file names with spaces and special characters that could cause problems by forcing the page to scroll as well as creating some REALLY long URLs.

Depending on the type of document the actual file name may be irrelevant to the use while the title would be more helpful. For instance a in document library of meeting minutes the file names could just be the date of the meeting for example (12_03_2009.docx). The document title could be used to contain not only the date but other relevant information about the meeting like who attended or important issues that were discussed. Additionally the title field can support special characters and spaces that could be a problem in file names.

My Solution

I added two new columns to the Document Library.

“DocSrc” – a plain text column to hold the path to the document.
“Title Link” – a calculated column to create the link (I will explain this later).

First we need make sure our documents have titles.

Here is how to add Titles to a document in Word 2007:
Click on the ‘orb’ and choose “Prepare” > “Properties”

In the pane that opens you can enter in a title and other Meta data.

Now if a user uploads a document without a title we need to let them know and ask them to add a title.

Next I created a simple SharePoint Designer workflow, here is how.
Create a new workflow in SharePoint Designer and give it a name. On the first screen I checked these two boxes:

Allow the workflow to be started manually.

This is because we want the workflow to run for new items but just in case some items have already been loaded in the library we need to be able to run the workflow on them as well. In step 1 of the workflow I check to see if the “Title” field is empty, if it is not I copy the value from the “URL Path” field into my “DocSrc” field. I also added a condition so that if there is nothing in the “Title” field the workflow will email the user and ask them to add a title. In the body of the email I provide a link to the document. That’s all we need for the workflow.

Building the link

So now we have the title of the document and the URL of the document we can build our link in the “Title Link” column. We need to create a formula in the “Title Link” column that will create a link to our document and use the title as the displayed text.
In the “Title Link” column we just need to put the following text:

=CONCATENATE("",[Title],"")

Next we just need to make the html code display properly using this script from Path to SharePoint.

Now users can see meaningful titles for thier documents without having to decifer complex document names and they will still have access to see the document name with the dropdown menu.

When it comes to document management and getting new SharePoint users on board things like this are important in helping them feel more comfortable. If you dont take steps to make the system suit the users needs they are more likely to just use SharePoint as a new shared drive and just dump all their documents into a library that never get used.

Has anyone else dealt with this type issue? What was your solution?

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.

Dynamic Drive’s Featured Content Slider in Sharepoint

davecavins — Tue, 12 May 2009 18:39:56 +0000

I have used Dynamic Drive’s Featured Content Slider on a couple of recent projects and wanted to see if I could get it working in SharePoint. There were several key requirements:

User can easily add items
Users can choose a style for each item
Expired Items must not show
Each item will have a Title, Body and a customizable “read more” link.

Here’s how I did it.

First I created a custom list to store the slider items. These are the columns I used:

Title – Single Line of text
Body – Multiple Lines of text
Link URL – HyperLink
Expiration – Date and Time (expired items will not be shown)
Image – Picture
Style – Choice (we will use this column to allow users to choose the style of each item)

On the page I used a DataView WebPart to display the Title, Body, Image and Link URL columns. Using Sharepoint Designer I setup filtering on the expiration date. To do this in design view right click on the data view webpart and bring up the “Common Data View Tasks ” box and choose Filter. In the window I set the conditional statement so that items would only be shown if the expiration date was greater than today.

You can find a basic tutorial on using the DVWP here

Once we have the data we want showing on the page we need to get it into the right format. For the Content Slider to work properly the page needs to refernce an external JavaScript file and a CSS style sheet. Additionally the Slider itself has to follow this pattern:


Content 1 Here.

Basically the whole content slider has do be wrapped in a div with an ID of ‘slider1′ each of the items must be wrapped in a div with the class ‘contentdiv’. For more explanation on this visit Dynamic Drive

SharePoint uses xsl to style the data view so we have to go into the code view and add the nessecary Javascript, CSS and div elements to make everything work. Here is the xsl I used to get everything working in the page



	
	
	'
	CurrentDate
	0
	
		
	
	
		Table
		
		
			
				
			
		
		

 
	
		
		
			
		
	
	
		
		
		
	
	
	...

For information on how to write xsl stylesheets read this post on Heather Solomon’s site. Basically using tags like this:
allows you to insert various peices of data from the list. In the xsl above I am wrapping each item with the nessacary div to make the slider work. Inside each div I am inserting the title inside an h1 tag, the first 330 characters of the body in an a p tag, and the Link URL formatted as a Hyperlink.

To make everything look good I had to customize the CSS that comes from Dynamic Drive. The code is below.

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 0px;
width: 100%; /*width of featured content slider*/
height: 231px;
}
.sliderwrapper .contentdiv{
visibility:hidden; /*leave as is*/
position:absolute; /*leave as is*/
left:0;  /*leave as is*/
top:0;  /*leave as is*/
padding: 0px;
background:#fff;
width:100%;
/*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height:100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity:1;
opacity:1;
color:#fff;
font-size:x-small;
}
.contentdiv img{
height:205px;
width:270px;
margin:10px;
border:1px solid #ccc;
}
.contentdiv h1{
color:#eee;
font:normal normal large Georgia;
margin:0px;
padding:5px 0 0 0;
line-height:20px
}
.contentdiv a:hover, .contentdiv a{
text-decoration:none !important;
padding:0px;
}
.contentdiv p{
line-height:19px;
padding:0px 10px 0px 10px;
}
a.readMoreLink {
color:#555;
padding:4px;
background-color:#fff;
}
a.readMoreLink:hover {
color:#555;
text-decoration:none;
padding:4px;
background:#fff url('link_bg.gif') repeat-x bottom center;
}
.pagination{
width: 100%;
/*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
padding: 3px 1px;
font-size:x-small;
background:#fff url('link_bg.gif') repeat-x bottom center;
border-top:1px solid #ccc;
}
.pagination a{
padding: 0 4px;
text-decoration: none;
color: #666;
background:#fff;
}
.pagination a.selected{
color: #fff;
background-color: #666;
}
.pagination a:hover{
color:#fff;
background:#666;
text-decoration:none;
}

In the XSL stylesheet each item is wrapped in a div, the class name for the div is pulled from the ‘Style’ column in the list. The make the styles work I added the following CSS to my stylesheet

.Red_Style{
height:230px;
background:#671818 url('red_bg.gif') repeat-x top center;
}
.Blue_Style{
height:230px;
background:#3A5E97 url('blue_bg.gif') repeat-x top center;
}
.Green_Style{
height:230px;
background:#4E8822 url('green_bg.gif') repeat-x top center;
}

All I am doing is changing the background image and color for each style. Because the div wraps each item it would be possible to also change font colors, font size, image position and more but I just wanted to keep it simple.

The only drawback with using the dataview webpart is that this webpart cannot be easily moved from one site to another.

Adding Suggestions to the Sharepoint search box

davecavins — Sun, 26 Apr 2009 20:10:41 +0000

I got the idea for this from here: http://cssglobe.com/lab/searchfield/. The idea is that by giving users suggestions of what they should be searching for they can be guided to the most important information. When I am searching for something many times I am unsure what what search terms will give me the best results.

To get started we will need a search box to work with. The out of the box search box could work but I prefer to use the one mentioned here by Kyle Schaeffer because it gives me a lot more flexibility with the design.

Adding a Search Box to the page

To get the search box on your page :

Add this register tag at the top of the page layout or masterpage :

<%@ Register Tagprefix="SPSWC"
Namespace="Microsoft.SharePoint.Portal.WebControls"
Assembly="Microsoft.SharePoint.Portal, Version=12.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

If needed hide the existing search box (I left mine, and it still works fine).
Put this code where you want the search box to show up:
```
 
```
Save the page.

Javascript

Ok now comes the integration part. In the JavaScript code searchfield.js you must insert the ID of the search input field.

var id = "searchfield"

In ASP.NET control IDs change when the page is rendered so the best way to do this is to view the source of the page or use FireBug to get the id. It will be something long like “ctl00_PlaceHolderMain_searchbox2_SFF4064A0_InputKeywords”

Now save the JS file and test the page.

If it does not work make sure you have referenced your javascript properly.

If you are doing this in a page layout the script link should go inside the AdditionalPageHead content place holder.
If you are putting this in a masterpage you can either refernece the script in the section or just above the closing tag.

Search Suggestions

Watch out

This script includes code that will clear the contents of the search box on the first focus so you don’t need to use the “QueryPromptString” tag on your search box because it wont work.

This is what mine came out looking like with a little CSS code. Also to get the “Go” image to show up I just set the “GoImageUrl” attribute.

Conclusion

This is a very simple solution and can help enhance the user experience but it is not as integrated with SharePoint as I would like. Ideally the suggestions would be read in from a list stored somewhere on the site.