CSS Hooks - Mura Docs v6
Mura Digital Experience Platform
Mura Docs v6
Return to getmura.com

CSS Hooks

Template-Specific CSS Hook

Each of the default layout templates has a CLASS applied to the BODY element that corresponds to the layout template. This provides a very "top-down" hook to change layout styles for each template via CSS. For example, the default layout template three_column.cfm has a CLASS of "threeCol" applied to the BODY element. You are not required to use these classes, but we recommend following this convention when building any new layout templates.

The BODY element is also assigned an ID dynamically by Mura, which corresponds to the top level navigational section of the current page. 

<body id="aboutus" class="threeCol">

Section-Specific CSS Hook

id="#$.getTopID()#"

Outputs an all lowercase, concatenated string, based on the "Navigation" or "Menu" title of a top-level (immediately below the homepage) content node, which can be used to create section-specific CSS selectors.

Accordingly, if you have a top level section called "About Us" and a several sub-pages in the "About Us" section, all of the pages in the "About Us" section will be assigned an ID of "aboutus" on the BODY element. This is a hook that can be used if a particular section of your site needs special styling.

Usage

<body id="#$.getTopID()#" class="threeCol">

Page-Specific CSS Hook

$.createCSSid($.content('menuTitle'))

Outputs a concatenated, camel-case string, based on the "Navigation" or "Menu" title of a specific content node. Incidentally, the "createCSSid()" function can be used on any variable to create a CSS-friendly string.

Each of the default layout templates has a wrapper DIV with an ID of "container". Mura assigns a CLASS to this DIV which corresponds to the specific page name.

This CLASS is camelCase and is pre-pended with "sys" so a page titled "Our Company's Philosophy" would have a CLASS of "sysOurCompanysPhilosophy" on this DIV. This provides a hook for assigning special styles that are specific to a certain page. Occasionally, you might have the same page title for two different pages in different sections. In that case you would need to be more specific with your CSS by targeting "#sectionname .sysSubPageName" rather than just ".sysSubPageName". A relatively rare caveat to this would be if you had two different pages with the exact same page title in the same top level section.

Usage

<div id="container" class="#$.createCSSid($.content('menutitle))#">

Depth-Specific CSS Hook

depth#arrayLen($.event('crumbdata'))#

This outputs a string that indicates the depth of the content node within the site architecture. "level" is pre-pended to make sure the CSS hook doesn't begin with a number (an invalid CSS naming convention in some browsers). 

Usage

<body id="#$.getTopID()#" class="threeCol depth#arrayLen($.event('crumbdata'))#">

Object-Specific CSS Hook

Mura not only provides an easy way to implement common web functionality, it gives you everything you need to style it exactly how you want.

When applicable, every object in Mura gets a unique ID dynamically generated from its user-defined name in the system. Otherwise, it gets an ID unique to its specific-type. In addition, every object is given a class in order to be able to target it by other characteristics. Between these, and the other CSS hooks provided in Mura, you can be very, very specific about how everything in your site is styled and presented.

The following is a list of some examples of objects and their associated CSS hooks:

<!-- Local Indexes -->
<div id="sysLatestNews" class="svSyndLocal svIndex svFeed"></div>
<!-- Remote Feeds -->
<div id="sysYahooNews" class="svSyndRemote svIndex svFeed"></div>
<!-- Portals -->
<div id="svPortal" class="svIndex"></div>
<!-- Galleries -->
<div id="svGallery"></div>
<!-- Calendars -->
<div id="svCalendar"></div>
<!-- Event Reminders -->
<div id="svEventReminder"></div>
<!-- Comments -->
<div id="svComments"></div>
<!-- Standard Navigation -->
<div id="navStandard"></div>
<!-- Folder Navigation -->
<div id="navFolder"></div>
<!-- Peer Navigation -->
<div id="navPeer"></div>
<!-- Sub Navigation -->
<div id="navSub"></div>
<!-- Sequential Navigation -->
<div id="navSequential"></div>
<!-- Related Content -->
<div class="svRelatedContent svIndex"></div>
<!-- Content Rater -->
<div id="svRatings">
<!-- Favorites -->
<div id="svFavoritesList">

Note: The "sv" prefix is a legacy naming convention stemming from Mura's former name of "Sava." In addition, you may note that Local Indexes include a class of "svSyndLocal." This is also a legacy naming convention based on the previous name of Syndicated Content (as opposed to "Content Collections") and "Local" and "Remote" feeds, respectively.