On my main page, the URL localhost:8000/helloworld/greeter can be found at helloworld\templates\hello:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello!</title>
{% load static%}
<link rel="stylesheet" type = "text/css" href = "{% static 'hello/site.css' %}" />
</head>
<body>
<span class="message">Hello there, {{ name }}!</span> It's {{ date | date:'l, d F, Y' }} at {{ date | time:'H:i:s' }}.
</body>
</html>
The accompanying CSS file is located at helloworld\static\hello (so it should look for localhost:8000\helloworld\static\hello\site.css):
.message{
font-weight
color: blue;
}
Reviewing the file structure reveals this layout: https://i.sstatic.net/qzNI5.png
The expected outcome was to have the phrase "Hello there, [name]" in bold and blue. However, the actual result presents a different appearance as displayed here: (this is the issue) https://i.sstatic.net/A6P6S.png Further investigation in the console offers the following error message:
GET http://localhost:8000/static/hello/site.css net::ERR_ABORTED 404 (Not Found)It appears that the directory "static" is being referenced incorrectly, assuming it is at the root instead of within localhost\helloworld.
A solution needs to be identified to rectify this matter and ensure the correct directory linkage.
An attempt was made to modify the block, specifically:
<link rel="stylesheet" type = "text/css" href = "{% static 'hello/site.css' %}" />
This change was implemented:
<link rel="stylesheet" type = "text/css" href = "{% 'helloworld/static/hello/site.css' %}" />
There was an expectation for site.css to be applied, but rather than success a TemplateSyntaxError was encountered.