Skip to content

Latest commit

 

History

History
165 lines (113 loc) · 3.51 KB

styles-and-scripts.md

File metadata and controls

165 lines (113 loc) · 3.51 KB

Styles & Scripts

Table of Contents

For All Pages

  1. Create asset (if not a remote asset):

    of this type in this directory
    stylesheet taccsite_cms/static/site_cms/css/src/
    script taccsite_cms/static/site_cms/js/modules/

  2. Load asset:

    of this type in this file
    stylesheet taccsite_cms/static/site_cms/css/src/core-cms.css
    script taccsite_cms/templates/assets_core_delayed.html

For Multiple Pages

  1. Create asset:

    of this type in this directory
    stylesheet taccsite_cms/static/site_cms/css/src/
    script taccsite_cms/static/site_cms/js/modules/

  2. Load asset:

    • either before content

      {% block assets_custom %}
  {{ block.super }}
  <!-- ... -->
{% endblock assets_custom %}
      for entire site 
        <link rel="stylesheet" href="{% static '__PROJECT__/css/build/site.css' %}">
  <script src="{% static '__PROJECT__/js/site.js' %}"></script>
      for one template 
        <link rel="stylesheet" href="{% static '__PROJECT__/css/build/template.___.css' %}">
  <script src="{% static '__PROJECT__/js/template.___.js' %}"></script>
      for one page

      Warning Undesired. Create re-usable code (see CMS UI Organization).

    • or after content

      {% block assets_custom_delayed %}
  {{ block.super }}
  <!-- ... -->
{% endblock assets_custom_delayed %}
      for entire site 
        <link rel="stylesheet" href="{% static '__PROJECT__/css/build/site.css' %}">
  <script src="{% static '__PROJECT__/js/site.js' %}"></script>
      for one template 
        <link rel="stylesheet" href="{% static '__PROJECT__/css/build/template.___.css' %}">
  <script src="{% static '__PROJECT__/js/template.___.js' %}"></script>
      for one page

      Warning Undesired. Create re-usable code. See CMS UI Organization.

For One Page

Warning Undesired. Create re-usable code. See CMS UI Organization.

For Markup Outside The Template

Styles
{% block css %}
  {{ block.super }}
  <style>
  /* ... */
  </style>
{% endblock css %}

Note Loads before all markup.

Script
{% block js %}
  {{ block.super }}
  <script type="module">
  /* ... */
  </script>
{% endblock js %}

Note Loads after all markup.

For Markup Inside The Template

Styles
<style>
/* ... */
</style>
Script
<script type="module">
/* ... */
</script>