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.
[sourcecode language=”html”]
[/sourcecode]
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
So here is what we have done so far from Part 1
This is what it looks like:
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.
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 Announcements list.
So the first thing we need to do is create a list to hold our comments. I just used the following columns:
In the main list you will need to add a column that points back to the comments list.
Hides everything except the list and the breadcrumbs. More posts coming later this week.
[sourcecode language=”css”] *{ background-image:none; /* remove all background images */ }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.
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.
[sourcecode language=”css”]
.simple_box{
border:1px solid gray; background:url(‘/_layouts/images/toolgrad.gif’);
font-size:xx-small; color:#444; padding:7px;
}
[/sourcecode]
Here it is in action.
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.
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.
Stay tuned for more soon.
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.
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.
[sourcecode language=”html”]<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>