Web Development Documentation

Installing banner files on a non-Joomla! SAS Website

Please note: this procedure does not apply to web sites using the SAS Content Management System (CMS), which already have standard banners installed.  If your department is not currently using the SAS CMS, but would like to, please SUBMIT REQUEST.

This procedure explains how to download official banners for use on SAS departmental web sites. Before following this procedure please read: Branding and Logos.

This procedure assumes that you know how, and are able, to upload and modify files on your department's current web site.

  1. Open the following URL in a web browser:

    https://sas.rutgers.edu/custom/banners/

  2. To download all the banners, click the link "Download All Banner Files".

  3. To download just one banner, click on the link for that particular banner; e.g. "Download Red Banner Files" for the red banner.

  4. Go to the location on your computer where you saved the banner files.  There will be a ZIP file (e.g. "all_banners.zip" or "red_banner.zip").  Extract the ZIP file.

  5. Open the folder corresponding to the color of the banner you wish to use.

  6. You will see an HTML file (e.g. "banner.html") and an "images" folder. Copy or upload both the HTML file and the "images" folder to your web site's root directory.  (NOTE: Your web site may already have an "images" folder.  If so, copy the contents of the unzipped "images" folder into your web site's existing "images" folder).

  7. For each page on your web site where the banner should appear, do the following:
    • Open the banner.html file using either Notepad or an HTML editor (for example, Dreamweaver)

    • Copy the HTML code in the HTML file, starting with the line

      <!-- INSERT THIS TEXT BELOW THE BODY TAG IN YOUR HTML -->

      and ending with the line

      <!-- YOUR CURRENT WEB CONTENT SHOULD CONTINUE AFTER THIS LINE -->

      (If you are using a graphical HTML editor to access the file, you may need to click on the "Source" window to view the HTML code).

    • Open the target web page using either Notepad or an HTML editor.

    • In the source HTML code for the target web page, look for a tag near the top of the file called <body>

    • Paste the text from the banner HTML file after the end of the <body> tag.

    • If additional tags </head> and <body> appear below the line

      <!-- INSERT THIS TEXT BELOW THE BODY TAG IN YOUR HTML -->

      delete the extra </head> and <body> tags.

    • Replace the text on the line between

      <!-- ENTER YOUR DEPARTMENT NAME ON THE LINE BELOW -->

      and

      <!-- ENTER YOUR DEPARTMENT NAME ON THE LINE ABOVE -->

      with the actual name of your department.

    • Recommended: Wrap the new code in <header> tags to improve the accessibility of your web page.
      • If a <header> section already exists in your web page, place the new code within the <header> tags.
      • If a <header> section does not exist in your web page, add <header> before the new code and </header> after the new code.
    • (Optional) To have the banner occupy a smaller percentage of the width of the browser window, change the width percentage in the first line of the new code (beginning with "<table border="0"... ) from 95% to a smaller value (e.g. width="80%").

    • (Optional) To have the banner occupy a fixed width, change value for "width" in the first line of the new code (beginning with "<table border="0"... ) from 95% to a fixed amount (e.g. width="800" for 800 pixels).    

    • Save the web page.   

  8. Review the changes to your web page by opening the site in various browsers (Google Chrome, Microsoft Edge, and Mozilla Firefox).