Django Admin Custom page layout

Django admin custom global values for default templates

By default, the Django admin is configured as part of a Django project's urls.py file, as shown in the following snippet:

from django.conf.urls import url

from django.contrib import admin

urlpatterns = [

    url(r'^admin/', admin.site.urls),

]

While admin.site.urls -- from the django.contrib package -- lets you set up the Django admin on the /admin/ url, the same django.contrib.admin.site object also allows you to customize certain values used by all Django admin pages

Listing 11-22. Django admin django.contrib.admin.site object to customize fields

from django.conf.urls import url

from django.contrib import admin

admin.site.site_header = 'Coffeehouse admin'

admin.site.site_title = 'Coffeehouse admin'

admin.site.site_url = 'http://coffeehouse.com/'

admin.site.index_title = 'Coffeehouse administration'

admin.empty_value_display = '**Empty**'

urlpatterns = [

    url(r'^admin/', admin.site.urls),

]

Django admin custom static resources

f you customize the Django admin admin/base.html template in your project with custom CSS or JavaScript files, these static resources take effect on every Django admin page. While this can be a desired effect in certain circumstances, in other cases, it can be necessary to only apply custom static resources to certain Django admin pages.

Django admin classes support the Media class to define both CSS and JavaScript files and include them on all pages associated with a given Django admin class. The advantage of using the Media class on a Django admin class, is that you don't need to deal with templates or HTML markup, with the Django admin automatically loading the static resources as part of every admin page linked to an admin class. 

from django.contrib import admin

from coffeehouse.items.models Item

class ItemAdmin(admin.ModelAdmin):

      list_per_page = 5

      class Media:

            css = {

                "screen": ("css/items/items.css",)

            }

            js = ("js/items/items.js",)

admin.site.register(Item, ItemAdmin)

As you can see in listing 11-23, the Media class supports the css and js fields to declare both CSS and JavaScript static files,respectively. In the case of css, listing 11-23 declares a dictionary, where the key corresponds to the CSS media type and the value is a tuple with a CSS file. For the case of js, listing 11-23 declares a tuple pointing to a JavaScript file. All files declared as part of a Media class are automatically searched for in Django's static file directory paths -- as described in Chapter 5.

The final outcome of listing 11-23 is that all Django admin pages associated with the ItemAdmin admin class (e.g. index.html, change_list.html, change_form.html) will include an additional CSS import statement (e.g. <link href="/static/css/items/items.css" type="text/css" media="screen" rel="stylesheet" />), as well as an additional JavaScript import statement (e.g. <script type="text/javascript" src="/static/js/items/items.js"></script>).

It's worth pointing out that while you can include any 3rd party CSS or JavaScript library in a Django admin page (e.g. Bootstrap, D3), Django admin pages already include the popular jQuery 2.2 library under the django.jQuery namespace to fulfill certain functionalities. The Django admin uses a jQuery namespace, to let you import any other jQuery library version in Django admin pages without fear of conflict. If you want to leverage the included Django admin jQuery library for your own custom JavaScript, you must wrap your JavaScript logic in this namespace, as illustrated in the following snippet:

(function($) {

    // Custom JavaScript logic leveraging the Django admin built-in jQuery libray  

    $(document).ready(function() {

        $('.deletelink').on('click',function() {

            if( !confirm('Are you sure you want to delete this record ?')) {

                return false;

            }

        });

    });

})(django.jQuery); // <-- Note wrapping namespace

References:

https://www.webforefront.com/django/admincustomlayout.html