Introduction

The purpose of the “News Ticker” module is to allow you to easily present rotating news and announcements to your users.

Several extended and optional features allow you to:

  • select the time to rotate each news item

  • include text, HTML, images, and hyperlinks within each news item

  • additional features such as sorting and expiring news items

Note: this manual assumes prior experience with DotNetNuke application. For further information about DotNetNuke, please consult the DotNetNuke manual.


Installation Procedure

Included in your download are either one (If you only purchased the PA) or two (If you purchased the PA and Source Code) zip files. One zip file is the source code to the application, and the other zip file is the module which you can upload to your site.

When you extract the files, you will notice that it extracts two zip files (note: only one if you just purchased the PA).

  • DataSprings_NewsTicker_Module.zip - file for installing “News Ticker” with your DNN

· DataSprings_NewsTicker_Source.zip - source zip file you can use in order to make any changes to the application (note: meant for advanced users)

In order to install your “News Ticker” module, login with an account to your DNN site as a host or administrator account. Once logged in, Navigate to the Admin or Host menu item, and click on the “Module Definition”.

Figure 1: Installation procedure (step 1/7)

The following screen will be displayed.

Figure 2: Installation procedure (step 2/7)

Click on the “Upload New Module” to continue installing “News Ticker” and the following screen will be displayed.

Figure 3: Installation procedure (step 3/7)

Click on the “Browse” button and the dialog window for locating the installation file “DataSprings_NewsTicker_Module.zip” will be displayed.

Figure 4: Installation procedure (step 4/7)

Locate the “DataSprings_NewsTicker_Module.zip” and click on the “Open” button. The following screen will be displayed.

Figure 5: Installation procedure (step 5/7)

Click on the “Add” link inside this screen in order to add the module and it will be added to the list.

Figure 6: Installation procedure (step 6/7)

Select the “DataSprings_NewsTicker_Module.zip” file and click on the “Upload New File” link. The installation will begin and in couple of moments the screen informing you on successful completion will be displayed.

Figure 7: Installation procedure (step 7/7)

Note: please keep track of any errors that appear during the installation. These errors can be helpful if your module has problems.


Adding News Ticker module to a page

In order to add “News Ticker” module to a desired page follow these steps:

1. Select the “Add New Module” radio button

2. Choose “News Ticker” from the “Module” pull down menu

3. Click on the “Add” link (or the arrow icon [image]).

Figure 8: Adding a module to a page

The “News Ticker” module will be added to the page. Click on the arrow next to the title of the module in order to open the main menu.

Figure 9: Opening the module main menu

Note: see section News Ticker Main Menu for further information on main menu options.


News Ticker Main Menu

This section of the document will give the definition of the “News Ticker” main menu. In order to start using the main menu, click on the arrow next to the title “News Ticker”.

Figure 10: Opening the settings menu

The main menu will be displayed.

Figure 11: News Ticker Main Menu

The following options are available inside this screen:

  • Manage News Items – option for managing news items/announcements (see section Managing News Items)

  • Help – option for accessing this manual

  • Online Help - option for accessing this manual

  • Print – option for printing the page

  • Settings – option for managing “News Ticker” general settings (see section Managing General “News Ticker” Settings)

  • Delete – option for deleting a module (see section Deleting News Ticker module)

  • Move – option for placing the module in the desired part of the page:

o Move Down

o Move Bottom

o Move To LeftPane

o Move To RightPane


Managing News Items

In order to start managing “News Ticker” display settings, choose option “Manage Settings” from the main menu.

Figure 12: Choosing option "Manage News Items"

The following screen will be displayed (note: the page is presented with 2 screenshots).

Figure 13: Managing News Items

The following options are available inside this screen:

  • Adding a new news item/announcement – see section Adding a news item/announcement

  • Editing a news item/announcement – see section Editing a news item/announcement

  • Deleting a news item/announcement – see section Deleting a news item/announcement


Adding a news item/announcement

This section of the document will describe the procedure of creating a news item or an announcement.

In order to add a news item/announcement, choose option “Manage News Items” from the main menu. The “Add News Ticker Items” screen will be displayed (note: the page is presented with 2 screenshots).

Figure 14: Adding a news item (screen 1/2)

The following parameters are available inside the first part of the screen:

  • News Item – choose option “New News Item” from this pull down menu in order to start adding a new news item

  • News Title – input field for setting the title of the news item

  • Add Date – tick this checkbox to insert the date into news/announcement title

  • Expire Date – use the “Calendar” link to define the expire date for this news item; when this date arrives, the news item will automatically be removed from the ticker

  • View Order – use this input field to set the desired order of appearance

Figure 15: Adding a news item (screen 2/2)

