When using Django to add static CSS in HTML, the styles may not be visible on the

index.html

includes {% load static %} at the top and {% static 'css/main.css' %} in the css link href

{% load static %}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CM1</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3f3232292e292f3c2d1d68736f736e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

    <link rel="stylesheet" type="test/css" href="{% static 'css/main.css' %}">
  </head>

  <body>
    {% include "accounts/navbar.html" %}

    {% block content %}

    {% endblock content %}

    <hr>
    <h5>Our footer</h5>

  </body>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aeccddeee9b809ccdeddcfeeccec69eefd/7483abeafdd7e8fd29d4e7bddfceeca90d8fdcfc6ccd2fcc8dddcbaddacc"> b-dddcaeadbd</a>/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
    crossorigin="anonymous"></script>

</html>

settings.py

import os

INSTALLED_APPS = [
    ...
    'django.contrib.staticfiles', #<-- already have  
    ...
]

STATIC_URL = 'static/'

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

Should STATICFILES_DIRS brackets be () or []?

htmlcssdjangodjango-staticfiles

Answer №1

There was an error in the link tag you provided.

Replace this:

<link rel="stylesheet" type="test/css" href="{% static 'css/main.css' %}"> #The type attribute is incorrect and it seems like your css file should be named index.css

With this:

<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}"> #Changed main.css to index.css based on your file structure

Make sure your settings are as follows:

STATIC_URL = '/static/'
    
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

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

Installing Redis with Django channels via pip

Issue encountered while trying to connect to localhost:6379. The connection failed because the target machine actively refused it. CHANNEL_LAYERS = { "default": { "BACKEND": "asgi_redis.RedisChannelLayer", "CONFIG": { "hosts": [("localho ...

djangosocketschanneldjango-channels

What is the process for implementing the Google Analytics tag on a Streamlit-built website?

I want to monitor my Streamlit UI in Google Analytics. To achieve this, Google Analytics requires the following code snippet to be inserted into the <head> section of the HTML file. <script async src="https://www.googletagmanager.com/gtag/js? ...

pythonhtmlgoogle-analyticsfastapistreamlit

Results not showing up

After attempting to incorporate the scores into a table, I am facing an issue where they are not displaying. Can anyone offer assistance with this problem? I am currently hosting on GitHub Pages. File: https://raw.githubusercontent.com/Eternal-Network/Ete ...

javascripthtmlhtml-table

What is the limit to the length of Django request URLs?

While attempting to send a get request to the Django backend that encodes a list of IDs I need, I observed that if this list of ID strings becomes too lengthy, Django will not process the request. Even though I can see the request in the Django test server ...

pythondjangohttpnginx

The Stylebook in Delphi 10 Seattle does not apply correctly on forms other than the Main form

Within my application's MainForm, I have 3 Stylebooks available for users to choose from. Once a selection is made, the same Stylebook is applied to other Forms within the program. While most of the styles are properly set, there is one toolbar that s ...

cssdelphifiremonkeydelphi-10-seattle

Trouble with animating card components in my React app slider

In my React app, I have a slider that moves my card components when any of the icon buttons are clicked. I'm trying to implement a fade animation for each card when it is clicked, but currently, the animation only works when the page is reloaded. Here ...

javascriptcssreactjscss-animations

.Net RadioButton object

Having trouble styling my radio button. When I compile and check the code with Firebug, something unusual happens. Code snippet: <asp:RadioButton ID="selType1" GroupName="Type" runat="server" CssClass="radioB" Checked="true" /> Firebug result: & ...

.netasp.netcss

Display or conceal the nearest element that was clicked

http://jsfiddle.net/KevinOrin/xycCx/1/ jQuery('.happening-main-text .readmore').click(function() { jQuery('.divmore').toggle('slow'); return false; }); ...

javascriptjqueryhtml

Differences between using tables and divs for form layouts

After searching online for examples of form implementations using DIVs, I noticed that most were simple one-column forms. However, my forms are more complex, like the one shown in this image: Although I can easily create these forms using tables, I encoun ...

htmlcssformstablelayout

When an error message is displayed in the textField, the Material UI button shifts downward

I have incorporated the material UI error message display into my text field. When I click on the button without entering any text in the field, an error message pops up which pushes down the button. I am looking for a way to prevent this behavior but have ...

cssreactjsmaterial-ui

Capture screenshot, crop, and save an image from an opened HTML file using Python

Currently, I am utilizing the Bokeh package to create interactive maps showcasing the outcomes of a simulation. Each map is generated in HTML format with its own level of interactivity for individual analysis. To see an example, check out this link: The ...

pythonhtmlseleniumbokeh

Tips for properly uploading images/documents in a decoupled Django + Angular setup to Amazon S3?

Currently, I have built decoupled applications using Django 2 for the backend, an API with DRF, and an Angular 6 frontend application. The next step is to allow users to upload photos for their profiles, as well as potentially PDF files in the future. Afte ...

djangoamazon-s3django-rest-frameworkangular5angular6

KineticJS: Applying a filter to an image does not result in the image having a stroke

Working with KineticJS version 5.1.0 I encountered an issue where a KineticJS image that had a stroke lost the stroke after applying a filter to it. I have created a demo showcasing this problem, which can be viewed on JSFiddle. Here is the code snippet: ...

javascripthtmlkineticjs

Basic Django button for triggering view function

After attempting tutorials for a few days, I've decided to throw in the towel. Any assistance would be greatly appreciated. I'm struggling to make this work - it seems straightforward, but it's actually quite complex. All I'm trying to ...

jqueryajaxdjangovariablesbutton

Incorporating a CSS file within a JSP page

I've been struggling to get my '.jsp' file to utilize a '.css' file that I created. Initially, I stored the '.css' file in the 'WEB-INF' folder but discovered that this folder is not accessible publicly. So, I m ...

javahtmlcssjsp

Adjusting the margin on an element causes a shift in the entire page's

Why is the margin of an h2 element on my page displacing the entire body downward? This seems abnormal since the h2 element is within a div container. Is there a way to address this issue? https://i.sstatic.net/E3CLW.png ...

htmlcss

How to narrow down a Django query based on the specific week of the month

When using Django queries, is there a way to filter by a timestamp's week within a month? While there is a built-in week accessor, it only refers to the week-of-the-year, like 1-52. It seems there is no other built-in option for this specific case. ...

pythondjangodjango-queryset

Creating a dynamic layout of 9 divs in a fluid 3x3 grid

Fiddle | FullScreen UPDATE : New Fiddle | FullScreen View The code snippet provided demonstrates the creation of a grid with dimensions of 3x3, consisting of 9 div elements (with 8 cloned using jQuery). The horizontal alignment of the grid has been ac ...

jqueryhtmlcss

Insert multiple hyperlinks into a text field on a separate webpage and store them individually in a MySQL database

Within my PHP file, I have an HTML form that includes a textbox where users can enter multiple links. For example: www.4shared.com/video/UryixZ7l/Puppy_loves_ringtones.htm www.4shared.com/video/UryixZ7l/Puppy_loves_ringtones.htm www.4shared.com/video/Ury ...

phphtmlmysql

Transform the numerical character into a checkbox within a table using AngularJS

In my HTML code, I am utilizing AngularJS to present data in a table. <div ng-controller="CheckCtrl"> <table class="table table-hover data-table sort display"> <thead> <tr> <th class="Serial_"> ...

htmlangularjscheckbox