My django blog isn't detecting the HTML/CSS files i added

Question

Edit 1:

I am building a blog with django and i recently added some html/css files to a template folder but its not loading.

These are my html codes

base.html:

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}{% endblock %}</title>
  <link href="{% static "css/blog.css" %}" rel="stylesheet">
</head>
<body>
  <div id="content">
    {% block content %}
    {% endblock %}
  </div>
  <div id="sidebar">
    <h2>My blog</h2>
      <p>This is my blog.</p>
  </div>
</body>
</html>

list.html

> {% extends "blog/base.html" %}   {% block title %}My Blog{% endblock
> %}   {% block content %}   <h1>My Blog</h1>   {% for post in posts %}
>     <h2>
>       <a href="{{ post.get_absolute_url }}">
>         {{ post.title }}
>       </a>
>     </h2>
>     <p class="date">
>       Published {{ post.publish }} by {{ post.author }}
>     </p>
>     {{ post.body|truncatewords:30|linebreaks }}   {% endfor %} {% endblock %}

i could be wrong but i think the issue might be from the views and urls below

views.py

> from django.shortcuts import render, get_object_or_404 from .models
> import Post
> 
> def post_list(request):   posts = Post.published.all()    return
> render(request,
>                   'blog/post/list.html',
>                   {'posts': posts})
> 
> def post_detail(request, year, month, day, post):     post =
> get_object_or_404(Post, slug=post,
>                               status='published',
>                               publish__year=year,
>                               publish__month=month,
>                               publish__day=day)   return render(request,
>                   'templates/blog/post/detail.html',
>                   {'post': post})

urls.py

> from django.urls import path from . import views
> 
> app_name = 'blog'
> 
> urlpatterns = [   # post views    path('', views.post_list,
> name='post_list'),
>   path('<int:year>/<int:month>/<int:day>/<slug:post>/',
>           views.post_detail,          name='post_detail'), ]

I don't get any error message in particular but this is what comes up on the server powershell:

> [24/Jan/2019 07:55:52] "GET /admin/blog/post/? HTTP/1.1" 302 0
> [24/Jan/2019 07:55:55] "GET /admin/login/?next=/admin/blog/post/
> HTTP/1.1" 200 1839 [24/Jan/2019 07:55:55] "GET
> /static/admin/css/responsive.css HTTP/1.1" 304 0 [24/Jan/2019
> 07:55:55] "GET /static/admin/css/base.css HTTP/1.1" 304 0 [24/Jan/2019
> 07:55:55] "GET /static/admin/css/fonts.css HTTP/1.1" 304 0
> [24/Jan/2019 07:55:55] "GET /static/admin/css/login.css HTTP/1.1" 200
> 1203 [24/Jan/2019 07:55:56] "GET
> /static/admin/fonts/Roboto-Regular-webfont.woff HTTP/1.1" 304 0
> [24/Jan/2019 07:55:57] "GET
> /static/admin/fonts/Roboto-Light-webfont.woff HTTP/1.1" 304 0 Not
> Found: /favicon.ico [24/Jan/2019 07:55:58] "GET /favicon.ico HTTP/1.1"
> 404 2077 [24/Jan/2019 07:56:09] "POST
> /admin/login/?next=/admin/blog/post/ HTTP/1.1" 302 0 [24/Jan/2019
> 07:56:09] "GET /admin/blog/post/ HTTP/1.1" 200 8667 [24/Jan/2019
> 07:56:09] "GET /static/admin/css/changelists.css HTTP/1.1" 304 0
> [24/Jan/2019 07:56:09] "GET /admin/jsi18n/ HTTP/1.1" 200 3185
> [24/Jan/2019 07:56:09] "GET /static/admin/js/urlify.js HTTP/1.1" 304 0
> [24/Jan/2019 07:56:09] "GET /static/admin/js/actions.js HTTP/1.1" 304
> 0 [24/Jan/2019 07:56:09] "GET
> /static/admin/js/admin/RelatedObjectLookups.js HTTP/1.1" 304 0
> [24/Jan/2019 07:56:09] "GET /static/admin/js/vendor/jquery/jquery.js
> HTTP/1.1" 304 0 [24/Jan/2019 07:56:09] "GET /static/admin/js/core.js
> HTTP/1.1" 304 0 [24/Jan/2019 07:56:09] "GET
> /static/admin/js/jquery.init.js HTTP/1.1" 304 0 [24/Jan/2019 07:56:09]
> "GET /static/admin/js/prepopulate.js HTTP/1.1" 304 0 [24/Jan/2019
> 07:56:09] "GET /static/admin/js/vendor/xregexp/xregexp.js HTTP/1.1"
> 304 0 [24/Jan/2019 07:56:09] "GET /static/admin/img/search.svg
> HTTP/1.1" 200 458 [24/Jan/2019 07:56:09] "GET
> /static/admin/img/tooltag-add.svg HTTP/1.1" 304 0 [24/Jan/2019
> 07:56:09] "GET /static/admin/fonts/Roboto-Bold-webfont.woff HTTP/1.1"
> 304 0 [24/Jan/2019 07:56:09] "GET /static/admin/img/sorting-icons.svg
> HTTP/1.1" 200 1097

