Tukukkk

** EDIT ** SOLVED

I'm using bootstrap_admin app for my Django admin page. If you are using bootstrap_admin app for your Django Admin page, this might come in handy for customizing the sidebar.

TLDR:

Sidebar.html doesn't see my custom.css file, only base.css, so I had to add everything to base.css

The long version:

Look below the break to see my original problem.

So essentially, bootstrap admin has a template tag for the sidebar. This sidebar is customized with sidebar.html template, but it's not really a template as I thought; it's actually called into a template using a couple of commands, such as :

{% display_sidebar_menu cl.has_filters as is_displaying_menu %} 

and

{% block sidebar_menu %}

{% render_menu_app_list %}

Because of this, for some reason the sidebar.html file doesn't see my custom.css file, even though it comes after the base.css file link in the base.html head.

Anyway, because of that reason, I found that I had to put my custom classes into the base.css file directly. Fortunately the file is pretty small and easy to maintain, so this isn't a big deal.

Background images are now showing correctly, and I don't have to use any inline styles, which is great.

For those who took the time to comment, thank you for your time. Hopefully my mistake helps someone else in the future.

As the title states.

I've run into an interesting problem. This is related to css background images. I am loading the app names and their models in a sidebar menu, and for some reason the images just won't load.

I added the images in the static folder for the app. The code in the css file is the following:

/* App Buttons and Icons */



#servers_icon {

  background-image: url("/static/bootstrap_admin/img/icon_servers_copy.png") no-repeat;

}



#sensors_icon {

  background-image: url("/static/bootstrap_admin/img/icon_sensors_copy.png") no-repeat;

}

Note the path.

For some reason, django is refusing the load these files. The css file is being loaded and actively used by the app. The ID names are correct. However, the images just will not load.

However, if I put them inline in the HTML file:

<li style="background-image: url('/static/bootstrap_admin/img/icon_{{ app.app_label }}_copy.png'); background-repeat: no-repeat;" {% if app.app_url == current_url %}class="active"{% endif %}>

        <a href="{{ app.app_url }}" class="section" title="Models in the {{ name }} application">

          {{ app.name }}

        </a>

      </li>

Then the images load. Note that the path is the same.

{{app.app_label}} is part of the in-template for loop that populates the menu. The label name and file name matches. In fact, the file name was renamed to match the app label name.

Anyway, I have checked numerous sources and can't seem to find a fix for this. For now, I will keep the style in-line, but I would like to revert back to using the CSS file if possible. I really dislike using inline styling.

Please note that this is development code. I'm honestly stumped here, and I have no idea what to do at this point beyond continuing to use inline styling just to load the icons.