- News Scroller Customization
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:
- Cut the code <!-- End Of News --></div></div> and paste it after <!-- Start Of News -->.
- 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).
- Now you can replace the existing news text/table with your own news.
- 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
- Step 1: Dreamweaver Site Definition - Setting up your template website in Dreamweaver
- Step 2: Custom Colors - Changing your dreamweaver template's design colors
- Step 3: Custom Header - Customizing the website header with your Site Name and Slogan
- Step 4: Custom Links - Modifying your website Links - Text links or Rollover links
- Step 5: Custom Footer - Changing the website's Footer Text
- Step 6: Custom Graphics - Replacing Photos and Images used in your template's design
- Step 7: Custom Content - Inserting Content into Existing Pages and Adding New Pages
- Step 8: Custom Styling Text - Changing your text styling using CSS Styles
- Custom Flyouts - Modifying your dreamweaver template's Drop-down Menus if included
- Custom Scroller - Customizing the News Scroller if included
- Custom Swaps - Customizing the Swap Images if included
