Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Dominic Kelly 114 posts 133 karma points
    Jan 12, 2012 @ 17:42
    Dominic Kelly
    0

    Set body class

    I have one master page and many content pages.

    How would I set the body class of the master page based on the content page loaded?

    e.g.

    body class="homepage"

    body class="inner-landing-page"

  • Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib
    Jan 12, 2012 @ 17:59
    Warren Buckley
    0

    Yes this can be done again. What do you want the class name to be?
    The name of the page/node, the name of the template that the page uses, or something else?

    Cheers,
    Warren 

  • Dominic Kelly 114 posts 133 karma points
    Jan 12, 2012 @ 18:06
    Dominic Kelly
    0

    The template alias would be fine.

  • Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib
    Jan 12, 2012 @ 18:12
    Warren Buckley
    0

    Well not to repeat what has been said for here is a blog post from Simon in the community,
    http://www.prolificnotion.co.uk/using-umbraco-and-razor-syntax-to-add-attributes-to-body-tag-for-css-targetting/ 

    This is for V4 of Umbraco, in V5 which RC2 was released yesterday. You can write Razor directly in the template without the need for the
    <umbraco:macro> tags which will make it easier/cleaner to read. 

    <umbraco:macro runat="server" language="razor"><body id="@Model.Id" class="@Model.Template"></umbraco:macro>

    So this ouputs the unique node ID of the page on the ID of the body tag and we set the class attribute to be the template alias

    Warren :)

  • Dominic Kelly 114 posts 133 karma points
    Jan 12, 2012 @ 18:15
    Dominic Kelly
    0

    I think I may have tried that, the result it:

    <body id="1068" class="">

    I really name the template name, the id isn't great semantically.

  • Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib
    Jan 12, 2012 @ 18:23
    Warren Buckley
    1

    OK simply remove the value from the ID if you don't need or replace it with another value you would want to use.
    Not sure why the value of .Template is not ouputting anything so another semantic value you could use for the class is as follows:

     

    <umbraco:macrorunat="server"language="razor"><bodyclass="@Model.NodeTypeAlias.ToLower().Replace("","-")"></umbraco:macro>

     

    Using the NodeTypeAlias is the node/page's document type alias that you created for the page in the settings section of the umbraco back office and the snippet on the end is obviously just converting the value to lowercase and replace the spaces in that value for hyphens.

    A few good Razor resources that the Umbraco community has done:

    http://our.umbraco.org/projects/starter-kits/razor-estate-agents-starter-site

    http://our.umbraco.org/projects/developer-tools/razor-dynamicnode-cheat-sheet

    http://our.umbraco.org/projects/developer-tools/razor-dynamicnode-cheat-sheet

    Cheers,
    Warren 

  • Dominic Kelly 114 posts 133 karma points
    Jan 12, 2012 @ 18:28
    Dominic Kelly
    0

    Thanks again, however:

     

    <umbraco:macrorunat="server"language="razor"><bodyclass="@Model.NodeTypeAlias.ToLower().Replace("","-")"></umbraco:macro>

     

    Returns:

    Error loading Razor ScriptString cannot be of zero length. Parameter name: oldValue

    Whereas:

     

    <umbraco:macrorunat="server"language="razor"><bodyclass="@Model.NodeTypeAlias"></umbraco:macro>

     

    Returns the Alias which has spaces stripped out anyway I believe?

    That does the trick anyway, so thanks again!!

  • Dominic Kelly 114 posts 133 karma points
    Jan 12, 2012 @ 18:29
    Dominic Kelly
    0

    Correction - added ToLower()

  • Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib
    Jan 12, 2012 @ 18:37
    Warren Buckley
    0

    Ahh the formatting on my snippet got screwed slightly. You need to add a space inbetween the first "" in .replace().

    So .replace(" ","-") which says find any spaces in my string and replace them with the hyphen as the first parameter was just "" it threw an error as it was being told not to look for anything.

    Warren

Please Sign in or register to post replies

Write your reply to:

Draft