The application of CSS styles to templates in Django is unsuccessful

The CSS theme that was previously working on the base.html is no longer functioning. I can't pinpoint what caused it to stop working. The base.html serves as the core template for all other pages.

Within base.html, the following code is present:

<!DOCTYPE html>
{% load staticfiles %}

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

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

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


  </head>
  <body>

    <nav class='navbar mynav-fixed-top navbar-expand-lg bg-dark' role='navigation' id='navbar'>
      <div class="container-fluid">

      </div>

    </nav>

    <div class="container-fluid">

    {% block content %}

    <div class="main">

    </div>

{% endblock %}


main.css

body{background-color: yellow}

settings.py :

STATIC_URL = '/static/'

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

The CSS is not being applied. I'm unsure why the changes are not reflecting in the CSS file. Any guidance or assistance on how to resolve this issue would be greatly appreciated.

cssdjango

Answer №1

It is commonly recommended to place the reference to your custom stylesheet (such as main.css) after any other stylesheets in the head section. This is to prevent the bootstrap stylesheets from overriding your main.css and rendering it ineffective. Currently, the link to main.css appears before the links to bootstrap stylesheets.

Answer №2

If you have only one folder with static files in your project, it's recommended to set STATIC_ROOT instead of STATICFILES_DIRS:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'static')

Make sure to update {% load staticfiles %} to {% load static %} in your templates, as the load staticfiles method has been deprecated since 2.1.

Additionally, following the advice in the comments, place your stylesheet after any third-party stylesheets to give it higher priority. Keep in mind that your styles may have lower priority if prior stylesheets define the same property with the !important option.

Answer №3

Your website's CSS may not be displaying because you haven't set the STATIC_ROOT correctly.

Start by ensuring that the debug setting in settings.py is set to True

Debug=True

Add the following code to settings.py

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

In your main urls.py

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # other urls
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Finally, run the following command in your terminal

>python manage.py collectstatic

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

I'm struggling to adjust the height of a div based on whether a list item within it contains a nested unordered

I have been working on a horizontal menu that is functioning well for me. However, according to the design requirements, I need to adjust the height of <div id="nav-subMenu"></div> if the main/parent menu li does not have any submenus or ul. Th ...

javascriptjquerycss

Managing static files with Django-admin

Currently delving into the world of Django, I came across this tutorial for creating a todo-list app. In part 2, I need to modify the admin's change_list template and insert an image into it. Initially, I tried using <img class='btn' s ...

django

What is the best way to implement a CSS rule that is influenced by the number of siblings present within an element?

Is there a way to style an element differently based on the number of subelements it contains? <div class="wrapper"> <div class="element" /> </div> or... <div class="wrapper"> <div class="element" /> <div class="el ...

htmlcssstylesheet

Customizing class based views in Django with function decorators that accept parameters

The documentation on class based views explains how to decorate a class, but does not provide information on passing parameters to the decorator. I am interested in achieving something like class MyView(View): @method_decorator(mydecorator, some_para ...

djangopython-decorators

How to eliminate a hyperlink from an HTML element with the help of JQuery

Recently, I was assigned to revamp a website for the company I work for. However, upon closer inspection, I realized that the website is quite messy and relies heavily on templates, resulting in certain elements being auto-generated as active links. The i ...

javascriptjqueryhtmlcss

Variability in the positioning of list item markers depending on the child's display property

Looking at this code: <ul> <li> <div id="container"> <button>toggle display</button> <div>text</div> <div>text</div> </div> </li> ...

csshtml-lists

How to incorporate an SVG line between two divs within a flexbox arrangement

<div class='container'> <div class='Greeting'> Hello there this is B </div> <div class='banana'> Hello B </div> </div> .container{ display: flex; width: 100%; ...

htmlcssreactjs

Running CesiumJS is a straightforward process that can be done by

After diligently following the provided instructions, I managed to get cesium running locally. I then attempted the hello world example as shown: However, despite clicking on "open in browser," I couldn't see anything. It has been a constant struggl ...

javascripthtmlcssconfigurationcesiumjs

Tips on preventing the constant shifting of my webpage div elements when resizing the browser

Whenever I resize my webpage browser, the 3 text input boxes move and overlap, causing the page layout to become messy. View of The Browser in full screen (normal) View of The Browser when it's smaller (not normal) As a beginner programmer, I have ...

htmlcssformatting

Is it possible to utilize LESS to dynamically read the width?

My LESS code looks like this: &.settings-prompt .panel { margin-left: -190px; width: 380px; height: 200px; } &.create-playlist-prompt .panel { margin-left: -165px; width: 330px; height: 180px; } I want the .panel to have ...

cssless

HTML border width is set to 100%, but there seems to be an issue with the responsive menu border and icon display

One issue I'm encountering with my website involves the border at the bottom of my navigation bar. Despite trying to adjust the box-sizing property to border-box, I still can't get it to display correctly. My goal is to have the border span 100% ...

cssmenuresponsive-design

The website located at https://lyrics-chords.herokuapp.com/ was unable to show insecure data from http://localhost:8000/auth/user

After completing my Django-React app and deploying it to Heroku, I noticed that the frontend (JS and CSS) load without any issues on the website. However, when trying to make requests to the backend, I encountered the following error: [blocked] The page at ...

djangohttpherokuhttps

Switch between display modes using a button and CSS media query

I'm trying to find the most effective method for toggling display states on a webpage using a button while also being able to adjust based on screen size. For larger screens, I want to default to a horizontal layout with the option to switch to vertic ...

javascriptjqueryhtmlcss

I wish to adjust the font size as well as resize the table elements simultaneously

Adjusting the height and width of the table should automatically adjust the font size as well. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Default functiona ...

javascriptjqueryhtmlcss

The static files for the icon CSS (404 Error) from Flaticon and Font-mfizz are failing to load properly

When I was designing a website, I needed an icon of Python, so I turned to Flaticon and found what I was looking for. This snippet shows the HTML code I used: {% load static %} <!DOCTYPE html> <html lang="en"> <head> <li ...

javascripthtmlcssdjangoweb

How do I make a div's height equal to 100% of the height of its parent

I am trying to make a button stick to the bottom of a card no matter how much content is on it. I used the Bootstrap class mt-auto, which worked well. However, when I set the height of all divs to 100%, the row in the card body overflows from the lg breakp ...

htmlcssstylesheightbootstrap-5

Design a clickable div element embedded within an interactive article using HTML5

Currently, I am facing an issue with placing clickable div elements inside an article tag in HTML5. The problem is that when I try to click the divs, it registers as a click on the article itself. Below is an example of my code: HTML: <article id=&apo ...

javascriptcsshtml

What is the best way to determine the height of an element after new content has been added through AJAX?

I have been working with a Jquery Mobile page and I am facing an issue when loading a form via AJAX. The plugin I am using to set the page dimensions calculates them after the AJAX call has completed and the layout has been updated. However, the height of ...

javascriptjquerycssajaxheight

Applying CSS borders with circular corners

Can this unique border style be achieved using only CSS? https://i.sstatic.net/wMtbG.png ...

cssborder

Error with displaying icon font within a box in Internet Explorer

Utilizing Wordpress with the UDesign theme has allowed me to incorporate iconfonts on my website within small blue boxes. You can view these icons in action on this page: To achieve this look, I had to customize the CSS by following an online tutorial tha ...

csswordpressicons