CODEWITHSUNDEEP
cssdjangotwitter-bootstrapdjango-admin
ana
ana

Reputation: 485

Conflicting Bootstrap and admin css in Django

I'm using Bootstrap with Django, as well as css from the admin (for a date widget). My problem is that on the pages where I have the date widget, the admin css overrides the bootstrap css so the whole page looks different. How can I fix that?

base.html

<head>

     {% block extra_head %}
     {% endblock %}

    <link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">

    <link href="{{ STATIC_URL }}bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

</head>

template with date widget

{% extends "base.html" %}
{% load adminmedia %}

{% block extra_head %}

  <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/base.css"/>
  <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/widgets.css"/>

  <script type="text/javascript" src="/admin/jsi18n/"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/core.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/RelatedObjectLookups.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/actions.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/calendar.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/DateTimeShortcuts.js"></script>

  <script type="text/javascript">window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";</script>

{% endblock %}

Upvotes: 2

Views: 1944

Answers (1)

catherine
catherine

Reputation: 22808

Put bootstrap css inside {% block extra_head %}{% endblock %}. Don't worry as long as you didn't call {{block.super}}, bootstrap will not be activated.

<head>
     {% block extra_head %}
     <link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
     <link href="{{ STATIC_URL }}bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
     {% endblock %}
</head>

To activate the bootsrap in other template, just simply put {{block.super}}:

{% extends "base.html" %}

{% block extra_head %}
    {{block.super}}
    //other css here
{% endblock %}

UPDATE:

To override the admin existing css. In your bootstrap css, you must put !important so that it will force your template to follow bootstrap design

Sample:

<p>This red text <strong style="color: red;">should be blue</strong></p>

<style>
   strong { color: blue !important; }
</style>

Upvotes: 0

Related Questions