Skip to content
This repository was archived by the owner on Sep 13, 2022. It is now read-only.

Modifying CSS and JS for new or modified pages

Nicholas Pringle edited this page Jun 4, 2013 · 1 revision

In page_template.html the CSS and JS is loaded in the head:

{{ js_css_packages.css_package("shared") }}
{% block pagecss %}{% endblock pagecss %}
{{ user.user_video_css(user_data) }}
{{ js_css_packages.js_package("shared") }}

Whereas in homepage.html the JS/CSS is loaded at the bottompagescript block:

{% block bottompagescript %}
{% if not is_mobile %}
    {{ js_css_packages.js_package("homepage") }}
    {{ js_css_packages.css_package("homepage") }}
{% endif %}

In js_css_packages module there is a packages.py file where the javascript and css files that need to be loaded are specified like so:

stylesheets = {
"shared": {
    "files": [
        "jquery-ui-1.8.16.custom.css",
        "jquery.qtip.css",
        "reset.css",
        "default.css",
        "navigation.css",
        "menu.css",
        "museo-sans.css",
        "bootstrap-modal.css",
        "goals.css",
        "shared.less",
        "bootstrap-popover.css",
    ],
},
"homepage": {
    "files": [
        "homepage.css",
    ]
}, etc. etc. ...

Therefore one can make a new css stylesheet and insert that into the list to replace an old stylesheet instead of modifying existing stylesheets. This may be better practice.

Clone this wiki locally