Tag Archives: SharePoint 2013

Color palettes and fonts in SharePoint 2013

Today I want to talk just a little bit about designs in SharePoint 2013. You should know that I am not one of the greatest Web Designers and I believe I was never meant to be one of them. But Microsoft made it very easy to get your own corporate look and feel in SharePoint 2013 by just adjusting the color palettes and fonts. It’s not a full-blown design but its maybe just right for some of you.

But still it was just a bunch of hexadecimal color codes in an XML formatted file which looks like the following.

<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="http://schemas.microsoft.com/sharepoint/">
    <s:color name="BodyText" value="444444" />
    <s:color name="SubtleBodyText" value="777777" />
    <s:color name="StrongBodyText" value="262626" />
    <s:color name="DisabledText" value="B1B1B1" />
    <s:color name="SiteTitle" value="262626" />
    <s:color name="WebPartHeading" value="444444" />
    <s:color name="ErrorText" value="BF0000" />
    <s:color name="AccentText" value="FF0000" />
    <s:color name="SearchURL" value="338200" />
    <s:color name="Hyperlink" value="0072C6" />
    <s:color name="Hyperlinkfollowed" value="663399" />
    <s:color name="HyperlinkActive" value="9B0000" />
    <s:color name="CommandLinks" value="666666" />
    <s:color name="CommandLinksSecondary" value="262626" />
    <s:color name="CommandLinksHover" value="FF0000" />
    <s:color name="CommandLinksPressed" value="9B0000" />
    <s:color name="CommandLinksDisabled" value="B1B1B1" />
    <s:color name="BackgroundOverlay" value="D8FFFFFF" />
    <s:color name="DisabledBackground" value="FDFDFD" />
    <s:color name="PageBackground" value="FFFFFF" />
    <s:color name="HeaderBackground" value="D8FFFFFF" />
    <s:color name="FooterBackground" value="D8FFFFFF" />
    <s:color name="SelectionBackground" value="7F9CCEF0" />
    <s:color name="HoverBackground" value="7FCDE6F7" />
    <s:color name="RowAccent" value="FF0000" />
    <s:color name="StrongLines" value="FF9696" />
    <s:color name="Lines" value="ABABAB" />
    <s:color name="SubtleLines" value="C6C6C6" />
    <s:color name="DisabledLines" value="E1E1E1" />
    <s:color name="AccentLines" value="FF3939" />
    <s:color name="DialogBorder" value="F0F0F0" />
    <s:color name="Navigation" value="666666" />
    <s:color name="NavigationAccent" value="FF0000" />
    <s:color name="NavigationHover" value="FF0000" />
    <s:color name="NavigationPressed" value="9B0000" />
    <s:color name="NavigationHoverBackground" value="7FCDE6F7" />
    <s:color name="NavigationSelectedBackground" value="C6EFEFEF" />
    <s:color name="EmphasisText" value="FFFFFF" />
    <s:color name="EmphasisBackground" value="FF0000" />
    <s:color name="EmphasisHoverBackground" value="C60000" />
    <s:color name="EmphasisBorder" value="C60000" />
    <s:color name="EmphasisHoverBorder" value="9B0000" />
    <s:color name="SubtleEmphasisText" value="666666" />
    <s:color name="SubtleEmphasisCommandLinks" value="262626" />
    <s:color name="SubtleEmphasisBackground" value="F1F1F1" />
    <s:color name="TopBarText" value="666666" />
    <s:color name="TopBarBackground" value="C6EFEFEF" />
    <s:color name="TopBarHoverText" value="333333" />
    <s:color name="TopBarPressedText" value="9B0000" />
    <s:color name="HeaderText" value="444444" />
    <s:color name="HeaderSubtleText" value="777777" />
    <s:color name="HeaderDisableText" value="B1B1B1" />
    <s:color name="HeaderNavigationText" value="666666" />
    <s:color name="HeaderNavigationHoverText" value="FF0000" />
    <s:color name="HeaderNavigationPressedText" value="9B0000" />
    <s:color name="HeaderNavigationSelectedText" value="FF0000" />
    <s:color name="HeaderLines" value="ABABAB" />
    <s:color name="HeaderStrongLines" value="FF9696" />
    <s:color name="HeaderAccentLines" value="FF3939" />
    <s:color name="HeaderSubtleLines" value="C6C6C6" />
    <s:color name="HeaderDisabledLines" value="E1E1E1" />
    <s:color name="HeaderDisabledBackground" value="FDFDFD" />
    <s:color name="HeaderFlyoutBorder" value="D1D1D1" />
    <s:color name="HeaderSiteTitle" value="262626" />
    <s:color name="SuiteBarBackground" value="FF0000" />
    <s:color name="SuiteBarHoverBackground" value="FF6464" />
    <s:color name="SuiteBarText" value="FFFFFF" />
    <s:color name="SuiteBarDisabledText" value="FF9696" />
    <s:color name="ButtonText" value="444444" />
    <s:color name="ButtonDisabledText" value="B1B1B1" />
    <s:color name="ButtonBackground" value="FDFDFD" />
    <s:color name="ButtonHoverBackground" value="E6F2FA" />
    <s:color name="ButtonPressedBackground" value="FF9696" />
    <s:color name="ButtonDisabledBackground" value="FDFDFD" />
    <s:color name="ButtonBorder" value="ABABAB" />
    <s:color name="ButtonHoverBorder" value="FF9696" />
    <s:color name="ButtonPressedBorder" value="FF3939" />
    <s:color name="ButtonDisabledBorder" value="E1E1E1" />
    <s:color name="ButtonGlyph" value="666666" />
    <s:color name="ButtonGlyphActive" value="444444" />
    <s:color name="ButtonGlyphDisabled" value="C6C6C6" />
    <s:color name="TileText" value="FFFFFF" />
    <s:color name="TileBackgroundOverlay" value="7F000000" />
    <s:color name="ContentAccent1" value="FF9339" />
    <s:color name="ContentAccent2" value="C65A00" />
    <s:color name="ContentAccent3" value="24A0A0" />
    <s:color name="ContentAccent4" value="007777" />
    <s:color name="ContentAccent5" value="2FCF2F" />
    <s:color name="ContentAccent6" value="009E00" />

