Wagtail CMS: Adding custom CSS and JavaScript to Your Admin area

Customizing the styling and adding some additional JavaScript functionality to your Wagtail CMS Admin (backend) is often a good idea for user experience and a higher perceived value for clients. In this tutorial I'll show you how to add a custom .css and .js file to your /admin/ area using Wagtail Hooks so you can give your clients a truly customized experience.
Tutorial: learnwagtail.com/tutorials/ad...
Git Commit: github.com/CodingForEverybody...
Learn Wagtail from scratch with the official Wagtail for Beginners Course
learnwagtail.com/wagtail-for-...
Used in this video: Wagtail 2.4, Python 3.7, Django 2.1.5
Outro Template made by Grabster - / grabstertv
#Wagtail #Django #Python

[@werewolf6031]

Thank you so much for this seires. I have been using your videos to learn wagtail while working on this website for work. I had no Django or Wagtail exp and by far your content has saved my life.

[@JakeJLivingston]

Looks like django.contrib.staticfiles.templatetags.staticfiles is no longer a thing. If anyone sees an error, that library got moved. It's now at django.templatetags.static

[@CodingForEverybody]

Good to note! Is this for the Django 3.0 update?

[@redditcamp543]

Thank you, was hoping to find it in comments :P

[@dannyisrael]

thank you :)

[@uenmedia4528]

Hello, Thanks for the awesome wagtail tutorials. Could you please cover multilingual websites on wagtail too?

[@CodingForEverybody]

Multilingual is on my list of videos to make!

[@gimmzy]

How about searching? Would be cool.

[@hazhohuman]

Hi kalob, thanks for your efforts, but I need to add a form of text_area in Dashboard as a snippet, in order to add a custom CSS to the DB and get it's value into the template directly after all other static css links, kindly explain or make a video, thanks in advance

[@CodingForEverybody]

This should help: learnwagtail.com/tutorials/adding-global-site-settings-your-wagtail-website/

[@oussamaladhari550]

we can not use any existing app to add the wagtail_hooks file? do we have to create a new app for that purpose only? and have to be named core?

[@CodingForEverybody]

Yes you can use any existing app as long as its enabled in your INSTALLED_APPS. You don't need a new app and it does not need to be called `core`. Wagtail will look for `wagtail_hooks.py` automatically though so make sure you name it that file, and put it in any app.

[@oussamaladhari550]

@@CodingForEverybody thank you very much, for your great tutorials and fast reply! actually, I tried it and it worked as you said ! again thank you for all your efforts

[@CodingForEverybody]

@@oussamaladhari550 Glad I could help :)

[@magdagaj]

@@CodingForEverybody is there a way to rename wagtail_hooks.py file? I would like to keep it inside the app with wagtail hooks for the editor. Is it possible?

[@helderandrade1476]

Hii, it is possible to change wagtail's logo on the side nav?

[@CodingForEverybody]

Yes, it absolutely is! You'll need to create a new template file and save it as templates/watailadmin/home/base.html. Then add this code to it: ``` {% extends "wagtailadmin/base.html" %} {% load staticfiles %} {% block branding_logo %} ... your image or svg goes here :) {% endblock branding_logo %} ```

[@helderandrade1476]

@@CodingForEverybody Thnx man! rlly apreciate it! learning a lot from you :D

[@dannyisrael]

@@CodingForEverybody wow thank you

[@victortang9834]

do you know how to customize Richtext image formats ?

[@CodingForEverybody]

You can unassign the full/left/right richtext image options and create new ones. You'll need de-register the old ones and register the new ones.

[@victortang9834]

@@CodingForEverybody hey Thanks for your reply, your videos really helped a lot, actually I did as you said and it works, but what is the next step? How to hook the css to the recreated format, is it the same method as you mentioned in this video?

[@ZKITPO]

"from django.contrib.staticfiles.templatetags.staticfiles import static" got deprecated. The newer version: from django.templatetags.static import static