Django HTML without a CSS file connection

I have been struggling with this issue despite the many solutions available. My Django app has the following folder structure:

https://i.sstatic.net/lbkk6.png

To reference the styles.css file from my index.html page, I use the following code:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395b56564d4a4d4d959190cad2e3c844c0e1ee82">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
{% load static%}
<link rel="stylesheet" href="{% static 'css/styles.css' %}">

Despite making changes to my css file, it doesn't seem to affect my webpage.

This is what my css file looks like:

.form-details {
text-align: center;
color: Tomato;
background-color: red;}
htmlcssdjango

Answer №1

To begin, place the {% load static %} line at the top of your index.html file.

Additionally, double check that you have correctly configured the direction for static files in your settings.py file.

Here is an example for reference:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static_assets'),
)
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

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

Tips for showcasing images in an MVC application: Select and show either a specific image or the first image from a designated folder

Is there a way to automatically display the first image from a folder in my ASP.NET MVC application? Currently, I am using this code: <img src="~/UserProfileImages/Images/100.jpg" class="img-responsive" alt="" /> However, I would like to display t ...

htmlasp.netasp.net-mvc

The navigation bar spans the entire width of my webpage

I came across this cool man code at and I'm trying to make the menu bar stretch across the entire width of my page. The theme I'm using is called nvidia. You can download the original code by getting the zip file from the link above. Here&apos ...

htmlcss

Is it possible for me to traverse a CSS stylesheet using code?

Exploring the depths of jQuery, one can effortlessly traverse the DOM. But what if we could also navigate through a stylesheet, accessing and modifying attributes for the specified styles? Sample Stylesheet div { background: #FF0000; display: blo ...

javascriptjqueryhtmlcssstylesheet

How to Link External jQuery and CSS Resources

I need to include two external CSS files and one jQuery file in my website. This is how I am adding them: <link rel="stylesheet" href="http://www.externalsite.com/css/style.css" type="text/css" /> and <script src="http://www.externalsite.com/js ...

jquerycss

How can I display data saved from step 2 in a multi-step form with 4 steps, when I return from step 3 to step 2?

Let's consider this scenario: Imagine the user is at step 2 and types their name into <input type="text" class="form-control input-xl" ngModel name="firstName"> They proceed to step 3 but then decide to return to step 2. The information entere ...

htmlangularjsangular

EventListener fails to detect any changes in the dropdown menu

I am currently delving into the world of Django and JavaScript, but I am encountering an issue with the addEventListener function. It seems to be malfunctioning and I am at a loss. Can anyone provide insight into what may be causing this problem? Here is ...

javascripthtmldjango

Swap out a portion of HTML content with the value from an input using JavaScript

I am currently working on updating a section of the header based on user input from a text field. If a user enters their zip code, the message will dynamically change to: "GREAT NEWS! WE HAVE A LOCATION IN 12345". <h4>GREAT NEWS! WE HAVE A LOCATIO ...

javascriptjqueryhtml

Steps for creating a link click animation with code are as follows:

How can I create a link click animation that triggers when the page is loaded? (function () { var index = 0; var boxes = $('.box1, .box2, .box3, .box4, .box5, .box6'); function start() { boxes.eq(index).addClass('animat ...

javascriptjquerycss

Custom calendar control vanishes on postback in ASP

After creating a custom calendar control that works smoothly for the most part, I encountered an issue. Whenever it is posted, the control disappears even when the user is still hovering over it. I want users to be able to change months, dates, or anythi ...

c#javascriptjquerycssasp.net

Issue with integrating Bootstrap 4 toolkit within Angular ngFor causing unexpected behavior

I have encountered a peculiar problem with the bootstrap toolkit while using it inside ngFor. When I hover, there is a delay in displaying the toolkit title and the CSS does not seem to be applied correctly. This issue is illustrated in the screenshot prov ...

cssangularbootstrap-4angular5

Retrieving data from dynamically generated input fields within a table

I currently have a table in my web application <form id="project-form"> <table id="project-table" class="table table-striped table-inverse table-responsive"> <caption>Projects</caption> ...

javascriptphphtmljquery

Using the ampersand symbol in an email address hyperlink

I am currently dealing with an email address that contains an ampersand, and the user wants a 'contact us' link to open a new message with their address populated. I typically use href for this purpose, but due to the presence of the ampersand, i ...

htmlhtml-entitiesampersand

There is an issue processing Django's form submission, causing an HTTP 405 error to be raised

I've been having trouble processing a post form. I've set up the form with the action link, method as post, and debug option set to True in Django, but when I click the submit button, nothing happens - not even an error page is displayed. Below ...

pythondjango

Redirecting HTML files to JavaScript and CSS files

Below is the structure I typically use for PHP MVC: -Resources --/my.css --/my.js -Project --/.htaccess --/index.php --/Other Files & Folders Here is how my htaccess file is configured: Options -Indexes #AddHa ...

phpcssapache.htaccess

Implementing ajax calls to interact with every model object in DJANGO

I am currently facing an issue with implementing AJAX in my project. While the functionality is working fine, I am encountering a problem when trying to apply AJAX to each instance of a model. It seems that it's only being applied to the top object an ...

jquerypythonajaxdjangodjango-views

Using a OneToOneField in Django Admin

Revised with one-to-one field usage I am looking to include the area of a building in a Django modeladmin. Here is the table structure: class Area(models.Model): id = models.IntegerField('Buildings', db_column='id') area = mode ...

pythonpython-3.xdjangodjango-adminone-to-one

Incorporate a link to an image following a click event toggle using Jquery

I managed to create a code snippet that toggles between two images when clicked, thanks to some assistance from stackoverflow. However, I am now looking to add a link to the second image that redirects users to another webpage, like The App Store. My ques ...

javascriptjqueryhtmlcsshyperlink

Having trouble achieving the desired effect with inline block

I'm having some trouble creating a simple store page. One of the products is supposed to look like this: https://i.sstatic.net/JLlua.png However, it's currently showing up like this: https://i.sstatic.net/hHYUm.png I've been attempting t ...

angularhtmltwitter-bootstrapcss

Is there a way to address this scrollbar issue without relying on HTML?

Currently, I am working on a website where the only customization allowed is related to CSS. While I've been able to make progress, I've encountered an issue with the scrollbar placement. The scrollbar is extending beyond the boundaries of the di ...

cssscrollbar

What is the best way to use jQuery ajax to send various row identifiers when updating table data on another PHP page by selecting checkboxes?

When I select both of the green checkboxes, only the most recent table id is sent. The code below includes both the checkbox markup and jQuery function. Checkbox: <div class='md-checkbox has-success'> <input type='checkbox&apo ...

javascriptphpjqueryhtmlajax