Back
SharePoint

Show Off Your Style with SharePoint Theming

Lionel Robinson is a Program Manager on the SharePoint engineering team, focused on user experience.

Theming in SharePoint 2013 makes it easier to drastically change the look of your site and make it your own. That said, the new look of SharePoint sites is great, so why would you want to change it? Here’s a personal example:

After the birth of our twins, I literally didn’t fit in the driver seat of my car with both child seats installed. And even in the passenger seat, my knees where hitting the dash while sitting at an angle. Time for a bigger car. My wife and I both grew up riding around in minivans, and we were thrilled to find the exact make, model, and color we wanted. It fit the whole family plus, with tons of cargo space. It was great!

Perhaps it’s just a psychological trick, but from that day forward it seemed like every third person on the road was driving the same car: our metallic light blue Honda Odyssey. On more than one occasion, I found myself in a parking lot, jamming the unlock button on the key fob, only to realize that my car was actually two aisles over.

What options do we have to truly make a car our own? The cheap fix is to slap a bumper sticker or decal onto the back. At the other end of the spectrum, you can pay someone to modify your car to your heart’s content. Or bravely do it yourself.

We’ve seen some customers encounter this problem with current SharePoint sites. When everyone uses the same few templates, yours can get lost in a sea of strikingly similar sites. You can live with the similarity and hope to tell the sites apart based on minor differences (the bumper sticker), or you need to use CSS and HTML to customize your site, which can be detailed and time-consuming.

These are the problems we are addressing with the new SharePoint theming experience. Through this experience, you can customize your site in minutes by playing with four basic levers: colors, site layout, fonts, and background image. By changing these, you can get a look that is truly unique.

Quick walkthrough 

  1. Under “Getting started with your site”, click on the “What’s your style?” tile. (If the tiles are hidden, you can also click “Change the look” on the settings menu or find “Change the look” in Site Settings under the heading “Look and Feel.”)
  2. The first page showcases a few starting points that we’ve put together, just to show you the range of options for your site’s look and feel. Pick any of these options to start.
  3.  
     
  4. Now the fun begins. You can change any of the four levers we mentioned earlier (background, layout, colors, and fonts), and preview the change instantly. Drag your own background image onto the rectangle in the top-left corner, select a color palette to match, select the site layout you want, and choose the font scheme that best fits your personality.
  5.  
  6. After you select your perfect combination of options, click “Try it out” (at the top-right corner) to preview it on your own site.
  7. This is where the magic happens! We make a copy of your site’s CSS (the files that define the look and formatting) but change it to the new colors and images. After you see it you can either keep it or try again.
  8.  

Have a specific color or font in mind? 

We’ve included a set of color palettes and fonts that we like. But you can always add your own. All you need is your favorite text editor. Things are going to get slightly technical (and if you are familiar with theming in SharePoint 2010, you’ve got a head start). The main difference is that we are no longer using the THMX file format. We created a set of new and simple XML formats to describe theming options: SPColor files describe the color palette and SPFont files describe the font scheme. The easiest way to create your own palettes and font schemes is to start with the defaults in your team site. Navigate to the root site of the site collection, click on “site settings” in the settings menu, and then “theme gallery”. You’ll find the color palettes and font schemes in the folder named “15.” 

Color palettes 

Each SPColor file contains simple XML that defines the color value, in hexadecimal, for each of the available color slots. If you know the color slot you want to change, just write in the new value and save a copy of the file into the same folder of the theme gallery (if versioning or publishing is turned on, make sure you check in and publish the file). Your new palette will be available in the color picker of the theming experience (step 3, mentioned earlier).

Here is a snippet of an SPColor file. Also new to this release is the ability to specify opacity values along with color. You can do this by using an 8-digit hexadecimal value, where the first two digits represent the opacity, followed by the traditional 6 digits representing red, green, and blue values.

<?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=”0072C6″ />
    <s:color name=”SearchURL” value=”338200″ />
    <s:color name=”Hyperlink” value=”0072C6″ />
    <s:color name=”BackgroundOverlay” value=”D8FFFFFF” />
   
</s:colorPalette>

Font schemes 

Fonts can add a lot of personality to a site. One of the most exciting things about theming in SharePoint is support for web fonts. Prior to this feature, you had to choose between the same old 8–10 web-safe fonts (fonts that are known to be installed on almost all devices by default, like Arial, Times New Roman, and Georgia). By using web fonts, you can select from the rich variety of fonts available on the Internet, and the necessary files are downloaded by web browsers along with the rest of the page.

Similar to the SPColor file for color palettes, an SPFont file defines the font that is used for each of the available font slots. The easiest way to make a custom font scheme is to start from one that’s already available and make tweaks as needed. SharePoint supports many languages and scripts, and so does font theming. For each font slot, you should define the font to be used in each script. For web-safe fonts, just include the name in the typeface attribute for each font slot. If you want to specify a web font, you’ll have to provide the URL to your web font files in four font formats (for support across browsers), and a small and large thumbnail image that is used to render the font names in the font picker (see step 3, mentioned earlier).

<?xml version=”1.0″ encoding=”utf-8″?>
<s:fontScheme name=”Impact” previewSlot1=”title” previewSlot2=”body” xmlns:s=”http://schemas.microsoft.com/sharepoint/”>
    <s:fontSlots>
        <s:fontSlot name=”title”>
            <s:latin typeface=”Impact”
                eotsrc=”/_layouts/15/fonts/Impact.eot”
                woffsrc=”/_layouts/15/fonts/Impact.woff”
                ttfsrc=”/_layouts/15/fonts/Impact.ttf”
                svgsrc=”/_layouts/15/fonts/Impact.svg”
                largeimgsrc=”/_layouts/15/fonts/ImpactLarge.png”
                smallimgsrc=”/_layouts/15/fonts/ImpactSmall.png” />
           
            <s:font script=”Arab” typeface=”Segoe UI Light” />
            <s:font script=”Deva” typeface=”Nirmala UI” />
            <s:font script=”Grek” typeface=”Segoe UI Light” />
           
        </s:fontSlot>
        <s:fontSlot name=”navigation”>
            <s:latin typeface=”Segoe UI” />
           
            <s:font script=”Arab” typeface=”Segoe UI” />
            <s:font script=”Deva” typeface=”Nirmala UI” />
            <s:font script=”Grek” typeface=”Segoe UI” />
           
        </s:fontSlot>
       
    </s:fontSlots>

</s:fontScheme>

Composed looks 

“Composed looks” are the starting points shown in the first step of the theming experience. You can add new composed looks that use your custom colors palettes and font schemes. It’s a great way to save a series of designs so you can apply them at any time. You’ll find the list of composed looks in “Site Settings” under “Web Designer Galleries.” You can manage the existing set of composed looks and add new ones. To add one, just add a new list item and fill in a name and title and the URLs to the masterpage, SPColor file, background image (optional), and SPFont file (optional). After you add a list item, the preview for your new composed look is added as a starting point on the “Change the look” page.

So go forth and play! Make your sites look great, show off your team’s personality, and be truly unique. Now if only I could do the same to my minivan.