oTree Forum >

Global styles does not load

#1 by jkupb

Hello, 

I want to use the following style globally, but including it in the global/Page.html does not work. The style code itself works when I put it directly into a specific page.

<style>
    .scroll-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        z-index: 1;
        background-color: white;
    }
</style>

#2 by Fanist

There are two ways to do so. 

1. Write a style.css file in the static folder to include your code, and introduce them on every page (just copy-paste). 
2. Write a template 'base.html', and add {% extends 'base.html' %} in each page.

For me, I would recommend the first way since one can copy-paste the html files to create pages.

#3 by jkupb

Thanks Fanist,

how would you include the css there?

#4 by Fanist

@jkupb I would include the code in the html file:

{{ block title }}
    Your title
    {% load otree static %}
    <link rel="stylesheet" href="{% static 'global/css/style.css' %}"/>
{{ endblock }}

The CSS file is put under the '_static/global/css/style.css'.

Write a reply

Set forum username