Django: Struggling with static files and navigating paths for CSS rendering

Question

Django: Struggling with static files and navigating paths for CSS rendering

Sorry to ask, but I'm struggling with a problem and could use some help:

My project directory has the following structure (there are more directories, but for now let's focus on these):

projectfolder/
   wsgi/
     openshift/
         templates/
             home/
                simple-sidebar.html
     static/
        css/
        fonts/
        js/

The file we need to work on is simple-sidebar.html, here's a snippet of its contents:

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Starter Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="{% static "css/bootstrap.css" %}" rel="stylesheet">

<!-- Add custom CSS here -->
<link href="{% static "css/simple-sidebar.css" %}" rel="stylesheet">
<link href="{% static "font-awesome/css/font-awesome.min.css" %}" rel="stylesheet">

</head>

I can't seem to get my static template tags working, and I think it's because I'm not sure how to configure my static settings in settings.py:

STATIC_ROOT = os.path.join(PROJECT_DIR, '..', 'static')

STATIC_URL = '/static/'

STATICFILES_DIRS = ()    <--- uncertain if I need this?

STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
#'django.contrib.staticfiles.finders.DefaultStorageFinder',
)

By the way, do you have any suggestions on how to handle this without using the {% static %} tag? I'm unsure about how to format my style sheets' href.

html css django django-templates django-staticfiles

Answer 1

Answer №1

To improve the performance of your application, consider eliminating the periods from the STATIC_ROOT declaration. For example:

STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')

If you need to include additional folders in your application, use STATICFILES_DIRS. Running ./manage.py collectstatic will gather all files from these directories and place them in the static folder specified by STATIC_ROOT.

To manually map your files without using the static tag, ensure to provide the full file path like

/some/directory/path/css/style.css

.

Furthermore, when DEBUG = True, remember to add your static and media URLs to urls.py to establish a valid path. Here's an example:

from django.conf import settings

# ... define your regular urlpatterns here

if settings.DEBUG:
    urlpatterns += patterns('',
        (r'^media/(?P<path>.*)$', 'django.views.static.serve', {
        'document_root': settings.MEDIA_ROOT}),
        (r'^static/(?P<path>.*)$', 'django.views.static.serve', {
        'document_root': settings.STATIC_ROOT}))

Answer 2

To improve the performance of your application, consider eliminating the periods from the STATIC_ROOT declaration. For example:

STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')

If you need to include additional folders in your application, use STATICFILES_DIRS. Running ./manage.py collectstatic will gather all files from these directories and place them in the static folder specified by STATIC_ROOT.

To manually map your files without using the static tag, ensure to provide the full file path like

/some/directory/path/css/style.css

.

Furthermore, when DEBUG = True, remember to add your static and media URLs to urls.py to establish a valid path. Here's an example:

from django.conf import settings

# ... define your regular urlpatterns here

if settings.DEBUG:
    urlpatterns += patterns('',
        (r'^media/(?P<path>.*)$', 'django.views.static.serve', {
        'document_root': settings.MEDIA_ROOT}),
        (r'^static/(?P<path>.*)$', 'django.views.static.serve', {
        'document_root': settings.STATIC_ROOT}))

Django: Struggling with static files and navigating paths for CSS rendering

Answer №1

Similar questions

Having difficulty implementing DragControls

Form with missing input fields submits nothing to the server

Pressing "Enter" initiates the submission of the form

Using my function to iterate through all 'li class' elements on an eBay Scraper page

Iterate through an array and update the innerHTML content for each value contained in the array

Populate a database with information collected from a dynamic form submission

The jQuery .each function is malfunctioning specifically on Google Chrome browsers

Attempting to showcase JSON response within an HTML page using JavaScript

Aligning list items with Bootstrap

Issues with the aligning of buttons using the justify-content property

Creating a folder for templates within an app in Django: A step-by-step guide

PHP Multiple Uploads is a feature that allows users to

JavaScript functioning properly in Google Chrome and Firefox but not in Internet Explorer 9

SVG: spin the entire text

Error: Attempting to access the local variable "system" before assigning a value to it

Fade in text effect using jQuery on a Mac computer

Which selector in CSS is applicable for targeting Bootstrap tooltips?

Struggling to apply size in percentage to several images used as a background

Is there a way to adjust the brightness of specific sections within an image using html, css, and js?

When the user clicks, retrieve the contents of list p and showcase them in a div