Categories

JavaScriptPHPHTMLCssPythonWordPressWeb developmentLinuxMySQLAndroidWindowsJavaC++ / C#LayoutReactUbuntuYiiDjangoProgramming1C-BitrixLaravelSystem administrationTelegramJSONDebianPostgreSQLIOSGoogleHtaccessWindows ServerGitMacOSGoogle ChromeCMSWooСommerceBootstrapNginxSQLUnityAPI
Make a leaderReport
N
N
Nicknameme2021-03-06 11:48:46
Django
Nicknameme, 2021-03-06 11:48:46

How to customize css in django?

Hello!. I have a problem with css connection. I downloaded the template from the Internet and connected it to django.

Code in base.html:

<!doctype html>
<html lang="en">

{% load static %}

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" href="{% static 'img/favicon.png' %}" type="image/png">
  <title>About Us</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
  <link rel="stylesheet" href="{% static 'vendors/linericon/style.css' %}">
  <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">
  <link rel="stylesheet" href="{% static 'vendors/owl-carousel/owl.carousel.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
  <link rel="stylesheet" href="{% static 'vendors/nice-select/css/nice-select.css' %}">
  <!-- main css -->
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>

<body>

  <!--================ Start Header Area =================-->
  <header class="header_area">
    <div class="main_menu">
      <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <a class="navbar-brand logo_h" href="index.html"><img src="{% static 'img/logo.png' %}" alt=""></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
           aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
            <ul class="nav navbar-nav menu_nav justify-content-end">
              <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
              <li class="nav-item active"><a class="nav-link" href="about.html">About</a></li>
              <li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
              <li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
              <li class="nav-item submenu dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                 aria-expanded="false">Pages</a>
                <ul class="dropdown-menu">
                                    <li class="nav-item"><a class="nav-link" href="elements.html">Elements</a></li>
                                    <li class="nav-item"><a class="nav-link" href="portfolio-details.html">Portfolio Details</a></li>
                </ul>
              </li>
              <li class="nav-item submenu dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                 aria-expanded="false">Blog</a>
                <ul class="dropdown-menu">
                  <li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
                  <li class="nav-item"><a class="nav-link" href="single-blog.html">Blog Details</a></li>
                </ul>
              </li>
              <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </header>

</body>
</html>

I have fully connected bootstrap, but the problem is with the main css file css/style.css
Code in css/style.css:
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500|Rubik:500,700");
/*---------------------------------------------------- */
/*----------------------------------------------------*/
/* Medium Layout: 1280px */
/* Tablet Layout: 768px */
/* Mobile Layout: 320px */
/* Wide Mobile Layout: 480px */
/*---------------------------------------------------- */
/*----------------------------------------------------*/


