Adding a class to the <body> tag
Hello, Is there a way to add a class to the <body> tag for our community? For example: <body class="CategoryPage lia-body desktop" id="lia-body"> I am currently adding this class with ja...
Forum Discussion
I've written a script to do that, that I've placed in a custom component called custom.AddBodyClasses which I then add to the STUDIO > PAGE > COMMUNITY > FOOTER quilt.
In this case, I've used the script to add the Core Node ID and the user level (Admin, Moderator, Staff, SuperUser).
<#if (user.ranking.id=1) >
<#if user.registered >
<#assign userClass = ''/>
<#if user.ranking.id == 1>
<#assign userClass = "user-admin"/>
</#if>
<#if user.ranking.id == 2>
<#assign userClass = "user-moderator"/>
</#if>
<#if user.ranking.id == 3>
<#assign userClass = "user-staff"/>
</#if>
<#if user.ranking.id == 4>
<#assign userClass = "user-superuser"/>
</#if>
</#if>
</#if>
<script>
// ADDS cnid-[core node id ] to body tag
function getBodyClass( input ) {
//console.log( 'original',input );
// if you want to replace or CAPITALIZE or uncapitalize anything, do it here, for example, if there's a custom page name or something you don't want to include.
// input = input.replace( /CAPS/g, 'lowercase' );
// replace underscores with dashes
input = input.replace(/_/g,'-')
var arr = input.split( '' );
for ( var i = 0; i < arr.length; i++ ) {
if ( /[0-9]/.test( arr[i] ) ) {
// if its a number, leave it as is
//console.log( "number, leave as is" );
} else if ( /[A-Z]/.test( arr[i] ) ) {
var org = arr[i];
// if its uppercase, change it to lowercase and add a dash if not i == 0
if ( i === 0 ) {
arr[i] = arr[i].toLowerCase();
} else {
arr[i] = '-' + arr[i].toLowerCase();
}
//console.log( 'changing uppercase',org,' to', arr[i] );
} else if ( /[^a-z-]/.test( arr[i] ) ) {
// remove anything else
//console.log( 'removing',arr[i] );
arr[i] = '';
}
}
var output = arr.join( '' );
document.body.classList.add( output );
document.body.classList.add("${userClass}");
}
window.onload( getBodyClass( 'cnid-' + "${coreNode.id}" ) );
</script>
