Forums

Why my static files(css) work only on one page?

In my current project, css file only load on one page and in other pages don't load at all. According to steps described in this topic, i configured static directory and in first page of my application it works fine, but in other pages dont work. In my project i have some template based web page and some html pages. First page of my project is html page. here is my settings.py file:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATICFILES_DIRS = (
os.path.join(BASE_DIR, '../Contract_Assistant/RuleManager/static/'),
os.path.join(BASE_DIR, '../Contract_Assistant/ExpertSystem/static/'),
os.path.join(BASE_DIR, 'static'),

and my static directory defined as:

/home/SocialAI/Contract_Assistant/static

and my css file is in root of static directory and also in application static specified directory as above. Also i load static files in first page as below:

<!DOCTYPE html>
<html>
<title>تنظیمات سیستم</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">

and in other pages as:

{% extends "base.html" %}
{% block title_html %}
لیست قوانین
{% endblock %}
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">

Whats the problem now?

this is my web page [address].2

SocialAI | 45 posts | March 27, 2020, 4:30 p.m. | permalink

Can you give us an example of what doesn't work?

Staff conrad | 4232 posts | PythonAnywhere staff | March 28, 2020, 2:48 p.m. | permalink

Yes,when i visit my home page with this address, it load correctly as this image: main page, and when i click some link in home page it load page as this image some other page. in second page i have a table and some buttons that define it's style in css file as below:

li a {
    color: green;
}
body {
    /*url("/static/ExpertSystem/images/logo.jpg") top left no-repeat*/
    background: rgba(51, 153, 255, 0.2)   ;
    /*text-align: right;*/
    direction: rtl;
    unicode-bidi: bidi-override;
}
p {
  direction: rtl;
  unicode-bidi: bidi-override;
}
.button {
  background-color:#008CBA; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
}

.button1 {width: 120px;}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: right;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
  background-color: #4CAF50;
  color: white;
}
td {
  height: 50px;
  vertical-align: middle;
}
select {
  /*width: 100%;*/
  padding: 10px 10px;
  border: solid #4CAF50;
  border-radius: 1px;
  background-color: rgba(76, 175, 80, 0.1);
  /*background-color: #3CBC8D;*/
  color: black;
  font-size:16px;
}
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
  resize: both;
  overflow: auto;

}

and as seen in second image css file not loaded at all. this is first part of html code of second page:

{% extends "base.html" %}
{% block title_html %}
لیست قوانین
{% endblock %}
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
{% block h1 %}
لیست قوانین
{% endblock %}
{% block article_content %}
<h3>قوانین</h3>
{% if Rule_list|length > 0 %}
<table>
<strong></strong><a href="{% url "RuleManager:create_rule_by_model" %}">ایجاد قانون جدید +</a>
<thead>
<tr>
<td>شناسه</td>
<td>شرط</td>
<td>نتیجه</td>
</tr>
</thead>
<tbody>
{% for rule in page_obj %}
<tr>
<td><a href="{% url "RuleManager:detail" rule.pk %}">{{ rule.pk }}</a></td>
<td>{{ rule.condition }}</td>
<td>{{ rule.consequence }}</td>
<td><button type="button" id="edtBtn" name="edtBtn" class="button button1" onclick=
        "window.location.href ='{% url "RuleManager:edit_rule" rule.pk %}';">ویرایش این قانون</button></td>
<td><button type="button" id="delBtn" name="delBtn" class="button button1" onclick=
        "window.location.href ='{% url "RuleManager:delete_rule" rule.pk %}';">حذف این قانون</button></td>

</tr>
{% endfor %}
</tbody>
</table>
SocialAI | 45 posts | March 28, 2020, 7:33 p.m. | permalink

When I go to a random link from your homepage, it doesn't seem like that second page is requesting / loading your css. You would have to load the css file there as well?

Staff conrad | 4232 posts | PythonAnywhere staff | March 29, 2020, 12:56 p.m. | permalink

Thanks for reply, yes my css file must load in all pages.

SocialAI | 45 posts | March 29, 2020, 4:18 p.m. | permalink

okay, hope that solved your issue!

Staff conrad | 4232 posts | PythonAnywhere staff | March 30, 2020, 4:36 a.m. | permalink

Conrad thanks for your reply. i managed the problem by adding css file in super template 'base.html' as below:

<!DOCTYPE html>
<html lang="en">
<head>
<title>
{% block title_html %}{% endblock %}
</title>
{% load static %}
<link href="{% static "/ExpertSyatem/css/style.css" %}" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>
سیستم خبره {% block h1 %}{% endblock %}
</h1>
<article>
{% block article_content %}{% endblock %}
</article>
</body>
</html>

and now it load correctly in all pages.

SocialAI | 45 posts | March 30, 2020, 5:37 p.m. | permalink

great! glad you solved it :)

Staff conrad | 4232 posts | PythonAnywhere staff | March 31, 2020, 6:26 a.m. | permalink

only one static image is appllicable on one page and other images not appply

deleted-user-10471577 | 2 posts | April 24, 2021, 8:05 p.m. | permalink

I'm not sure I understand your post. Are you describing a problem? Is it just an observation?

Staff glenn | 9718 posts | PythonAnywhere staff | April 25, 2021, 11:08 a.m. | permalink

@glenn thanks for your reply, but i changed my css settings and therefore problem solved.

SocialAI | 45 posts | April 27, 2021, 6:09 p.m. | permalink

Glad to hear that you solved it!

Staff fjl | 4600 posts | PythonAnywhere staff | April 28, 2021, 8:52 a.m. | permalink