Documentation

Accessibility

The provided template has gone through multiple accessibility checks before its general availability. It is your responsibility to verify the accessibility of the content and any additions or structural modifications to the template. New websites/pages must be reviewed for ATI by the Accessibility Coordinator before going live.

Google Analytics

The University Template includes the GA code from the Office of Marketing & Communications. We recommend to leave this code and add your website's existing GA property. The instruction on using the GA code can be found on the IT Knowledge Base article.  Installing this code on all webpages will allow for ubiquitous website metrics and reporting that will provide insight into how our customers navigate the CSULB websites.

Site Name

The 'Site Name' appears next to the university name to signify to website visitors where the page they are visiting belongs. This part of the template is locked in the provided Dreamweaver Template. However, using the built-in server side include (SSI) variables you can modify the line to modify the site name. Locate the line below in the dreamweaver template to update the site name.

<!--#set var="sitename" value="University Template" -->

Search

The default search included in the template uses the main CSULB Google Search Appliance collection. You are free to replace this search form with what you currently have in your current website. Please keep the current structure and classes within the search.html located in the inc folder.

<div class="search-form" aria-label="search-form-icon" style="display: block;">
    <form class="form-inline" action="http://google.calstate.edu/search" method="get" id="google-appliance-block-form" accept-charset="UTF-8">
        <input type="hidden" name="access" value="p">
        <input type="hidden" name="site" value="csulb">
        <input type="hidden" name="output" value="xml_no_dtd">
        <input type="hidden" name="client" value="csulb-edu">
        <input type="hidden" name="sort" value="date:D:L:d1">
        <input type="hidden" name="proxystylesheet" value="csulb-edu">
        <input type="hidden" name="oe" value="UTF-8">
        <div class="form-group">
            <label for="searchBox"><span class="sr-only">Search</span></label>
            <input type="text" class="form-control" id="searchBox" name="q" placeholder="CSULB">
        </div>
        <button type="submit" class="btn btn-primary">
            Search
        </button>
    </form>
</div>

Banner

The sample files provided to you have the banner area as a file include (inc/banner.html) to apply one banner to your whole site. You have a choice of providing a unique banner image on individual pages or use one banner for the entire site. If the former is preferred, copy the code found in banner.html file and replace the include line with it.

Columns

Please refer to the Bootstrap Grid Template documentation for examples on how to implement different layouts within the University Template. Please refer to Template Guidelines for limitations on what layout can be implemented and ensure you are adhering to to best practices and style guide.

Left Navigation

  • The side navigation is a collapsible bootstrap navigation.
  • The parent element is an anchor tag with a href tag and aria attributes
  • The topmost parent uses classes named “list-group-item list-group-item-success parentmenu”.
  • The children/s is/are wrapped in a div tag and uses classes named “collapse list-group-submenu”. The ID of this div is same as the parent href tag to relate each other.
  • Any of the children can have more sub-levels and thus the structure becomes nested. These children having more sub-levels are exactly the same as the top most parent element but don’t have class “parentmenu”
  • To open a particular child on a page, add “in” class with the “collapse list-group-submenu”.

A sample structure is below:

<a>parent element<a/> classes: list-group-item list-group-item-success parentmenu
     <div> classes: collapse list-group-submenu. Add “in” to open in by default.
           <a>child1</a> classes: list-group-item
           <a>child2</a>
           <a>child 3 (another parent) </a> classes: list-group-item
                   <div>
                           <a>child a</a>
                           <a>child b</a>
                   </div>
     </div>

Breadcrumbs

Breadcrumbs located in the main content column is a fully manual process to update. Each item will be inside the <li> element. The first item is always Home referring to the university homepage.
 

For example:

               <li>About Us</li>
               <li class="crumbs-separator"></li>
               <li>Three Columns</li>