Create a Site Template from Bootstrap or a Website Design Template

Basic Process

Here’s an overview of the steps described in detail in the sections that follow:

Prerequisites

Have the Oracle Content Management desktop app for synchronizing folders and files to your local computer set up and running.
Download the Bootstrap site template theme folders, files, and content to your local computer and have them ready for use.

Create a Site

Create a site from an Oracle Content Management starter site template:

In the side navigation, click Sites.

A list of existing sites is displayed.
Click Create.
In the Create Site dialog, select JET Starter Template or Starter Template to use as the basis for your site.
In the dialog, enter a name for the site. This name is used in the site URL. You can use letters, numbers, underscores (_), and hyphens (-). If you enter a space, it's automatically replaced with a hyphen.

Don’t use the following names for site templates, themes, components, sites, or site pages: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Although you can use the following names for site pages, don’t use them for site templates, themes, components, or sites: documents, sites.
Note:

The path for an Oracle Content Management site URL is case-sensitive. Case in the query or fragment strings is managed by developers in their custom code.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Optionally, enter a description for the site.
When you’re ready, click Create.

A progress bar shows the new site name and creation status. When the site is created, the name appears in the list of sites. Its initial status is offline.

To quickly find your newly created site in the list, sort the list by Last Updated. The site you just created will appear at the top of the list.

Synchronize the Theme Folder

When you create a site from a starter site template, a copy of the starter site template theme is created and named with the site name followed by the theme name. For example, the theme for My_New_Site is My_New_SiteTheme.

Use the desktop app to synchronize the theme folder and files for the site to your local computer. See Get Started with sync in Collaborating on Documents with Oracle Content Management.

You should now see the site template theme folder hierarchy and files on your local desktop. Here’s an example:

    theme_name
        assets
            css
                main.css
            js
                topnav.js
        designs
            default
                design.css
                design.json
                facebook.png
                googleplus.png
                linkedin.png
                twitter.png
                youtube.pgn
        layouts
            index.html
        responsepages
            404.html
        _folder.json
        _folder_icon.png
        components.json
        viewport.json

Set Up the Basic Theme

Copy these Bootstrap files into the synchronized theme folders on your local desktop to overlay the existing files.
- html files go into the theme_name/layouts folder
- css files go into the theme_name/assets/css folder
- js files go into the theme_name/assets/js folder
- image files go into the theme_name/assets/images folder, which may be grouped in subfolders with images for background, footer, people, and so on
Modify the html files in the layout folder to update relative paths and add required elements. For a typical Bootstrap theme there will be many relative paths to the /assets folder, so you must modify them to point to the theme folder.

Fix the paths for the css, js, and images folders to use:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Note:
Once this step is completed, the _scs_theme_root part will automatically adjust to the environment the theme is being used in.
There are three requirements for each Oracle Content Management layout:
1. Include the following tags in the <head> tag of the html file:
  - 
  - 
  - 
2. Include the renderer script at the end of the layout files, just inside the <body> tag. Both of these paths automatically adjust in Site Builder and the runtime environments.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Include the following tags after the include of the renderer.js file:
  - 
  -

Verify that the modified theme files are synchronized with the site in Oracle Content Management.

Update the Site Pages

When you open the site in Site Builder, you’ll initially see the pages that are in the default site. You can delete the pages you don’t want and switch the layout on the pages you want to keep to one of the new layouts.

In the side navigation, click Sites.

A list of existing sites is displayed.
Select the site and choose Open in the right-click menu or click in the actions bar.
Enter a name for the update and an optional description, then click Create.

For the update name you can use letters, numbers, underscores (_), and hyphens (-). If you enter a space, it’s automatically replaced with a hyphen.

If you already have updates to the site, select an update from the list and click .
Site Builder opens in preview mode. To make changes or to use the navigation options in the sidebar, make sure that the Edit switch is set to Edit.
To edit a particular page, choose the page using the site tree in the sidebar or using the site’s own navigation.
To remove a page you don’t want, select the page and click .
To add a new page, click Add Page. You can reposition the page in the site tree by dragging and dropping it.
To change the layout associated with a page, choose the page in the site tree and click to display the page settings.

Go to the Page Layout field and select a different layout from the menu. The number and type of page layouts depends on the theme associated with your site.
Save to save your changes to the current update. You can continue working in the current update or create new updates if needed.

Update Navigation

When you look at the navigation in the site preview, it doesn’t match the current hierarchy because of the hard-coded navigation in the layout from the Bootstrap theme.

Update the navigation to replace the hard-coded code in the Bootstrap theme with dynamically generated code from the site hierarchy.

Edit your local synchronized copies of the theme files.

Remove the hard-coded navigation code from the layouts. Here’s an example of the hard-coded navigation that would have to be removed from a typical Bootstrap theme. This is a typical header section, with the logo, the ‘Toggle Navigation’ parts for the ‘Hamburger’ menu when the page is too narrow (the responsive part) and the hard-coded page navigation for the other pages.

<header id="header" class="header navbar-fixed-top">  
        <div class="container">       
            <h1 class="logo">
                <a href="index.html"><span class="text">Velocity</span></a>
            </h1><!--//logo-->
            <nav class="main-nav navbar-right" role="navigation">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button><!--//nav-toggle-->
                </div><!--//navbar-header-->
                <div id="navbar-collapse" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active nav-item"><a href="index.html">Home</a></li>
                        <li class="nav-item"><a href="features.html">Features</a></li>
                        <li class="nav-item"><a href="pricing.html">Pricing</a></li>
                        <li class="nav-item dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">Pages <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="download.html">Download Apps</a></li>
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="blog-single.html">Blog Single</a></li>
                                <li><a href="blog-category.html">Blog Category</a></li>
                                <li><a href="blog-archive.html">Blog Archive</a></li>
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="contact.html">Contact</a></li>                    
                            </ul>                            
                        </li><!--//dropdown-->                         
                        <li class="nav-item"><a href="login.html">Log in</a></li>
                        <li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary" href="signup.html">Sign Up Free</a></li>
                    </ul><!--//nav-->
                </div><!--//navabr-collapse-->
            </nav><!--//main-nav-->                     
        </div><!--//container-->
    </header><!--//header-->

Write JavaScript code to traverse the site structure information and generate the navigation code, then include the JavaScript code on the layouts, for example:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Modify the exact output of the topnav.js file to match the markup expected in your particular CSS.

Update Site Layouts

At this point the site is functional but has no editable areas (slots) in the layouts.

Locate or add a DIV element in a layout and designate it as a slot.

Slots are DIV elements in the layout that have the value "scs-slot" in the class attribute. Each slot must have a unique id attribute. For example:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
To make the slot adjust automatically to the size of the browser viewport, include the class attribute "scs-responsive".
Repeat this step as needed to create additional slots in the layout or in other layouts.

Publish the Site

After you’ve completed and saved all your changes to a site, you must Publish the site.

Publishing the site takes all of the changes in the current update and merges that into the base, making what was in the update into the new base site.

Create the New Template

You now have a functional site with an associated theme, so you can make this into a site template to share with others so they can create sites from it.

In the Oracle Content Management side navigation, click Developer.
Click View all Templates.
Click Create and choose From existing site.
Select the new site you’ve created using a starter site template and the Bootstrap site template.
Enter a name for the new site template and click Create.
To package the site template for use with other Oracle Content Management instances, select the site template and choose the Export menu option to create a .zip file that can be downloaded.