Edit 2:

This is my css code

blog.css

body { 
    margin:0;
    padding:0;
    font-family:helvetica, sans-serif; 
}

a { 
    color:#00abff;
    text-decoration:none; 
}

h1 { 
    font-weight:normal;
    border-bottom:1px solid #bbb;
    padding:0 0 10px 0;
}

h2 {
    font-weight:normal;
    margin:30px 0 0;
}

#content { 
    float:left;
    width:60%;
    padding:0 0 0 30px; 
}

#sidebar { 
    float:right;
    width:30%;
    padding:10px;
    background:#efefef; 
    height:100%;
}

p.date { 
    color:#ccc;
    font-family: georgia, serif;
    font-size: 12px;
    font-style: italic; 
}

/* pagination */
.pagination { 
    margin:40px 0; 
    font-weight:bold;
}

/* forms */
label { 
    float:left;
    clear:both;
    color:#333;
    margin-bottom:4px; 
}
input, textarea { 
    clear:both;
    float:left;
    margin:0 0 10px;
    background:#ededed;
    border:0;
    padding:6px 10px;
    font-size:12px;
}
input[type=submit] {
    font-weight:bold;
    background:#00abff;
    color:#fff;
    padding:10px 20px;
    font-size:14px;
    text-transform:uppercase; 
}
.errorlist { 
    color:#cc0033;
    float:left;
    clear:both;
    padding-left:10px; 
}

/* comments */
.comment {
    padding:10px;
}
.comment:nth-child(even) {
    background:#efefef;
}
.comment .info {
    font-weight:bold;
    font-size:12px;
    color:#666;
}

Edit 3

I thought it necessary to share my template folder structure, maybe its wrong.

templates/
---------base.html
---------blog/
--------------css/
--------------blog.css
--------------post/
--------------------list.html

settings.py

STATIC_URL = '/static/'

ROOT_URLCONF = 'mysite.urls'

Edit 4

Folder structure as @ now:

static/
------css/
----------blog.css

templates/
---------base.html
---------blog/
--------------css/
--------------blog.css
--------------post/
--------------------list.html

Edit 5

Folder structure updated:

static/
------css/
----------blog.css

templates/
---------base.html
---------blog/
--------------post/
--------------------list.html

the error message isnt something in particular... this what i get:

