190 lines
8.8 KiB
HTML
190 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<title>OTS Signs Command Center Documentation</title>
|
||
<meta name="viewport" content="width=device-width">
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
|
||
<!-- favicon -->
|
||
<link href="../img/favicon.ico" rel="shortcut icon"/>
|
||
|
||
<!-- Bootstrap -->
|
||
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
|
||
|
||
<!-- Stylesheets -->
|
||
<link href="../manual.css" rel="stylesheet" media="screen">
|
||
|
||
<!-- META -->
|
||
<meta name="keywords" content="digital signage, signage, narrow-casting, ots-signs, open source, agpl, documentation" />
|
||
<meta name="description" content="OTS Signs Command Center is an open source digital signage solution. It supports all main media types and can be interfaced to other sources of data using CSV, Databases or RSS." />
|
||
</head>
|
||
<body data-toc="layouts">
|
||
<!-- Copyright 2020 Xibo Signage Ltd. Part of the Xibo Open Source Digital Signage Solution. Released under the AGPLv3 or later. -->
|
||
<nav id="top-nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ss-navbar">
|
||
<span class="sr-only">Toggle navigation</span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
<a href="#" class="navbar-brand">OTS Signs Command Center Documentation</a>
|
||
</div>
|
||
|
||
<div class="collapse navbar-collapse" id="ss-navbar">
|
||
<ul class="nav navbar-nav">
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="ss_body container">
|
||
<div class="row">
|
||
<div class="col-md-3">
|
||
<ul id="side-nav" class="nav nav-pills nav-stacked">
|
||
<li><a href="index.html" data-toc-name="getting_started">Getting Started</a></li><li><a href="layouts_editor.html" data-toc-name="layouts">Layouts</a></li><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
|
||
<html><body><ul>
|
||
<li>
|
||
<p><a href="layouts_editor.html">Layout Editor</a></p>
|
||
</li>
|
||
<li>
|
||
<p class="active"><a href="layouts_editor_using_templates.html">Using Templates</a></p>
|
||
</li>
|
||
<li>
|
||
<p><a href="layouts_editor_library_search.html">Library Search</a></p>
|
||
</li>
|
||
<li>
|
||
<p><a href="layouts_editor_global_elements.html">Global Elements</a></p>
|
||
</li>
|
||
<li>
|
||
<p><a href="layouts_editor_data_widgets.html">Data Widgets</a></p>
|
||
</li>
|
||
<li>
|
||
<p><a href="layouts_editor_editing_tools.html">Editing Tools</a></p>
|
||
</li>
|
||
<li>
|
||
<p><a href="layouts_editor_design_changes.html">Design Changes</a></p>
|
||
</li>
|
||
<li>
|
||
<p><a href="layouts_editor_playlists.html">Add Playlists</a></p>
|
||
</li>
|
||
<li>
|
||
<p><a href="layouts_editor_widgets.html">Widgets</a></p>
|
||
</li>
|
||
<li>
|
||
<p><a href="layouts_interactive_actions.html">Interactive Actions</a></p>
|
||
</li>
|
||
<li>
|
||
<p><a href="layouts_templates.html">Layout Templates</a></p>
|
||
</li>
|
||
</ul>
|
||
</body></html>
|
||
<li><a href="media_library.html" data-toc-name="media">Media</a></li><li><a href="media_modules.html" data-toc-name="widgets">Modules</a></li><li><a href="scheduling_events.html" data-toc-name="scheduling">Scheduling</a></li><li><a href="displays.html" data-toc-name="displays">Displays</a></li><li><a href="users_administration.html" data-toc-name="users">Users</a></li><li><a href="configure_cms_settings.html" data-toc-name="configure">Configuration and Organisation</a></li><li><a href="troubleshooting.html" data-toc-name="troubleshooting">Troubleshooting</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-md-9" role="main">
|
||
<h1 id="using_templates">Using Templates <a href="#using_templates" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h1>
|
||
<p>Use <strong>Templates</strong> to speed up the design process so that Users can customise content rather than having to start from scratch building Layout designs. Streamline content creation with pre-designed Layouts to allow Users to concentrate on the core content whilst maintaining company/industry visual set standards and guidelines.</p>
|
||
<h2 id="published_layouts_as_templates">Published Layouts as Templates <a href="#published_layouts_as_templates" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p>Layouts created in the Layout Editor can be saved for future selection as a Template after Publishing:</p>
|
||
<ul>
|
||
<li>From the <strong>Layout Editor</strong>, open the top menu.</li>
|
||
<li>From the drop down, select <strong>Save Template</strong>.</li>
|
||
<li>Complete all the relevant form field, opting to include all Widgets to the Template design if required.</li>
|
||
<li>
|
||
<strong>Save</strong>.</li>
|
||
</ul>
|
||
<p>Published Layouts can also be saved as a Template from the <strong>Layouts</strong> grid:</p>
|
||
<ul>
|
||
<li>Navigate to <strong>Layouts</strong> under the <strong>Design</strong> section of the main CMS menu.</li>
|
||
<li>Use the row menu for a Published Layout and select <strong>Save Template</strong>.</li>
|
||
<li>Complete form fields and <strong>Save</strong>.</li>
|
||
</ul>
|
||
<blockquote class="tip"><p>Layouts with the tag ‘Template’ will also add the Layout to your list of Template designs!</p>
|
||
</blockquote>
|
||
<h2 id="using_templates_to_create_new_layout_designs">Using Templates to create new Layout designs <a href="#using_templates_to_create_new_layout_designs" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p>Create a new design for your Layout using a Template from inside the Layout Editor:</p>
|
||
<ul>
|
||
<li>
|
||
<p>Click to open the <strong>Toolbox</strong>.</p>
|
||
</li>
|
||
<li>
|
||
<p>Select the <strong>Search for Layout Templates</strong> button.</p>
|
||
</li>
|
||
<li>
|
||
<p>Use the filters to narrow down search results.</p>
|
||
</li>
|
||
<li>
|
||
<p>Drag and drop the selected Template to the canvas.</p>
|
||
</li>
|
||
<li>
|
||
<p>Customise or add items as required.</p>
|
||
</li>
|
||
<li>
|
||
<p>Use the top menu to Publish once happy with the design.</p>
|
||
</li>
|
||
</ul>
|
||
<h2 id="further_reading">Further Reading <a href="#further_reading" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p><a href="layouts_editor.html">Creating Layouts using the Layout Editor</a></p>
|
||
<p><a href="layouts_editor_editing_tools.html">Editing Tools</a></p>
|
||
<h2 id="faqs">FAQs <a href="#faqs" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
|
||
<p><em><strong>Where can I view/edit my saved Templates?</strong></em></p>
|
||
<p>Layouts which have been saved as Templates are viewed and managed from the Templates page under the Design section of the main CMS menu.</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div> <!-- container-->
|
||
<footer class="ss_footer" role="contentinfo">
|
||
<div class="container">
|
||
<div class="pull-right">
|
||
<img class="img-responsive logo" src="../img/logo.png" alt="OTS Signs Command Center" />
|
||
</div>
|
||
|
||
<p class="ss_back_to_top">Back to Top</p>
|
||
|
||
<p class="ss_footer_links">Currently v4</p>
|
||
|
||
<p class="ss_languages"><a href="../en/index.html">en</a></p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- JavaScript -->
|
||
<script src="../vendor/jquery/jquery.min.js"></script>
|
||
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function() {
|
||
$(".ss-sidebar .list-group li").addClass("list-group-item");
|
||
$(".ss_body img").addClass("img-thumbnail");
|
||
$(".ss_body table").addClass("table");
|
||
|
||
// Set the selected page based on the TOC name
|
||
// Mark the appropriate top nav element as the selected page
|
||
$("#top-nav a").each(function() {
|
||
if ($(this).data().tocName == $("body").data().toc)
|
||
$(this).parent().addClass("active");
|
||
});
|
||
|
||
$(".ss_back_to_top").click(function() {
|
||
$('html, body').animate({scrollTop : 0},800);
|
||
});
|
||
|
||
if (inIframe()) {
|
||
console.log("In Frame");
|
||
$("#top-nav").css("display", "none");
|
||
$(".ss-sidebar").parent().css("display", "none");
|
||
}
|
||
});
|
||
|
||
function inIframe () {
|
||
try {
|
||
return window.self !== window.top;
|
||
} catch (e) {
|
||
return true;
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|