background can't be changed

[jvondermans]

I have downloaded the CSS and applied it to a new theme on our ADFS servers, but I now seem to be unable to change the Illustration.

I have taken a sample image and reduced it's size so that it is under 200KB as a jpg, and run the below to try and set it as the Illustration:

Set-AdfsWebTheme -TargetName custom -Illustration @{path="C:\ADFS Themes\custom\background.jpg"}

When I refresh the page, I still just get the default blue background. Is there something else I need to do in order to get the background illustration to appear?

[JamesEdmonds89]

I have the exact same problem!

[0acff4be45]

Strange, it works for me with the same command you posted.
Have you tried using onload.js to change the illustration?

Or perhaps this?
Set-AdfsWebTheme -TargetName -AdditionalFileResource @{uri='/adfs/portal/images/hrd.jpg';path='.\hrd.jpg'

[bongiovimatthew-microsoft]

When a new web theme is created, there is an option to specify a SourceName, which is a theme that the new theme will be based on. If you choose -SourceName default, you should receive the default onload.js, which includes logic to set the illustration image. This is not clear in the documentation, so I will update to include this.

If you wish to set your own onload.js instead, you should include the code below.

function getStyle(element, styleProp) {
    var propStyle = null;

    if (element && element.currentStyle) {
        propStyle = element.currentStyle[styleProp];
    }
    else if (element && window.getComputedStyle) {
        propStyle = document.defaultView.getComputedStyle(element, null).getPropertyValue(styleProp);
    }
    return propStyle;
}

var computeLoadIllustration = function () {
    var branding = document.getElementById("branding");
    var brandingDisplay = getStyle(branding, "display");
    var brandingWrapperDisplay = getStyle(document.getElementById("brandingWrapper"), "display");

    if (brandingDisplay && brandingDisplay !== "none" &&
        brandingWrapperDisplay && brandingWrapperDisplay !== "none") {
        var newClass = "illustrationClass";

        if (branding.classList && branding.classList.add) {
            branding.classList.add(newClass);
        } else if (branding.className !== undefined) {
            branding.className += " " + newClass;
        }
        if (window.removeEventListener) {
            window.removeEventListener('load', computeLoadIllustration, false);
            window.removeEventListener('resize', computeLoadIllustration, false);
        }
        else if (window.detachEvent) {
            window.detachEvent('onload', computeLoadIllustration);
            window.detachEvent('onresize', computeLoadIllustration);
        }
    }
};

if (window.addEventListener) {
    window.addEventListener('resize', computeLoadIllustration, false);
    window.addEventListener('load', computeLoadIllustration, false);
}
else if (window.attachEvent) {
    window.attachEvent('onresize', computeLoadIllustration);
    window.attachEvent('onload', computeLoadIllustration);
}

function SetIllustrationImage(imageUri) {
    var illustrationImageClass = '.illustrationClass {background-image:url(' + imageUri + ');}';

    var css = document.createElement('style');
    css.type = 'text/css';

    if (css.styleSheet) css.styleSheet.cssText = illustrationImageClass;
    else css.appendChild(document.createTextNode(illustrationImageClass));

    document.getElementsByTagName("head")[0].appendChild(css);
}

// NOTE: If you wish to support the ADFS illustration (background image), you must use the following:
// PSH> Set-AdfsWebTheme -TargetName <activeTheme> -AdditionalFileResource @{uri='/adfs/portal/images/illustration_mine.jpg';path='.\illustration_mine.jpg'}
SetIllustrationImage('/adfs/portal/images/illustration_mine.jpg');

[JamesEdmonds89]

Is the easiest thing to do, to remove the new theme, and recreate it using the sourcetheme switch, and stylesheet from here?
So i.e
New-AdfsWebTheme -Name AzureUX -SourceTheme default -StyleSheet @{path="C:\ADFS Themes\Azure UX\CenteredUI.css"}

[JamesEdmonds89]

Can confirm for me, that works, and seemed a little more straight forward for my tiny brain to run :D

[bongiovimatthew-microsoft]

Excellent. Yeah using the default theme as a SourceTheme is definitely easier. However, if, in the future, you want your own onload.js customization, you'll need to include those lines above, because the default onload.js gets overwritten when you add your own.

[jvondermans]

Creating the new them based on the default as JamesEdmonds89 mentioned did the trick for me as well.

thanks for all your help!