Create a Site Template from Bootstrap or a Website Design Template
The open architecture of Oracle Content Management means you can use work done in other coding frameworks such as Foundation or Bootstrap. With a few changes, you can turn a Bootstrap site template into a theme and make it part of an Oracle Content Management site 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 thetheme_name/layouts
folder -
css
files go into thetheme_name/assets/css
folder -
js
files go into thetheme_name/assets/js
folder -
image
files go into thetheme_name/assets/images
folder, which may be grouped in subfolders with images for background, footer, people, and so on
-
-
Modify the
html
files in thelayout
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
, andimages
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:
-
Include the following tags in the
<head>
tag of thehtml
file:-
<!--$SCS_RENDER_INFO-->
-
<!--$SCS_SITE_HEADER-->
-
<!--$SCS_PAGE_HEADER-->
-
-
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>
-
Include the following tags after the include of the
renderer.js
file:-
<!--$SCS_PAGE_FOOTER-->
-
<!--$SCS_SITE_FOOTER-->
-
-
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 uniqueid
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.