And to be honest I do not see the colors behind a six-digit hexadecimal code … yet!
And I think I want to keep it like that.

But today, a dear colleague of mine showed me how easy it can be to get started in less than 10 minutes when you have the right toolset which in this case is provided by Microsoft itself.

Here is what he showed me:

Download the SharePoint Color Palette Tool from the Microsoft Download Center here.


The tool is easy to handle and self-explaining. (Feel free to contact me if you have questions)

You can use one of the many tools out there to create a color scheme.
We used http://paletton.com in this example.

Just put the hexadecimal color codes into your SharePoint Color Palette and save the file.

Now you can upload the *.spcolor file to SharePoint manually or you use a SharePoint App to deploy the file to SharePoint. Chis O’Brien explained the second way in his blogpost SP2013 host web apps: provisioning files (e.g. master pages) to the host web.

Unfortunately there is no editor for for the *.spfont files. But you can use your own fonts in SharePoint 2013 by providing a custom .spfont file. For more Information about both file types take a look at the MSDN article Color palettes and fonts in SharePoint 2013


SharePoint 2013 URL Trailing Slash causes Video to disappear

It was like every other Monday in my work life.
I got a call that started like this: “SharePoint is not working…”
Well…after 10 minutes I got a more precise description of the problem and I found the issue kind of funny and share worthy.


We developed a Web Part that aggregates News using SharePoint Search.

Issue Description

A User created a new “News Article Page” and added a Video Web Part to it. Everything was working fine. This new page was picked up by the SharePoint Search Crawler and displayed in the Web Part we created. When a user clicked on the Link to the News Article Page the page was rendered fine except that the video was gone.


Obviously 😉 I first compared the two URLs and I found a trailing slash (/) in the URL that came from the Web Part. When I removed it everything worked fine. The “Path” Attribute you get from the search result has always a slash (/) at the end. I just fixed the source code by adding a .TrimEnd(‘/’) to the URL String and everything worked great.