Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Summary_list
Task1What is a

...

The following example shows how label panels could eventually look on a display board. All the label panels are highlighted in red. You can see a larger label panel at the top saying All Telesales, followed by two smaller label panels describing the sections below, Top Performers and Summary Stats. At the top left hand side of the page, you can see the company's logo, whereas at the top right hand side of the page, you can see the current time

label panel?

A label panel is - as the name suggests - a panel that can be used to provide a meaningful label for your display board or any area of the display board. For example, if the display board is showing summary stats for your London site you might want to name the label panel as "London summary stats". If your display board is showing call information for the service team in London, you may choose to call the label panel "London Service".

You can also add an image, date and time to a label panel.

Task2Adding a label panel
Task3Customising a label panel
Task4Label panel - overview video

HTML
<a id="What is a label panel?"></a>

What is a label panel?

The label panel allows you to add textual labels anywhere on your display board. These labels can consist of static text, dynamic text (such as the current date and time), and images (such as your company logo) by specifying no text but choosing a background image.

The example below shows how label panels - highlighted in red - appear on a display board; a large label panel, 

Keywordmacro
LabelAll Telesales
, is shown at the top of the screen, followed by two smaller label panels, 
Keywordmacro
LabelBest Performers
 and
Keywordmacro
LabelSummary Stats
, describing the sections below them. Twofurther label panels were used to add a company logo (at the top-left of the page) and the current date and time (at the top-right of the page).

Screenshotmacro
Borderfalse
URL/download/attachments/4817210/display_board_1_label_panels.png

Info

NOTE: There is no limit to the number of label panels you can use on a display board (e.g. you may choose to add a large label panel at the top of the board and smaller label panels on subsections).

...

.

HTML
<a id="Adding a label panel"></a>

Adding a label panel

To add a label panel, click on the

Inlineimage
URL/download/attachments/4817206/panel_type_button.png
 toolbar button and then select to expand the list of panel types and choose the
Inlineimage
URL/download/attachments/4817204/label_panel.png
button, as shown below:

Screenshotmacro
Borderfalse
Shadowfalse
URL/download/attachments/4817210/add_label_panel_1.png

The list of available panels types will disappear and the mose pointer will transform in a white, cross-like pointer sign indicating where your panel will begin. Simply drag your mouse across the screen and you can size the panel After selecting the label panel button, the mouse pointer changes into a white crosshair pointer, indicating that the designer is ready to draw your panel. Click and hold your left mouse button, starting at the point defining the upper-left corner of your new panel.  Whilst still holding down the left mouse button, drag the marquee that will appear to the point that will define the lower-right corner of your panel, as shown below:

Screenshotmacro
Borderfalse
Shadowfalse
URL/download/attachments/4817210/add_label_panel_2.png

How do I customise my Label panel?

...

HTML
<a id="Customising a label panel"></a>

Customising a label panel

To customise a label panel, click on the

Inlineimage
URL/download/attachments/4817206/pointer_button.png
 toolbar button on the top-left corner of the screen, then select the to switch to panel selection mode. Hover your mouse pointer over the label panel you want to customise and click on the
Inlineimage
URL/download/attachments/4817210/nut_button.png
icon to customise the , when it appears towards the top-right corner of the panel, as shown below:

Screenshotmacro
Borderfalse
Shadowfalse
URL/download/attachments/4817210/add_label_panel_3.png

The following screen will appearThe 

Referencemacro
LabelLabel panel properties
window will open, containing the following tabs:

Screenshotmacro
Borderfalse
URL/download/attachments/4817210/label_panel_properties_1.png

Content

Enter The

Tabmacro
LabelContent
tab allows you to enter the name you would like want to appear on the label , then choose the style of font you would like to use for your header as well as the font size, by selecting from the drop-down list.To select the text colour, click on the drop-down arrow as shown below. This will show the colour palate available. To select a standard colour, all you need to do is click on it. To add a custom colour, click on one of the blank custom colour squares and type in the RGB colour codes to add to your custom palette.You will need to click on theApplybutton to set the chosen color.panel and apply any styling properties, such as font size, font style, text colour, etc.

Screenshotmacro
Borderfalse
Shadowfalse
URL/download/attachments/4817210/label_panel_properties_2.png

If you would like the text to appear as bold, italic or underlined, simply click on the required box to highlight 

Inlineimage
URL/download/attachments/4817210/text_formatting_1.png
.

To determine the placement of your title, simply click on 

Inlineimage
URL/download/attachments/4817210/text_formatting_2.png

Background

Click on theBackgroundtab to configure the properties for the background of your label panel.

