Problem:
css/main.css is not applied to footer.
Solution:
-
base.html
{% load static %}on top of the line -
check if correct directory path, name in link at base.html
<link href=" {% static 'css/main.css' %}" rel="stylesheet"> -
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
- bootstrap script stuff at the end of the line, inside body tag (I am not sure if it affects to this case tho.)
< body>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper-->
~
< /body>base.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Djanggo Ecommerce</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="{% static 'css/mdb.min.css' %}" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href=" {% static 'css/main.css' %}" rel="stylesheet">example footer (which didn't work)
<!--footer-->
<body>
<br>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="https://velog.io/@daylee/">
<img class="velog" src="https://www.flaticon.com/premium-icon/icons/svg/3097/3097105.svg">
</a>
</li>
<li class="list-inline-item">
<a href="https://github.com/day-lee/">
<img class="github" src="https://www.flaticon.com/premium-icon/icons/svg/3291/3291695.svg"></a>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com/">
<img class="linkedin" src="https://www.flaticon.com/svg/static/icons/svg/1384/1384046.svg">
</a>
</li>
</ul>
<p class="copyright text-muted" style="text-align: center">© Copyright 2021 Daylee's Tutorial Hub</p>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
</body>main.css
/* footer */
.velog {
width: 2.5rem;
height:2.5rem;
border-radius: 30%;
}
.linkedin {
width: 2.5rem;
height:2.5rem;
border-radius: 30%;
}
.github {
width: 2.5rem;
height:2.5rem;
border-radius: 30%;
}
Dayeon Lee | Django & Python Web Developer