Hello,

I'm designing a skin that has a "skinmaster" background image equal to the title of the current page + ".jpg". So if my page's title is 'mypage', I want the "skinmaster" to have a background image url(mypage.jpg). The image is stored in the file directory of the portal (usually under /Portals/portal#)

I added a little javascript to my skin to that effect. It works fine when applied to a static html page. When run through DNN, I have problems getting the relative file path for the background image. If the image was in the skin's directory, I'd simply use the <% = SkinPath %> tag. Is there an equivalent <% = PortalPath %> tag?

Thanks. It works like a charm.

I thought I'd share my solution, just in case anyone elese needs it, and also hoping someone else has an idea to improve it:

In the top part of my skin, I added this script:
<script type="text/javascript">
//I know, it's hard coded. Suggestions are welcome.
var backGroundImage = "<%= PortalSettings.HomeDirectory  %>/images/" + document.title + ".gif";

//Apply the background image to the item with id="backgroundChanger"
function changeStyle()
{
    //Apply the style to the correct element
    document.getElementById("backgroundChanger").style.backgroundImage="url(" + backGroundImage + ")";
    //Apply transparent style to other elements that would otherwise hide the background image
    document.getElementById("dnn_TopPane").style.background="transparent";
    document.getElementById("dnn_LeftPane").style.background="transparent";
    document.getElementById("dnn_ContentPane").style.background="transparent";
    document.getElementById("dnn_BottomPane").style.background="transparent";
}
function applyNormalStyle()
{
    //apply style if the background image is not present
    //not needed in my case
}

var xmlhttp
// This function starts checking if the image actually exists
function loadBackground()
{
    xmlhttp=null
    // code for Mozilla, etc.
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest()
    }
    // code for IE
    else if (window.ActiveXObject)
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
    }
    if (xmlhttp!=null)
    {
        xmlhttp.onreadystatechange=state_Change
        xmlhttp.open("GET",backGroundImage,true)
        xmlhttp.send(null)
    }
    else
    {
        applyNormalStyle();
    }
}

//This function handles the result of checking whether the background image exists
function state_Change()
{
    // if xmlhttp shows "loaded"
    if (xmlhttp.readyState==4)
    {
        // if "OK"
        if (xmlhttp.status==200)
        {
            changeStyle(); 
        }
        else
        {
            applyNormalStyle();
        }
    }
    else
    {
        applyNormalStyle();
    }
}
</script>

At the bottom of the skin, I added the request part:
<script type="text/javascript">
    loadBackground();
</script>

The only thing left is adding an item with the correct id, for example like this:
...
<table class="skinmaster" id="backgroundChanger" >
...