I'm looking to implement something simular to what this site has on the left of the search box, up on the top right of this web page. The 6 icon that allow you to change the site width and font size. I inspected the HTML and saw that it was somehow swapping of overridding the css file. Thats my guess. This is what I found so far. There is some javascript that is setting a cookie. My guess is that the cookie is checked on the server and then some how setting the new .css file to change the skin size and font. It's been while since I developed web apps so I could be wrong. Ive been stuck in on desktop app for about 4 years now. Could some one help me with the code/logic that is required to check the cookie and set the css? Or if its not working this way then can you help do accomplish this same functionality? Thank you!

I'm using Firefox Firebug to inspect the page activity.

When you click on full width icon is see the browser downloading this in addition to the default css:
http://www.dotnetnuke.com/Portals/_default/Skins/DNN-Minimal/fullwidth.css
The source shows this addition link:
<LINK id="dnnLAYOUT" rel="stylesheet" type="text/css" href="/Portals/_default/Skins/DNN-Minimal/fullwidth.css"></LINK>

When you click on medium width icon is see the browser downloading this in addition to the default css:
http://www.dotnetnuke.com/Portals/_default/Skins/DNN-Minimal/mediumwidth.css
The source shows this addition link:
<LINK id="dnnLAYOUT" rel="stylesheet" type="text/css" href="/Portals/_default/Skins/DNN-Minimal/mediumwidth.css"></LINK>


When you click on small width icon the browser just downloads the default .css files


If you right click and do a "View source" you will find this:

HTML:

<a href=" void(0)"><img src="/Portals/_default/Skins/DNN-Minimal/controls/images/icon_widthlarge.gif" onClick="sizeLayout(2)" width="16" height="11" alt="Maximum width layout" border="0"></a>
<a href=" void(0)"><img src="/Portals/_default/Skins/DNN-Minimal/controls/images/icon_textmedium.gif" onClick="sizeText(1)" width="17" height="17" alt="Medium text" border="0"></a>



function sizeLayout(size)
{
    setSkinCookie("DotNetNuke_Skin_Layout_Size",size, new Date("December 31, 2010 23:59:59"),"/");
    location.reload();
}

function sizeText(size)
{
    setSkinCookie("DotNetNuke_Skin_Text_Size",size, new Date("December 31, 2010 23:59:59"),"/");
    location.reload();
}

- Christopher