How to format Date / DateTime fields in Sharepoint 2010 using custom xsl and ddwrt formatting

When getting Calendar items, use ddwrt:FormatDate to format Date/Time as your liking:

from <xsl:value-of select="ddwrt:FormatDate(string(@EventDate),2057,3)"/>
to <xsl:value-of select="ddwrt:FormatDate(string(@EndDate),2057,3)"/>

Also, you can use custom formatting with this:

<xsl:variable name="monthy" select="ddwrt:FormatDateTime(string(pubDate), 1033, 'MMMM')"/>

More Links to help you:
Available locales
Custom date formats
MSDN DateTime custom format
ms:format-date Function
XSLT Date format dd-MMM-yyyy using ddwrt:FormatDateTime
ddwrt FormatDate and FormatDateTime
How to format date value in SharePoint Data View Web Part – xslt

How to disable the mystical 1px or 2px padding in table / tbody elements in Sharepoint 2010

Ever wonder, why tables get mystically some 1-2px padding around them? And any Developer console(F12) or Firebug won't show you why?
Well here's why. I guess Sharepoint(or Webkit) mystically adds a 1px invisible border around tables. Here is how to disable it with CSS:

table { border-collapse: collapse!important;}

Hide the Ribbon row in Sharepoint 2010-2013 modal box / dialog popup

Insert the following 3 lines of CSS code into your page:

.ms-dialog #s4-ribbonrow { 
    display: none;
}

Done!

How to trim/limit text length to a specified number of characters in Sharepoint 2010

Here I have specified 27 as the maximum length, plus three dots after the string.

<xsl:value-of select="substring(@Title, 1, 27)" />...

How to display Sharepoint List item/link in a pop-up/pop-in dialog window

Ever wondered why List items won't open in a dialog even though you have enabled "Launch forms in a dialog?" setting of the List?
Well wonder no more, and just create the popup yourself! Use this code:

<a href="javascript:OpenPopUpPage('http://mysite/Lists/Announcements/DispForm.aspx?ID={@ID}')"  >
<xsl:value-of select="substring(@Title, 1, 27)" />...</a>

btw, the code includes trimming text to 27 characters and inserting "..." in the end. Works!

Clear SharePoint Designer cache

Sometimes SharePoint Designer loses touch with reality - it demands to check out files that are not checked in, refuses to check in other files and generally misbehaves. This demeanor is sometimes accompanied by this error message:

    "Cannot perform this operation. The file is no longer checked out or has been deleted."

Simply put, SharePoint Designer is out of sync with SharePoint and you have to delete its cache in order to rebuild it. The cache is composed of these 2 folders:

    %APPDATA%\Microsoft\Web Server Extensions\Cache
    %USERPROFILE%\AppData\Local\Microsoft\WebsiteCache

Just delete their contents and you are done.
I found the solution here.

Set the best DOCTYPE for Sharepoint 2010, Sharepoint doctype declarations for HTML5 & CSS3

When working with advanced Sharepoint designs, one usually wants to change the document type to allow for more relaxed syntax and opportunities.

On the top of your Master page, add this:

<!DOCTYPE html>

It changes the document type to a HTML5-compliant mode.
Remember to change the meta tag "X-UA-Compatible" to a newer version, or delete it completely:

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

Otherwise Internet Explorer will render the page in IE8 compatibility mode, so CSS3 & HTML5 won't work.

When using an older environment, this DOCTYPE declaration seems to be the best and also the most relaxed: HTML 4.0 Transitional in Standards Mode

So, type the following line to the top of your Master page, where the previous setting is, overwriting it:

<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Remember, don't change the DOCTYPE in your regular pages, only in the Master page! Because it doesn't work that way, it has to be on top of the rendered(master) page.

EDIT: Sometimes it might be best NOT to include any doctype definition, that might break old IE. See more info in this link:
Lots of more info & experience here.

Centered fixed width design in SharePoint 2010 with CSS - The best way

Most of the tutorials available on the 'net don't respect the ribbon and stuff it into a design that has a fixed width. This is the fastest way to get a fixed width design and needs only the following CSS code and is flexible to be changed to any desired width.

div.s4-title.s4-lp,
body #s4-mainarea,
#s4-topheader2,
#s4-statusbarcontainer {
width: 960px;
margin: auto;
padding: 0px;
float: none;
background-image: none;
background-color: white;
}

To get the fixed width design working with the v4.master some classes needs to be added.

<div id="s4-workspace">

Needs to be changed to:

<div id="s4-workspace" class="s4-nosetwidth">

And the second html element needs to be altered:

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">

This needs to be changed to:

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle s4-nosetwidth">

By adding the s4-nosetwidth style class SharePoint won’t assign the inline style property for width and the design will stay centered.

The size of the design could be changed to any size just by simply modifying the width property. Remember always respect the size of the ribbon and let it live outside your design for easy editing.

Original post here

Add custom CSS file to a Sharepoint 2010 site

Open up your current masterpage. This is usually v4.master by default,  and always located in the “_catalogs/masterpage” directory. Remember to make a copy of it and edit the copy! Then set it as your default Master page.
Right before the

<asp:contentplaceholder id="PlaceHolderAdditionalPageHead" runat="server">
</asp:contentplaceholder>

tag, put the following line of code to include a reference to your custom CSS file.

<sharepoint:cssregistration after="corev4.css" name="&lt;% $SPUrl:~SiteCollection/Style Library/Custom/styles.css %&gt;" runat="server">
</sharepoint:cssregistration>

Done!