CSS Development

Overview

Mura ships with a handful of CSS files to jumpstart your front-end development. You are not required to use these CSS files, but at the very least make sure you understand default.css before deciding to edit it or to not use it.

The css files are located here:

  • /www/default/css/ or /www/{siteID}/css/ (for example http://example.com/siteID/css/)
  • Themes are located here: /www/{siteID}/includes/themes/{theme-name}/css (for example http://example.com/default/includes/themes/merced/css/)

The main css files we'll look at first are:

  • default.css
  • reset.css
  • mura.css
  • typography.css
  • site.css

The layout templates, specifically the file "html_head.cfm" in /www/{siteID}/includes/templates/inc/, requests the following CSS files:

default.css (Legacy file)
reset.css
mura.css
typography.css
site.css

The "Merced" theme is used by default. This provides some very basic styles to get you going. To use a different theme, go to "Site Settings", choose a new theme for your site and click update.

The CSS Files

Mura ships with 4 main CSS files:  reset.css, mura.css, typography.css, and merced.css. editor.css is used to pass specific styles to the wysiwyg editor.

default.css

default.css is a legacy file included to support sites previously using the reset.css and mura.css included as part of this single file.

reset.css

reset.css is a global CSS reset to provide consistent display of markup by "resetting" the values of most elements and creating new default styles for them.

mura.css 

mura.css includes several generic CSS styles and classes, as well as CSS styles that apply to Mura display objects. default.css is intended to be a "starting point" CSS file for any Mura site. It is intended to provide some very basic styles to give a jumpstart to CSS development on any Mura site.

We have tried to keep styles that are related to visual appearance and layout as minimal as possible. You are not required to use default.css, but we strongly recommend keeping the styles in the "Columns", "Navigation", "Display Objects & System Components", and "System Forms" sections, as these are all specific to markup generated by Mura (or styles available via FCKeditor) such as the calendar, gallery, feeds, and several others.

typography.css

We've separated typographic styles into their own stylesheet mainly so they can be available to both the front-end site and to FCKeditor in the admin backend. (editor.css imports typography.css for the the content editor in the Mura admin).

This lets you set typographic styles like font-size, font-family, color, etc in one central file. And it allows people editing content via the Mura admin to see a better approximation of front-end site styles while editing content within FCKeditor.

{theme}.css

{theme}.css (or merced.css by default) is intended as a starter file specific to an individually unique Mura site or theme. It is assumed that you will extend this theme-specific CSS file for styles unique to your site. We highly recommend keeping mura.css intact and extend and override site-specific styles in your theme-specific CSS.

CSS hooks

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 "colsThree" 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.

id="#$.getTopID()#"

So 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.

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.

class="#$.createCSSid($.content('menuTitle'))#"

This CLASS is camelCase and is prepended 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. Occassionally you might have the same page title for two different pages in different sections. In that case you would need to be more specific in 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.

Section-Specific CSS Hook

#$.getTopID()#

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

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.

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

Depth-Specific CSS Hook

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

Not included as a default hook, but can be added if needed. Outputs a string that indicates the depth of the content node within the site architecture. "depth" is pre-pended to make sure the CSS hook doesn't begin with a number (an invalid CSS naming convention in some browsers).

Usage

<div id="container" class="#$.createCSSid($.content('menuTitle'))# depth#arrayLen($.event('crumbdata'))#"