What steps should I take to ensure proper rendering of CSS in Django?

Hey there! I'm new to Django and I'm struggling to get my css to display properly. I'm trying to create a red notification, similar to Facebook, for my unread messages. But for some reason, my css isn't rendering. Can anyone point out what I might be doing wrong? Here's the code snippet:

settings.py/Static_Dir

STATIC_URL = '/static/'
STATICFILES_DIRS = [
"/DatingAppCustom/dating_app/static",
]

notification.css

.btn {
width:100px;
position:relative;
line-height:50px;
}

.notification {
    position:absolute;
    right:-7px;
    top:-7px;
    background-color:red;
    line-height:20px;
    width:20px;
    height:20px;
    border-radius:10px;
}

base.html/notification section

<link href="{% static 'notification.css' %}">
            <button class="btn">message counter
                <div class="notification">{% unread_messages request.user %}</div>
            </button>

EDIT, adding directory path

.
├── 11_env
│   ├── bin
│   ├── include
│   ├── lib
│   └── pyvenv.cfg
├── dating_app
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── migrations
│   ├── models.py
│   ├── static
│   ├── tag.py
│   ├── templates
│   ├── templatetags
│   ├── tests.py
│   ├── urls.py
│   ├── views.py
├── dating_project
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
├── db.sqlite3
└── manage.py

Answer №1

To solve the issue, be sure to include rel="stylesheet" in your link tag. For example:

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

Additionally, confirm that your css file is located in the root of the

/DatingAppCustom/dating_app/static
directory.

Answer №2

In order to resolve the issue, make sure the variable name for static is correctly set to STATICFILES_DIR instead of STATICFILES_DIRS. This minor typo should fix the problem for you!

Answer №3

If none of the suggested solutions in the comments have worked for you, consider giving this a final shot:

Include

{% load staticfiles %}

at the beginning to load staticfiles first, allowing you to utilize the static tag. This technique is commonly employed for Django versions prior to 2.0.

Answer №4

After some trial and error, I finally found a solution that worked for me.

Initially, I decided to move the link to the header section in base.html/header

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

Next, I included all the necessary content within the hyperlink and added a link to my inbox.

base.html/message_notifier

<li>
    <a ref="stylesheet" href="{% url 'dating_app:conversations' user.id %}" type="text/css" class="notification">
        <span>Inbox</span>
        <span class="badge">{% unread_messages request.user %}</span>
    </a>
</li>

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

what is the best way to position a glyphicon next to a form?

Forgive me for asking such a basic question, but I struggle with aligning and positioning elements. Here is my issue: https://i.sstatic.net/Uy6XB.jpg https://i.sstatic.net/TTs6V.jpg All I want is for the glyphicon to be displayed next to the textfield, ...

What is preventing my CSS variables from functioning in my Vue component that is utilizing SASS?

Currently, I am working with sass and vue version-3. Within one of my components, the following code is present: HelloWorld.vue : <template> <div class="greetings"> <h1>{{ msg }}</h1> <h3> You’ve succe ...

In every browser except for Safari on iPad, a white X is displayed in the grey box. I'm wondering if the error lies with me or with Safari

When using Safari on my iPad, I noticed that the white X appears on the right-hand side of the black screen. Since this is the only version of Safari that I have, I am unsure if this issue is specific to iPads, Safaris, or just my device. Visit this link ...

The issue with color swapping in Internet Explorer is not functioning correctly due to

I am facing an issue with a jQuery script that I have created to change the background colors of rows in a large table. Unfortunately, it seems to be malfunctioning on Internet Explorer versions 6 through 9. Below is the snippet of code I am using: <s ...

Error in Django and Selenium: Missing a required positional argument 'cls' in setUpClass() function

I am currently exploring Django v2 with Selenium and encountered the following error: ====================================================================== ERROR: setUpClass (level.tests.LevelListViewTest) ---------------------------------------------- ...

Expanding a wrapper to fit the entire width of its content

I am facing an issue where the background color of a wrapper does not adjust to the overflowing content within it. How can I make sure that the background stretches behind all the content, regardless of its size? <div style="background-color: black;m ...

What is the best way to increase the height of an image in a grid container beyond the height of

I am currently designing a grid layout to showcase recent articles. Each article includes an image and a brief description. My goal is to have the image taller than the content text block, while ensuring responsiveness across various screen sizes. Below i ...

The jQuery tooltip fails to function properly after the AJAX content is loaded

I have been using a tooltip script that can be found at: This is the script I am using, with a few modifications: $(document).ready(function() { $("body").on("mouseover", ".tip_trigger", function(){ tip = $(this).find('.tip&apos ...

Unable to render images on Django 3.0 template due to display issues

In the models.py file, I have a model called Book. A view has been created based on this model to display images as products. These books (products) are then rendered on the shop.html template. The issue I'm facing is that I can't access the cove ...

Issue with embedding icon within input field in Bootstrap version 4.1

I am currently implementing a project using Angular 6 along with the latest version of Bootstrap v4.1. I am attempting to create a reactive form with icons within input fields. As there is no direct way in bootstrap to place icons on the left side of input ...

Enhancing the Django User Model: Implement additional functionality during save operation

Working with Django 1.6.11, I am looking to enhance the functionality when a User Model is modified on the Django admin site. Currently, my approach in admin.py is as follows: from django.contrib.auth.models import User class UserAdmin(admin.ModelAdmin): ...

How can I modify the TextField's borderBottom style to be 'none' when it is disabled?

While working within a data cell, I encountered an issue with stacking text. To workaround this obstacle, I opted to create a text field, assign it a value and helper text, disable the field, and change the text color to black when disabled. My current cha ...

Transform the infoBox into a jQuery dialog modal window

In this section, I have integrated a map with markers and infoBoxes. My goal now is to replace the infoBoxes with jquery dialog() and modal window functionalities. How can I achieve this effectively? Below is the code snippet that includes the implementat ...

Challenges arising from the use of 'position: absolute' in managing relationships between grandparents, parents, and children

Within my React project, all code is enclosed within the root div (grandparent). In my Project.js component, there is a separate div (parent) solely responsible for the background color. This component is then displayed in App.js without any additional d ...

Aligning Checkbox Labels for Web Forms

Can an image convey more than a thousand words? I'm looking to align the second (and following) lines with the first one. Any suggestions? Html stands for <input><span>text</span> ...

browsersync fails to refresh when alterations are made in the .css files

Why is browsersync not injecting the css correctly? Here is my code: const gulp = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), browserSync = require('browser-sync ...

To close the responsive menu, simply click anywhere outside of the navigation bar

My issue involves a responsive menu with Bootstrap. On desktop, the menu closes fine; however, on the responsive view, I want it to close when clicking outside of the nav menu in any area. Here is my navigation code: <!-- Navigation --> <nav id= ...

Tips for resolving div overlap issues when utilizing a customized div within a container-fluid layout (Bootstrap)

As a newcomer to HTML, CSS, and Bootstrap, I encountered an issue with overlapping divs when resizing the screen to be smaller. The problem arose when using container-fluid as a section and implementing a customized div for the section header. Despite atte ...

Is there a way to position text to the right of an image?

Looking for some help with aligning text to the right of an image within a hyperlink. I want the hyperlink to fill the rectangle and achieve a specific layout similar to attachment1, but currently getting something different like attachment2. If anyone ha ...

How to conceal the day picker in jQuery UI datepicker

I am facing a problem that has been addressed before. As someone with only basic knowledge of CSS, I am a bit confused here. I have two datepickers in my code. <style> .ui-datepicker-calendar { display: none; } </style> Unfortunately, ...