Category Archives: look and feel

look and feel

Tutorial: How to modify the rendering of SharePoint Site Columns

Tipp Darstellung und Funktion von Websitespalte in SharePoint mit JavaScript anpassen (4)Tipp Darstellung und Funktion von Websitespalte in SharePoint mit JavaScript anpassen (3)

SharePoint offers a variety of options for changing the appearance of columns in lists or libraries. Since SharePoint 2013, client-side rendering (CSR) has become available as a new technology to replace the standard representation with an individual design of the output via JavaScript (JSLink). In addition, complex logic can also be executed. The advantage: Since no new column type is created, such adjustments can be reset to the standard at any time without leaving dependencies in the system.

Preliminary note

In general, the creation of an individual presentation method requires certain programming skills. For our example, we provide ready-made scripts as downloads. The prerequisite for using our script is that you are a website owner.

To reuse such custom column representations, the display method should be mapped to a site column. This allows users to add the site column to their list and have the new look in their forms and lists without further configuration.

1. Create a new site column in SharePoint

Tipp Darstellung und Funktion von Websitespalte in SharePoint mit JavaScript anpassen (1)In Site Settings, in the Web Designer Catalogs category, click the Site columns link. Assign Level of competence as the column name and select Choice (menu to choose from) as the information type. Click OK to create the site column.

2. Link site column to your own presentation method

Navigate through the Site contents to the Site Assets Library. Upload the downloaded files LevelOfCompetence.js and LevelOfCompetence.css to the library. These files contain the entire source code of the own presentation method.

For the next step you need PowerShell. In this case, we use the SharePointPnP.PowerShell Commands. Customize the URL in the Link Display Method Linking.ps1 script and run the Link Display Method Linking.ps1 script to link the new Level of competence site column to your own display method.

3. Add the site column to the list

Tipp Darstellung und Funktion von Websitespalte in SharePoint mit JavaScript anpassen (2)The Level of competence site column is now available in your SharePoint site using the new display method.

Navigate to a list and open the list settings. Click Add from existing site columns in the Columns section. In the Available site columns, select Level of competence and click Add. Click OK to add the site column to the list.

4. Testing the new presentation method

Tipp Darstellung und Funktion von Websitespalte in SharePoint mit JavaScript anpassen (3)Navigate to the list view and create a new item. The Level of competence column appears in the list form with the new design.


It’s a good idea to create the new site column in the site collection so it can be used throughout the site collection. The example described here is a relatively simple use case, but you can also implement very complex business applications with the methodology used. If you have any questions, please contact me at any time.

Note: The German Version of this post was already published at

Our related video tutorial might help you as well. For English translation, just adjust the settings to display English subtitles or your preset language.

The Video (German with English subtitles)

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="">
    <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 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