Issue with importing style.css file in Django 1.9

I've been struggling to get my page to load the style.css file correctly.
I made sure to add the path for STATICFILES_DIRS as shown below,

STATIC_URL = '/static/'

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

STATIC_ROOT = os.path.join(BASE_DIR, "static_cdn")

index.html
{% load staticfiles %}
`<link rel='stylesheet' href='{% static "css/style.css" %}' type='text/css'>`

After running collectstatic, it collected the style.css successfully.

However, when I inspect the element and try to open a link to style.css

(http://127.0.0.1:8000/static/css/style.css)
, it shows a message saying not found.

I even attempted to hard-code the path to style.css without any success.

In a separate project, I followed the same steps and the style.css loaded perfectly fine, opening the link displays the CSS code.

I am at a loss here. Any help would be greatly appreciated.

Edit

setting.py template settings:

TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [],
    'APP_DIRS': True,
    'OPTIONS': {
        'context_processors': [
            'django.template.context_processors.debug',
            'django.template.context_processors.request',
            'django.contrib.auth.context_processors.auth',
            'django.contrib.messages.context_processors.messages',
        ],
    },
},

Directory structure:

 |myproject
  |----- MyApp/
  |---- myProject/
  |---- static/ 
  |---- static_cdn/
  |----manage.py

https://github.com/prafullarkamble/UnableToLoadStyle.css/

Answer №1

As far as I recall, the collectstatic command is typically used for production purposes only. This means that the collected static files should not impact your development environment.

In your project setup, the path to the style.css file is located at:

Salmon/static/Salmon/style.css.

Therefore, you can access the file using the following URL:

http://127.0.0.1:8000/static/Salmon/style.css

This URL should be equivalent to {% static "Salmon/style.css" %} in your template.

Answer №2

1) Start by choosing the folder(s) from which you wish to gather the static assets:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "starting_point_for_collection"),
    ... add another directory here
]

2) Specify the folder where you would like the static assets to be stored:

STATIC_ROOT = os.path.join(BASE_DIR, "destination_for_static_assets")

3) Execute the command python manage.py collectstatic

Please Note:

You have the flexibility to include any path in the STATICFILES_DIRS list, even absolute paths. The collected static files will be placed in your specified STATIC_ROOT directory.

STATICFILES_DIRS = [
    '/var/www/assets/bootstrap/'
    ...
]

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

Troubleshooting Issue: ASP.NET UpdatePanel Not Responding to jQuery

I am having difficulties invoking jQuery functions within an "asp:UpdatePanel". Despite the code provided below, my attempts to add a class to the div element ".popup-body" are unsuccessful. Interestingly, the "alert();" function works without any issues. ...

Issues with Twitter Bootstrap Tabs not functioning correctly on Ruby on Rails with HAML

I am facing an issue with twitter bootstrap tabs in my (HAML) ruby on rails project. Although the tabs are appearing, the content does not change when I click on different tabs. Additionally, some unexpected statements are showing up at the bottom of the f ...

Step-by-step guide for setting up a Python-Django project in Atom

Help! I'm having trouble setting up a Django Python project in Atom Error message: django-admin is not recognized See attached screenshot: ...

Python: Utilizing HTML User Input to Search Database

I am currently working on a project that involves searching a database using HTML. Here is the code snippet I am using: <form action="/question/search" method="POST"> <input id="search" type="text" placeholder="Search.." name="s ...

Retrieve the primary field name for a Django model

Within the Django framework, each model is equipped with a virtual attribute called pk, which references the designated primary key field. class TestModel(models.Model): payload = models.Charfield(max_length=200) In the example above, the pk attribut ...

Show a picture outside of the dropdown container

I'm currently navigating the world of web development and I'm facing a challenge with getting an image to display outside of a dropdown div. Despite numerous attempts at setting the image's position to relative, with overflow-visible, I have ...

Update the href attribute when a button is clicked

Note: The buttons in the corner will not be submitting the search. The go button would still need to be clicked to submit it. Currently, I am working on a fun project during my free time at work. This project is not meant to be anything serious, but rathe ...

What is the most effective method for establishing functions in AngularJS?

Hey there, I'm currently working on a function in AngularJS and I'm not sure what the best practice is for defining methods. Any suggestions would be greatly appreciated. Option 1: var getBranchKey = function(currentBranchName) { }; Option 2: ...

Choose a table by using jQuery excluding the data in the first column

Does anyone know how to extract data from an HTML table using jQuery? In my specific case, I need to retrieve the table contents without including the first column. This is because I want to export the table to an Excel file, but the first column contains ...

Utilizing Google Maps API version 3 to display various groups of markers

I am encountering an issue while trying to plot fixed markers and a user position marker on a Google Map. I want to use different images for these markers, but something strange is happening. When the page loads, all fixed markers show up correctly initial ...

Executing a PHP script to initiate a ping transmission

I have a project to complete for my university involving the development of a simple application. However, I lack experience in this area and am unsure how to proceed. The objective is straightforward: I want to send ping requests to 50 IP addresses at t ...

Is it possible to include both a search value and a hash in a URL?

I have created an URL ROUTER using hash (for example, #User.Account) Now I want to include a search value in it as well (e.g. #/User.Account?id=729) How can I achieve this? This is how my router currently functions: if(window.location.hash == "#U ...

The page's layout becomes disrupted when the back end is activated, requiring some time to realign all controls

I recently set up a website and I am facing an issue where certain pages shake uncontrollably when buttons are clicked. The problematic page can be found at the following link: Specifically, when trying to click on the "SEND OFFER" button, the entire pag ...

Left-aligned border below titles that are centered

Is there a way to add a small border under a title tag using CSS? I found a solution using :after, but I'm encountering an issue when trying to center the title. h1:after{ content: ''; display: block; height: 4px; width: 60px; mar ...

Centering text within a dynamic div can help create a visually appealing design

While browsing through various forums, I noticed several questions on stackoverflow that touch upon a similar issue to mine. However, my particular problem is a bit unique, and despite my best efforts, I have not been able to find a solution yet. It's ...

Placing a FontAwesome icon alongside the navigation bar on the same line

Upon login, the navigation bar experiences display issues. Prior to logging in: https://i.stack.imgur.com/ZKyGe.jpg Following successful login: https://i.stack.imgur.com/zyP3m.jpg An obstacle I'm facing involves the Log Out fontawesome icon wrappi ...

Regex for updating all script src attributes

Looking to update my Django code by utilizing the {% static 'path/to/file' %} tag. I believe that using PyCharm's "Replace in path" feature with regex option may help with this task. Currently, my script tags appear as follows: <script t ...

Loading images in advance before webpage loads

Welcome friends! This is my first time asking a question here, so I hope I'm doing it right :) I'm looking to preload 3 images before the webpage fully loads so that they all appear simultaneously. Currently, the images load one after another and ...

Issue with mix-blend-mode causing text to not show up on top of the gradient

I am struggling to find a way to make text easily readable over my gradient background. Despite trying to use MUI's Typography or a simple <p>, the contrast isn't great as the text appears in black. After some research, I discovered that I ...