/*---------------------------------------------------- */
/*----------------------------------------------------*/
.header_area {
  position: absolute;
  width: 100%;
  z-index: 9999;
  background: #ffffff; }
  .header_area .menu_nav {
    width: 100%; }
  .header_area .navbar {
    background: transparent;
    padding: 0px;
    border: 0px;
    border-radius: 0px;
    width: 100%; }
    .header_area .navbar .nav .nav-item {
      margin-right: 45px; }
      .header_area .navbar .nav .nav-item .nav-link {
        font: 500 14px/100px "Rubik", sans-serif;
        text-transform: uppercase;
        color: #000000;
        padding: 0px;
        display: inline-block; }
        .header_area .navbar .nav .nav-item .nav-link:after {
          display: none; }
      .header_area .navbar .nav .nav-item:hover .nav-link, .header_area .navbar .nav .nav-item.active .nav-link {
        color: #4458dc; }
      .header_area .navbar .nav .nav-item.submenu {
        position: relative; }
        .header_area .navbar .nav .nav-item.submenu ul {
          border: none;
          padding: 0px;
          border-radius: 0px;
          box-shadow: none;
          margin: 0px;
          background: #fff; }
          @media (min-width: 992px) {
            .header_area .navbar .nav .nav-item.submenu ul {
              position: absolute;
              top: 120%;
              left: 0px;
              min-width: 200px;
              text-align: left;
              opacity: 0;
              transition: all 300ms ease-in;
              visibility: hidden;
              display: block;
              border: none;
              padding: 0px;
              border-radius: 0px;
              box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1); } }
          .header_area .navbar .nav .nav-item.submenu ul:before {
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 10px 0 10px;
            border-color: #eeeeee transparent transparent transparent;
            position: absolute;
            right: 24px;
            top: 45px;
            z-index: 3;
            opacity: 0;
            transition: all 400ms linear; }
          .header_area .navbar .nav .nav-item.submenu ul .nav-item {
            display: block;
            float: none;
            margin-right: 0px;
            border-bottom: 1px solid #ededed;
            margin-left: 0px;
            transition: all 0.4s linear; }
            .header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link {
              line-height: 45px;
              color: #000000;
              padding: 0px 30px;
              transition: all 150ms linear;
              display: block;
              text-transform: capitalize;
              margin-right: 0px; }
            .header_area .navbar .nav .nav-item.submenu ul .nav-item:last-child {
              border-bottom: none; }
            .header_area .navbar .nav .nav-item.submenu ul .nav-item:hover .nav-link {
              color: #fff; }
        @media (min-width: 992px) {
          .header_area .navbar .nav .nav-item.submenu:hover ul {
            visibility: visible;
            opacity: 1;
            top: 100%; } }
        .header_area .navbar .nav .nav-item.submenu:hover ul .nav-item {
          margin-top: 0px; }
      .header_area .navbar .nav .nav-item:last-child {
        margin-right: 0px; }
  .header_area.navbar_fixed .main_menu {
    position: fixed;
    width: 100%;
    top: -70px;
    left: 0;
    right: 0;
    background: #ffffff;
    transform: translateY(70px);
    transition: transform 500ms ease, background 500ms ease;
    -webkit-transition: transform 500ms ease, background 500ms ease;
    box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1); }
    .header_area.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link {
      line-height: 70px; }
  @media (min-width: 992px) {
    .header_area.white_menu .navbar .navbar-brand img {
      display: none; }
      .header_area.white_menu .navbar .navbar-brand img + img {
        display: inline-block; } }
  @media (max-width: 991px) {
    .header_area.white_menu .navbar .navbar-brand img {
      display: inline-block; }
      .header_area.white_menu .navbar .navbar-brand img + img {
        display: none; } }
  .header_area.white_menu .navbar .nav .nav-item .nav-link {
    color: #fff; }
  .header_area.white_menu.navbar_fixed .main_menu .navbar .navbar-brand img {
    display: inline-block; }
    .header_area.white_menu.navbar_fixed .main_menu .navbar .navbar-brand img + img {
      display: none; }
  .header_area.white_menu.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link {
    line-height: 70px;
    color: #000000; }

If you just open base.html in the browser everything works fine, but in django the styles do not work correctly.
When opened in browser: 6043416a6da82077615747.png
When opened with django: 604341b2ba01e103617734.png
I can't figure out what the problem is

Reply
Answer the question

Answer the question

In order to leave comments, you need to log in

1 answer(s)
Report
G
ge, 2021-03-07
@gedev

The question has already been answered many times:
Django not loading CSS?

Similar questions
S
SEACRE5T2020-10-09 14:37:42
How to implicitly convert to another data type? 3Reply
D
doitagain2019-11-11 23:34:40
Checking the classification accuracy of labeled subsets of various lengths (with a limit) on a continuous two-dimensional series? 3Reply
I
ivanesi2014-05-23 18:39:30
How to dynamically create tables in a database in Django based on a condition? 3Reply
M
Mark2022-01-26 17:50:59
Can't install psycopg2 and end up running a django server. Can anyone come across Mac OS Monterey m1? 1Reply
S
Sobak202020-09-29 11:44:21
What is the best way to store images from the webserver side? 1Reply

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question