Skip to content

Creating SharePoint 2013 Composed Looks: Themes, Fonts, .SPColor, .SPFont, and XML Node Structure

by on December 18, 2012

With the advent of SharePoint 2013, Microsoft is trying to simplify and package the design of SharePoint with “Composed Looks”. This gives the designer the ability to combine a number of SharePoint pieces together into one look.

You can create a composed look using the existing or custom pieces. You can even create variations by using different Themes (.spcolor), Font Schemes (.spfont), and images (intended for backgronds, but you can be creative!) with the same master page. This is a nice change from the .thmx theming engine used previously, which was clumsy to implement for the most part.

Parts of a Composed Look

  • Title*
  • Name*
  • Master Page (.master)
  • Theme (.spcolor) – No longer .thmx files
  • Font Scheme (.spfont)
  • Image (.jpg, .png, .gif, etc.)
  • *Required

    image

    image

    image

    .SPCOLOR File Type

    Open an .spcolor file in a text editor, and you will find it is just an XML file. Pretty straight forward. Parent node is <s:colorPalette>  and subnodes are all <s:color> with associated name and value pairs.

    imageimage

    Note: If you open a .thmx file in a text editor, you just get garbage, no readable xml file. Sublime text reads a bunch of machine code numbers for you, but still nothing really useful or editable.

    imageimage

    .SPTHEME file type

    The .spfont file type is also xml, though slightly more complex. <s:fontscheme> is the parent with a nested <s:fontSlots>. In the fontSlots node, you find <s:fontSlot> nodes with names like “title” “navigation”, “small-heading”, “heading”, “large-heading”, “body”, “large-body”. Pretty straight forward.

    You are also able to specify font files and their locations, such as .eot, .ttf, .woff, .svg, an image source (I presume for a preview) for large and small views. This means we should be able to use ANY FONT WE WANT AND GET IT! Yeah!

    NOTE: If it actually works – I have not tried to use it yet, so cannot comment on the functionality of pulling in a custom font.

    You can even specify a different font for languages that is appropriately built for the specific language: <s:font script="Arab" typeface="Segoe UI" />

    I am not yet sure what <s:ea> and <s:cs> nodes are for – English American?

    image

    Conclusion

    It seems like Microsoft is responding better to what the clients are asking for. An easily implemented package for design solutions, sometimes with variations for departments, regions, sectors, or just web application or site application level. Regardless, it seems to be a nice way of packaging the design work you may produce for the end user to understand; hopefully an admin end user ^_^.

    What do you think?

    Advertisements
    6 Comments
    1. Bea Große-Venhaus permalink

      stand for East Asia
      for complex script

      “EAScriptFont is the font to use for East Asia scripts. The element is not currently used by SharePoint. But, the element is still required in the font scheme.

      CSFont is the font to use for complex scripts. The element is not currently used by SharePoint. But, the element is still required in the font scheme.”

      Quote from teh Microsoft-article “Color palettes and fonts in SharePoint 2013”
      http://msdn.microsoft.com/en-us/library/jj945889.aspx

    2. Bea Große-Venhaus permalink

      “s:ea” = East Asean
      “s:cs” = Complex script

    3. Phil permalink

      and nodes are for –

      “EAScriptFont is the font to use for East Asia scripts. The element is not currently used by SharePoint. But, the element is still required in the font scheme.”

      “CSFont is the font to use for complex scripts. The element is not currently used by SharePoint. But, the element is still required in the font scheme.”

      from http://msdn.microsoft.com/de-de/library/jj945886.aspx

    4. how to set 2 fonts in the SPFont file
      I need the resulting CSS to be ‘font-family: “Helvetica Neue”, Arial, sans-serif ‘
      With the SPFont file

      I get ‘font-family: “”Helvetica Neue”, “Segoe UI”, “Segoe”, Tahoma, Helvetica, Arial, sans-serif ‘
      So Arial is NOT the second choice like my customer want.

      using is error because the look does not show.

    5. if you are embedding your font, which seems to be the standard Microsoft is supporting, no one will ever see a secondary font, so the point may be moot.

    6. I had the exact same issue and finally found the solution. The font is being parsed as a string in .NET and you can use the backslash escape character to provide quotes within the typeface. You must change the XML attribute quotes to single quotes in order to add double quotes within the value of the attribute. Knowing the value is rendered with a start and an end double quote, you have to wrap each font in double quotes and skip the begin- and end double quotes.

      Example:

      Result (in css):
      font-Family: “Helvetica Neue”, “Helvetica”, “Arial”,”Segoe UI”,”Segoe”,Tahoma,Helvetica,Arial,sans-serif

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

    %d bloggers like this: