Using Page MetaTypes to set a page's Css Class

Topics: General, Visual editor, XSLT
Jun 3, 2011 at 7:29 PM

I want to set a page's CSS Class (or ID), adding it to the body element if possible.

 

I have a tree structure like so (just an example):

  • home
    • about us (CSS Class = "about")
      • contact us
      • company profile
    • products (CSS Class = "products")
      • all products
      • featured products
    • community (CSS Class ="community")
      • blog
      • forum

I would like to add a "CSS Class" Metadata string to the Page Type.

I've been through the tutorial on using Page Meta Types and I think it's what I need to implement. Add a "CSS Class" Metatype to the page. However, how do I USE THAT metatype on the page to add it as a CSS Class to an element (preferably the body element)

BEFORE:

<body>

      <!-- Content -->

</body>

AFTER:

<body class="community">

<!-- content -->

</body>

Ideally, if the value is blank, I want to parse up the tree and grab its parent (or grandparent etc.) but for now I'd just be happy knowing how I can best apply this?

Jun 6, 2011 at 10:20 AM
Edited Jun 6, 2011 at 10:29 AM

If your site is based on, f.e. xslt based Starter Site, there's  an xslt function that wraps all the layouts.

If you don't have that kind of a function on a site, you can add one http://docs.composite.net/C1/FAQ/Developer.aspx?q=How+to+perform+an+xsl+transformation+over+a+layout+output%3f

 

You can add a function call to get the value of your's meta data field, and the add the necessary attribute via xsl template, something like:

 

<xsl:variable name="BodyCssClass" select="......" />

...

<xsl:template match="x:body">

	<xsl:copy>

         <xsl:attribute name="class"><xsl:value-of select="$BodyCssClass" /></xsl:attribute>

         <xsl:apply-templates select="@* | node()" />

	</xsl:copy>

</xsl:template>

Edited: I updated the documentation link

Jun 30, 2011 at 8:41 PM

Thanks Napernik. Where can I find the f.e. xslt starter site. I only see the OmniCorp and the HTML5 starter site.

Jun 30, 2011 at 8:49 PM
Edited Jun 30, 2011 at 9:00 PM

The code for getting the class, or parent's class would look like this

IYourMetaType cssClassData = null;
var pageId = PageRenderer.CurrentPageId;
while ((cssClassData = DataFacade.GetData<IYourMetaType>().SingleOrDefault(m => m.PageId == pageId)) == null)
{
   pageId = PageManager.GetParentId(pageId);
}

return new XElement("cssClassData", new XAttribute("cssClass", cssClassData.Value);

add this as a C# function, and call it as a input parameter for your xslt function.

Jul 1, 2011 at 2:31 PM

>> Where can I find the f.e. xslt starter site. I only see the OmniCorp and the HTML5 starter site.

If you create a new C1 2.1.1 site you should be able to create "Starter site" in one of the following configurations: "Html based", "Xslt based", "Master based"