Web Templates

News Scroller Customization

Customizing your dreamweaver template's Javascript News Scroller

You Are Here ::: Home >> Dreamweaver Templates >> Template Customization Guide >> Custom Scroller

News Scroller Customization

Customizing your dreamweaver template's Javascript News Scroller

If your SmartWebby Dreamweaver Template includes a news scroller, follow these steps to customize it.

  • In Dreamweaver, open template.dwt (inside the Templates folder) in Code View.
  • Delete all HTML code between the comment tags: <!-- Start Of News --> and <!-- End Of News --> and place your HTML News text between them.
  • Alternatively, if you would like to just modify the existing News items to maintain the display format, do the following:
    1. Cut the code <!-- End Of News --></div></div> and paste it after <!-- Start Of News -->.
    2. You will now be able to view the news in the design view (that is, close the code view window to see the existing news items in the design view).
    3. Now you can replace the existing news text/table with your own news.
    4. Once you have finished undo step 1. That is, cut the code <!-- End Of News --></div></div> (found after <!-- Start Of News -->) and place it after you news text/table ends. Follow these steps whenever you need to modify the news.

  • Important Tip: One easy way to maintain the News (since it will probably change often) without needing to update the template each time is to place the HTML of the news in a Server Side Include (SSI) file. Thus only this file will have to be uploaded to your server with any changes instead of all the pages using the template. Click on Learn how to use Server Side Include files for our easy-to-learn tutorial on using include files.

  • Changing Position of the News Scroller Display Box - Locate the following Style just above the <body> tag:

    #NewsBox{position:absolute; width:210; height:170; overflow:hidden; top:195; left:12; clip:rect(0,210,170,0); visibility:hidden}

    You can change the position (top & left values) and dimensions (width & height values) of the visible 'News Scroller' Box.
    Important: The clip dimensions should be the same as the width & height of the news box (as shown above).

  • Changing Position, Looping and Speed of the News Scroller Text - Locate the following JavaScript between the <head> .. </head> tags:

    startPos=30 // Starting Position of First line in Pixels
    loop=true // Loop Scrolling (T/F)
    iSpeed=180 // Speed of scrolling: Increase to reduce speed
    pxStep=1 // Number of Pixels per step

    You can change the values for start position (startPos value), looping of scroller (loop = true/false) and Speed (iSpeed & pxStep values) of the visible 'News Scroller' Text.

  • Save the changes. When you save a template in Dreamweaver, a pop-up window will appear where you will be asked if you want to update all pages using the template. Click the Update. When all the pages are updated click the Close.

SmartWebby.com Dreamweaver Template Customization Guide