The second part of the screen contains the following parameters:

  • Basic Text Box – use this option if you want to define the news as text only

  • Rich Text Editor – use this option if you want to be able to use rich formatting options (HTML, images, text formatting, etc.)

  • Styles - these are defined styles that you have setup within your DotNetNuke style sheet (Setup under Admin, Site Settings, Stylesheet)

  • Paragraph – use this pull down menu to apply the desired style (heading) to the selected text

  • Font – pull down menu for choosing the desired font

  • Size – pull down menu for choosing the font size

  • Color – pull down menu for choosing the font color

  • - bold

  • - italic

  • - underline

  • - strikethrough

  • - superscript

  • - subscript

  • - remove all formatting

  • - justify left

  • - justify center

  • - justify right

  • - justify full

  • - bulleted list

  • - numbered list

  • - indent

  • - outdent

  • - cut

  • - copy

  • - paste

  • - delete

  • - undo

  • - redo

  • Symbols – pull down menu for inserting special characters

  • - insert horizontal line

  • - insert date

  • - insert time

  • - create link (note: you can use this option to enter a link to another page on your website containing further information on the product or service – see Creating a link inside a news item/announcement)

  • - remove link

  • - insert image from gallery (note: you can use this option to add an image to your announcement or news item – see section Adding an image to news item/announcement)

  • - insert table

  • - preview

  • - select all

  • - use this option if you are pasting the text from Word so that all unnecessary Word formatting would be removed

After setting the desired parameters, click on the “Update” button and the changes will be saved.

Note: further information about adjusting the News Ticker layout and examples can be found in section Managing General “News Ticker” Settings.


Adding an image to news item/announcement

In order to add an image to the news item/announcement, place the pointer to the desired location you want the image to be displayed inside the body of the news item and click on this icon [image] inside toolbar.

Figure 16: Adding an image to news item/announcement (step 1/2)

The image gallery window will be displayed.

Figure 17: Adding an image to news item/announcement (step 2/2)

Choose the desired image inside the gallery and click on the “Insert” button. The chosen image will be displayed inside the news item.

Figure 18: Image added


Creating a link inside a news item/announcement

In order to create a link inside news item/announcement, select the text you want to become a link (e.g. “Read More”) and click on this icon [image] inside the toolbar.

Figure 19: Inserting a link into a news item/announcement (step 1/2)

The dialog window for entering URL will be displayed.

Figure 20: Inserting a link into a news item/announcement (step 2/2)

Enter the address inside the “URL” field and click on the “OK” button. The link will be added to the page.

Figure 21: Link added

Note: link can be created towards a page on your website or any other website outside of your own. This is a useful feature, because it allows you to catch the interest of your visitors with news ticker (either news item or an announcement) and then lead them to the page with further information about your product, service or any other news.


Editing a news item/announcement

In order to edit a news item/announcement, choose option “Manage News Items” from the main menu. Inside the “Add/Edit News Ticker Items” screen, choose the news item you want to edit from the “News Item” pull down menu.

Figure 22: Editing a news item

The parameters of the chosen news item will be loaded. Make the desired changes and click on the “Update” button in order to save them.


Deleting a news item/announcement

In order to delete a news item/announcement, choose option “Manage News Items” from the main menu. Inside the “Add/Edit News Ticker Items” screen, choose the news item you want to edit from the “News Item” pull down menu.

Figure 23: Deleting a news item (step 1/2)

The chosen news item will be loaded.

Figure 24: Deleting a news item (step 2/2)

Click on the “Delete News Item” link and the news item will be deleted.


Managing General “News Ticker” Settings

In order to start managing general “News Ticker” settings, choose option “Settings” from the main menu.

Figure 25: Choosing option "Settings"

The following screen will be displayed.

Figure 26: Choosing option "News Ticker Settings"

Scroll down to the bottom of the page and click on the “+” symbol next to the “News Ticker Settings” label in order to expand and access the available options.

Figure 27: News Ticker Settings

The following parameters are available inside this screen:

  • Width – input field for setting the desired width in pixels for the news ticker

  • Height - input field for setting the desired height in pixels for the news ticker

  • Border – input field for setting the border around the News Ticker (note: enter “0” if you do not want to display the border)

  • Pause Time – use this field to enter the pause time between to news items or announcements (note: value should be entered in milliseconds)

  • Ticker Speed – use this field to set the speed at which the news ticker will operate in milliseconds

  • ForeColor – use this field to set the News Ticker foreground color (note: color is entered as a hexadecimal value e.g. #ffffff)

o Note: see http://www.w3schools.com/html/html_colors.asp for further information on colors

  • Background Color - use this field to set the News Ticker background color (note: color is entered as a hexadecimal value e.g. #ffffff)

o Note: see http://www.w3schools.com/html/html_colors.asp for further information on colors

  • Border Color – use this field to set the News Ticker border (note: color is entered as a hexadecimal value e.g. #ffffff)

o Note: see http://www.w3schools.com/html/html_colors.asp for further information on colors

  • Font – input field for setting the desired News Ticker font type

  • Font Size - input field for setting the desired News Ticker font size

After setting the desired parameters, click on the “Update” button in order to save the changes.


Example of the News Ticker with news Items

This screenshot illustrates how you can setup the “News Ticker” in order to display news on your website.

Figure 28: Example of the News Ticker with news Items


Example of the News Ticker with announcements

This screenshot illustrates how you can setup the “News Ticker” to display short announcements on your website regarding a new service or product.

Figure 29: Example of the News Ticker with announcements

This ticker module was placed inside the left pane with custom width and height and contains a hyperlink to another page on the website with further information on the subject.


Deleting News Ticker module

In order to delete a module, choose option “Delete” from the main menu.

Figure 30: Deleting a module (step 1/2)

The dialog for confirming deletion of the module will be displayed.

Figure 31: Deleting a module (step 2/2)

Click on the “Ok” button and the module will be deleted.