If you would like to add an image source, simply type the details in the box provided, as shown in the sceenshot below, otherwise leave blank. You can decide to repeat the image or centre it on the panel, by selecting from the drop-down list of the

Keywordmacro
LabelImage style
field.

To select the background colour, click on the drop-down arrow; this will show the colour palette available. To select a standard colour, all you need to do is click on it. To add a custom colour, click on one of the blank custom colour squares and type in the RGB colour codes to add to your custom palette. You can also pick a transparent background, if you prefer. You will need to click on theApplybutton to set the chosen color.

Screenshotmacro
Borderfalse
URL/download/attachments/4817210/label_panel_properties_3.png

If you would like to apply lighting effects to the label panel, just tick the box as shown here:

Screenshotmacro
Borderfalse
URLhttp://docs.tri-line.com:8090/download/attachments/4817210/label_panel_properties_4.png

The two examples below show the difference between panels with and without lighting effects. The panel with the slight shine has a lighting effect applied, while the solid black panel has no lighting effects.

Screenshotmacro
Borderfalse
URL/download/attachments/4817210/label_panel_properties_5.png

Metrics

To define the panel's metrics to suit your particular screen, simply type the required pixel sizes in the boxes provided, then click on theSavebutton to save any changes made.

FieldDescription
Hide labelTick this option if you don't want your panel to display the textual element, such as when you are adding a stand-alone image in the panel's background property
LabelEnter the text you want to appear on the label panel
Text styleSelect any styling properties, such as font size, font style, text colour, etc.

Background

The 

Tabmacro
LabelBackground
tab allows you to configure the background properties of your label panel.

Screenshotmacro
Borderfalse
URL/download/attachments/4817210/label_panel_properties_63.png
 

Field

...

Description

 

 

 

HTML
<table width="100%" cellspacing="0" cellpadding="5" border="0" class="sectionMacro">
	<tbody>
		<tr>
			<td valign="top">
				<h2 style="margin-top: 0px;">What is a Label panel?</h2>

				<p>A label panel is as the name suggests a panel that can be used to provide a meaningful label for your display board or any area of the display board. e.g. If the display board is showing summary stats for your London site you might want choose something like "London summary stats" as the name for the label panel. If your display board is showing call information for the service team at London, you may choose to call the label panel "London Service". You can also add an image, date and time to a label panel.</p>

				<p>The following example shows how label panels could eventually look on a display board. All the label panels are hilighted in red border. You can see a larger label panel at the top saying <b>"All Telesales"</b> followed by two smaller label panels describing the sections below, <b>"Top Performers"</b> and <b>"Summary Stats"</b>. At the top left hand side of the page, you can see the company's <b>logo</b>, whereas at the top right hand side of the page, you can see the current <b>time</b>.</p>

				<img class="screenshot" src="http://www.tri-line.com/common/img/documentation/tim_plus/display_board_1_label_panels.png" alt="Label panel" />
			</td>
			<td width="1px" valign="top">
				<div style="border-width: 1px;" class="panel video">
					<div class="panelContent">
						<h4>Design a Label panel</h4>
						<p><a rel="nofollow" class="external-link" href="http://www.tri-line.com/en/products/video.php?id=4">
						<img class="screenshot naked no_border" src="http://www.tri-line.com/common/img/documentation/tim_plus/label_panel_video.png" alt="Design a Label panel video" /></a></p>
					</div>
				</div>
			</td>
		</tr>
	</tbody>
</table>
Note

NOTE: There is no limit to the number of label panels you can use on a display board. e.g. you may choose to add a large label panel at the top of the board and smaller label panels on subsections.

HTML
<h2>How do I add a Label panel?</h2>

<p>To add a label panel, click on the <img class="icon" src="http://www.tri-line.com/common/img/documentation/tim_plus/panel_type_button.png" /> button and then select the <img class="icon" src="http://www.tri-line.com/common/img/documentation/tim_plus/label_panel.png" /> button, as shown below:</p>

<img class="screenshot naked" src="http://www.tri-line.com/common/img/documentation/tim_plus/add_label_panel_1.png" alt="Add Label panel" />

<p>The list of panels types available immediately disappears and a blank screen will appear with the white cross-like pointer sign indicating where the panel will begin on the screen.</p>

<p>Simply drag your mouse across the screen and you can size the panel as you can see in below:</p>

<img class="screenshot naked" src="http://www.tri-line.com/common/img/documentation/tim_plus/add_label_panel_2.png" alt="Add Label panel" />

<h2>How do I customise my Label panel?</h2>

