Mura's CSS for Default Styling - Mura Docs v7.0

Mura's CSS for Default Styling

When using Mura's template variables and/or code snippets, Mura often generates output with markup, including various CSS hooks for you, as a theme developer, to apply your own custom styling and functionality. However, it may not be necessary to account for every single kind of object generated by Mura with your own styles.

Leveraging some template variables, you can include the following code in your own theme, to use Mura's own CSS, for basic styling of Mura-generated output.

<!--- Mura CMS Base Styles--->
<link rel="stylesheet" href="#$.siteConfig('assetPath')#/css/mura.7.0.min.css?v=#$.siteConfig('version')#">
<!--- Mura CMS Skin Styles --->
<link rel="stylesheet" href="#$.siteConfig('assetPath')#/css/mura.7.0.skin.css?v=#$.siteConfig('version')#">

As a theme developer, you probably already know that you should include Mura's CSS before your own CSS, so that you can override anything you don't like inside your own stylesheets.

Before & After Example

Illustrated below is an example of the MuraBootstrap3 theme without Mura's CSS.

Below is an illustration of the same example as above, using Mura's CSS.

The differences are even more noticeable when you're not using the included theme. Just to clarify, including Mura's CSS is completely optional. However, using it can save you loads of time in the long run.