Problem loading a static css file with django

Question

I'm trying to load a static css file but to no avail:

home.html:

{% extends 'base.html' %}

{% block body%}
{% load static %}
<link rel="stylesheet" href="{% static 'home/style.css' %}"     type="text/css">
<div class="container">
    <br/>
    <form method="post">
        {% csrf_token %}
        {{ form.post }}
        <br />
        <button type="submit">Submit</button>
</form>
<h2>{{ text }}</h2>
{% for post in posts %}
    <h1>{{ post.post }}</h1>
    <p>Posted </b> on {{ post.created }}</p>
 {% endfor %}
</div>
{% endblock %}

style.css:

.HomeForm {
size:20;
}

forms.py:

class HomeForm(forms.ModelForm):
post = forms.CharField(widget=forms.TextInput(
    attrs={
        'class': 'form-control',
        'placeholder': 'How are you feeling?',
        'size': '20',

    }
))

I have a feeling I'm loading the static file in the wrong place, whats the solution? Thanks in advance.

What does .HomeForm suppose to mean, That is not how CSS and Django work. — Vineeth Sai
– Vineeth Sai, Commented Oct 29, 2018 at 14:21

Vineeth Sai · Accepted Answer · 2018-10-29 14:38:55Z

1

You are loading the css file correctly. But that is not how you apply css classes to django forms.

Firstly, You are already giving bootstrap attributes to your field in your forms.py. Now to apply the css classes change the following.

style.css
doesnt matter what you name your classes. No need to name them same as your Form name.

.home-post { 
size:30; // Increase this to see difference
}

Now in your home.html add the class to your form. (Look for the comment). So now all the elements inside this container have size attribute too.

{% extends 'base.html' %} {% block body%} {% load static %}
<link rel="stylesheet" href="{% static 'home/style.css' %}" type="text/css">
<div class="container home-post"> <!--This is how you need to apply-->
    <br/>
    <form method="post"> 
        {% csrf_token %} {{ form.post }}
        <br />
        <button type="submit">Submit</button>
    </form>
    <h2>{{ text }}</h2> {% for post in posts %}
    <h1>{{ post.post }}</h1>
    <p>Posted on {{ post.created }}</p>
    {% endfor %}
</div>
{% endblock %}

EDIT: Looks like you're using bootstrap but don't seem to load it. Add bootstrap if you didn't already add it in your base.html

edited Oct 29, 2018 at 14:38

answered Oct 29, 2018 at 14:27

Vineeth Sai

3,4657 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vineeth Sai Over a year ago

Did you change your attribute to something else in style.css? because your form is already at size 20. And make sure you are not running another project which has same file name, Browser will just load it from the cache instead of reloading.

Vineeth Sai Over a year ago

Try changing size:20; to font-size:20px

Vineeth Sai Over a year ago

You need to apply specific CSS to posts also. So make another class for posts and add attributes that you need for it and apply it on html.

Collectives™ on Stack Overflow

Problem loading a static css file with django

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related