The LandPhil be honest, be honorable, be kind, be compassionate, and work hard.

August 30, 2011

SharePoint: Using custom CSS

Filed under: General,SharePoint — phil @ 3:03 pm

For the love of all that is holy, don’t try and do this in SharePoint designer.  I’m still not entirely sure what was going on, but it’s not pretty.

Let’s say you have a page that you want to put some custom CSS on.  You could open the page in designer and modify the corev4.css.  What this actually does is copy the file from the web application root to a _styles directory in your current site collection and then in the background re-link everything to it.  This is handy, except that the one thing that it doesn’t re-link to it is Themes.  Any themes you select still only make changes to the root corev4.css file, which (if you’re following along) is overridden by the copy you have in your site collection.  Short story: your new site collection isn’t themable.

The solution: Only update the styles you specifically want to change, and do it directly on the page your editing…in the web browser.  In the ribbon under Editing Tools:Format Text, there’s a drop down for HTML Markup.  Choose to Edit HTML Source, and just drop your custom css in between <style></style> tags and close the window.

The net upshot is that this doesn’t break the site definition template that your page is based on (which IS what happens when you try and do the above in SharePoint Designer).  Another bonus is that the style is truly page dependent.  If you reopen the HTML source, you’ll see that SharePoint has renamed your styles with an .ExternalClassHASH.

Slick, easy, and it doesn’t break anything.  Too bad it took me like 4 hours to figure out.  Hopefully I’ll save you the headache.

Addendum: If you’re editing a web part page, you may notice that you don’t have an HTML Markup button on your ribbon.  You can get around this issue by dropping a Content Editor web part on your page.  Once it’s there and you go to enter content, you will see that you now have an HTML Markup button.  You can drop the style into the content editor web part (in HTML view) and it will work the same way…just for that page.

August 9, 2011

SharePoint Designer: Getting the DateTime into a readable format

Filed under: SharePoint — phil @ 10:15 am
There are 3 view forms in SharePoint Designer for lists:
New
Edit
View
The default versions of these forms are created by SharePoint when the list is created.  They use a ListFormWebPart to display their information.  This is done by querying SharePoint for the objects directly.
When you create a custom form of any of the types specified above (New, Edit, or View), the default web part that is included is actually the DataFormWebPart.  This queries SharePoint for data and feeds it into an XML stream and the web part uses XSLT to parse data out of the string.  Unfortunately, this means that all parts of the SharePoint objects are serialized and thus you may run into problems rendering the data in string form.
Case in point, the DateTime object.  The DateTime object has fields for the Date and the Time separately.  When serialized, however, the data is concatonated into a single string.  This has two downsides, 1) A single string with no white space is hard to read, and 2) since the time is stored in zulu time (so that a particular user can display based on his chosen time zone), the string data is also displayed in zulu time.
There is, fortunately, a way around this.  If you edit the DataFormWebPart and do the following:
1.  Right above the table that contains the data rows, below the <xsl:template> tag, insert:
  • <xsl:param name=”Pos” select=”position()” />
2.  In the table row that contains the dates and times you wish to display:
  • Comment out the <xsl:value-of select=”*” />  with <!– –>
  • Add the following (inside of the <td> tags):
  • <SharePoint:FormField runat=”server”id=”ff3{$Pos}” ControlMode=”Display”FieldName=”EventDate”__designer:bind=”{ddwrt:DataBind(‘i’,concat(‘ff3′,$Pos),’Value’,’ValueChanged’,’ID’,ddwrt:EscapeDelims(string(@ID)),’@EventDate’)}”/>
  • <SharePoint:FieldDescription runat=”server” id=”ff3description{$Pos}” FieldName=”EventDate” ControlMode=”New”/>
3.  Replace parts of the code as follows:
  • id=ff#{$Pos} (where # is equal to the display row on the form)
  • ControlMode=”Display” (can be Edit, New, or Display)
  • FieldName=” “ (Use the same field name as the value-of select statement you commented out)
  • bind=” “ (in the bind string change the row position number and the field name)
  • Update the id, FieldName and ControlMode settings of the SharePoint:FieldDescription to match SharePoint:FormField
Viola, the date and time in a readable format and still encoded with the logged in user’s time zone choice.

Powered by WordPress