css style swicther using xslt

Brian Milman-Hurst 48 posts 76 karma points

Sep 04, 2012 @ 12:11

Hi Guys,

I'm setting up a series of websites for a diversity recruitment company and need to include styleswitchers to change both colour and font sizes.

Does anybody know of a XSLT / CSS combo that would accomplish this?

Cheers guys,

Bri

Copy Link

Chriztian Steinmeier 2800 posts 8790 karma points MVP 8x admin c-trib

Sep 04, 2012 @ 12:21

Hi Brian,

Are you talking about frontend styleswitchers or a switcher in the backoffice?

/Chriztian

Copy Link

Brian Milman-Hurst 48 posts 76 karma points

Sep 04, 2012 @ 12:23

Hi Chriztian,

I'm talking about a front end style switcher so that visitors have the option to select different background colours and font sizes, each of which will point to a different stylesheet. Similar in function to this site http://www.remploy.co.uk/ where you can see the accessibility options at the top of the screen.

Thanks

Brian

Copy Link

Chriztian Steinmeier 2800 posts 8790 karma points MVP 8x admin c-trib

Sep 04, 2012 @ 12:37

Okay,

I'd create a "StyleSheet" macro and put it in the <head> section on the Masterpage and do something like this in it:

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:umb="urn:umbraco.library"
    xmlns:make="urn:schemas-microsoft-com:xslt"
    exclude-result-prefixes="umb make"
>

    <xsl:output method="xml" indent="yes" omit-xml-declaration="yes" />

    <xsl:variable name="cssfile" select="umb:RequestQueryString('css')" />

<!-- Configure stylesheets here -->
    <xsl:variable name="stylesheetsProxy">
        <css id="small">/css/small.css</css>
        <css id="large">/css/large.css</css>
        <!-- Last one is default -->
        <css id="normal">/css/normal.css</css>
    </xsl:variable>
    <xsl:variable name="stylesheets" select="make:node-set($stylesheetsProxy)/css" />

    <xsl:template match="/">
        <link rel="stylesheet" href="{($stylesheets[@id = $cssfile] | $stylesheets[last()])[1]}" />
    </xsl:template>

</xsl:stylesheet>

/Chriztian

Copy Link

Brian Milman-Hurst 48 posts 76 karma points

Sep 04, 2012 @ 12:40

Superb, nice and clean! thank you.

Just one more question. would I need to incorporate cookies so that the page used the same stylesheet when the visitor clicked onto a different page? and if so do you know how this would work?

Thanks Chriztian, you may have just saved my bacon!!

Copy Link

Chriztian Steinmeier 2800 posts 8790 karma points MVP 8x admin c-trib

Sep 04, 2012 @ 12:51

Hi again,

Just thought I'd give you the other half too :-)

Add a "mode" parameter ("text") to the macro and replace the XSLT with this chunk:

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:umb="urn:umbraco.library"
    xmlns:make="urn:schemas-microsoft-com:xslt"
    exclude-result-prefixes="umb make"
>

    <xsl:output method="xml" indent="yes" omit-xml-declaration="yes" />

    <!-- Name of the QueryString parameter -->
    <xsl:variable name="cssParam" select="'css'" />

    <xsl:variable name="mode" select="/macro/mode" />
    <xsl:variable name="cssfile" select="umb:RequestQueryString($cssParam)" />

    <xsl:variable name="stylesheetsProxy">
        <css name="Smaller" id="small">/css/small.css</css>
        <css name="Bigger" id="large">/css/large.css</css>
        <!-- Last one is default -->
        <css name="Standard" id="normal">/css/normal.css</css>
    </xsl:variable>
    <xsl:variable name="stylesheets" select="make:node-set($stylesheetsProxy)/css" />

    <xsl:template match="/">
        <xsl:choose>
            <xsl:when test="$mode = 'link'">
                <xsl:call-template name="writeLink" />
            </xsl:when>
            <xsl:when test="$mode = 'switcher'">
                <xsl:call-template name="writeSwitcher" />
            </xsl:when>
        </xsl:choose>
    </xsl:template>

    <xsl:template name="writeLink">
        <link rel="stylesheet" href="{($stylesheets[@id = $cssfile] | $stylesheets[last()])[1]}" />
    </xsl:template>

    <xsl:template name="writeSwitcher">
        <xsl:for-each select="$stylesheets">
            <a href="?{$cssParam}={@id}" title="Use '{@name}' view">
                <xsl:value-of select="@name" />
            </a>
        </xsl:for-each>
    </xsl:template>

</xsl:stylesheet>

Now in the <head> section, add mode="link" to the macro tag:

<umbraco:Macro alias="StyleSheet" mode="link" runat="server" />

And wherever you want the styleswitcher to appear (another template, maybe?), use the mode "switcher":

<umbraco:Macro alias="StyleSheet" mode="switcher" runat="server" />

Regarding the cookie thing... there are SetCookie() and RequestCookies() methods in umbraco.library you may be able to use for that...

