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/sideID/css/themes/ (for example http://example.com/default/css/themes/merced/)

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

  • default.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
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 3 main CSS files:  default.css, typography.css, and site.css. editor.css is used to pass specific styles to the wysiwyg editor.

default.css

default.css includes a general css reset, several generic CSS styles and classes, and several 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.

site.css

site.css is intended as a starter file specific to an individually unique Mura site. It is assumed that you will extend site.css for styles unique to your site. We highly recommend keeping default.css intact and extend and override site-specific styles in site.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="#renderer.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="#renderer.CreateCSSid(request.contentBean.getMenuTitle())#"

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.