Component Layout Templates - Mura Docs v7.1

Component Layout Templates

As covered in the Content Manager Guide, Mura components are reusable content objects that can be shared across multiple pages or sections within your site. Theme developers will often want a way to control the look, feel, and even the functionality, of some of these components. For this reason, Mura offers a way to create special layouts, designed specifically and exclusively for components themselves.

How to Create a Component Layout Template

Mura automatically checks your theme's "templates" directory for a "components" directory. If the "components" directory is discovered, Mura will inventory all ".cfm" files within it, and include them as Layout Template options when editing a component. So, you would place your component layout templates under ../themes/{ThemeName}/templates/components/.

If you reference the MuraBootstrap4 theme, and look under the "templates" directory, you should see a subdirectory labeled "components" with a couple of files in it. 

If you view the example.cfm layout template, you'll notice a few lines of code. We'll cover template variables in another section, so for now, focus on the HTML included.

Notice the <div class="your-component-class"> tag. You could change that to be anything you want, and use it as a hook to target the display of anything within it. Think of all of the other things you could include here, such as JavaScript, HTML, CSS, CFML, and more. The possibilities are endless. The main thing to keep in mind at this point is Mura offers an easy way for you to style components with your own layout templates.

How to Apply a Layout Template to a Component

Follow the steps below to apply a layout template to a component.

  1. From the back-end administration area, go to the Content section, select the Tree View tab, then select the Components button.
  2. Either select an existing component you wish to edit, or create a new component.
  3. From the Create/Edit Component screen, select the Advanced tab.
  4. Locate the Layout Template field, and choose your desired layout from the select menu.
  5. After completing the form, select your desired publishing option to save your component.
  6. If you've created a new component, and wish to add it to a page or section of your site, please visit the Component Display Object Type section of the Content Manager Guide.