Posted: August 4th, 2010 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: CSS, Data View Web Part, SharePoint, SharePoint Designer, ticker, xsl | 5 Comments »
A while back I did a post about how to make a vertical news ticker, in the comments several people pointed out problems with the code so I decided to write a better version of the code. Here it is.
New Ticker
For this ticker I started out with a default Annoucements list. Because I wanted to display a thumbnail for each annoucement I added a signle line of text column called Subtitle and a Picture column called Picture. Here are the columns I used.
Here is the basic structure of the ticker.
<div id="actions">
<a class="prev">« Back</a> <a class="next">More pictures »</a></div>
<div class="scrollable vertical">
<div class="items">
<div class="item">
<img src="#" alt="Thumbnail Image" />
<h3>Title</h3>
<strong>
<span>Subtitle Text</span>
</strong>
<p>First 200 Characters of the body</p>
<p><a href="#">Read more</a></p>
</div>
</div>
</div>
Below is the xsl code I used to build the ticker.
<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:param name="url_PATH_INFO" />
<xsl:param name="url_HTTP_HOST" />
<xsl:param name="Today">CurrentDate</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"/>
<script>
$(function() {
$(".scrollable").scrollable({ vertical: true, mousewheel: true, circular: true, keyboard: true });
// scrollable has to match the class on the div you use to wrap your items.
});
</script> <div id="actions">
<a class="prev">« Back</a>
<a class="next">More pictures »</a>
</div>
<div class="scrollable vertical">
<div class="items">
<xsl:call-template name="dvt_1.body">
<xsl:with-param name="Rows" select="$Rows"/>
</xsl:call-template>
</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">
<div class="item">
<xsl:if test="not(normalize-space(@Picture) = '')"><img src="{substring-before(@Picture,',')}" /></xsl:if>
<h3><xsl:value-of select="@Title"/></h3>
<strong>
<xsl:if test="not(normalize-space(@SubTitle) = '')"><span><xsl:value-of select="@SubTitle " disable-output-escaping="yes" /></span></xsl:if>
</strong>
<p><xsl:value-of select="substring(@Body,0,200)" disable-output-escaping="yes" /></p>
<p><a href="http://{$url_HTTP_HOST}/{@FileDirRef}/DispForm.aspx?id={@ID}">Read more</a></p>
</div>
</xsl:template>
</xsl:stylesheet></Xsl>
If you try to run the page with just this XSL it will give an error. You will also need to add these two lines to the parameter bindings section of your dataview web part. I used these 2 parameters to get the URL of the current page in order to built the ‘read more’ link. This is what I would call a best practice because other wise you would have to hard code the URL to your site which makes it harder for others to use your code.
<ParameterBinding Name="url_PATH_INFO" Location="ServerVariable(PATH_INFO)" DefaultValue=""/><ParameterBinding Name="url_HTTP_HOST" Location="ServerVariable(HTTP_HOST)" DefaultValue=""/>
In addition to this code you will also need to add links to these two files.
<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>
/* css file to style the ticker */
<link rel="stylesheet" type="text/css" href="scroll.css" />
Here is the css I used to style my ticker.
/* root element for scrollable */
.vertical {
/* required settings */
position:relative;
overflow:hidden;
/* vertical scrollers have typically larger height than width */
height: 665px;
width: 700px;
border-top:1px solid #ddd;
}
/* root element for scrollable items */
.items {
position:absolute;
/* this time we have very large space for height */
height:20000em; margin: 0px;
}
/* single scrollable item */
.item {
border-bottom:1px solid #85b1ee;
border-top:1px solid #85b1ee;
margin:10px 0; padding:15px; font-size:12px;
height:180px; background:#d6e8ff;
}
/* elements inside single item */
.item img {
float:left;
margin-right:20px;
height:180px;
width:240px;
border:5px solid #fff;
}
.item h3 {
margin:0 0 5px 0;
font-size:16px;
color:#4a6499;
font-weight:normal;
}
.item p a{padding:3px;}
.item p a:hover{ background:#fff; text-decoration:none;}
.item p { padding:3px; margin:5px;}
/* the action buttons above the scrollable */
#actions { width:700px; margin:30px 0 10px 0;}
#actions a {font-size:11px; cursor:pointer; color:#666;}
#actions a:hover {text-decoration:underline; color:#000;}
.disabled {visibility:hidden;}
.next {float:right;}
Notes
- The XSL is setup so that if no thumbnail is provided it will automatically adjust. The same is true if no subtitle is entered. This is done using conditional formating.
- Only the first 200 characters of the body are shown. To change this amount you can just change this line of code xsl:value-of select=”substring(@Body,0,200)”.
- You do not need the whole jQuery library in order for this to run.
Resources
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: 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 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: 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 | 2 Comments »
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: October 16th, 2009 | Author: davecavins | Filed under: SharePoint Design | Tags: blog, CSS, SharePoint, SharePoint Designer | No Comments »
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.
Read the rest of this entry »
Posted: October 9th, 2009 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: blog, CSS, SharePoint, SharePoint Designer | 4 Comments »
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. Read the rest of this entry »
Posted: July 6th, 2009 | Author: davecavins | Filed under: SharePoint Design | Tags: CSS, SharePoint | 3 Comments »
When you want to create a custom theme for a SharePoint site the top navigation menu is an important part of the design. Using the out of the box themes you can change the colors but if you really want it to look like a non-SharePoint menu it will take some work. In the standard sharepoint masterpage you will see the following code that defines the horizontal navigation. If you are not familiar with styling ASP server controls it can be somewhat confusing. Read the rest of this entry »
Recent Comments