1

Following this structure:

gallito (Django project folder)
   |_gallito
   |_main_app
             |_static
                     |_main_app
                               |_style.css

   |_static
            |_style2.css
   |_templates (new)
                |_registration
                              |_login.html
                |_base.html

I need/want to have a base template in project root template folder, that extends to my html files inside my main_app (and other apps there will be in the future).

'base.html' extends correclty but it has problems reading the css file inside the static folder in project root: 'style2.css'

In my base.html file inside project root directory static templates folder, I've:

Using this and calling the style sheet from main_app I get my site working:

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

But if I want to call the style sheet from project root static folder, It wont work:

<link href="{% static 'style2.css' %}" rel="stylesheet">

Why?

I've this in my project settings:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/

STATIC_URL = '/static/'

I've read that I also need a STATICFILES_DIRS variable to point to my static files dirs. Any pointer on this?

STATICFILES_DIRS

base.html from root:

{% load staticfiles %}


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">

    <title>Jumbotron Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="jumbotron.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">


    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" rel="stylesheet">

    <link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>


   <link href="{% static 'main_app/style.css' %}" rel="stylesheet">
    <!--<link href="{% static 'style2.css' %}" rel="stylesheet">-->



</head>
Omar Gonzales
  • 3,806
  • 10
  • 56
  • 120

1 Answers1

2

Per the conversation in the comments, I will add that with your current project structure you could change this <link href="{% static 'style2.css' %}" rel="stylesheet"> to this <link href="{% static '../static/style2.css' %}" rel="stylesheet">, since you are referencing static files at the root-level and Django is looking within each app for static files by default. But, I hope you will consider the following:

If you are going to use multiple static file locations, it may be convenient to use the collectstatic approach. There a couple of things you need to do.

First, you need to create a list of locations that your static files live in like so - understanding that Django will search the static/ folder in each project by default when you run the collectstatic command described later, so these locations are for any directories just under the root of each app that are not named static/:

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'one/static_location'),
                    os.path.join(BASE_DIR, 'some_other/static_location')]

You will eventually run a command that will collect of your static files in one location. This is called the static files root. Once you've decided a logical place to put it, you create a variable in your settings.py that registers that like so:

STATIC_ROOT = os.path.join(BASE_DIR, "the_location_you_chose/")

Then, run the command python manage.py collectstatic. You can now just reference the path to the STATIC_ROOT in your template; keeping in mind you may have to go up a directory or two, depending on where said template lives in your project structure.

That's one way to do it anyway. But keep in mind that having Django serve up static files is not a great practice, as the docs describe.

This SO answer may also be worth a read.

Also realize that you will need to run the collectstatic command every time you change a static file or add new ones, since the static root will still contain your old ones.

Hildy
  • 510
  • 5
  • 15
  • ty. Could you use the names of my app not just `one/static_location`or `some_other/static_location`? 2) Should I run `python manage.py collectstatic` before `runserver` evertime I change some file or add new ones? 3) I don't understand how to reference the path to the `STATIC_ROOT`. Could you use my template base.html to explain this, pls- – Omar Gonzales Oct 14 '18 at 03:32
  • Well, you could make things easy on yourself and just name the directory containing the static files in each app `static` and you may not need `STATICFILES_DIRS` at all, because Django already knows to look there. So, if your app was called "AppOne" having a directory like `myProject>AppOne>static` would mean Django and the `collectstatic` command will just find them. What you do then is create each static dir like `AppOne>static>AppOne>css>custom_styles.css`. Then use use it with {{% static 'AppOne/css/custom_styles.css' %}} – Hildy Oct 14 '18 at 03:46
  • But if I'm understanding your diagram correctly, part of your problem may be that you have a directory named `static` at the root level and Django isn't looking there for static directories, it's looking within apps. You could try this to prove that right or wrong: change this `` to this `` – Hildy Oct 14 '18 at 03:50
  • That's exactly what I think the problem is. the last solution you proposed does not solve it. ty. – Omar Gonzales Oct 14 '18 at 03:57
  • Cool. If it were me, I would use that static dir at the root level as my static root and place `style2.css` in a static dir in one of the apps, `collectstatic` and then just reference that in each template. – Hildy Oct 14 '18 at 04:00
  • That's what I had at the beggining and that works. But I was hopping to all the common static files in project root and the particular in static files in each app. I think it's not so easy to acoomplish that. Thank you for your time. – Omar Gonzales Oct 14 '18 at 04:02
  • No problem at all! Please check out this repository: https://bitbucket.org/e_hildy/django-portfolio_site. You will see that I have a root-level static directory that I `collectstatic` to on the server- You will also see some custom rules for the Django Admin within that directory -and you will see the separate static dirs in each app, as discussed. – Hildy Oct 14 '18 at 04:05
  • I added changing the location in your `href` in my answer. If that worked, please upvote, if you found the conversation helpful, and good luck going forward! – Hildy Oct 14 '18 at 04:24