Home/ Questions/Q 3956478
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T02:22:06+00:00

We have the following themeable styles to have a gradient for the background of

  • 0

We have the following themeable styles to have a gradient for the background of the webpart body:

.ms-wpContentDivSpace{
    /* For Non-CSS3 Browsers */
    background: /* [ReplaceColor(themeColor:"Light2-Lightest")] */ transparent; 
    /* For Firefox 3.6+ */
    background: -moz-linear-gradient(top, 
        /* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB, 
        /* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9);
    /* For WebKit (Safari, Chrome, etc.) */
    background: -webkit-gradient(linear, left top, left bottom, 
        from(/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB), 
        to(/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9));
    /* For Internet Explorer */ 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
        startColorstr=/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB, 
        endColorstr=/*[ReplaceColor(themeColor:"Light2-Lighter")]*/ #E9E9E9);
    -ms-filter:'progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
        startColorstr=/*[ReplaceColor(themeColor:"Light2-Lightest")]*/ #FEFEFB, 
        endColorstr=/*[ReplaceColor(themeColor:"Light2-Lighter")]*/ #E9E9E9)'; 
}

All of it works fine except for the -ms-filter style for IE8. I’ve tried every combination of escaping the quotes and slashes and single vs double quotes, but the only way I can get it to work is to remove the ReplaceColor instructions:

.ms-wpContentDivSpace{
    /* For Non-CSS3 Browsers */
    background: /* [ReplaceColor(themeColor:"Light2-Lightest")] */ transparent; 
    /* For Firefox 3.6+ */
    background: -moz-linear-gradient(top, 
        /* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB, 
        /* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9);
    /* For WebKit (Safari, Chrome, etc.) */
    background: -webkit-gradient(linear, left top, left bottom, 
        from(/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB), 
        to(/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9));
    /* For Internet Explorer */ 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
        startColorstr=/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB, 
        endColorstr=/*[ReplaceColor(themeColor:"Light2-Lighter")]*/ #E9E9E9);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
        startColorstr=#FEFEFB, 
        endColorstr=#E9E9E9)"; 
}

Is it possible to have -ms-filter support themeable styles?

UPDATE:

It actually works as expected when a theme is applied. The problem is that when no theme is selected, the gradient is blue on top and dark blue on bottom. So it seems to be working up to the first comment slash because the rendered result is the same as if the style did not specify colors:

-ms-filter:'progid:DXImageTransform.Microsoft.gradient(GradientType=0)';
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is how we fixed it. We have two style sheets that were identical, but placed in different directories:

    • 14\TEMPLATE\LAYOUTS\1033\STYLES\MyProject\MyStyles.css
    • 14\TEMPLATE\LAYOUTS\1033\STYLES\Themable\MyProject\MyStyles.css

    Our custom master page points to the first style sheet. That is the style sheet that is used when the Theme is Default (no theme). But when SharePoint goes to compile a selected theme, it uses the style sheet in the second directory.

    We left the second style sheet alone because it was working when it is compiled into a theme. We then removed the theme directive comments from the filter styles in the first style sheet:

    .ms-wpContentDivSpace{
    /* For Non-CSS3 Browsers */
    background: /* [ReplaceColor(themeColor:"Light2-Lightest")] */ transparent; 
    /* For Firefox 3.6+ */
    background: -moz-linear-gradient(top, 
        /* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB, 
        /* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9);
    /* For WebKit (Safari, Chrome, etc.) */
    background: -webkit-gradient(linear, left top, left bottom, 
        from(/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB), 
        to(/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9));
    /* For Internet Explorer */ 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
        startColorstr=#FEFEFB, 
        endColorstr=#E9E9E9);
    -ms-filter:'progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
        startColorstr=#FEFEFB, 
        endColorstr=#E9E9E9)'; 
}

    We tested it out and the gradient is now working, with or without a Theme, in IE7 & 8, FF and Chrome.

    • 0