[24/Jan/2019 10:58:11] "GET /admin/blog/ HTTP/1.1" 200 2415
[24/Jan/2019 10:58:13] "GET /admin/blog/post/ HTTP/1.1" 200 8667
[24/Jan/2019 10:58:13] "GET /admin/jsi18n/ HTTP/1.1" 200 3185
[24/Jan/2019 10:59:06] "GET /admin/blog/ HTTP/1.1" 200 2415
[24/Jan/2019 10:59:15] "GET /admin/blog/post/ HTTP/1.1" 200 8667
[24/Jan/2019 10:59:15] "GET /admin/jsi18n/ HTTP/1.1" 200 3185
[24/Jan/2019 10:59:52] "GET /admin/blog/post/2/change/ HTTP/1.1" 200 7654
[24/Jan/2019 10:59:52] "GET /admin/jsi18n/ HTTP/1.1" 200 3185
[24/Jan/2019 10:59:55] "GET /admin/blog/post/ HTTP/1.1" 200 8667
[24/Jan/2019 11:00:08] "GET /admin/blog/ HTTP/1.1" 200 2415
[24/Jan/2019 11:00:22] "GET /admin/blog/post/ HTTP/1.1" 200 8667
[24/Jan/2019 11:00:22] "GET /admin/jsi18n/ HTTP/1.1" 200 3185

page source:

<!DOCTYPE html>

<html lang="en-us" >
<head>
<title>Select post to change | Django site admin</title>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css">

  
  <link rel="stylesheet" type="text/css" href="/static/admin/css/changelists.css">
  
  
    <script type="text/javascript" src="/admin/jsi18n/"></script>
  
  
  




<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.js"></script>


    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/admin/css/responsive.css">
    

<meta name="robots" content="NONE,NOARCHIVE">
</head>


<body class=" app-blog model-post change-list"
  data-admin-utc-offset="0">

<!-- Container -->
<div id="container">

    
    <!-- Header -->
    <div id="header">
        <div id="branding">
        
<h1 id="site-name"><a href="/admin/">Django administration</a></h1>

        </div>
        
        
        <div id="user-tools">
            
                Welcome,
                <strong>chineduokolie</strong>.
            
            
                
                    <a href="/">View site</a> /
                
                
                    
                    
                
                
                <a href="/admin/password_change/">Change password</a> /
                
                <a href="/admin/logout/">Log out</a>
            
        </div>
        
        
        
    </div>
    <!-- END Header -->
    
<div class="breadcrumbs">
<a href="/admin/">Home</a>
&rsaquo; <a href="/admin/blog/">Blog</a>
&rsaquo; Posts
</div>

    

    
        
    

    <!-- Content -->
    <div id="content" class="flex">
        
        <h1>Select post to change</h1>
        
  <div id="content-main">
    
        <ul class="object-tools">
          
            


  
  <li>
    
    <a href="/admin/blog/post/add/" class="addlink">
      Add post
    </a>
  </li>
  


          
        </ul>
    
    
    <div class="module filtered" id="changelist">
      

<div id="toolbar"><form id="changelist-search" method="get">
<div><!-- DIV needed for valid HTML -->
<label for="searchbar"><img src="/static/admin/img/search.svg" alt="Search"></label>
<input type="text" size="40" name="q" value="" id="searchbar" autofocus>
<input type="submit" value="Search">


</div>
</form></div>


      
<div class="xfull">
<ul class="toplinks">


<li class="date-back"><a href="?publish__year=2019">&lsaquo; 2019</a></li>



<li> <a href="?publish__day=17&amp;publish__month=1&amp;publish__year=2019">January 17</a></li>

<li> <a href="?publish__day=22&amp;publish__month=1&amp;publish__year=2019">January 22</a></li>



</ul><br class="clear">
</div>



      
        
          <div id="changelist-filter">
            <h2>Filter</h2>
            
<h3> By status </h3>
<ul>

    <li class="selected">
    <a href="?" title="All">All</a></li>

    <li>
    <a href="?status__exact=draft" title="Draft">Draft</a></li>

    <li>
    <a href="?status__exact=published" title="Published">Published</a></li>

</ul>

