How to Apply the New SEBS Templates to Your Existing Website

Last Updated: 2/24/2020

A. Prepare for the Update

Make a backup of your site in case things go horribly wrong.
Copy the /2019/ folder to your website.
Copy the three new templates to your /Templates/ folder.

B. Customize the Master Template

Add Google Analytics code.
Add the name of your unit in the two places that say #####Unit Name Here (1 of 2)##### and #####Unit Name Here (2 of 2)#####".
In the search form, replace #####Website URL##### with the URL of your website (e.g., yourwebsite.rutgers.edu).
If the footer, update your unit's address, buiding name & URL, phone number, social media links (if none, remove these), and webmaster email address.
Find the line in the <head> section that begins with <!-- TemplateParam name="NavClass" and set the value to one of three options, depending on which type of navigation structure you want to use for your main menu:
1. horizontal-nav: For a menu that runs across the top of the page, below the header. This is a good option if you only have one nav menu, and you have seven or fewer main menu items
2. vertival-nav: For a menu that runs down the left side of the page. This is a good option if you have multiple menu lists, you have more than seven masin menu items, or your main menu items are long.
3. no-nav: Use this if your website consists of only one page and doesn't' need a menu.
Note: you will have to repeat this step on both of the sub-templates as well (see III.A., below).
There are two main menus in the master template—the first one is for horizontal nav, and the second is for vertical nav. You only have to update the one that goes with the type of nav you chose above.

C. Customize the Sub-Templates

In both sub templates, update the NavClass parameter to the nav style you want to use, either horizontal-nav or vertical-nav

D. Update Your Homepage

Open your homepage in Dreamweaver and from the main menu select "Tools > Templates > Apply Template to Page".
Select the "sebs-2019-sub-homepage" template. Make sure "Update page when template changes" is checked. Click the "Select" button.
When the "Inconsistent Region Names" dialog box pops up, click both Template properties (Subtitle Option and Supertitle Option) and in the dropdown menu at the bottom of the dialog box, select "Nowhere" for each one.
Click on the one Editable region (Homepage Photo) and in the dropdown menu at the bottom of the dialog box, select "Full Width Feature Area", then click on the "OK" button.
You will need to alter the code for your homepage feature images in order for them to display properly. Note: We recommend discontinuing the use of slideshow carousels. Pick 1-5 images to display.
1. Remove "id=features" from the main <div> and add one of the following, depending on how many photos you want to show:
  - To show 1 large image: class="photo-box"
  - To show 2 images: class="photo-box grid-x small-up-1 medium-up-2"
  - To show 3 images: class="photo-box grid-x small-up-1 medium-up-3"
  - To show 4 images: class="photo-box grid-x small-up-1 medium-up-4"
  - To show 5 images: class="photo-box grid-x small-up-1 medium-up-5"
2. Change the FIRST <div class="feature">...</div> to <figure class="cell">...</figure>
3. Change each subsequent <div class="feature">...</div> to <figure class="cell hide-for-small-only">...</figure>
If you are using any boxes with the panel class on your homepage, you will need to change the class name to callout.
If you are using any lists with either the side-nav or menu class, you wil need to change the class to menu-list.

E. Update the Rest of Your Site

Open up both your current template and the "sebs-2019-sub-interior" template in Code View.
Copy the entire contents of the sebs-2019-sub-interior template to your current template and save the file.
You may get a message that says, "You have added od changed code outside of the <html> tag. This change will not be copied to the documents based on the template unless you insert this tag into the <head> section of your template:

If you get the above message, click "OK".
When the "Update Template Files" dialog box comes up and asks you if you weant to update all files based on this template, click on the "Update" button.
If you get the "Inconsistent Region Names" dialog box, click all three Template properties (Breadcrumbs Option, Is Homepage, and Page Title Option) and in the dropdown menu at the bottom of the dialog box, select "Nowhere" for each one. For some sites, you may see one Editable region (PageTitle) listed as well. Click on it and in the dropdown menu at the bottom of the dialog box, select "Page Title", then click on the "OK" button.
When finished, click on the "Close" button in the "Update Pages" dialog box.
Delete the "sebs-2019-sub-interior.dwt" template.
Rename your old template to "sebs-2019-sub-interior.dwt". When you get the "Update Pages" dialog box, click "OK", and when it is done updating all your pages, click "Close".
If all of your pages are just one step from your homepage, you can do a global search-and-replace to remove <li><a href="/">#####Parent#####</a></li> from every page.
If you are using any boxes with the "panel" class on your homepage, you wil need to change the class name to <callout>.
If you are using any lists with either the <side-nav> or <menu> class, you wil need to change the class to <menu-list>.
You may have to remove some old code from you site. Do the folowing site-wide search-and-replaces:
1. Remove this:
  
  
2. Replace this:
  <style type="text/css">
  With this:
  <style>
3. Replace this:
  <script type="text/javascript">
  With this:
  <script>
4. Replace this:
  <br>
  With this:
  <br />
The following site-wide changes of class names are best done an a page-by-page basis, in case these words appear in the text of your site.
1. Replace this:
  panel
  With this:
  callout
2. Repalce this:
  side-nav
  with this:
  menu-list

F. Clean Up

Delete your old template(s).
Delete the /2015/ folder.
Do a site-wide search-and-replace to move the following code from all of your pages:



— and —

Misc. Notes

If you're using accordion menu, make your nav lists <ul> instead of <ol>.
Remove any javascript code from bottom of pages that used to be used for slideshow carousels.