Customize Templates

This page provides examples of template customization for web developers.

Template Resources

Central IT supports centrally maintained scripts (CSS and JavaScript) and images (e.g. logos and icons). The base URL is https://template.cityu.edu.hk/template/.
Do not download any centrally maintained scripts and images as a local copy. They should be loaded through central servers.

General Styles

Bootstrap is adopted as the core template framework. Please refer to the Bootstrap 5.2 documentation for customizing the website using Bootstrap's utilities.
You can use the custom files, /css/custom.css and /js/custom.js, to append the CSS and JavaScript.

Icons

To enrich page content and improve the flexibility of icon styling, a free version of Font Awesome icon library is included in our template. Please refer to Font Awesome 6 website for the list of icons and their corresponding HTML code.

Header & Logo

Demo: College / Department Logo
For all Colleges and departments, please use the logo image. Direct links to logo files can be used from our template site:
//template.cityu.edu.hk/template/logo/class/class_logo_eng_cmyk.svg
Change the highlighted text to the corresponding department code for a direct logo image path.

The logo should be linked to the corresponding URL. Note that the text of the college/department name shall be displayed in the mobile version.
```
<div class="cityu-header-logo-lg align-self-center">
  <a href=".">
    <img src="//template.cityu.edu.hk/template/logo/class/class_logo_eng_cmyk.svg" alt="Sample Website">
  </a>
</div>
...
<div class="cityu-header-name-md align-self-center">
  <a href=".">
    Department Name
  </a>
</div>
              
```

Demo: Service website

For University services or other websites without a specific logo, please use the vertical CityU logo in the header, and it should be linked to the CityU homepage. The service name or site name should be placed on the right-hand side of the CityU logo. The department name is optional to display underneath the service name.


<div class="cityu-header-logo-lg align-self-center">
  <a href="https://www.cityu.edu.hk" rel="noopener" target="_blank">
    <img src="//template.cityu.edu.hk/template/v2/logo/CityU/CityU_Vertical_Logo_CMYK.svg" alt="City University of Hong Kong">
  </a>
</div>
<div class="cityu-header-name-lg align-self-center">
  <a href=".">
    Service Name
  </a>
  <div class="cityu-header-tagline">
    <a href=".">Tagline</a>
  </div>
</div>
...
<div class="cityu-header-name-md align-self-center">
  <a href=".">
    Service Name
  </a>
</div>

Nav

Demo: White · Burgundy Red

To switch the menu color, change the CSS class in the <nav> tag:

For white menu color: menu-color-default


<nav class="cityu-menu menu-color-default navbar navbar-expand-lg sticky-top">

For CityU Burgundy Red menu color: menu-color-lg-cityured


<nav class="cityu-menu menu-color-default menu-color-lg-cityured navbar navbar-expand-lg sticky-top">

Main content layout

Demo: Auto-generated Breadcrumb

Add the code below to use the auto-generated Breadcrumb:


<div class="cityu-breadcrumb breadcrumb-color-default">
  <div class="cityu-breadcrumb-inner container">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <!-- Auto generated when <ol> is empty -->
      </ol>
    </nav>
  </div>
</div>

Demo: Auto-generated Sidebar

Add the code below to use the auto-generated Sidebar; we recommend placing the sidebar in right-hand column:


<main class="cityu-main">
  <div class="cityu-main-inner container">
    <div class="row">
      <div class="col-md-9">
        <div class="cityu-content content-color-default">
          <h1>Title</h1>
          <p>Paragraph</p>
          ...
        </div>
      </div>
      <div class="col-md-3">
        <aside class="cityu-submenu-list cityu-sidebar sidebar-color-default">
          <ul>
            <!-- Auto generated when <ul> is empty -->
          </ul>
        </aside>
        ...
      </div>
    </div>
  </div>
</main>

Demo: Full-width content page


<main class="cityu-main">
  <div class="cityu-main-inner container">
    <div class="row">
      <div class="col-md-12">
        <div class="cityu-content content-color-default">
          <h1>Title</h1>
          <p>Paragraph</p>
          ...
        </div>
      </div>
    </div>
  </div>
</main>

last modified: Nov 2022