<h3> By created </h3>
<ul>

    <li class="selected">
    <a href="?" title="Any date">Any date</a></li>

    <li>
    <a href="?created__gte=2019-01-24+00%3A00%3A00%2B00%3A00&amp;created__lt=2019-01-25+00%3A00%3A00%2B00%3A00" title="Today">Today</a></li>

    <li>
    <a href="?created__gte=2019-01-17+00%3A00%3A00%2B00%3A00&amp;created__lt=2019-01-25+00%3A00%3A00%2B00%3A00" title="Past 7 days">Past 7 days</a></li>

    <li>
    <a href="?created__gte=2019-01-01+00%3A00%3A00%2B00%3A00&amp;created__lt=2019-02-01+00%3A00%3A00%2B00%3A00" title="This month">This month</a></li>

    <li>
    <a href="?created__gte=2019-01-01+00%3A00%3A00%2B00%3A00&amp;created__lt=2020-01-01+00%3A00%3A00%2B00%3A00" title="This year">This year</a></li>

</ul>

<h3> By publish </h3>
<ul>

    <li class="selected">
    <a href="?" title="Any date">Any date</a></li>

    <li>
    <a href="?publish__gte=2019-01-24+00%3A00%3A00%2B00%3A00&amp;publish__lt=2019-01-25+00%3A00%3A00%2B00%3A00" title="Today">Today</a></li>

    <li>
    <a href="?publish__gte=2019-01-17+00%3A00%3A00%2B00%3A00&amp;publish__lt=2019-01-25+00%3A00%3A00%2B00%3A00" title="Past 7 days">Past 7 days</a></li>

    <li>
    <a href="?publish__gte=2019-01-01+00%3A00%3A00%2B00%3A00&amp;publish__lt=2019-02-01+00%3A00%3A00%2B00%3A00" title="This month">This month</a></li>

    <li>
    <a href="?publish__gte=2019-01-01+00%3A00%3A00%2B00%3A00&amp;publish__lt=2020-01-01+00%3A00%3A00%2B00%3A00" title="This year">This year</a></li>

</ul>

          </div>
        
      

      <form id="changelist-form" method="post" novalidate><input type="hidden" name="csrfmiddlewaretoken" value="Ah8O1BwJCNgiFNPzwDvVizdYt28ZcfFGJDUqj3agBtVIEBMGZxnljeRhS6z1Gydz">
      

      
          
<div class="actions">
  
    
    <label>Action: <select name="action" required>
  <option value="" selected>---------</option>

  <option value="delete_selected">Delete selected posts</option>

</select></label><input type="hidden" name="select_across" value="0" class="select-across">
    
    
    <button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button>
    
    
    
        <span class="action-counter" data-actions-icnt="2">0 of 2 selected</span>
        
    
    
  
</div>

          


<div class="results">
<table id="result_list">
<thead>
<tr>

<th scope="col"  class="action-checkbox-column">
   
   <div class="text"><span><input type="checkbox" id="action-toggle"></span></div>
   <div class="clear"></div>
</th>
<th scope="col"  class="sortable column-title">
   
     
   
   <div class="text"><a href="?o=1.5.4">Title</a></div>
   <div class="clear"></div>
</th>
<th scope="col"  class="sortable column-slug">
   
     
   
   <div class="text"><a href="?o=2.5.4">Slug</a></div>
   <div class="clear"></div>
</th>
<th scope="col"  class="sortable column-author">
   
     
   
   <div class="text"><a href="?o=3.5.4">Author</a></div>
   <div class="clear"></div>
</th>
<th scope="col"  class="sortable column-publish sorted ascending">
   
     
       <div class="sortoptions">
         <a class="sortremove" href="?o=5" title="Remove from sorting"></a>
         <span class="sortpriority" title="Sorting priority: 2">2</span>
         <a href="?o=5.-4" class="toggle ascending" title="Toggle sorting"></a>
       </div>
     
   
   <div class="text"><a href="?o=-4.5">Publish</a></div>
   <div class="clear"></div>
</th>
<th scope="col"  class="sortable column-status sorted ascending">
   
     
       <div class="sortoptions">
         <a class="sortremove" href="?o=4" title="Remove from sorting"></a>
         <span class="sortpriority" title="Sorting priority: 1">1</span>
         <a href="?o=-5.4" class="toggle ascending" title="Toggle sorting"></a>
       </div>
     
   
   <div class="text"><a href="?o=-5.4">Status</a></div>
   <div class="clear"></div>