<p>To customize your label panel, click on the <img class="icon" src="http://www.tri-line.com/common/img/documentation/tim_plus/pointer_button.png" /> button on the top left hand side of the screen. 
Then click on the <img class="icon" src="http://www.tri-line.com/common/img/documentation/tim_plus/nut_button.png" /> icon of the panel that you want to customise, as shon below:</p>

<img class="screenshot naked" src="http://www.tri-line.com/common/img/documentation/tim_plus/add_label_panel_3.png" alt="Add Label panel" />

<p>The following screen will appear:</p>

<img class="screenshot border" src="http://www.tri-line.com/common/img/documentation/tim_plus/label_panel_properties_1.png" alt="Label panel properties" />

<h4>Content</h4>

<p>Enter the name you would like to appear on the label. Then choose the style of font you would like to use for your header. Choose the font size you would like to use by simply selecting from the drop-down list.</p>

<p>To select the text colour, click on the drop-down arrow as shown below. This will show the colour palate available. To select a standard colour, all you need to do is click on it. To add a custom colour, click on one of the blank custom colour squares and type in the RGB colour codes to add to your custom palette. You need to click on the <span class="button">Apply</span> button to apply the colour.</p>

<img class="screenshot naked" src="http://www.tri-line.com/common/img/documentation/tim_plus//label_panel_properties_2.png" alt="Label panel properties" />

<p>If you would like the text to appear as bold, italic or underlined, simply click on the required box to highlight <img class="icon" src="http://www.tri-line.com/common/img/documentation/tim_plus/text_formatting_1.png" />.</p>

<p>To determine the placement of your title, simply click on <img class="icon" src="http://www.tri-line.com/common/img/documentation/tim_plus/text_formatting_2.png" />.</p>

<h4>Background</h4>

<p>Click on the <span class="button">Background</span> tab to configure the properties for the background of your label panel.</p>

<p>If you would like to add an image source, simply type the details in the box as shown below. Otherwise leave blank. You can decide to repeat the image or centre it on the panel, by selecting from the drop-down list of the <span class="reference">Image style</span> field.</p>

<p>To select the background colour, click on the drop-down arrow as shown below. This will show the colour palette available. To select a standard colour, all you need to do is click on it. To add a custom colour, click on one of the blank custom colour squares and type in the RGB colour codes to add to your custom palette. You can even pick a transparent background, if you like. You need to click on the <span class="button">Apply</span> button to apply the colour.</p>

<img class="screenshot border" class="screenshot border" src="http://www.tri-line.com/common/img/documentation/tim_plus/label_panel_properties_3.png" alt="Label panel properties" />
Info

N.B. Please ensure the background colour selected is different to the text colour on the previous Content section for this label panel.

HTML
<p>If you would like to apply lighting effects to the label panel, just tick the box as shown here:</p>

<img class="screenshot border" src="http://www.tri-line.com/common/img/documentation/tim_plus/label_panel_properties_4.png" alt="Label panel properties" />

<p>The two examples below show the difference between panels with and without lighting effects. The panel with the slight shine has a lighting effect applied, while the solid black panel has no lighting effects.</p>

<img class="screenshot naked" src="http://www.tri-line.com/common/img/documentation/tim_plus/label_panel_properties_5.png" alt="Label panel properties" />

<h4>Metrics</h4>

<p>To define the panel's metrics to suit your particular screen, simply type the required pixel sizes in the boxes as shown below. Then click on the <span class="button">Save</span> button to save any changes made.</p>

<img class="screenshot border" src="http://www.tri-line.com/common/img/documentation/tim_plus/label_panel_properties_6.png" alt="Label panel properties" />
Image sourceIf you want your panel to display an image, type its source here, e.g.
Referencemacro
LabelC:\Program Files (x86)\Tri-Line\TIM Plus\ssldata\_globaladmin
. Remember, the path is relative to the folder on disk from which the web content is served, and is different for each class of web user
Image styleChoose how the image should be displayed
ColourChoose the background colour of the panel; if you are adding an image, you may want to select
Keywordmacro
LabelTransparent
so that this does not interfere with your image
Apply lighting effects to this panelTick this option to apply a shine effect to the entire panel; if you are using the panel to display an image, this may adversely affect how it appears

Metrics

The

Tabmacro
LabelMetrics
tab allows you to define the shape of the panel, by entering values for its position and size.

Screenshotmacro
Borderfalse
URL/download/attachments/4817210/label_panel_properties_6.png

Once you have configured the properties of your Label panel, click on the Save button to apply any changes.

HTML
<a id="Label panel - overview video"></a>

Label panel - overview video

For a live demonstration of how to design and customise a label panel, watch the video below:

Vimeovideomacro
VimeoId79519743