CSS & Less Files - Mura Docs v6
Mura Digital Experience Platform
Mura Docs v6
Return to getmura.com

CSS & Less Files

You are not required to use these files, but make sure you at least understand mura.6.0.min.css before deciding to not use it. Not using it may mean adding to your workload when developing a site.

mura.X.x.min.css

mura.6.0.min.css includes several CSS styles that apply specifically to Mura display objects.

We have tried to keep styles that are related to visual appearance and layout as minimal as possible. But again, you are not required to use mura.6.0.min.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 CKEditor) such as the calendar, gallery, feeds, and several others.

theme.less

/css/theme/theme.less

theme.less is the primary stylesheet for your Mura CMS theme. All theme-specific style and overrides to mura.6.0.min.css should go here. Of course, you are not limited to this one file, you can have as many css files as you desire and many themes have quite a few.

There are also several files found in the "responsive" directory (/css/theme/responsive) that provide styles for specific screen sizes. One of the benefits of using the Bootstrap framework is that it is has responsive styles for the many devices your site will be viewed on baked right in. These files control these styles:

  • default.less
  • large-display.less
  • phones-tablets.less
  • phones.less
  • portrait-tablets.less

mobile.less

/css/mobile/mobile.less

mobile.less provides a handful of styles for Mura-specific objects (much like mura.6.0.min.css does) when using jQuery Mobile instead of Bootstraps responsive display. You may also add additional styles as desired.

You can toggle between Bootstrap and jQuery Mobile by removing or commenting out the media queries for other screen sizes in theme.less and removing the .txt extension on the mobile.cfm.txt template that is provided.

editor.css

/css/editor/editor.css

Unlike the previous two files, editor.css does not use Less because it's a very simple file that is used exclusively by CK Editor to provide styles within the editor by importing the compiled CSS files:

  • mura.6.0.min.css
  • bootstrap.min.css
  • font-awesome.css
  • theme.less.css

A note about Font Awesome

Font Awesome is an icon font that is used instead of image-based icons with Bootstrap. Learn more at http://fortawesome.github.com/Font-Awesome