Chriztian

Copy Link

Brian Milman-Hurst 48 posts 76 karma points

Sep 04, 2012 @ 12:55

YEY! Thanks Chriztian,

That actually all makes sense to me (I'm a real newby to Umbraco)

Really appreciate the help

Bri

Copy Link

Brian Milman-Hurst 48 posts 76 karma points

Sep 04, 2012 @ 13:48

Hi again,

The code above works a treat, alas my lack of technical knowledge is letting me down once more.

I'm really stuck on getting the different pages to retain the chosen style. From reading through sites etc the best method seems to be using cookies, however I have NO EXPERIENCE whatsoever in using cookies at all.

Any advice Chriztian, or should I start a new thread?

Thanks for your continuing patience and knowledge in equal measure!! :-)

Bri

Copy Link

Chriztian Steinmeier 2800 posts 8790 karma points MVP 8x admin c-trib

Sep 04, 2012 @ 14:07

Hi Brian,

Probably good to keep the conversation in here - hopefully we end up with a "complete" solution :-)

I haven't used cookies that much from within XSLT - but anyway - your problem just got bigger, because now we need to think about lots more:

We can have no stylesheet specified at all, or we could have one stored in a cookie - we may also have one in the QueryString which should then override the cookie setting. And we have two modes to tackle this in...

[ Insert famous Arnie quote here ]

/Chriztian

PS: "I'll be back"

Copy Link

Brian Milman-Hurst 48 posts 76 karma points

Sep 04, 2012 @ 14:09

Hi Chriztian

To quote random 70's character 'ace'

Cheers muchly

Bri

Copy Link

Chriztian Steinmeier 2800 posts 8790 karma points MVP 8x admin c-trib

Sep 04, 2012 @ 14:36

Okay - back again.

I have not tested this, so there may be things I didn't get - but at least you're able to test it - no changes to templates - just XSLT:

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:umb="urn:umbraco.library"
    xmlns:make="urn:schemas-microsoft-com:xslt"
    exclude-result-prefixes="umb make"
>

    <xsl:output method="xml" indent="yes" omit-xml-declaration="yes" />

    <!-- Name of the QueryString parameter -->
    <xsl:variable name="cssParam" select="'css'" />

    <!-- Name of Cookie key -->
    <xsl:variable name="cssCookieKey" select="'CSSFILE'" />

    <xsl:variable name="mode" select="/macro/mode" />
    <xsl:variable name="cssfile" select="umb:RequestQueryString($cssParam)" />
    <xsl:variable name="cssCookie" select="umb:RequestCookies($cssCookieKey)" />

    <!-- Configure available StyleSheets here -->
    <xsl:variable name="stylesheetsProxy">
        <css name="Smaller" id="small">/css/small.css</css>
        <css name="Bigger" id="large">/css/large.css</css>
        <!-- Last one is default -->
        <css name="Standard" id="normal">/css/normal.css</css>
    </xsl:variable>
    <xsl:variable name="stylesheets" select="make:node-set($stylesheetsProxy)/css" />

    <!-- Get the active stylesheet using some set trickery -->
    <xsl:variable name="activeCSS" select="($stylesheets[@id = $cssCookie][not(normalize-space($cssfile))] | $stylesheets[@id = $cssfile][normalize-space($cssfile)] | $stylesheets[last()])[1]" />

    <xsl:template match="/">
        <xsl:choose>
            <xsl:when test="$mode = 'link'">
                <xsl:call-template name="writeLink" />
            </xsl:when>
            <xsl:when test="$mode = 'switcher'">
                <xsl:call-template name="writeSwitcher" />
            </xsl:when>
        </xsl:choose>

        <!-- If a valid StyleSheet was selected, set the Cookie  -->
        <xsl:if test="$stylesheets[@id = $cssfile]">
            <xsl:value-of select="umb:setCookie($cssCookieKey, $cssfile)" />
        </xsl:if>
    </xsl:template>

    <xsl:template name="writeLink">
        <link rel="stylesheet" href="{$activeCSS}" />
    </xsl:template>

    <xsl:template name="writeSwitcher">
        <xsl:for-each select="$stylesheets">
            <a href="?{$cssParam}={@id}" title="Use '{@name}' view">
                <!-- Mark the active one -->
                <xsl:if test="@id = $activeCSS/@id"><xsl:attribute name="class">active</xsl:attribute></xsl:if>
                <xsl:value-of select="@name" />
            </a>
        </xsl:for-each>
    </xsl:template>

</xsl:stylesheet>

/Chriztian

Copy Link

Brian Milman-Hurst 48 posts 76 karma points

Sep 04, 2012 @ 15:10

Chriztian,

Thank you very much.... that works absolutely perfectly.

I would say that both of the solutions above are excellent pieces of code for different types of application throughout websites!

Thank you for a top and quick resolution.

Brian

Copy Link

is working on a reply...

Flag this post as spam?

CSS Style Swicther using XSLT