City University of Hong Kong
Central Web Hosting
Service provided by Central IT
City University of Hong Kong
Central Web Hosting
Service provided by Central IT

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.

  • 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.

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 For CityU Burgundy Red menu color: menu-color-lg-cityured

Main content layout

  • Demo: Auto-generated Breadcrumb

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

  • Demo: Auto-generated Sidebar

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

  • Demo: Full-width content page