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: 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: March 25th, 2010 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: comments | 6 Comments »
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 »
Posted: March 15th, 2010 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: comments | 1 Comment »
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. Read the rest of this entry »
Posted: March 10th, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: CSS, Printing | No Comments »
Hides everything except the list and the breadcrumbs. More posts coming later this week.
*{ background-image:none; /* remove all background images */ }
.ms-sbcell, /* search box at top of page */
.ms-topnavContainer, /*horizontal nav container */
img, /*images */
.ms-globalbreadcrumb, /*breadcrumbs */
.ms-titleareaframe, /* page image */
.ms-siteactionsmenu, /*site actions menu */
.ms-pagemargin, /* left margin beside quick launch*/
.ms-quickLaunch, /* quick launch menu */
.ms-sitetitle, /* name name */
.ms-menutoolbar, /* list tool bar */
.ms-pagetitle /* page title */
{ display:none; visibility:hidden; /*width:0px; height:0px;*/
}
.ms-pagetitleareaframe table {
position:absolute; top:1px;
width:600px;
background-image:none;
}
.ms-bodyareaframe { /*remove border around main content*/
border:0px;}
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 20th, 2010 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: captify, Data View Web Part, jQuery, slideshow | 1 Comment »
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 »
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');
Recent Comments