The SharePoint Designer

Brand. Design. Amaze.

May 29

Trouble with Tribbles: Composed Looks, Custom CSS and Master Pages

No Gravatar

This week I was faced with a challenge of creating a custom composed look, with a custom master page as well as themeable style sheet, that could change via “Change the Look”.  I followed a few of the tutorials and I will list my pain in this post. But thanks to Randy Drisgill and Elio Struyf, I got it all working. Because I had to many issues trying to get it all working together, I thought I would help others that had my same hardship.

Composed looks are made up of  these elements:

  • Master Pages
  • CSS
  • Color palettes
  • Font palettes
  • Background image (This is optional, I didnt use it as you can upload it via Change the Look, or when you do your put together)

Once the above elements are put together – you have your composed and completed look. So lets start…

The Master Page

In SharePoint Designer 2013, click “All Files” then navigate to _catalogs > masterpages.

All Files - Catalogs - Masterpages

Create your new custom master page or import it in. I importedRandy Drisgills starter master page for this purpose. Name the file, then copy seattle.preview and rename it to the name of your custom master page. Or the more correct way is to go to site settings > Master pages and page layouts, and you will see that there is now a preview file for your new custom master page. Rename the downloaded preview file with the same name you gave your new master page and upload it back to the Master Page library. (suggest you change the name of your master page during this step)

Custom Master

Go to “Change the Look”, select your design, and you should see your newly created site layout in the drop down.

Site layout dropdown

So for this step you need two things: A master page and a preview file.  Your custom master page will now be available to the compose looks site layouts selection.

 The Custom CSS

This was the hardest part for me. Why you ask? Because in the tutorials I was doing – they always suggested copying seattle or oslo, which then lock up. (This file has been moved or deleted, my favourite error message).

Create your custom css file and MAKE SURE you place it in “/Style Library/~language/Themable/” or else the themeing engine will not pick it up. Here is the registration code you need to add to your header”

<head>
…
<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/~language/Themable/MyCustomFile.css%>" runat="server" />
</head>

Save your master and check it in (always check in, it will save you a ton of trouble shooting later).

We will come back to the CSS file in a bit.

The Colour Palette

Download SharePoint Colour Palette Tool. And have fun. There are many tutorials on how to play and work with this.

Colour Palette

Once you are happy, save the .spcolor file. In SharePoint Designer, navigate to All Files> theme > 15. and you will see all of the current SharePoint colour palettes. Import your new .spcolor (I names mine Blue so it show at the top). It will now be available as a colour choice.

theme spcolour

 

The Font Palette

As with the .spcolor file, you can also add a font palette (The Composed looks don’t have an Arial choice for example). Copy and paste one of the current font files. I copied font0001.spfont for my site, but you can chose any one. Open the file up (xml) and you will see the font choices for each. I followed Elios blog post on the .spfont file  here. He explains it wonderfully and it worked seamlessly. He provides a great base file as well. Here is how mine, I wanted Arial, ended up looking like:

fontxml

 

Once you have saved it, it will be immediately available in your composed looks font choices.

Lets go to the CSS again

So now we want to use our palette in our custom CSS. You code your css as normal, using your ID’s and Classes. BUT, just like the corev15.css, we are going to use the REPLACE attribute.

You need to be very aware of your .spcolor file as you will be using the names to link the colour file to your css. For Example:

/* [ReplaceColor(themeColor:”SuiteBarBackground”)] */ background-color:#9bafca;

You can change the fonts. For Example:

/* [ReplaceFont(themeFont:”body”)] */ font-family:”Segoe UI”,”Segoe”,Tahoma,Helvetica,Arial,sans-serif;

The MSDN Article is fantastic. I use it as my cheat sheet.

There is ALLOT of trial and error in getting your colours right, so you might not get it first time. But remeber you can use the replace attribute for anything and everything, just be aware of your colours.

Here is an example of what mine looked like:

css

Bring it all together

Go to Site Settings > Composed Looks. Add a new Item. Now enter all your new files and save

composed

 

Then this will put everything together. And now your design will be available to choose when you get to the design gallery.

designsea

 

And that is it! I know it looks simple enough, but I had a real time getting that custom CSS to be themeable, and thanks to my Lords of SharePoint Randy and Elio I was able to do it.

My advice:

1. Get Randy’s book on SharePoint 2013 Branding and User Interfaces  and watch his SPC video

2. Spend time working through Elio’s Blog

3. Give me a shout on louise at SharePoint experience dot co dot za if you need any help :)

 

Leave a comment

The SharePoint Designer is using WP-Gravatar