CODEWITHSUNDEEP
cssdjangowagtail
Eli O.
Eli O.

Reputation: 2119

Wagtail new installation : CSS not working

I tried the official installation guide for installing wagtail locally :

Each time it seemed to work fine functionally but all the CSS was broken (see pic down)

I tried to do "manage.py collectstatic", it told me that 2/3 hundred files have been copied, I emptied the cache of my browser, loaded the page again, no change.

In the console it seems that the files are sent : [14/Jul/2019 10:16:54] "GET /static/css/welcome_page.css HTTP/1.1" 200 3003

I restarted several times the tutorials from the beginning making sure I do each step exactly as described, nothing changes. When I begin with a new django project, the base django css is working before I add wagtail. I m using Python 3.6.8, Django 2.2.3 and Wagtail 2.5.1. What am I doing wrong ?

Wagtail with broken css

To answer @Dan Swain comment :

Settings.py file :

https://pastebin.com/zZqDesnr Folder structure & wsgi

Upvotes: 1

Views: 1962

Answers (4)

Odiljon Djamalov
Odiljon Djamalov

Reputation: 879

if CSS is not working in admin panel in wagtail. you should check your nginx setup at first. in nginx there are should be such configurations:

location /static/ {
        alias /home/path_to_project/project/staticfiles/;
    }

please give attention, there should be alias not root

Upvotes: 0

Jungle
Jungle

Reputation: 21

I found missing 3 style files by F12 debugging. Copy the style folder to the target folder. From wagtail-master\wagtail\admin\static_src\wagtailadmin\scss to wagtail-master\wagtail\admin\static\wagtailadmin\css. That solve my style error.

Upvotes: 0

Eli O.
Eli O.

Reputation: 2119

Ok so simply my django-wagtail server was serving css but with an incorrect mimetype. My browser received the css but because of the wrong mimetype it didn t apply them

I had to add : 

import mimetypes 
mimetypes.init() 
mimetypes.types_map['.css'] = 'text/css'

To my settings files and everything worked fine

Upvotes: 1

Dan Swain
Dan Swain

Reputation: 3108

One standard Wagtail folder structure includes a settings folder (not just a settings.py file). Inside the settings folder you would find base.py, dev.py, local.py, and production.py. You are using, instead, a plain settings.py file that is at the same level in the directory structure as your wsgi.py. Inside your settings.py you have a BASE_DIR declaration that is typically used in the settings folder setup:

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

I think that your problem will be fixed if you change that line to:

BASE_DIR = os.path.dirname(os.path.abspath(__file__))

Upvotes: 0

Related Questions