1

We have a SharePoint solution that was currently deployed to a single Web Application. Now it deploys to two Web Applications.

The solution has its own custom css file(s) with a defined class as follows:

.section-break
{   
    background-color: #3bb1ff;
    color: white;
    padding: 3px 5px 3px 5px;   
}

The background is basically a light blue which looks ok with the default theme of the site under web application 1.

However, as part of the update, when deploying to the second web application, the blue is a bit out of place.

Ideally, I would like to have this background based on a theme.

Given that the current solution's css is static, is there a way I can use the some of the theme colours for my css?

Web Application 1 uses the default SharePoint theme, whilst Web Application 2 uses the Graham theme.

Improve this question

1 Answer 1

Reset to default
1

When you enable a theme in SharePoint 2010, under the hood, the default corev4.css is doing a find and replace with the default colors by the ones the theme uses.

Additionally, this find & replace is also done for files within the virtual Themable folder. Should you want to deploy a CSS file using a feature, you should make sure that it is dropped into that folder.

You should be able to take advantage of this on your own CSS files using CssRegistration by setting the EnableCssTheming attribute to true.

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/myStyleSheet.css %>" EnableCssTheming="true" After="corev4.css" runat="server"/>

Your style should look something like:

.section-break
{
/* [ReplaceColor(themeColor:"Accent4-Lightest")] */ background-color:#3bb1ff;
}

Make sure you change your theme at least once so that files are rendered with the replacements.

Accent4-Lightest is just an example, as there are 12 different colors and 5 variations.

More here

Improve this answer
12
  • I tried doing this. I added the CssRegistration to my page (replaced the existing CssLink) and changed the css as mentioned. The colour is rendered the same light blue. Am I missing something here? Commented Aug 11, 2014 at 13:20
  • 1
    you need to change the theme for the replace to take place Commented Aug 11, 2014 at 13:20
  • Ok. Does the CSS have to be deployed to the themes folder, i.e. /_catalogs/theme/Themed/7A2303E5? At present, I am deploying the CSS files to /_layouts/1033/styles. Commented Aug 11, 2014 at 13:29
  • 1
    "Any style sheets outside of the Themable folder in the Style Library will not themed." cardinalsolutions.com/cardinal/blog/portals/2013/04/… Commented Aug 11, 2014 at 14:00
  • 1
    In some particular order, I copied the style sheet to Layouts\1033\Styles\Themable folder in my solution. Then deactivated feature before activating the feature. At this point, the changes did not take effect. But once I changed the theme in Site Settings, I could see the new background colour. Commented Aug 11, 2014 at 14:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.