Skip to content
This repository has been archived by the owner on Dec 9, 2024. It is now read-only.

[Guide] Html templates content modification

Jump to bottom
Wenzhong Duan edited this page Jun 1, 2017 · 1 revision

This wiki is a guideline for easy modification of template page content. Template style for this site is based on Bootstrap v3.3.7

Modify Page Content

Base html

base html is a basic structure for all the pages. It contains top navigation bar, footer, and basic CSS and JavaScript file that apply to all pages. Followings are what can be done through base html

  1. add new button link to a new page:
    Link buttons appears on top navigation bar should not be more than 4 buttons to keep navigation bar clean. The rest of buttons should be placed in a drop down menu. Buttons on top navigation bar are added in unordered list of id="navbar" division as a list entry. Buttons in drop down are placed in unordered list with class="dropdown-menu" as a list entry. link reference of buttons follows rules in link modification section.
  2. change basic style for all pages:
    All rules for base css contains in base.css. DO NOT modify or add rules inside bootstrap files.

Team page

Team page presents the current team member photos and information

  1. Updating image:
    During development, team member image is stored in dropbox. This site refers shared link generated by dropbox to display image. To update image, follows the following step:
    1. upload image to dropbox
    2. create a shared link for image and copy the link
    3. place link in src attribute of targeting img tag
    4. change ending ?dl=0 to ?raw=1
  2. modify team member grid:
    The way of displaying member list involves Bootstrap Grid System. For this site, each row has 6 entry for large screen. The responsive structure of each member entry is as following 
     <div class="col-md-2 col-sm-4 col-xs-6">
    In order to clear grid floating caused by different length of each image entry. clearfix feature is necessary. To do so, add following code for each two member entries in each row 
     <div class="clearfix visible-xs-block"></div>
    and add following code in middle of each row 
     <div class="clearfix visible-sm-block"></div>

FAQs page

FAQ page use definition list structure. To update or add new entry, simply use <dt> for question, and use <dd> for answer. Only content needs to be added; prefix "Q. " and "A. " is unnecessary.

Page templating

Django template tag

When creating a new html page, usually it's a plain html file. In order to transfer it to Django style templates, following steps has to be done:

  1. extends base html with following Django tag
   {% extends "app/base.html" %} 
   {% load static %}
  1. place CSS link in between block css tag
  2. place main body specific for this page in block content tag, do not contain the <body> tag
  3. place JavaScript in block scripts tag

For detail of Django Tags, see Django Built-in template tags

Link Reference

page link reference should hide local file structure from users. Django static refernce can be used to achieve this. To add a new page link, following steps below:

  1. change link reference in html file with patterns /name/. "name" is some custom reference for this page.
  2. create a function in projectRootDir/app/views.py as below: 
     def funcName(request):
   return render(request, 'app/htmlfilename.html')
    replace funcName and htmlfilename to your own
  3. add a list entry in projectRootDir/cam2webui/urls.py with following template: 
     url(r'^name/$', app_views.funcName, name='name'),
    name is what used in html file, funcName is the function name created in previous step.
Clone this wiki locally