</th>
</tr>
</thead>
<tbody>


<tr class="row1"><td class="action-checkbox"><input type="checkbox" name="_selected_action" value="2" class="action-select"></td><th class="field-title"><a href="/admin/blog/post/2/change/">my post</a></th><td class="field-slug">new_blog</td><td class="field-author nowrap">chineduokolie</td><td class="field-publish nowrap">Jan. 17, 2019, 4:44 p.m.</td><td class="field-status">Draft</td></tr>


<tr class="row2"><td class="action-checkbox"><input type="checkbox" name="_selected_action" value="3" class="action-select"></td><th class="field-title"><a href="/admin/blog/post/3/change/">hello</a></th><td class="field-slug">hello</td><td class="field-author nowrap">chineduokolie</td><td class="field-publish nowrap">Jan. 22, 2019, 5:01 p.m.</td><td class="field-status">Draft</td></tr>

</tbody>
</table>
</div>


          
      
      

<p class="paginator">

2 posts


</p>

      </form>
    </div>
  </div>

        
        <br class="clear">
    </div>
    <!-- END Content -->

    <div id="footer"></div>
</div>
<!-- END Container -->

</body>
</html>

@ChardonnaySt.Patrick Are there any console errors in the browser. If no share page source. — Atley Varghese, Jan 24 '19 at 09:57
@AtleyVarghese i have updated in edit 5, the arent really any console errors — Chardonnay St. Patrick, Jan 24 '19 at 10:08
@ChardonnaySt.Patrick, the source seems to of django admin, do you want to add styles to django admin? — Atley Varghese, Jan 24 '19 at 10:14
@AtleyVarghese yes, i do. and the html files i already added arent coming up — Chardonnay St. Patrick, Jan 24 '19 at 10:50

score 1 · Answer 1 · answered Jan 24 '19 at 07:58

1

in your base.html

change this line

<link href="{% static "css/blog.css" %}" rel="stylesheet">

to

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

answered Jan 24 '19 at 07:58

Exprator

26,992
6
47
59

can you show your directory structure and also the settings.py where you have written the static root and url – Exprator Jan 24 '19 at 08:14
create a folder where you have the templates folder called static and then post the whole css you have inside blog inside that static folder – Exprator Jan 24 '19 at 09:05
@ exprator i have just modified that and nothing changed. – Chardonnay St. Patrick Jan 24 '19 at 09:28
what is the folder structure now, can you show that – Exprator Jan 24 '19 at 09:45
you need to remove the css folder from the templates directory – Exprator Jan 24 '19 at 09:54

score 1 · Answer 2 · answered Jan 24 '19 at 17:14

Here are a couple of things you could try:

Clear your browser cache, or use a private browser (e.g. Chrome Incognito).
Add a version number to your css file (e.g. css/blog1.css), and reflect these changes in your base.html file. Observe if the changes have been registered on the server when you fetch the css file, like this: GET response for new version of CSS file
Ideally, you should point your web server to a single folder STATIC_ROOT to allow static files to be served from a single location. The official documentation provides a good explanation on how to set this up, and this link describes the purpose of collectstatic rather succintly. After setting up STATIC_ROOT, remove stale static files using: python manage.py collectstatic --noinput --clear. Finally, run your server again: python manage.py runserver

Thank you, my issue was just a problem with the browser cache. — jimmy, Apr 04 '23 at 00:04

score 0 · Answer 3 · answered Jan 24 '19 at 17:55

0

class MyModelAdmin(admin.ModelAdmin):
class Media:
    js = ('js/admin/my_own_admin.js',)    
    css = {
         'all': ('css/admin/my_own_admin.css',)
    }

Also refer to this question: Overriding admin css in django

answered Jan 24 '19 at 17:55

Atley Varghese

576
4
10

My django blog isn't detecting the HTML/CSS files i added

3 Answers3