Developer server experiencing CSS issues in Django admin interface

Experiencing some odd issues with the Django admin application here. I've got everything up and running on the manage.py runserver development server, but for some reason it looks like this:

This obviously isn't what I want, so I'm trying to figure out how to fix it. I have the staticfiles app enabled, which might be causing the problem, although I can't say for sure. Any insights into what mistakes might have been made?

The admin site appears to be referencing these CSS stylesheets that are not being located:

<link rel="stylesheet" type="text/css" href="/media/css/base.css" />
<link rel="stylesheet" type="text/css" href="/media/css/dashboard.css" />
cssdjangodjango-admin

Answer №1

It appears that you are utilizing the staticfiles contrib package within Django 1.3. In this case, all you require is:

ADMIN_MEDIA_PREFIX = STATIC_URL+'admin/'

Answer №2

Go into your settings.py file and make sure to uncomment the line or add 'django.contrib.staticfiles',. Then, restart the server to apply the changes. Hopefully this resolves the issue.

Answer №3

Your ADMIN_MEDIA_PREFIX may be causing the issue.

Consider updating it to:

ADMIN_MEDIA_PREFIX = "/admin-media/"

Give this a try and see if it resolves the problem.

Additionally, here are three more things to review:

  1. Double check if the admin stylesheets generating 404 errors actually have the correct prefix of /admin-media/.
  2. Ensure that there are no conflicts with your custom URL handlers. For example, check for any instances of url(r'^admin-media/', …) in your main urls.py.
  3. Although rare, consider the possibility of a broken Django installation. Confirm if the .css files exist within 
    …/site-packages/django/contrib/admin/static/admin
    .

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to determine the exact number of pixels being utilized by the body tag when it is set to 100% width?

Currently working on designing a website with a fluid layout. Trying to utilize percentages as measurements in order to achieve this. From my understanding, percentages are calculated based on the parent element. Given that HTML tags do not have a set widt ...

htmlcssfluid-layout

Several Divs Positioned on Different Pages with Backgrounds That "Scroll"

Currently utilizing: jQuery Mobile 1.4.5 I am interested in knowing if it is feasible to achieve the following, and if so, how to start working on it. At the moment, there are 4 page divs that utilize swipe for navigation between them with a horizontal t ...

jquerycssjquery-mobile

Ways to emphasize the currently active tabs on a navigation bar

How can I highlight the active tabs and shift it when clicking on another link? $(function() { $('.nav ul li').on('click', function() { $(this).parent().find('li.active').removeClass('active'); $(this).a ...

jqueryhtmlcss

Firefox not rendering responsive YouTube embed properly

This method of embedding seems to be functioning well on all browsers except for Firefox; I took advantage of a free trial at crossbrowsertesting.com to verify. I’m not using a direct iFrame embed, and all the solutions I’ve come across are related to ...

javascriptcsshtmlfirefoxyoutube

What is the best way to assign an ID to the initial table header in an asp:DataGrid for CSS styling purposes?

I am looking for a way to customize the first element in the table headers row using CSS without relying on :first_child selector. Example Code: <asp:TemplateColumn HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"> <Heade ...

.netasp.nethtmlcssdatagrid

What are some ways to customize the appearance of React Semantic components?

Is there a way to apply CSS for react semantic UI when using create react app? I have installed semantic-ui-react and included the CSS CDN: loginForm.js: import React from "react"; import { Button, Form, Header } from "semantic-ui-react"; import styles f ...

javascriptcssreactjs

Button styles that have been verified will not be shown in Firefox

Hello, first time poster here! Client specifications for CSS: button { border: 1px solid #B8B7B8; border-radius: 8px; height: 4em; margin: 25px 2px 25px 0; text-align: center; text-decoration: none; width: 4em; } button:active, button:che ...

cssfirefoxbutton

What steps should be taken to correct the misalignment of the closing x symbol in the alert box?

After making adjustments to the line height, the closing x mark on the right now aligns closer to the bottom of the alert message box. I am currently utilizing Bootstrap version 5.0.1. Is there a way for me to vertically center the x mark? Thank you. CSS: ...

htmlcsstwitter-bootstrapbootstrap-5

Sending data without the use of jQuery to a Django view is what occurred

I am currently facing an issue with sending data via Ajax, as the variables input_text and rotate always seem to default to empty values (input_text='', rotate=0). When using request.POST['text'], I encounter a 500 error stating that re ...

jquerypythondjango

The alignment of my card icons changes depending on the size of the paragraph

Here are my cards I am attempting to give them a relative position and the parent div an absolute position, but it is not working as expected. Despite several attempts, I still cannot get the desired result of positioning the cards correctly within the p ...

htmlcssreactjsfrontendtailwind-css

Optimizing web content for iOS Safari with min-height media queries

I'm currently working on a Bootstrap-based photo browser that needs to have a responsive 4:3 aspect ratio. To achieve this, I have implemented the following approach: #carousel { width: 320px; height: 240px; ... } Additionally, I utilize media ...

cssios

Celery Error: Unable to Receive Emails via Celery

New to Python Django and Celery, I'm looking to set up Celery locally. Right now, my focus is on configuring error emails for failed tasks. Here's what I've done so far: Added the following code to setting.py CELERY_SEND_TASK_ERROR_EMAILS ...

pythondjangoemailcelery

Incorporate a website design template into your Visual Studio project

I have a website application that I created but it's currently empty. I would like to add some style to it using online free website templates that I downloaded. However, I'm unsure of how to incorporate the css, font, and images folders into the ...

c#cssmodel-view-controllertwitter-bootstrap-3

Utilizing CSS in Angular applications

I am currently working on an Angular 2 application and I am fairly new to Angular. I am facing an issue where my CSS does not seem to be applying properly. There are three key files involved: landing.component.html landing.component.scss landing.compone ...

cssangular

Creating a customized icon scheduling feature with CSS

Creating an icon using CSS that looks like the one below seems to be quite challenging. I attempted to achieve it with this approach, but the result was not satisfactory. https://i.stack.imgur.com/5W7Hj.png .schedule { height: 10px; width ...

htmlcss

Incorporating and designing a side button using jQuery Mobile

I'm working on adding a button to the left side of the screen that is round (but not necessarily) and partially visible, with a visually appealing design. This button will allow users to open a side menu panel. Below is the HTML code for the button: ...

javascripthtmlcssjquery-mobile

An issue has been identified where the checked selection feature is not functioning correctly for CSS selections

Is there a way to change the border color of a label when a checkbox is checked using CSS selectors? Here's an example of what I have tried: label{ width:36px; height:36px; padding:9px; border:1px solid gray; border-radius:36px; } #check ...

htmlcss

Utilizing jQuery to Execute a Function Upon Addition or Removal of Class Names

Currently, I am working on a function that includes a conditional statement to display an alert when a specific class name is removed from a div layer. Below is the code snippet: <div class="ui-tabs-panel ui-tabs-hide">panel</div> <div>& ...

jquerycssfunctionevent-handling

How can I stop the CSS border of an iframe from flickering and what are some solutions to fix it?

I am encountering an issue with my iframe border when using CSS. The problem arises in Chrome where the border disappears upon resizing the page, while Safari changes the size (Firefox appears unaffected) Are there any known workarounds to fix this? co ...

htmlcssgoogle-chromeiframesafari

Customize URL based on selected button

My question may be a bit unclear, but I want to generate dynamic URLs that redirect users to specific pages based on the link clicked. For example: Parent page with links (a, b, c, x, y) User clicks on 'b' User is taken to a Node Page that play ...

javascriptjqueryhtmlcss