The Python server on my computer is having trouble locating the static CSS file needed to run

I added a CSS file to my Django project in the 'static' directory and referenced it in my index.html file in the 'templates' directory following the Django documentation, but unfortunately, the CSS is not taking effect!

Here are the file paths:

index.html: myproject/myapp/templates/html/index.html

index.css: myproject/myapp/static/css/index.css

This is the relevant HTML code:

{% load static %}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head lang="eng">
<link rel="stylesheet" type="text/css" href={% static "css/index.css" %}/>
</head>

<body onload="myFunction()">
----some code----
</body>
</html>

The content of my settings.py file is as follows:

(contents of settings.py)

The URLs are defined in urls.py as shown below:

(contents of urls.py)

The URL configuration within the 'myapp' directory is specified in url.py:

(contents of url.py in myapp)

Finally, here is the view function implemented in views.py:

(contents of views.py)

Despite all these configurations, I'm still encountering a 404 error for my CSS. Can someone please assist me in resolving this issue so that my project runs smoothly?

Answer №1

Consider using this:

{% static "css/index.css" %}

within the following code block:

<link rel="stylesheet" type="text/css" href={% static "myapp/index.css" %}/>

Answer №2

let's give it a shot

start by creating a folder called static in the root directory, then create another folder inside named css and place your files there.

update settings.py to include STATICFILES_DIRS instead of static_root

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

add the following line to your html file

<link rel="stylesheet" type="text/css" href={% static "css/index.css" %}/>

your setup should be good to go now.

for more information on the differences between static_root and staticfiles_dirs, check out this helpful answer from another user: statict_root vs staticfiles_dis

Answer №3

In your experiments and responses, one aspect that stands out is the absence of code for serving static files during development in your urls.py. It might not directly resolve your current issue, but it's worth a shot. For more information, you can refer to the documentation here

Main urls.py File

from django.conf import settings
from django.contrib import admin
from django.urls import path , include
from django.conf.urls.static import static
admin.autodiscover()

urlpatterns = [
    path('admin/', admin.site.urls),
    path('myapp/', include('myapp.url')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript and the Heron Formula

Is there a way to implement the Heron formula and semiperimeter with 3 sides in JavaScript? The function should return the area of the triangle based on input values of A, B, and C. Additionally, it needs to check if the sum of two sides is greater than ...

Error in initializing GenericForeignKey: Received an unexpected argument 'object_id_fields' in the __init__() function

I am currently in the process of creating a blog and I have a requirement to track the number of visitors to my website and display this information. To achieve this, I am utilizing the GenericForeignKey feature of the hitcount package according to the pro ...

When implementing a modelchoicefield in Django, the formatting may be compromised during

I was looking to customize the order of a list in my form view and stumbled upon this helpful post: How do I specify an order of values in drop-down list in a Django ModelForm? After following the instructions by adding specialty = forms.ModelChoiceField ...

Tips for concealing a div using an article until it is activated by hovering over it

I am looking to incorporate a sleek sliding animation on an article that reveals more information in a div upon mouseover. A great example of this can be seen on where clicking at the top right corner triggers the "Show Modern Dev Ad" feature. Below is m ...

What is the best way to apply a background image to a DIV element using CSS

The main aim is to change the background image of a DIV using AJAX. $.getJSON("https://itunes.apple.com/search?term=" + searchTerm + '&limit=1' + '&callback=?', function(data) { $.each(data.results, fun ...

How can I ensure that chromedriver in my Test Automation Suite directory is always kept up to date automatically?

Currently, my Automation framework utilizes Selenium and Python to operate. The Chrome browser is run using the chrome driver stored within a specific directory in the automation framework. However, the issue arises when the chrome driver undergoes updates ...

Tips on how to position a div tag in the center of a webpage

I want to center the div class icons within the image section2. I'm unsure if the margin-top:-17% is effectively placing the div on the image. <img style="padding-top:5%; width:100%;"src="img/image-section2.png"> <div class="icon ...

Struggling with CSS issues in ASP.NET 4.6

For the past few months, I've been diligently working on a project that suddenly hit a snag today. Upon inspecting my website, I noticed that all my button sizes appear to be uniform. I typically use Chrome's developer tools to troubleshoot my we ...

Dynamically Growing Navigation Bar Elements with Nested Subcategories Based on Class Identification

Let's say you have a menu bar structured as follows: <nav> <ul class="nav"> <li class="menu1"><a href="#">Menu Item 1</a></li> <li class="menu2"><a href="#">Menu Item 2</a> <ul& ...

Tips for eliminating the gap between a heading and column in Bootstrap 4

.rowHeight{ height: 100px; } .padding-0 { padding-right: 0px; paddig-left: 0px; margin-left: 0px; margin-right: 0px; } .cart{ ...

django-registration triggers an email notification when a user becomes active on the platform

My situation calls for utilizing the functionality provided by django-registration, however I have an additional requirement to fulfill. The default workflow supported by django-registration involves the following steps: A user r ...

Restrict the width of CSS columns to the value of an assigned variable

I'm struggling with centering a one-row table within a div. Specifically, I'm having trouble adjusting the size of two columns to match the length of the content inside them (team name and round). The HTML code is: <div id="greeting"> ...

What is the process for converting CSS to SASS when using arithmetics in selectors?

Is there a more efficient way to convert the following CSS code into SASS? div#block-views-news-block, div#block-views-news-block-1, div#block-views-news-block-3, div#block-views-news-block-4 { margin: 0; padding: 0; } I attempted the following: div ...

How to align the "bootstrap navbar li items" in the center across all page widths

I'm trying to center the li items "on the entire page width" in this basic bootstrap navbar that I've shared. I attempted using "justify-content-center" in the parent. It did center the navbar items, but not across the entire page width. The ite ...

What could be the reason for the inability to retrieve a request attribute within a decorator?

Whenever I submit my form, I use request.POST.get('...') within my Django decorator (@save_post_request). However, each time I attempt this, I encounter the following error: (error with request.<anything>): AttributeError: 'collect ...

A dynamic 2-column website design featuring a mobile-friendly layout and an adaptable image

After searching through numerous resources on the topic, I have yet to find a solution to this particular challenge. Is it feasible to create a webpage layout with a text column on the left and an image column on the right that will seamlessly transition i ...

Using Selenium with Python to manage SweetAlert 2 notifications

Trying to extract the text content of a sweet alert from the HTML: <div id="swal2-content" class="swal2-html-container" style="display: block;">Success</div> Despite waiting and trying different methods, I can&apo ...

Storing data in memory using Django

Currently, my goal is to find an effective method to store IP/Port information using Django. I am contemplating on the most optimal approach to achieve this. The outline of the structure resembles the following: service["Service-1"] = "192.168.0.1, 81" s ...

The results generated from web scraping with beautiful soup are not yielding accurate information

Trying to extract a list of companies from the website using Beautiful Soup. The code continuously appends numbers to the URL "" up to 310 in order to collect data from all pages. However, the extracted data is not in chronological order and there are s ...

Dynamically Alter Notification Background

I have created a demo page with some code for a smart notification. The issue I am facing is that even though the CSS is initially set to black, I want to dynamically change it to a random color upon creation. When I try to do this in the inspector, it w ...