Templates

To override any application template in django, you can set DIRS settings for the django template loader:

TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [
        # ./templates/ subdirectory is located at the same folder as ./manage.py
        os.path.join(BASE_DIR, 'templates')
    ],
    ...
}

To override a part of template, you can create a template with the same name in your templates/ folder, extend it from the corresponding Viewflow template and specify block content to be redefined.

For example, your file $BASE_DIR/templates/viewflow/base.html could looks like

{% extends 'viewflow/base.html' %}
{% load i18n static %}

{% block title %}{{ site.title|default:"Corp. Ink."{% endblock %}

base.html

Base site template with all css/js in header included and empty body. Provides current {{ site }} and {{ app }} viewset variables for body of inherited templates.

{% block favicon %}

Redefine to get custom site favicon on the users browser

{% block favicon %}
  <link rel="icon" href="{% static 'viewflow/favicon.png' %}" type="image/png" />
{% endblock %}

{% block title %}

Website header title

{% block title %}{{ site.title|default:"The Corp. Inc." }}{% endblock %}

{% block theme %}

Block to add additional css theme stylesheet.

{% block theme %}
    <style type="text/css">
    :root {
      --mdc-theme-primary: #d32f2f;
      --mdc-theme-secondary: #01579b;
      --mdc-theme--on-primary: #f0f0f0;
    }
    </style>
{% endblock %}

By default this block contains only –mdc-theme-primary and –mdc-theme-secondary filled with {{ site.primary_color }}, {{ site.secondary_color }} values.

You can find more about theme options at https://material.io/develop/web/components/theme/

{% block css %}

Block to include additional site-global styles

{% block css %}
  {{ block.super }}
  <link href="https://cdn.jsdelivr.net/npm/perfect-scrollbar/css/perfect-scrollbar.css"
        rel="stylesheet'>
{% endblock %}

{% block js %}

Block to include additional site-global javascript

{% block js %}
  {{ block.super }}
  <script src="https://cdn.jsdelivr.net/npm/perfect-scrollbar/dist/perfect-scrollbar.common.min.js"></script>
{% endblock %}

{% block extrahead %}

Block to include additional css/js on the specific page. The good practice is to override the block on on a specific page template, and leave it empty in the base.html

{% block extrahead %}
  <link href="{% static 'css/page-components.min.css' %}" rel="stylesheet">
  <script src="{% static 'js/page-components.min.js' %}"></script>
{% endblock %}

{% block body %}

Page body content, use this block if you directly extends ‘base.html’

{% block body %}
  <aside class="mdc-drawer">
    Drawer content
  </aside>
  <div class="mdc-drawer-app-content">
     Lorem ipsum...
  </div>
{% endblock %}

base_page.html

Base template for application specific pages. override it to change global drawer appearance: things like user name and avatar. Use as base template for application-wide page template.

{% extends 'viewflow/base_page.html' %}

TODO: Sample...

{% block page-menu %}

Whole left column with drawer of a typical frontend page

{% block page-menu-avatar %}

{% block page-menu-avatar %}
  <img class="vf-page__menu-avatar" src="{% static 'img/company-logo.png' %}">
{% endblock %}

{% block page-menu-user-info %}

{% block page-menu-app %}

Includes application {{ app.menu_template_name }} and site {[ site.menu_template_name }} menu templates.

{% block page-menu-user-actions %}

User actions dropdown menu content

{% block page-menu-user-actions %}
<a class="mdc-list-item vf-page__menu-list-item" href="{% url 'settings' %}">
  <i class="material-icons">account_box</i> {% trans 'Preferences' %}
</a>
{[ block.super }}
{% endblock %}

{% block page-toolbar-extra %}

Place for additional content on the top bar

{% block page-toolbar-extra %}
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
  <a class="mdc-icon-button material-icons mdc-top-app-bar__action-item"
     href="{% url settings %}"
     aria-label="Settings">settings</a>
  </section>
{% endblock %}

{% block content %}

Main page content. To mach visual style of existing pages, whap it “mdc-layout-grid vf-page__grid” classes

{% block content %}
<div class="mdc-layout-grid vf-page__grid">
  <div class="mdc-layout-grid__inner vf-page__grid-inner">
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-10-desktop">
      <div class="mdc-card vf-card">
        <div class="mdc-card__primary-action">
          <h2 class="mdc-typography mdc-typography--headline6">Sample</h2>
        </div>
        <div class="mdc-typography mdc-typography--body2">
          Lorem ipsum...
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

base_lockscreen.html

Base template for authentication and error reporting pages

{% block lockscreen-sidebar-header-title %}

{% block lockscreen-sidebar-content %}

{% block lockscreen-sidebar-footer %}

Bottom part of a lockscreen sidebar

{% block lockscreen-sidebar-footer %}
<a href="{% url 'login'%}"
   class="mdc-button mdc-button--raised vf-page-lockscreen__sidebar-footer-action">
  {% trans 'Log in' %}
</a>
{% endblock %}

{% block lockscreen-content-icon %}

Big icon on the right side of the page.

{% block lockscreen-content-icon %}
  <i class="material-icons">lock</i>
{% endblock %}

includes/

To use viewflow components and styles outside of viewflow/base.html template, just include corresponding template inside your template <head>

{% include 'viewflow/includes/viewflow_css.html' %}
{% include 'viewflow/includes/viewflow_js.html' %}