CODEWITHSUNDEEP
cssdjango
Rez
Rez

Reputation: 196

How can I get my css to render correctly in django?

So I'm a newbie and I'm having trouble getting my css to render in Django. I am attempting to create a red notification like in Facebook for my unread messages. But my css isn't rendering. What am I doing wrong here? Here's my code

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
│   │   ├── __pycache__
│   │   ├── activate
│   │   ├── activate.csh
│   │   ├── activate.fish
│   │   ├── django-admin
│   │   ├── django-admin.py
│   │   ├── easy_install
│   │   ├── easy_install-3.7
│   │   ├── pip
│   │   ├── pip3
│   │   ├── pip3.7
│   │   ├── python -> python3
│   │   ├── python3 -> /Library/Frameworks/Python.framework/Versions/3.7/bin/python3
│   │   └── sqlformat
│   ├── include
│   ├── lib
│   │   └── python3.7
│   └── pyvenv.cfg
├── dating_app
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-37.pyc
│   │   ├── admin.cpython-37.pyc
│   │   ├── forms.cpython-37.pyc
│   │   ├── models.cpython-37.pyc
│   │   ├── tests.cpython-37.pyc
│   │   ├── urls.cpython-37.pyc
│   │   └── views.cpython-37.pyc
│   ├── admin.py
│   ├── apps.py
│   ├── chat.html
│   ├── forms.py
│   ├── media
│   │   └── profile_photo
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── 0002_auto_20200410_2231.py
│   │   ├── 0003_auto_20200411_2011.py
│   │   ├── 0004_auto_20200413_1930.py
│   │   ├── 0005_auto_20200413_1946.py
│   │   ├── 0006_auto_20200413_2222.py
│   │   ├── 0007_auto_20200422_1947.py
│   │   ├── 0008_auto_20200425_0039.py
│   │   ├── 0009_auto_20200426_1957.py
│   │   ├── 0010_auto_20200426_2005.py
│   │   ├── 0011_auto_20200426_2005.py
│   │   ├── 0012_auto_20200426_2007.py
│   │   ├── 0013_auto_20200427_1846.py
│   │   ├── 0014_auto_20200503_1947.py
│   │   ├── 0015_auto_20200503_2011.py
│   │   ├── __init__.py
│   │   └── __pycache__
│   ├── models.py
│   ├── static
│   │   └── notification.css
│   ├── tag.py
│   ├── templates
│   │   └── dating_app
│   ├── templatetags
│   │   ├── __init__.py
│   │   ├── __pycache__
│   │   └── unread_messages_counter.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── dating_project
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-37.pyc
│   │   ├── settings.cpython-37.pyc
│   │   ├── urls.cpython-37.pyc
│   │   └── wsgi.cpython-37.pyc
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
└── manage.py

Upvotes: 1

Views: 100

Answers (4)

Rez
Rez

Reputation: 196

so this is what ended up working for me.

I first moved the link to the header area base.html/header

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

I then included everything inside of the hyperlink like so and included the 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>

Upvotes: 0

AzyCrw4282
AzyCrw4282

Reputation: 7744

Given all possible solutions in the comments didn't work, you may try this as your final attempt.

Add

{% load staticfiles %}

to load staticfiles first, and then you can use the static tag. This is mostly used for Django < 2.0 though

Upvotes: 0

ruddra
ruddra

Reputation: 51978

Probably you need to add rel="stylesheet" in your link tag. Like this:

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

Also, make sure your css file is in root of the /DatingAppCustom/dating_app/static folder.

Upvotes: 1

Mubashar Javed
Mubashar Javed

Reputation: 1367

variable name for static should be STATICFILES_DIR not STATICFILES_DIRS. I hope this little typo solve your problem!

Upvotes: 0

Related Questions