Composed Looks in SharePoint 2013 (Part 1)

Composed Looks in SharePoint 2013 (Part 1)

Posted by on Thursday, August 1st, 2013  

 

What is a Composed Look?  SharePoint 2013 has done away with ‘themes’ so to speak, but they’ve been replaced with a more mac-daddy theme…the Composed Look.  How does it work?  When you are in Site Settings > Change the Look > and you choose the design you love…SharePoint creates a series of documents unique to your site.  It has its own Master Page, CSS file, Font Scheme, and Color Scheme.

To make your own Composed Look, go to Site Settings > Composed looks (under the Web Designer Galleries) heading > add new item.  From there you simply fill out the form giving the title, name, and URLs to your custom Master Page (which has your custom CSS file linked inside),  .spcolor file (more below) and optional font scheme file and background image.

Composed Look - SharePoint 2013

*The display order you give your Composed Look will be the order it’s displayed in the Change the Look gallery

Preview File

Composed Looks in SharePoint 2013

In order to have your Composed Look displayed in the Change the Look gallery, you MUST have a .preview file named exactly the same as your Master Page in the Master Page Gallery.  The best way to achieve this is to copy and paste an existing .preview file and change the name.  This is the file that will be displayed in the “Change the Look” gallery.

Color Scheme

Other than your Master Page and CSS files, your color scheme will be one of the most important files you create.   The color scheme is a file with the .spcolor extension and it defines the primary and accent colors within your site. Fortunately, for SharePoint 2013, Microsoft moved away from the ‘Theme from a PowerPoint file’ and provided an easy to use tool for building the .spcolor file using the SharePoint Color Palette Tool. This tool will allow you to start with a client’s primary colors then you can easily build the full color palette for your branded site. Like SharePoint Designer 2013, it’s free to download and use.

Composed Looks in SharePoint 2013

Within the SharePoint Color Palette Tool, you have tons of options to change the color of just about anything.  To me, it’s the most valuable tool you can use to cut down on tedious CSS color changes for your site.

Upload your .spcolor file in Site Settings > Themes > 15 > add new document then use that link to the .spcolor file in your Composed Look item.

Try it

Once you’ve created your Composed Look simply go back to Site Settings > Change the Look > and find the one you made!

If you are in the testing phase and want to check any change, be sure to Change the Look again so SharePoint can create the new updated files…otherwise you’ll still see the old ones it created from before.  And that can make you go a bit crazy…speaking from experience.

If you are in the testing phase of your development and you want to tweak your new Composed Look, you will need to be sure to reset the Composed Look whenever you make changes to the .spcolor file. In a later post, we’ll explain the details of it but the short of it is that SharePoint generates some files behind the scenes and the only way to force the regeneration is to change the look to another Composed Look then change back to your newly updated Composed Look.

Hope this helps!

Lori

Next Steps

If you are interested in deploying a Composed Look programmatically, check out Jason Cribbet’s blog Composed Looks in SharePoint 2013 – Part 2!

Subscribe to RSS Feed

Sign Up for Newsletter

5

5

comments

    Nov 25
    2013

    Rex Banner

    To the point, and in plain English. Thank you!!

    Reply
    Jan 16
    2014

    Helen

    Hello

    I have recently been introduced to Sharepoint 2013, i have used the sharepoint palette download to change set colours in an .spcolor file. I have uploaded these and all worked fine however I now dont seem to be able to change the look it just hangs and when clicking Try this out i get an error message.

    I am using Oslo if that makes difference.

    I even tried just altered the .spcolor file and replaced it in the Themes folder 15. When I go to change the look the current theme shows the updates in the small preview thumbnail however the page does not.

    Does anyone know if this error is becasue ive uploaded my own .spcolor?

    Reply
      Jan 21
      2014

      Lori Cribbet

      Hey Helen,
      When you uploaded the spcolor file, were you overwriting an out of the box spcolor file or are you uploading your own unique file? If you’re uploading the unique one, did you create a new Composed Look item in the CL Gallery that referenced your custom spcolor file? This is the approach I would take so that you can eliminate any variables that you have.

      Good luck!
      Lori

      Reply
        Jan 22
        2014

        Helen

        Hello

        Yes i made a brand new compossed look inthe CL Gallery. I now think it might be a fault with the build of our sharepoint at this is happening on another site where i haven’t added a CL too.

        Thanks for the responce though.

        Reply

Leave a Reply