Advanced Search

Return to Snippet

Revision: 62695
at March 6, 2013 22:03 by thesmu
Initial Code 
Using Umbraco and Razor Syntax to add attributes to body tag for CSS targetting
On 22 February 2011, In Umbraco, by Simon Dingley

I never found a solution that I was happy with for adding unique id’s to a page body tag that didn’t feel like a hack. I often need to do it for very specific CSS targeting so I introduce to you my current solution using the new Razor syntax inside of a master template in Umbraco.
?
1
2
3
4
5
<umbraco:macro runat="server" language="razor">
 
<body id="@Model.Id">
 
</umbraco:macro>
UPDATED: The example above has now been updated to simplify it and require just a single piece of code inside of the inline-macro “@Model.Id” to output the current page id.
Essentially all this is doing is appending the current node id to a string (in my case just the letter ‘p’) and adding it to the id attribute of the html body tag.
I tend to also need to take this one step further and include the id of a parent page in case styling is applied to a section of the content tree, I do this by adding a class to the body tag which contains the section id. The solution for this that I have used successfully on a current project is as follows:
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<umbraco:macro runat="server" language="razor">
 
@{
    var node = Model;
    var sid = "s" + Model.Id;
    var level = 2;
 
    while(node.Level > 1)
    {
        if (node.Level == level)
        {
          // Add any logic in here then create your class
          sid = "s" + node.Id;
        }
        node = node.Parent;
    }
}
 
<body id="@Model.Id" class="@sid">
 
</umbraco:macro>
As in the previous example I am appending the current page id to a string and adding it to the id attribute of the body tag. I am also using a while loop to walk up the content tree to a specific level in the content tree, which in this case is level 2 and I am getting the id of the page at the specified level and appending it to a string(which in this case is ‘s’) and adding it to the class attribute of the body tag.
So what have I gained by doing this? I can now apply specifically targeted CSS styling to individual pages or to an entire section of the content tree.
I would welcome any comments from those more familiar with Razor in Umbraco on the performance overhead of doing this on each page load since I am including this in my master page.
* Credit goes to Jonas Eriksson for his tip on the Razor syntax for accessing parent nodes and to Aaron Powell for his introduction to “Using Razor in Umbraco 4” blog post.
Initial URL 
http://www.prolificnotion.co.uk/using-umbraco-and-razor-syntax-to-add-attributes-to-body-tag-for-css-targetting/#
Initial Description 
Using Umbraco and Razor Syntax to add attributes to body tag for CSS targetting | Prolific Notion, Certified Umbraco Developer
Initial Title 
Using Umbraco and Razor Syntax to add attributes to body tag for CSS targetting | Prolific Notion, Certified Umbraco Developer
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
ASP