Posted: June 14th, 2010 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: CSS, SharePoint, SharePoint Designer, theme | No Comments »
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 »
Posted: June 7th, 2010 | Author: davecavins | Filed under: SharePoint Design | Tags: CSS, SharePoint, stylesheet, theme | 1 Comment »
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.
Posted: May 3rd, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: better forms, forms, jQuery, SharePoint | 2 Comments »
So I found this cool jQuery plugin that does watermarks for form inputs. Using watermarks is a good way to help make SharePoint forms easier to use. To test the plugin I started with the new item form from same test list I used in my previous posts.
Watermarks
Prerequisites
- jQuery Library referenced in the page
- CEWP on the page
Read the rest of this entry »
Posted: April 21st, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: CSS, design, jQuery, SharePoint | 5 Comments »
Sometimes it is useful to allow users to quickly change how data is displayed. Changing the display can make is easier to see patterns or find a specific item you are looking for. With CSS and jQuery we can easily change the way content is displayed and arranged on the page. I got the idea for this post from here
Switch views using CSS and jQuery
Read the rest of this entry »
Posted: February 22nd, 2010 | Author: davecavins | Filed under: SharePoint Design | Tags: better forms, hints, SharePoint | 3 Comments »
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
Posted: February 2nd, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: better forms, forms, jQuery, SharePoint | 2 Comments »
For the sake of demonstration I made a list called quotes. Each quote has a title, body and author field, as a requirement the body field should not have more than 200 characters. So to let users know when they are getting close to the character limit we will setup a character count script.
For this solution I will use this jQuery script from CSS Globe.
The default form
Read the rest of this entry »
Posted: January 25th, 2010 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: better forms, CSS, forms, jQuery, SharePoint | No Comments »
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.
Posted: January 6th, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: CSS, icon, JavaScript, jQuery, SharePoint, user | 1 Comment »
When you are using a data view web part to display information including a person field SharePoint always shows the status icon beside thier name.
status icon
In some cases this is exactly what you want and can be very useful. But sometimes you just want to show a name and nothing else. With most fields you can just change the formatting options to change the display. If you choose to format the value as text SharePoint spits out this long html string.
<nobr><span><A HREF="/sites/site/_layouts/userdisp.aspx?ID=2">Cavins, David R</A><img border="0" height="1" width="3" src="/_layouts/images/blank.gif"/><a href='javascript:' onclick='IMNImageOnClick();return false;' class='ms-imnlink'><img name='imnmark' title='' border='0' height='12' width='12' src='/_layouts/images/blank.gif' alt='No presence information' sip='email@email.com' id='imn_8,type=sip'/></a></span></nobr>
Format as
Each of the other formatting options also provides un-desirable results.
Using some basic CSS we can get rid of the status icon and format the text so it does not look like a hyperlink. First wrap the field value in an element with a class. I used a span with a class of “person”
<span class=”person”>
<xsl:value-of select="@Author" />
</span>
Then just add this css to the page.
.person nobr span a {
text-decoration:none;
color:black;
cursor:default;
}
If you want to take it a step further you can use jQuery to remove the ‘href’ attribute. Using jQuery we can target the container with the link in it and then change the href value.
$('span.person a').removeAttr('href');
Posted: December 29th, 2009 | Author: davecavins | Filed under: General SharePoint | Tags: Document Library, SharePoint, SharePoint Designer, Workflow | 2 Comments »
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.
Read the rest of this entry »
Posted: December 7th, 2009 | Author: davecavins | Filed under: SharePoint Design, Web Design | Tags: CSS-Tricks, Data View Web Part, jQuery, SharePoint, xsl | 27 Comments »
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">'</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 + "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo",
autoPlay: true,
delay: 3000,
startStopped: false,
animationTime: 600,
hashTags: true,
buildNavigation: true,
pauseOnHover: true,
startText: "Go",
stopText: "Stop",
navigationFormatter: formatText
});
$("#slide-jump").click(function(){
$('.anythingSlider').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.
Recent Comments