# ContentRenderer.CFC Mura includes a core function, contentRenderer.cfc that provides an array of functions for displaying content. primary page content, navigation, and other elements are rendered using the functions in this cfc. Mura places this component in it's core file folder (`/core/mura/content/`). To override the behaviors of the default content rendering functions, Mura provides the ability to have your own contentRenderer.cfc within your theme directory (global or site) at `themes/{theme name}/contentRenderer.cfc` or in the site includes folder `/site/{siteID}/includes/contentRenderer.cfc`. Any content (settings or functions) that you put in your local copy of the contentRenderer.cfc will override the core version. You can override these default rendering behaviors in your local copy of the contentRenderer.cfc two ways: 1. Place a copy of the core contentRender.cfc function from the core contentRenderer.cfc into your local copy of the contentRenderer.cfc and then modify the function as you need. For example, you can copy functions like dspObject() or dspPrimaryNav() and then change the behavior by rewriting the functions as needed. 2. You can leverage the design of the contentRenderer.cfc to change settings in the file to get the desired out functionality or styling. For example, Mura will automatically add the "btn-primary" styling to any submit button it adds for forms created in the form builder. However, you may be using a template that needs a different CSS style. By editing the `formButtonSubmitclass` setting, you can use whatever style you want in place of the default "btn-primary" style. {% hint style="info" %} NOTE: The core contentRenderer.cfc contains many more settings (e.g. the formButtonSubmitclass used in the example above) than what is already included in the local copy of the contentRenderer.cfc (if you have one). As such, you may need to look to the core version and copy the needed setting into your local version to apply the desired setting. {% endhint %} Whenever possible, you should use option #2 above to leverage the inherit built-in flexibility of the Mura framework as many settings have been made available to you don't need to constantly change ColdFusion code to simply change how styles are rendered. The remainder of this section is a direct copy of Mura's 7.1 Developer's Guide documentation as it relates to the contentRenderer.cfc settings. This information is also available in the online Developer's Guide: ## ContentRenderer.cfc Settings ### Base Settings | Setting | Type | Default | Description | | --------------------------- | ------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | validateCSRFTokens | boolean | false | If `true`, Mura will check for [cross-site request forgery (CSRF)](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_\(CSRF\)) tokens to help prevent CSRF attacks. | | navOffset | int | 0 | This allows you to start standard navigation behavior at lower navigation levels. For example, this would be useful if you have a section of your site that should have its own primary navigation, such as a Member's only area with a custom layout template. | | navDepthLimit | int | 1000 | This sets the maximum depth that standard navigation will follow. | | navParentIdx | int | 2 | | | navGrandParentIdx | int | 3 | | | navDepthAdjust | int | 0 | | | navSelfIdx | int | 1 | | | deferMuraJS | boolean | false | If `true`, Mura will add a "`defer`" attribute to the script reference for `mura.min.js` so that the script will be executed when the page has finished parsing. | | jsLib | string | jquery |

This determines what JavaScript library Mura should use with its built-in display objects. Valid options are:

| | jsLibLoaded | boolean | false | This allows developers to not rely on Mura to load the default JavaScript framework and simply add it to their theme's HTML head area. | | suppressWhitespace | boolean | true | If `true`, Mura will remove excess whitespace characters from CFML generated content. | | longDateFormat | string | long | This is the default long date format for the site. | | shortDateFormat | string | short | This is the default short date format for the site. | | showMetaList | list | jpg, jpeg, png, gif, svg | This is a list of file extensions that will not directly download, but instead, will render in a Mura CMS page with the "Summary" being displayed in the body area. | | imageInList | list | jpg, jpeg, png, gif, svg | This is a list of what image extensions should be shown in built in content listing display objects. | | directImages | boolean | true | This tells Mura whether to serve images indirectly through `fileManager.renderImage()` or create direct links. | | personalization | string | user |

This allow developers to choose whether site personalizations such as ratings and favorites are attached to simple cookies or an actual Mura user. Users do not need to login in order to save cookie-based personalizations. Valid options:

| | hasEditableObjects | boolean | false | If true, enables editable objects (Version 6.x only) | | asyncObjects | boolean | true | If true, Mura will load display objects asynchronously. | | asyncRender | boolean | false | | | queueObjects | boolean | true | | | layoutManager | boolean | false | If true, will allow administrators to edit display objects via the front-end of the site. (Version 7.x) | | legacyObjects | boolean | true | If false, Mura will enable the inline edit features of Mura (Version 7.x) | | siteIDInURLs | boolean | | If a boolean value exists, it will override the [settings.ini.cfm](https://docs.getmura.com/v7-1/mura-developers/mura-directory-structure/the-config-directory/settings-ini-cfm/) value | | indexFileInURLs | boolean | | If a boolean value exists, it will override the [settings.ini.cfm](https://docs.getmura.com/v7-1/mura-developers/mura-directory-structure/the-config-directory/settings-ini-cfm/) value | | hashURLs | boolean | | If a boolean value exists, it will override the [settings.ini.cfm](https://docs.getmura.com/v7-1/mura-developers/mura-directory-structure/the-config-directory/settings-ini-cfm/) value | | enableMuraTag | boolean | | If a boolean value exists, it will override the [settings.ini.cfm](https://docs.getmura.com/v7-1/mura-developers/mura-directory-structure/the-config-directory/settings-ini-cfm/) value | | showAdminToolbar | boolean | | If true, the front end toolbar will be rendered for administrative users. | | showMemberToolbar | boolean | | If true, the front end toolbar will be rendered for site members | | showEditableObjects | boolean | | If true, editable display objects like components and content collections will be rendered. (Version 6.x) | | showInlineEditor | boolean | | If true, will display the Inline Edit button on the front end toolbar for administrative users. (Version 7.x) | | renderHTMLQueues | boolean | true | If true, Mura will render the request's HTMLHeadQueue and HTMLFootQueue. | | preloaderMarkup | string | empty string | Allows developers to include a custom preloader. | | bodyMetaImageSizeArgs | struct | {size= "medium"} | | | bodyMetaImageClass | string | thumbnail | A CSS class applied to the primary associated image. | | navsize | int | 50 | An integer value to control the maximum number of navigational items to output for Mura generated navigation. | | imageClass | string | img-thumbnail | A CSS class applied to the primary associated image when displayed in a list such as a collection. | | categoriesNestCheckboxClass | string | checkbox | A CSS class applied to category checkboxes. | | generalWrapperClass | string | well | A CSS class applied to general wrapper HTML elements. | ### Heading Markup Settings When Mura outputs headings, the following settings may be used. The following settings are also used to control the heading tags used for the HTML Editor's "Format" select menu options. The defaults listed below are based on the concept that `

` tags are reserved for the "Site Name" or logo area of the layout templates, and page titles begin with `

` tags. | Setting | Type | Default | | -------- | ------ | ------- | | headline | string | h2 | | subHead1 | string | h3 | | subHead2 | string | h4 | | subHead3 | string | h5 | | subHead4 | string | h6 | | subHead5 | string | h6 | ### Alert Markup Settings When Mura outputs an alert, the following settings may be used. | Setting | Type | Default | | ----------------- | ------ | ------------------- | | alertSuccessClass | string | alert alert-success | | alertInfoClass | string | alert alert-info | | alertWarningClass | string | alert | | alertDangerClass | string | alert alert-error | ### Table Markup Settings When Mura outputs a table, the following settings may be used. | Setting | Type | Default | | ---------------- | ------ | ---------------------------------- | | tableClass | string | table table-bordered table-striped | | tableHeadClass | string | empty string | | tableHeaderClass | string | empty string | | tableBodyClass | string | empty string | | tableRowClass | string | empty string | | tableCellClass | string | empty string | | tableFooterClass | string | empty string | ### Module (Display Object) Settings The vast majority of contentRenderer settings are used to control the [CSS](http://developer.mozilla.org/en-US/docs/Web/CSS) classes for HTML markup of Mura's baked-in modules. Mura's modules and their associated settings are described below. #### Navigation The markup for the various types of navigational modules can be found in the files located under: ``` {context}/core/modules/v1/nav/ ``` | Setting | Type | Default | | ------------------------- | ------ | -------------------- | | navWrapperClass | string | sidebar-nav well | | navLIClass | string | empty string | | liHasKidsClass | string | empty string | | liHasKidsAttributes | string | empty string | | liCurrentClass | string | current | | liCurrentAttributes | string | empty string | | liHasKidsNestedClass | string | empty string | | aHasKidsClass | string | empty string | | aHasKidsAttributes | string | empty string | | aCurrentClass | string | current | | aCurrentAttributes | string | empty string | | ulNestedClass | string | empty string | | ulNestedAttributes | string | empty string | | ulTopClass | string | navSecondary | | ulPaginationClass | string | navSequential | | ulPaginationWrapperClass | string | pagination | | aNotCurrentClass | string | empty string | | navCalendarWrapperClass | string | svCalendar | | navCalendarTableClass | string | table table-bordered | | navSequentialWrapperClass | string | pagination | | navSequentialULClass | string | empty string | | tagCloudWrapperClass | string | svTagCloud | | navArchiveWrapperClass | string | empty string | | navArchiveListClass | string | empty string | | navBreadcrumbULClass | string | breadcrumb | #### Form The Form module markup can be found in the files located under: ``` {context}/core/modules/v1/form/ ``` {% hint style="info" %} In examining the core contentRenderer.cfc, it appears that there are many more form settings than those listed here. Additionally, even though the form builder is used to build a form, the non-form form builder form settings seem to be the ones that Mura is using. So, some experimentation many necessary. {% endhint %} | Setting | Type | Default | | ------------------------ | ------ | --------------- | | formWrapperClass | string | well | | formFieldWrapperClass | string | control-group | | formFieldLabelClass | string | control-label | | formInputWrapperClass | string | input-addon | | formInputClass | string | form-control | | formCheckboxClass | string | empty string | | formButtonWrapperClass | string | btn-group | | formButtonSubmitclass | string | btn-primary | | formButtonInnerClass | string | empty string | | formButtonClass | string | btn btn-default | | formRequiredWrapperClass | string | empty string | #### Form Builder The Form Builder module markup can be found in the files located under: ``` {context}/core/modules/v1/formbuilder/ ``` | Setting | Type | Default | | ----------------------------- | ------ | --------------- | | formBuilderFieldWrapperClass | string | empty string | | formBuilderButtonWrapperClass | string | form-actions | | formBuilderSubmitClass | string | btn btn-default | | formBuilderFormFieldsClass | string | control-group | | formBuilderTabHeaderClass | string | dropdown | | formBuilderDisabledInputClass | string | disabled | | formBuilderCheckboxClass | string | checkbox | #### Calendar The Calendar module markup can be found in the files located under: ``` {context}/core/modules/v1/calendar/ ``` | Setting | Type | Default | | ------------------------ | ---------------- | ------------------------------------------------------------------------------------------------- | | calendarWrapperClass | string | svCalendar | | calendarTableClass | string | table table-bordered | | calendarTableHeaderClass | string | empty string | | calendarTitleInDesc | boolean | true | | calendarListWrapperClass | string | svCalendar | | calendarcolors | array of structs |

\[
{background='##3a87ad', text='white'},
{background='blue', text='white'}
]

| #### Comments The Comments module markup can be found in the files located under: ``` {context}/core/modules/v1/comments/ ``` | Setting | Type | Default | | ------------------------------- | ------ | ------------------------------- | | commentsWrapperClass | string | empty string | | commentSortContainerClass | string | empty string | | commentSortWrapperClass | string | empty string | | commentSortSelectClass | string | empty string | | commentFormWrapperClass | string | empty string | | commentFormClass | string | well | | commentNewClass | string | btn | | commentFieldWrapperClass | string | empty string | | commentFieldLabelClass | string | empty string | | commentInputWrapperClass | string | empty string | | commentInputClass | string | empty string | | commentCheckboxClass | string | checkbox | | commentPrefsInputWrapperClass | string | empty string | | commentSubmitButtonWrapperClass | string | empty string | | commentSubmitButtonClass | string | btn | | commentMoreCommentsUpClass | string | btn btn-default icon-arrow-up | | commentMoreCommentsDownClass | string | btn btn-default icon-arrow-down | | commentRequiredWrapperClass | string | empty string | | commentAdminButtonWrapperClass | string | empty string | | commentUserEmailClass | string | btn | | commentDeleteButtonClass | string | btn | | commentEditButtonClass | string | btn | | commentApproveButtonClass | string | btn | | commentThumbClass | string | img-polaroid | | commentSpamClass | string | btn | | commentSpamLinkClass | string | btn | | commentClass | string | empty string | | commentDateTimeClass | string | empty string | | commentReplyClass | string | empty string | | commentAwaitingApproval | string | empty string | | commentAdminButtonWrapperClass | string | btn-group pull-right | | commentUserEmailClass | string | btn btn-default btn-sm | | commentDeleteButtonClass | string | btn btn-default btn-sm | | commentEditButtonClass | string | btn btn-default btn-sm | | commentApproveButtonClass | string | btn btn-default btn-sm | | commentMoreCommentsContainer | string | well | | emailLinkClass | string | btn | | commentsLinkClass | string | btn | | approveCommentLinkClass | string | btn | | deleteCommentLinkClass | string | btn | #### Collections, Folders, and List/Grid Output Collections & List/Grid module markup can be found in the files located under: ``` {context}/core/modules/v1/collection/ ``` | Setting | Type | Default | | ----------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | contentListImageStyles | boolean | true | | contentListImagePadding | int | 20 | | contentListPropertyMap | struct |

{
containerEl={tag="div"},
itemEl={tag="dl",class="clearfix"},
labelEl={tag="span"},
title={tag="dt"},
date={tag="dt"},
credits={tag="dd",showLabel=true,rbkey="list.by"},
tags={tag="dd",showLabel=true,labelDelim=":",rbkey="tagcloud.tags"},
rating={tag="dd",showLabel=true,labelDelim=":",rbkey="list.rating"},
default={tag="dd"}
}

| | contentGridStyleMap | struct |

{
'1 Column'='mura-grid-one',
'2 Column'='mura-grid-two',
'3 Column'='mura-grid-three',
'4 Column'='mura-grid-four',
'5 Column'='mura-grid-five',
'6 Column'='mura-grid-six',
'7 Column'='mura-grid-seven',
'8 Column'='mura-grid-eight',
'9 Column'='mura-grid-nine'
}

| | contentGridPropertyMap | struct |

{
itemEl={tag="div",class="mura-item-meta"},
labelEl={tag="span"},
title={tag="div"},
date={tag="div"},
credits={tag="div",showLabel=true,labelDelim=":",rbkey="list.by"},
tags={tag="div",showLabel=true,labelDelim=":",rbkey="tagcloud.tags"},
rating={tag="div",showLabel=true,labelDelim=":",rbkey="list.rating"},
'default'={tag="div"}
}

| | contentListWrapperDivClass | string | empty string | | contentListItemImageLinkClass | string | thumbnail | | folderWrapperClass | string | svIndex | | nextNWrapperClass | string | empty string | #### Edit Profile The Edit Profile module markup can be found in the files located under: ``` {context}/core/modules/v1/editprofile/ ``` | Setting | Type | Default | | ------------------------------------------ | ------ | ------------------- | | editProfileWrapperClass | string | empty string | | editProfileFormClass | string | form-horizontal | | editProfileFormGroupWrapperClass | string | control-group | | editProfileFieldLabelClass | string | control-label | | editProfileFormFieldsWrapperClass | string | empty string | | editProfileFormFieldsClass | string | empty string | | editProfileHelpBlockClass | string | help-block | | editProfileExtAttributeFileWrapperClass | string | empty string | | editProfileExtAttributeFileCheckboxClass | string | checkbox | | editProfileExtAttributeDownloadClass | string | empty string | | editProfileExtAttributeDownloadButtonClass | string | btn btn-default | | editProfileSubmitButtonWrapperClass | string | empty string | | editProfileSubmitButtonClass | string | btn btn-primary | | editProfileSuccessMessageClass | string | alert alert-success | #### Event Reminder Form The Event Reminder Form module markup can be found in the files located under: ``` {context}/core/modules/v1/event_reminder_form/ ``` | Setting | Type | Default | | ------------------------------ | ------ | --------------- | | eventReminderFormWrapperClass | string | empty string | | eventReminderFormClass | string | well | | eventReminderFieldWrapperClass | string | control-group | | eventReminderFormLabelsClass | string | control-label | | eventReminderSubmitClass | string | btn btn-default | #### Feed The Feed module markup can be found in the files located under: ``` {context}/core/modules/v1/feed/ ``` You should also review the **Collections, Folders, and List/Grid Output** settings above for markup information specific to the feed output itself. These settings are merely "wrapper" classes. | Setting | Type | Default | | ---------------------- | ------ | ------------------------------------ | | localIndexWrapperClass | string | svSyndLocal svFeed svIndex clearfix | | remoteFeedWrapperClass | string | svSyndRemote svIndex svFeed clearfix | #### Login Form The Login Form module markup can be found in the files located under: ``` {context}/core/modules/v1/login/ ``` | Setting | Type | Default | | --------------------------- | ------ | --------------- | | loginWrapperClass | string | container | | loginWrapperInnerClass | string | row | | loginFormClass | string | form-horizontal | | forgotPasswordFormClass | string | form-horizontal | | loginFormGroupWrapperClass | string | empty string | | loginFormFieldLabelClass | string | control-label | | loginFormFieldWrapperClass | string | empty string | | loginFormFieldClass | string | empty string | | loginFormPrefsClass | string | empty string | | loginFormCheckboxClass | string | checkbox | | loginFormSubmitWrapperClass | string | empty string | | loginFormSubmitClass | string | btn btn-default | | notRegisteredLinkClass | string | btn btn-primary | #### Search Form & Search Results The Search Form module markup can be found in the files located under: ``` {context}/core/modules/v1/search/ ``` | Setting | Type | Default | | -------------------------------- | ------ | --------------- | | searchFormClass | string | empty string | | searchFormInputWrapperClass | string | empty string | | searchFormInputClass | string | empty string | | searchFormSubmitWrapperClass | string | empty string | | searchFormSubmitClass | string | btn btn-default | | searchShowNumbers | int | 1 | | searchResultWrapperClass | string | container | | searchResultInnerClass | string | row | | searchResultsRowClass | string | row | | searchResultsMoreResultsRowClass | string | row | | searchResultsListClass | string | svIndex | | searchResultsPagerClass | string | pager | | searchAgainRowClass | string | row | | searchAgainInnerClass | string | empty string | | searchAgainFormClass | string | empty string | | searchAgainInputWrapperClass | string | empty string | | searchAgainFormInputClass | string | empty string | | searchAgainButtonWrapperClass | string | empty string | | searchAgainSubmitClass | string | btn btn-default | #### User Tools The User Tools module markup can be found in the files located under: ``` {context}/core/modules/v1/user_tools/ ``` | Setting | Type | Default | | ----------------------------------- | ------ | --------------- | | userToolsLoginWrapperClass | string | well clearfix | | userToolsLoginFormClass | string | form-horizontal | | userToolsFormGroupWrapperClass | string | empty string | | userToolsLoginFormLabelClass | string | control-label | | userToolsLoginFormInputWrapperClass | string | empty string | | userToolsLoginFormInputClass | string | empty string | | userToolsLoginFormFieldInnerClass | string | empty string | | userToolsLoginFormCheckboxClass | string | checkbox | | userToolsLoginFormSubmitClass | string | btn btn-default | | userToolsNotRegisteredLinkClass | string | btn btn-primary | | userToolsWrapperClass | string | clearfix | | userToolsEditProfileLinkClass | string | btn btn-default | | userToolsLogoutLinkClass | string | btn btn-default | #### Content Rater The Content Rater module markup can be found in the files located under: ``` {context}/core/modules/v1/rater/ ``` | Setting | Type | Default | | ----------------------- | ------ | ------------ | | raterObjectWrapperClass | string | row clearfix | | raterWrapperClass | string | empty string | | avgRatingWrapperClass | string | empty string | ## Manually Overriding Non-Configurable Styles What if you need to override a style used by Mura automatically that isn't available to be configured via the contentRenderer.cfc file? jQuery and the Mura.ja services can be used to accomplish this. For example, if our form submit button styling wasn't available to be configured in the contentRenderer.cfc, then we could use jQuery and Mura.js to accomplish the task by placing something like the following in the page template file: ```javascript ``` The above example will remove the "btn-primary" style that Mura is using and replace it with "formSubmit".