Files
OTSSignsTheme/manual/en/layouts_editor_global_elements.html
Matt Batchelder bbe8c1860c pre-img swap
2026-03-23 21:09:27 -04:00

162 lines
8.0 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><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 class="active"><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_global_elements">Using Global Elements <a href="#using_global_elements" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h1>
<p>OTS Signs Command Center has a variety of tools available for Users to add to Layouts from the <strong>Toolbox</strong> when using the <strong>Layout Editor</strong>.</p>
<p>Global Elements give Users an easy way to add <strong>Text</strong>, <strong>Dates and Times</strong>, <strong>Lines</strong> and a variety of <strong>Shapes</strong> to Layouts to create eye-catching content from within the CMS.</p>
<p>Global Elements give Users great flexibility, with precise positioning and customisable options its easy to create visually impactful designs. Use them on their own or add them to your designs to further enhance and complement other content.</p>
<h2 id="adding_global_elements">Adding Global Elements <a href="#adding_global_elements" class="header-link"><span class="glyphicon glyphicon-link"></span></a></h2>
<p>Global Elements are added to Layouts from the <strong>Layout Editor</strong>:</p>
<ul>
<li>Click on the <strong>A button</strong> from the <strong>Toolbox</strong> to open.</li>
<li>Drag and drop a selected item into position on the canvas.</li>
<li>Or click to highlight and select an item and click on the canvas to add.</li>
<li>Resize and position.</li>
<li>Use the available configuration options to style each element from the Properties Panel.</li>
</ul>
<blockquote class="tip"><p>Edit Text directly on the canvas by double clicking the Text Element. Click again to highlight the “Text” and overwrite!</p>
</blockquote>
<p>Global Elements are compatible with all Widgets/Data Elements and Library Media added to the canvas and are a great to use to draw attention to other content on your Layouts.</p>
<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">Overview of the Layout Editor</a></p>
<p><a href="layouts_editor_library_search.html">Using the Library Search Functions</a></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>