I'm a Web Developer

As a web developer, you've probably worked in other platforms to make web design files (for example, HTML, CSS, JS). You can continue this development process within Modern Campus CMS to create new websites using layouts or templates.

Create Using Layout BuilderLink to this section

Enable Layout Builder for your account

Administrators, make layouts available for all sites in your account. 

1. Go to Setup > Account > Optional Features.
2. Select the Layout Builder checkbox.
3. Click Configure to assign group access.
   • Grant access to Builder for users who will create and edit the layouts that are used to create pages.
   • Grant access to Tiles and Frames for users who will create and edit the tiles and frames used to create layouts.
   • Grant access to Styles for users who will edit the CSS used by layouts.
4. Click Save.
5. In account setup, click Save.

Once enabled, you can restrict individual layouts to a site(s).

Create your default styles

Create the default CSS file that your layouts will use to create pages. Generating CSS will add a disabled /omni-cms folder to your site in Content > Pages. This folder will publish to your production server.

1. Go to Content > Layout Builder.
2. In the Style Configuration box, click to Generate CSS.
   • To edit the default CSS go to the Layout Builder panel, click Styles.

Create a layout

To get up and running quickly, drag and drop the prebuilt tiles, frames, and components to create a page layout that content editors can use to create pages. 

1. Go to Content > Layout Builder.
2. Click +New.
3. Type to enter a name for your layout.
4. Click Create.
5. From the sidebar, drag frames, tiles, and components and drop them in the layout editor.
   • Make a component available for use in layouts by adding a tag named "layouts" to the component properties.
   • Once added to a layout, you can nest, reorder, and resize the frames.
6. Save and Launch to make layouts available for creating pages.

You can customize layouts to fit your needs by adding thumbnails, editing the head code, creating new tiles and frames, and more. And manage the flexible layout options to create the right type of page for your website.

When a page is published from Modern Campus CMS the product is a flat HTML file. The file extension may vary based upon your production server configuration but the actual source code of that published page is HTML. Inside Modern Campus CMS, pages created from layouts (Layout Control Files [LCFs]) insert their content into the final HTML to provide you a preview within Modern Campus CMS and to build out the final page product at publish.

Create Using TemplatesLink to this section

Once your design files have been created, you can then transform them into Modern Campus CMS web pages by creating a page template. Page templates use XML and XSL to insert unique page content into the appropriate locations within your source code. Once you master this introductory section, our Technical Reference section has more information about developing using templates.

Creating New Website Design Files

Web development within Modern Campus CMS begins with a new, blank file. If your implementation included a New File template, this is your starting point. If not, you can make a copy of an existing text-based file (for example, HTML, CSS, JS) or you can create a new file template.

1. Navigate to the Content > Pages section of your Modern Campus CMS site where you'd like to create a new website design file.
2. Click +New.
3. Select the new file template.
4. Enter a name and appropriate file extension into the "Filename" field.
5. Click Create.
6. You are now on the new page and can start developing and using the source editor.

Creating a New File Template

1. Navigate to where the templates for your site are located, most likely /_resources/ou/templates.
2. Copy an existing Template Control File (TCF) and rename it newfile.tcf.
3. Delete all existing code and replace it with the following code block.
   

   <?xml version="1.0" encoding="UTF-8"?>
   <tcf>
   	<title>New File</title>
   	<template-list>
   		<template prompt-prefix="New File" extension="inc" publish="no" exclude-sitemap="yes" exclude-search="yes">newfile.tmpl</template>
   	</template-list>
   </tcf>

4. Click Save.
5. Copy an existing template (TMPL) file and rename it newfile.tmpl.
6. Delete all existing code and leave this file completely blank.
7. Click Save.
8. Upload a thumbnail image and name it newfile with the appropriate image file extension.
9. Then you may use the New File Template to start your process of developing.

Next: Tagging a Page Created from Templates