Tuesday, August 14, 2012

Hide the SharePoint 2010 Web Part Checkbox


There are two options to remove this check box from view...

  1. Add the following CSS:

    .ms-WPHeaderTdSelection {
            display: none;
    }

    OR
  2. Display the web part without a title and add a content editor web part right before the list web part with the desired title text.
Thanks to Alpesh Nakar for the answers.

Wednesday, September 14, 2011

IE Conditional Stylesheets and Hacks

Thanks Chris Coyer for this useful list of CSS examples to target different versions of IE referencing Conditional Stylesheets and Hacks:

The Code

This would go in your <head> with all the other regular CSS <link>ed CSS files. The opening and closing tags should be familiar, that's just regular ol' HTML comments. Then between the brackets, "IF" and "IE" should be fairly obvious. The syntax to note is "!" stand for "not", so !IE means "not IE". gt means "greater than", gte means "greater than or equal", lt means "less than", lte means "less than or equal."

Target ALL VERSIONS of IE

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

Target IE 7 ONLY

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Target IE 6 and LOWER

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

Universal IE 6 CSS

Dealing with IE 6 and below is always an extra-special challenge. These days people are dropping support for it right and left, including major businesses, major web apps, and even governments. There is a better solution than just letting the site go to hell, and that is to server IE 6 and below a special stripped-down stylesheet, and then serve IE 7 and above (and all other browsers) the regular CSS. This is been coined the universal IE 6 CSS.

<!--[if !IE 6]><!-->
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->

Hacks

If you must...
IE-6 ONLY

* html #div {
height: 300px;
}

IE-7 ONLY

*+html #div {
height: 300px;
}

IE-8 ONLY

#div {
height: 300px\0/;
}

IE-7 & IE-8

#div {
height: 300px\9;
}

NON IE-7 ONLY:

#div {
_height: 300px;
}

Hide from IE 6 and LOWER:

#div {
height/**/: 300px;
}

html > body #div {
height: 300px;
}

List 'Boxed' Style with One Column Layout

Thanks Christophe & Larry for this useful bit of styling to modify the SharePoint 2010 'Boxed' list style to display items in a single column layout (rather than the default 2 cols):

<script type="text/javascript">
var boxedview = document.getElementById("WebPartWPQ1").innerHTML;
boxedview = boxedview.replace(/ <\/td>/gi,"<\/tr> <\/td><\/tr>");
boxedview = boxedview.replace(/ <\/td>/gi,"<\/tr> <\/td><\/tr>");
boxedview = boxedview.replace(/ <\/td>/gi,"<\/tr> <\/td><\/tr>");

document.getElementById("WebPartWPQ1").innerHTML = boxedview;
</script>

Update the webpart ID (WebPartWPQ1) to match that of your list web part.

Tuesday, July 26, 2011

XSL Date using ddwrt Namespace

The following comes from: http://msdn.microsoft.com/en-us/library/dd583143(v=office.11).aspx

XSL Date using ddwrt Namespace... NOTE: Ensure the xsl stylesheet includes a reference to ddwrt ... Eg:

<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" xmlns:o="urn:schemas-microsoft-com:office:office">

Functions:

public string FormatDate(string szDate, long lcid, long formatFlag);
<xsl:value-of select="ddwrt:FormatDateTime(ddwrt:TodayIso(),2057,'dddd MMMM dd yyyy')" />

public string TodayIso();
<xsl:value-of select="ddwrt:TodayIso()"/>

public string Today();
<xsl:value-of select="ddwrt:Today()"/>

  • Date only as M/d/yyyy. Example: "08/17/2000".
  • Date only as dddd, MM dd, yyyy. Example: "Thursday, August 17, 2000".
  • Time only as h:mm. Example: "16:32".
  • DateTime as M/d/yyyy h:mm. Example: "08/17/2000 16:32".
  • DateTime as dddd, MM dd, yyyy h:mm. Example: "Thursday, August 17, 2000 16:32".
  • Time only as h:mm:ss. Example: "16:32:32".
  • DateTime as M/d/yyyy h:mm:ss. Example: "08/17/2000 16:32:32".
  • DateTime as dddd, MMMM dd, yyyy h:mm:ss. Example: "Thursday, August 17, 2000 16:32:32".

    Wednesday, July 06, 2011

    XLV Web Parts

    To display an XLV on another site update the Title, Description, ListId and WebId values in this code; save as a .webpart; upload the file to a web part page (more info on Glyn's blog):

    <?xml version="1.0" encoding="utf-8" ?>
    <webParts>
    <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
    <metaData>
    <type name="Microsoft.SharePoint.WebPartPages.XsltListViewWebPart, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
    <importErrorMessage>Cannot import this Web Part.</importErrorMessage>
    </metaData>
    <data>
    <properties>
    <property name="Title" type="string">My List</property>
    <property name="Description" type="string">A view of My list from the root of the site</property>
    <property name="ListName" type="string">8480D028-A2ED-474B-8259-BEE394EE4C53</property>
    <property name="ListId" type="System.Guid, mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">8480D028-A2ED-474B-8259-BEE394EE4C53</property>
    <property name="WebId" type="System.Guid, mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">adea17f7-e661-4ff0-91e9-70f021c60647</property>
    <property name="ExportMode" type="exportmode">All</property>
    </properties>
    </data>
    </webPart>
    </webParts>