Adding your custom styles in your SharePoint 2010 Rich Html Editor

This blog post describes how to add a custom styles in your Rich Html Editors.

The new style will appear when editing e.g. a wiki or site page in the Markup-Style dropdown:

 

 

Or in the Table-Style drop down:

 

1: Create the style
Add CSS file to managed folder /layouts/Namespace/wiki.css

Example headings (Markup-Style dropdown):

H1.ms-rteElement-MyH1
{
    /* This name will be displayed in the drop down */
    -ms-name: "My heading 1";
}
.ms-rteElement-MyH1
{
    background-color: #597087;
    color: #ffffff;
}

Example tables (Table-Style drop down) - Table with coloured header row and zebra stripes:

.ms-rteTable-10,
.ms-rteTableHeaderFirstCol-10,
.ms-rteTableHeaderLastCol-10,
.ms-rteTableHeaderOddCol-10,
.ms-rteTableHeaderEvenCol-10,
.ms-rteTableFirstCol-10,
.ms-rteTableLastCol-10,
.ms-rteTableOddCol-10,
.ms-rteTableEvenCol-10,
.ms-rteTableFooterFirstCol-10,
.ms-rteTableFooterLastCol-10,
.ms-rteTableFooterOddCol-10,
.ms-rteTableFooterEvenCol-10,
TD.ms-rteTable-10,
TH.ms-rteTable-10,
.ms-rtetablecells
{
    /* This name is displayed in the drop down */
    -ms-name:"Table Style 4 - Zebra stripes";
    border-left: none;
    border-right: none;
    text-align:left;
    line-height:2;
    vertical-align: top;
    padding:2px;
    padding-left: 5px;
}
.ms-rteTableHeaderFirstCol-10,
.ms-rteTableHeaderLastCol-10,
.ms-rteTableHeaderOddCol-10,
.ms-rteTableHeaderEvenCol-10
{
    background-color: #b5c1ce;
    color: white;
    border-top: solid #D5DCE3 1px; 
    border-bottom: solid #D5DCE3 1px;
}
.ms-rteTableFooterFirstCol-10,
.ms-rteTableFooterLastCol-10,
.ms-rteTableFooterOddCol-10,
.ms-rteTableFooterEvenCol-10
{
    font-weight: bold;
    border-top: solid #D5DCE3 2px; 
    border-bottom: solid #D5DCE3 2px;
}
.ms-rteTableFirstCol-10, 
.ms-rteTableLastCol-10
{
    font-weight: bold;
}
.ms-rteTable-10 tr.ms-rteTableOddRow-10 {
 background-color: #eee;
}
.ms-rteTable-10 tr.ms-rteTableEvenRow-10 {
 background-color: #fff;
}

2: Add Css to master page or default page layout

<SharePoint:CssRegistration ID="CssRegistrationWiki" 
   name="/_layouts/Namespace/wiki.css"  After="corev4.css" runat="server"/>3: 

It is not possible to remove any existing table or heading styles. You can change existing style or add new styles, but not delete. Also, it is not possible to change the name of an existing style.

A common thing you would like to do is change the default table style, this can be done by using "-default" instead of "-10" in the style selectors in the example above. But remember that the name of the default table style will never be changed.

There is a way to do this but it requires you to add a parameter every place the "PublishingWebControls:RichHtmlField" field is used, see this blog post at sharepoint blues.

"Cannot uninstall Language Pack" and Unexpected System.NullReferenceException when trying to access the web site

How to fix this error

The message "Cannot uninstall Language Pack" appears when doing Uninstall-SPSolution and an Unexpected System.NullReferenceException appears when trying to access the web site. This error may only be present on one of the servers in a farm.

1. Stop the SharePoint Timer Service (OWSTIMER).
2. On the problem server, navigate to:
1. Windows Server 2003 location: Drive:\Documents and Settings\All Users\Application Data\Microsoft\SharePoint\Config\GUID and delete all the XML files from the directory.
2. Windows Server 2008 location: Drive:\ProgramData\Microsoft\SharePoint\Config\GUID and delete all the XML files from the directory.
3. Delete all the XML files in the directory or sub directories, not the .INI file.
4. Open the cache.ini with Notepad and reset the number to 1. Save and close the file.
5. Start the service on the server and wait for XML files to begin to reappear.
6. IIS Reset

Styling a list as a comma separated string

The requirement was to create a history trail of visited pages in a SharePoint Enterprise wiki. The result will look like this:

Your trail: Page1, Page2, Page3

The HTML:

<div class="historyTrail">
    <div class="historyListHeading">Your trail: </div>
    <ul id="historyTrailList">
        <li>Page1</li>
        <li>Page2</li>
        <li>Page3</li>
    </ul>
</div>

The CSS:

.historyTrail
{
    display: block;
    margin-bottom: 20px;
}
.historyListHeading 
{
    display: inline;
}
.historyTrailList
{
    display: inline;
    list-style: none;
    margin-left: -30px;
}
.historyTrailList li
{
    display: inline;
}
.historyTrailList li + li:before {
    content: ", ";
}

Easy as that!

Create custom enterprise wiki

How to create a custom enterprise wiki

1: Create a web template that extends the enterprise wiki template:

<?xml version="1.0" encoding="utf-8"?>
<Templates xmlns:ows="Microsoft SharePoint">
    <Template Name="YourWiki" ID="0">
        <Configuration ID="0"
                       Title="Your Enterprise Wiki"
                       Hidden="FALSE"
                       ImageUrl="/_layouts/images/stts.png"
                       Description="..."
                       DisplayCategory="Custom"
                       ProvisionClass="<Namespace>.YourProvider"
                       ProvisionAssembly="<namespace>, Version=1.0.0.0, Culture=neutral, PublicKeyToken=xxx" 
                       RootWebOnly="False">
        </Configuration>
    </Template>
</Templates>

2: Deploy the custom template to the folder: {SharePointRoot}\Template\1033\XML

3: Create the Custom Provider class:

class YourProvider : SPWebProvisioningProvider
{
    public override void Provision(SPWebProvisioningProperties props)
    {
        props.Web.ApplyWebTemplate("ENTERWIKI#0")
        var code = new SPSecurity.CodeToRunElevated(CreateSite);
        SPSecurity.RunWithElevatedPrivileges(code); //Excecute elevated
    }
    private void CreateSite() 
    {
        using (SPSite site = new SPSite(Properties.Web.Site.ID))
        {
            using (SPWeb web = site.OpenWeb(Properties.Web.ID))
            {
                // your custom code
            }
        }
    }     
}

That's it :)