Custom theme CSS doesn't seem to work properly

Question

I'm trying to use the OOTB SharePoint Theme Engine in SharePoint 2013, but no matter what I do, my custom themable css files just don't seem to work.

I deploy my css through a feature. As far as I know and read in blogs, the safest way to make it work is by adding the CSS to the Themable folder in a certain language folder in the Style Library. But this doens't work for me and I'm 100% sure it is the correct language folder I put it in.

[CSS]

.ms-webpart-chrome-title {
    /* [ReplaceColor(themeColor:"SuiteBarBackground")] */ background-color: transparent;
}

[XML]

<Module Name="Themable" Path="Themes" RootWebOnly="TRUE" Url="Style Library/en-us/Themable">
    <File Url="devtheme.css" IgnoreIfAlreadyExists="TRUE" Type="GhostableInLibrary" />
</Module>

Reference in MasterPage

<SharePoint:CssRegistration Name="<% $SPUrl:~SiteCollection/Style Library/~language/Themable/devtheme.css %>" After="corev15.css" runat="server" />

The CSS file is found and read by the engine, but the replacement doesn't happen. What do I do wrong?

Answer 1

If you are creating a Theme for SharePoint 2013, then you should start first with a custom .spcolor or .spfont file and deploy those to the _catalogs/theme/15 folder. In those files, you specify the colors and fonts in the XML, and apply those via the Change the Look page (and also add your custom look to the Composed Looks list).

SharePoint then grabs the colors from the .spcolor file, and uses those values when it does the replacements in the core css files.

If you want to then override the styles that are generated from the theme, you can hard-code your changes into your custom css file and include it like you have done already with the CssRegistration control. I don't know that SharePoint will support replacements in your own custom CSS files.

Answer 2

In order to use SharePoint themes, you need to be using the Seattle masterpage. I'm not sure which masterpage you are using, but any other (even the OOB Oslo one) will not let you use custom themes and such. No one has asked yet, but before we try to dig deep into your feature first let's make sure you're using the masterpage that is compatible with SharePoint theming.

Otherwise, you'd need to do it through custom CSS. Don't know why, but I know that's the truth.

Edit: Sorry, I just really had the time to read through what you're doing. I thought you were trying to create a custom SharePoint Theme to apply via Design Manager. Now that I see you're doing it through code there's a simple solution:

I can't vouch for the URL resolution of your CSS file (that is, if the URL resolves correctly) but I do know where you need to place custom CSS files. Take a look at the sample code below:

<!--MS:<SharePoint:CssLink runat="server" Version="15">-->
    <!--PS: Start Preview-->
        <link href="/_layouts/15/1033/styles/Themable/corev15.css" rel="stylesheet" type="text/css" />
        <link href="/_layouts/15/1033/styles/OLD/Themable/layouts.css" rel="stylesheet" type="text/css" />
        <link href="/_layouts/15/1033/styles/Themable/searchv15.css" rel="stylesheet" type="text/css" />
    <!--PE: End Preview-->
    <!--EH: Start actual CSS Linking -->            
        <link href="/_layouts/15/EH/styles/master.min.css" rel="stylesheet" type="text/css" />
    <!--EH: End -->
<!--ME:</SharePoint:CssLink>-->

That's for the master page, there's another special trick you need for page layouts. The <!--EH --> comments are just ones I put in. They stay as comments in the source code once the masterpage is converted but for work purposes I left them in for anyone else who has to pick this file up.

And honestly, I would deploy it to the file system. This way you can use the file across the entire farm and not have to deploy the feature over and over again to ghost it in libraries. That's my biggest gripe with the new Design Manager. Theming is done on a per site collection level which makes it a huge pain to update.

Answer 3

You can do this using the the sandbox approach.

XML

<Module Name="_catalogsmasterpageSPCcss_" Url="_catalogs/masterpage" RootWebOnly="FALSE" Path="Files\_catalogs\masterpage">
    <File Url="bindtuning.css" Type="GhostableInLibrary" Level="Draft" Path="bindtuning.css">
        <Property Name="ContentTypeId" Value="0x010100C5033D6CFB8447359FB795C8A73A2B1900E5A94EF67A904941AE66C1C189D3E199" />
        <Property Name="FileLeafRef" Value="bindtuning.css" />
        <Property Name="ContentType" Value="Design File" />
        <Property Name="_ModerationStatus" Value="3" />
        <Property Name="FileDirRef" Value="_catalogs/masterpage" />
        <Property Name="FSObjType" Value="0" />
    </File>
</Module>

Reference on Masterpage

<SharePoint:CssRegistration name="<%$SPUrl:~sitecollection/_catalogs/masterpage/bindtuning.css%>" runat="server" after="SharepointCssFile" />

You can also open the site with SharePoint designer and put the css file manually under All Files -> _catalogs -> masterpage

Answer 4

I had a similar issue in the past - a css file wasn't applied to a page. The behaviour was the following:

• deployed the file with a new class
• The class was not applied
• The IE Developer toolbar showed that the file was loaded, but a old version of it was served to the page
• downloading the file from the library showed the correct version.

If this is your case, you can resolve the problem by clearing the blob cache for the web application. You can do this from the central admin - that will stop your page from getting an old version of the css.

(Don't know if this can apply to you, posting anyway - hope it helps. If that isn't your case, leave a notice and I will try to delete/edit the answer).

Answer 5

Verify have you published the *.css file.

Answer 6

I may be a bit late but maybe this may help others: The SharePoint Theme Engine generates new CSS files from the Themable CSS once it is applied, not on the fly for each request. You always need to apply the Theme after you add/update themable css. This can be done programmatically by calling the SPTheme.ApplyTo method for each web that needs to be updated.