There are many ways that you can customize the way you display AVweb News Headlines on your website. For example, you can change the color of the bounding box or remove it all together. You can also change properties on any of the textual elements, like the titles, descriptions, and date. To do this, you must be familiar with Cascading Style Sheets, or CSS. A good resource on CSS can be found here.
The provided code for displaying AVweb News Headlines on your website includes a link to a stylesheet that resides on avweb.com. You can choose to use your own styles for each of the elements. This can be accomplished in two methods.
Insert the CSS directly into the HTML for the page that will display the feed. This methods is best for sites that only are displaying the feed on one or a few pages. Create your styles as explained below and copy your own styles after the link to the stylesheet on avweb.com. Your styles must be surrounded by the
Link to an external style sheet. This method is best if you will be using the feeds on multiple pages, as the CSS is stored externally, and thus allows you to change the output display of many pages by editing a single file. Create your styles as explained below and paste them into a new text file. Save it as something called "avwebstyles.css". Think smart about where you decided to store this file, as other HTML pages that call it need to define a correct path to the file. Many web sites just create a top level directory named css and store all style sheet files in this directory.
You will then want to add the link to your own stylesheet after the link to the provided stylesheet on avweb.com. It will be something like
Note that the value of href= must be a correct relative path (or a full valid URL such as http://www.domain.com/css/avwebstyles.css) from the HTML file to the CSS file.
Earlier, it was instructed that any custom styles/stylesheets you add should be placed after the link to avweb.com's stylesheet. This is the preferred method as it requires that you specify only the styles that you want to customize. You need not do anything for styles that you don't want to change.
Below is an image which illustrates the names of the styles you can choose to customize as well as what elements they affect.
Other Customizable Options
For the more advanced user, there are several parameters within the provided code for displaying AVweb's Latest News on your website.
Take a look at the provided code and notice the following text towards the end: "num=5", "desc=150", "date=y", "targ=y". These are parameters which affect how the headlines are displayed. Below is a description of each parameter.
num: This option specifies the number of headlines to display. A value of zero will typically display all available headlines.
desc: This option controls the description under each headline. A value of "0" will turn off the description, a value of "1" will display the entire description, and a value greater than "1" will display that many characters of the description.
date: This option controls the display of the date under each headline. A value of "y" displays the date, while a value of "n" does not.
targ: This option controls whether the links to AVweb's site are opened in a new window. A value of "y" opens the avweb.com website in a new window, while a value of "n" opens avweb.com in the current window.
