Adding seperate static css file for other extended templates.

prince gosavi

unread,

Mar 27, 2018, 12:09:57 AM3/27/18

to Django users

I am working on a project where I need to have different styles for different templates.
I have a base.html template which gets extended in other templates.
Following is the snippet:

base.html
{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Recommendation</title>
    <link rel="stylesheet" type="text/css" href="{% static 'main_app/main.css' %}">
  </head>
  <body>
    <div class="sexy">
    {% block css%}

    {% endblock%}
    {% block nav %}
      <ul id='nav'>
        <li>{% block nav-help %} <a href="{% url 'help' %}">Help</a> {% endblock %}</li>
        <li>{% block nav-index %} <a href="{% url 'index' %}">Home</a> {% endblock %}</li>
        <li>{% block nav-query %} <a href="{% url 'query' %}">Query</a> {% endblock %}</li>
      </ul>
    {% endblock %}
    </div>
    <div class="sexy-color">
    {% block content %}

    {% endblock %}
    </div>
  </body>
</html>

Now here is the other template:

query.html
{% extends "base.html" %}
{% load static %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Query</title>
    <link rel="stylesheet" href="{% static 'main_app/query.css' %}">
  </head>
  <body>
    {% block nav-query %}<strong class="nav-active">Query</strong>{% endblock %}
    <div class="cool-padding">
    {% block content %}
    <form method="post" action='/result/'>
      {% csrf_token %}
      {{ form }}
      <input type="submit" value="Submit" />
    </form>
    {% endblock %}
    </div>
  </body>
</html>
Enter code here...

I want query.html to have its own css(query.css):

main.css
.sexy{
  background-color: red;
}

.sexy-color{
  color: yellow;
}

And query.css is:

query.css
.cool-padding{
  padding: 10px,10px,10px,10px;
}
Enter code here...

The problem is i am unable to add 'query.css' to the query.html thus unable to use the css code please help.

Regards.

Mike Dewhirst

unread,

Mar 27, 2018, 1:24:30 AM3/27/18

to django...@googlegroups.com

On 27/03/2018 3:09 PM, prince gosavi wrote:
> I am working on a project where I need to have different styles for
> different templates.
> I have a base.html template which gets extended in other templates.
> Following is the snippet:
> |
> base.html
> {%load static%}
> <!DOCTYPE html>
> <html>
> <head>
> <meta charset="utf-8">
> <title>Recommendation</title>
> <link rel="stylesheet" type="text/css"
> href="{%static'main_app/main.css'%}">
> |

In the base.html add as many blocks as you like to be filled by other
templates extending this one. For example, you want to add different css
stylesheets in different templates later in the flow of pages ...

{% block extrastyle %}{% endblock %}

If you insert this extrastyle block after the "master" stylesheet, any
earlier styles can be changed

> |
> </head>
> <body>
> <div class="sexy">
> {% block css%}
>
> {% endblock%}
> {% block nav %}
> <ul id='nav'>

> <li>{% block nav-help %} <a href="{%url 'help'%}">Help</a> {%
> endblock %}</li>
> <li>{% block nav-index %} <a href="{%url 'index'%}">Home</a>
> {% endblock %}</li>
> <li>{% block nav-query %} <a href="{%url 'query'%}">Query</a>

> {% endblock %}</li>
> </ul>
> {% endblock %}
> </div>
> <div class="sexy-color">
> {% block content %}
>
> {% endblock %}
> </div>
> </body>
> </html>
> |
>
> Now here is the other template:
> |
> query.html
> {%extends"base.html"%}
> {%load static%}
>
> |

|If you are extending another template you rely entirely on filling
pre-existing blocks. That means you don't need any html like this ...|

> |
> <!DOCTYPE html>
> <html>
> <head>
> <meta charset="utf-8">
> <title>Query</title>
> <link rel="stylesheet" href="{% static 'main_app/query.css' %}">
> </head>
> <body>
> |

|... down to here.

However, you can ...

{% block title %}Query{% endblock %}

... and also add another stylesheet with ...

{% block extrastyle %}{{ block.super }}|

||<link rel="stylesheet" href="{% static 'main_app/query.css' %}">

{% endblock %}

The block.super introduces any pre-existing content of that block in the
template you are extending.

HTH

Mike

||
> |
> {% block nav-query %}<strong class="nav-active">Query</strong>{%
> endblock %}
> <div class="cool-padding">
> {% block content %}
> <form method="post" action='/result/'>
> {% csrf_token %}
> {{ form }}
> <input type="submit" value="Submit" />
> </form>
> {% endblock %}
> </div>
> </body>
> </html>
> Enter code here...
> |
>
> I want query.html to have its own css(query.css):
> |
> main.css
> .sexy{
> background-color:red;
> }
>
> .sexy-color{
> color:yellow;
> }
>
> |
>
>
> And query.css is:
> |
> query.css
> .cool-padding{
> padding:10px,10px,10px,10px;
> }

> Entercode here...

> |
>
> The problem is i am unable to add 'query.css' to the query.html thus
> unable to use the css code please help.
>
> Regards.
>

> --
> You received this message because you are subscribed to the Google
> Groups "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to django-users...@googlegroups.com
> <mailto:django-users...@googlegroups.com>.
> To post to this group, send email to django...@googlegroups.com
> <mailto:django...@googlegroups.com>.
> Visit this group at https://groups.google.com/group/django-users.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/387e77b9-9340-46e0-bc04-e0fac3175ea3%40googlegroups.com
> <https://groups.google.com/d/msgid/django-users/387e77b9-9340-46e0-bc04-e0fac3175ea3%40googlegroups.com?utm_medium=email&utm_source=footer>.
> For more options, visit https://groups.google.com/d/optout.

prince gosavi

unread,

Mar 27, 2018, 2:08:05 AM3/27/18

to Django users

Thanks for the reply but it is not working for me.
When i check the page source of the loaded page the 'query.css' is not loaded.
Is it because of the urls? or path? or something else.
here is my static settings:

settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

my project structure is something like this:

structure.png

Mike Dewhirst

unread,

Mar 27, 2018, 3:07:06 AM3/27/18

to django...@googlegroups.com

On 27/03/2018 5:08 PM, prince gosavi wrote:
> Thanks for the reply but it is not working for me.
> When i check the page source of the loaded page the 'query.css' is not
> loaded.
> Is it because of the urls? or path? or something else.
> here is my static settings:
> |
> settings.py
> STATIC_URL ='/static/'
> STATICFILES_DIRS =(
> os.path.join(BASE_DIR,'static'),
> )
>

> STATIC_ROOT =os.path.join(BASE_DIR,'staticfiles')

> |
>
> my project structure is something like this:
>

You need to add some print statements to your settings when DEBUG is
True so you can see where your static dirs and files etc actually are
and where your static URL is so everything becomes clear.

Then you can view source of your web page and check things are as they
should be.

>
> --
> You received this message because you are subscribed to the Google
> Groups "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to django-users...@googlegroups.com
> <mailto:django-users...@googlegroups.com>.
> To post to this group, send email to django...@googlegroups.com
> <mailto:django...@googlegroups.com>.
> Visit this group at https://groups.google.com/group/django-users.
> To view this discussion on the web visit

> https://groups.google.com/d/msgid/django-users/92250d8f-2115-42d5-aad5-241a933a1803%40googlegroups.com
> <https://groups.google.com/d/msgid/django-users/92250d8f-2115-42d5-aad5-241a933a1803%40googlegroups.com?utm_medium=email&utm_source=footer>.

Reply all

Reply to author

Forward