I have developed a Django app with a fixed top navbar, but it sometimes flickers / refreshes when clicking the menu items. Have I made a mistake in extending the templates or it is something else causing this?
Here is the app deployed that you can see it: http://azeribocorp.pythonanywhere.com/index/
__base.html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
{% block meta_tags %}{% endblock meta_tags%}
<title>
{% block title %}Azeribo Tracking{% endblock title %}
</title>
{% block stylesheets %} {% endblock stylesheets %}
{% block js %} {% endblock js %}
</head>
<body>
<header class="topnavbar" id="TNB" >
{% include 'aztracker/_topnavbar.html' %}
</header>
<div id="main" role="main">
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div> {# /#main #}
</body>
</html>
search_form.html:
{% extends 'aztracker/__base.html' %}
{% load staticfiles %}
{% load static %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{% static 'css/__main.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/search_form.css' %}">
{% endblock %}
{% block content %}
{% block main_col %}
<section class="search_section">
<form method="POST" action="/search/">
{% csrf_token %}
<input required type="search" placeholder="Country or Code" name="search_input_field" id="search_input">
<button id="search_btn" class="flat_button">Search</button>
</form>
</section>
<!-- view all country codes link -->
<div class="wrapper">
<a id="list_of_all_countries_link" href="/countries/"> List of All Countries and Codes </a>
</div>
{% endblock main_col %}
{% endblock content %}
_topnavbar.html:
{% load static %}
{% load staticfiles %}
{% block stylesheets %}
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
{% endblock %}
<!--Top Navigation-->
<nav role="navigation" class="nav" id="topnav">
<ul class="nav-items">
<li class="{% if request.resolver_match.url_name == 'index' %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'index' %} class='nav-link'><span>Home</span></a>
</li>
<!--<li class="nav-item">
<a href={% url 'index' %} class="nav-link" ><span>Home</span></a>
</li>-->
<li class="{% if 'track_containers' in request.resolver_match.url_name %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'track_containers_import_data' %} class='nav-link'><span>Track Containers</span></a>
</li>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">Product #1</li>
<li class="submenu-item">Product #2</li>
<li class="submenu-item">Product #3</li>
</ul>
</nav>
</li>
<li class="{% if request.resolver_match.url_name == 'search' %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'search' %} class='nav-link'><span>Search</span></a>
</li>
<li class="{% if request.resolver_match.url_name == 'report' %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'report' %} class='nav-link'><span>Report</span></a>
</li>
<li class="nav-item dropdown">
<span>More</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">About</li>
<li class="submenu-item">Contact us</li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item">Support</li>
<li class="submenu-item">FAQs</li>
</ul>
</nav>
</li>
<!--
<li class="{% if 'more' in request.resolver_match.url_name %}
nav-item dropdown active
{% else %}
nav-item dropdown
{% endif %}">
<a href='#'><span>More</span></a> <!- -js will take care of dropping the menu - ->
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">About</li>
<li class="submenu-item">Contact</li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item">Support</li>
<li class="submenu-item">FAQs</li>
</ul>
</nav>
</li> -->
</ul>
</nav>
{% block js %}
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
{% endblock js %}
__base.html [edit 1]:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
{% block meta_tags %}{% endblock meta_tags%}
<title>
{% block title %}Azeribo Tracking{% endblock title %}
</title>
<!-- styles and js required for topnavbar -->
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
{% block stylesheets %} {% endblock stylesheets %}
{% block js %} {% endblock js %}
</head>
<body>
<header class="topnavbar" id="TNB">
{% block topnavbar %}
{% include 'aztracker/_topnavbar.html' %}
{% endblock topnavbar %}
</header>
<div id="main" role="main">
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div> {# /#main #}
</body>
</html>
search_form.html [edit 1]:
{% extends 'aztracker/__base.html' %}
{% load staticfiles %}
{% load static %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{% static 'css/__main.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/search_form.css' %}">
{% endblock %}
{% block content %}
{% block main_col %}
<section class="search_section">
<form method="POST" action="/search/">
{% csrf_token %}
<input required type="search" placeholder="Country or Code" name="search_input_field" id="search_input">
<button id="search_btn" class="flat_button">Search</button>
</form>
</section>
<!-- view all country codes link -->
<div class="wrapper">
<a id="list_of_all_countries_link" href="/countries/"> List of All Countries and Codes </a>
</div>
{% endblock main_col %}
{% endblock content %}
_topnavbar.html [edit 1]:
{% load static %}
{% load staticfiles %}
{% block topnavbar %}
<!--Top Navigation-->
<nav role="navigation" class="nav" id="topnav">
<ul class="nav-items">
<li class="{% if request.resolver_match.url_name == 'index' %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'index' %} class='nav-link'><span>Home</span></a>
</li>
<!--<li class="nav-item">
<a href={% url 'index' %} class="nav-link" ><span>Home</span></a>
</li>-->
<li class="{% if 'track_containers' in request.resolver_match.url_name %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'track_containers_import_data' %} class='nav-link'><span>Track Containers</span></a>
</li>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">Product #1</li>
<li class="submenu-item">Product #2</li>
<li class="submenu-item">Product #3</li>
</ul>
</nav>
</li>
<li class="{% if request.resolver_match.url_name == 'search' %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'search' %} class='nav-link'><span>Search</span></a>
</li>
<li class="{% if request.resolver_match.url_name == 'report' %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'report' %} class='nav-link'><span>Report</span></a>
</li>
<li class="nav-item dropdown">
<span>More</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">About</li>
<li class="submenu-item">Contact us</li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item">Support</li>
<li class="submenu-item">FAQs</li>
</ul>
</nav>
</li>
<!--
<li class="{% if 'more' in request.resolver_match.url_name %}
nav-item dropdown active
{% else %}
nav-item dropdown
{% endif %}">
<a href='#'><span>More</span></a> <!- -js will take care of dropping the menu - ->
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">About</li>
<li class="submenu-item">Contact</li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item">Support</li>
<li class="submenu-item">FAQs</li>
</ul>
</nav>
</li> -->
</ul>
</nav>
{% endblock topnavbar %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
{% block meta_tags %}{% endblock meta_tags%}
<title>
{% block title %}Azeribo Tracking{% endblock title %}
</title>
<!-- styles and js required for topnavbar -->
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% block stylesheets %} {% endblock stylesheets %}
{% block js %} {% endblock js %}
</head>
<body>
<header class="topnavbar" id="TNB">
{% block topnavbar %}
{% include 'aztracker/_topnavbar.html' %}
{% endblock topnavbar %}
</header>
<div id="main" role="main">
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div> {# /#main #}
{% block extra-js %}
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
{% endblock extra-js %}
</body>
</html>
__base.html [edit 2]:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
{% block meta_tags %}{% endblock meta_tags%}
<title>
{% block title %}Azeribo Tracking{% endblock title %}
</title>
<!-- styles and js required for topnavbar -->
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% block stylesheets %} {% endblock stylesheets %}
{% block js %} {% endblock js %}
</head>
<body>
<header class="topnavbar" id="TNB">
{% block topnavbar %}
{% include 'aztracker/_topnavbar.html' %}
{% endblock topnavbar %}
</header>
<div id="main" role="main">
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div> {# /#main #}
{% block extra-js %}
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
{% endblock extra-js %}
</body>
</html>
If you will use WebDeveloperTools/Inspector or similar tools then you will notice that rewrite of stylesheets block in _tophavbar.html doesn't work. Js and css are included inside of body.
It happens because you are including _topnavbar.html into _base.html (without extension). It means that _topnavbar.html doesn't now anything about stylesheets block in _base.html template.
You can move menu js and css to the top template. Second solution is to implement different template inheritance __base.html -> __base_with_menu.html -> search_form.html
P.S. Also you have defined js block, so probably you want to include js files inside of it and not in stylesheets.
Related
I have a question for you. I have the following structure:
__Base.html
__main_sidebar.html
__conto_economico.html
The _main_sidebar.html is the following:
{% block nav_links_ul %}
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
{% block nav_links_outer %}
<li class="nav-header">{% block nav_heading %}PERFORMANCE MONITORING{% endblock %}</li>
{% block nav_links %}
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="/conto_economico" class="nav-link">
<i class="nav-icon fas fa-chart-bar"></i>
<p>Conto Economico</p>
</a>
</li>
It is include in my base.html:
{% block nav_sidebar %}
{% include 'adminlte/lib/_main_sidebar.html' %}
{% endblock %}
My conto_economico.html is an extends of base.html
{% extends 'adminlte/base.html' %}
{% block content %}
{% endblock content %}
Now I want that, when I press on the link in my sidebar (ad example /conto_economico) and the new page is upload, I want tha the relative nav-link become nav-link active as the following:
<a href="/conto_economico" class="nav-link active">
Could I get it?
you may include your template with some context passed to it like
{% include 'adminlte/lib/_main_sidebar.html' with active_menu_item=active_menu_item %}
and then in your view when sending data to this template (or with a middleware) send a context key and value like:
context = {'active_menu_item': 'conto_economico', ...}
and then in your template check it out like:
<li class="nav-item">
<a href="/conto_economico"
class="nav-link {% if active_menu_item=='conto_economico' %} active {% endif %}">
<i class="nav-icon fas fa-chart-bar"></i>
<p>Conto Economico</p>
</a>
</li>
also note that you may need to change your extended view too.
let me know if that worked for you.
django include tempate tag
You can use as many blocks as you want. just name them unique.
two blocks cannot have the same name.
Base Template---
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{% static 'cpanel/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'cpanel/css/main.css' %}">
<link rel="stylesheet" href="{% static 'cpanel/css/font_awesome_css_all.css' %}"/>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>Document</title>
{% block head %}
{% endblock head %}
</head>
<body>
{% block heading %}
block for heading
{% endblock heading %}
{% block content %}
block for content
{% endblock content %}
</body>
{% block script %}
block for script
{% endblock script %}
</html>
Child template---
{% extends 'base.html' %}
{% block head %}
{% endblock head %}
{% block heading %}
<ol class="breadcrumb mb-4">
<li class="breadcrumb-item active">Dashboard/Vendors</li>
</ol>
<hr>
{% endblock heading %}
{% block content %}
{% endblock content %}
When I click on the button to go to the post job page I want the navigation to show by extending base.html, but I don't want the post job button to show on the page anymore beings I'm on the post job page. How would I do this?
I don't really want to use javascript window.onload to remove it.
any other ideas or how would I do this in flask?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}JustRemote</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
<header class="header">
<nav class="nav">
<a class="logo" href="{{ url_for('index') }}"ß"><span class="logo-char">J</span>ust<span class="logo-char">R</span>emote</a>
<ul class="nav-list">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('index')}}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('index')}}">Tech</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('index')}}">Design</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('index')}}">Customer Service</a>
</li>
</ul>
</nav>
{% block button %}
<form class="post-job-form" action="{{ url_for('post_job') }}">
<button class="post-job" type="submit">Post Job :)</button>
</form>
{% endblock %}
</header>
{% block content %}
{% endblock %}
</body>
</html>
If I understand you correctly, doing this on the Post Jobs page should work.
{% extend "base.html" %}
{% block button %}{% endblock %}
{% block content %} Hi! {% endblock %}
I'm implementing a navbar and I wanted to use django templating for the DRY principle. The first picture is its appearance before templating, the second one is after templating. (https://imgur.com/a/FOEqKFB)
How do I get the css files to render properly in the inherited html file? I thought it was a case of me not calling the CSS files in base.html (like this one: another similar answer), but I checked the code for base.html and I've already called the Bootstrap CDN for the navbar styles on the header. What went wrong in my code?
This is the relevant code for the problem:
base.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<title>{% block title %}Title{% endblock title %}</title>
{% block head_favicon %}
<link rel="icon" type="image/x-icon" href="/favicon.ico">
{% endblock head_favicon %}
{% block head_meta %}
{% block head_meta_charset %}
<meta charset="UTF-8">
{% endblock head_meta_charset %}
{% block head_meta_contentlanguage %}
<meta http-equiv="X-UA-Compatible" content="ie=edge" value="en-US">
{% endblock head_meta_contentlanguage %}
{% block head_meta_viewport %}
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
{% endblock head_meta_viewport %}
{% endblock head_meta %}
{% block head_css %}
{% block head_css_site %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
{% endblock head_css_site %}
{% block head_css_section %}{% endblock head_css_section %}
{% block head_css_page %}{% endblock head_css_page %}
{% endblock head_css %}
{% block head_javascript %}
{% block head_javascript_site %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" async></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" async></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" async></script>
{% endblock head_javascript_site %}
{% block head_javascript_section %}{% endblock head_javascript_section %}
{% block head_javascript_page %}{% endblock head_javascript_page %}
{% endblock head_javascript %}
</head>
<body>
{% block navbar %}
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">CCC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Products 1</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
{% endblock navbar %}
{% block content %}
if you see this, something is wrong!
{% endblock content %}
</body>
</html>
CCC.html
{% extends 'CCC/base.html' %}
{% load static %}
{% block title %}Gift Countdown{% endblock title %}
{% block head_css_page %}
<link href="https://fonts.googleapis.com/css?family=Great+Vibes&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'homepage/styles/cccStyle.css' %}">
{% endblock head_css_page %}
{% block head_javascript_page %}
<script type='text/javascript' language='javascript' src="{% static 'homepage/scripts/homepage.js' %}" async></script>
{% endblock head_javascript_page %}
{% block content %}
<div class='bg'></div>
<div class="ctr">
<p>It's</p>
<div id="demo" onload="countdown();"></div>
<p>Until Christmas!</p>
</div>
<form class = 'ctrform' action="{% url 'homepage' %}" method="POST">
{%csrf_token%}
{{Reminder}}
<button type="submit">Submit</button>
</form>
{% endblock content %}
The 3 scripts you need for Bootstrap are in the footer_javascript_site block of your base.html which is outside the <body> tag. That is invalid HTML. You could simply move it inside the <body> or have a look at Where should I put <script> tags in HTML markup? for suggestions on how to put it all in the <head>.
I want to change the state of the navbar as highlighted in different pages.
When I am normally placing the nav-bar in base.html and add a block content it works.
<!DOCTYPE html>
<html lang=en>
<head>
<title>Dashboard</title>
{% include 'snippets/css.html' %}
</head>
<body>
<!-- Sidebar Holder -->
<nav id="sidebar">
<ul class="list-unstyled components">
<li{% block nav_live %}{% endblock %}>
<i class="fa fa-users" aria-hidden="true"></i>Live Now
</li>
<li{% block nav_out %}{% endblock %}>
<i class="fa fa-crosshairs" aria-hidden="true"></i>Outcome Score
</li>
<li {% block nav_customer %}{% endblock %}>
<i class="fa fa-search" aria-hidden="true"></i>Customer search
</li>
<li {% block nav_journey %}{% endblock %}>
<i class="fa fa-map-o" aria-hidden="true"></i> Journey Shaping
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>-Persona</li>
<li>-Outcomes</li>
<li>-Action Maps</li>
<li>-Auto Responses</li>
</ul>
</li>
<li {% block nav_analytics %}{% endblock %}>
<i class="fa fa-bar-chart" aria-hidden="true"></i>Analytics
<ul class="collapse list-unstyled" id="analyticsmenu">
<li>-Visitor Activity</li>
<li>-Visit History</li>
<li>-Action Map Performance</li>
<li>-Interactions</li>
</ul>
</li>
<li{% block nav_settings %}{% endblock %}>
<i class="material-icons md-18" >tune</i>Settings
<ul class="collapse list-unstyled" id="settingsmenu">
<li>-Phone Number</li>
<li>-Tracking Code</li>
<li>-Action Map Performance</li>
<li>-Interactions</li>
</ul>
</li>
<li{% block nav_people %}{% endblock %}>
<i class="material-icons">people</i>People
<ul class="collapse list-unstyled" id="peoplemenu">
<li>-Team Home</li>
<li>-Visit History</li>
<li>-Action Map Performance</li>
<li>-Interactions</li>
</ul>
</li>
</ul>
</nav>
{% block content %}{% endblock content %}
</div>
{% include 'snippets/js.html' %}
</body>
</html>
In live_now.html I add the class="active" and it works
{% extends "base.html" %}
{% block nav_live %}
class="active"
{% endblock %}
{% block content %}
{% load static %}
but when I try to include nav-bar as a snippet in base.html, class="active" is not rendered in the template
<!DOCTYPE html>
<html lang=en>
<head>
<title>Dashboard</title>
{% include 'snippets/css.html' %}
</head>
<body>
{% include 'snippets/nav.html' %}
{% block content %}{% endblock content %}
</div>
{% include 'snippets/js.html' %}
</body>
</html>
I have included django-allauth into my site. It works but no styles on account pages, although index.html, that extends 'base.html' as well renders normal styles.
I have project structure like this:
root
-myproject
-myapp
-templates/
base.html
index.html
....
--/accounts/
login.html
logout.html
.....
-static/
--admin/
---css
---js
---img
--static/
---css
---js
-media
my settings.py path:
TEMPLATE_DIRS = (os.path.join(BASE_DIR,"templates"),)
STATICFILES_DIRS = (os.path.join(BASE_DIR,"static"), )
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static", "admin")
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static', 'media')
base.html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link href="../static/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../static/static/css/sticky-footer-navbar.css" rel="stylesheet">
<link href="../static/static/css/starter-template.css" rel="stylesheet">
<link href="../static/static/css/smart_wizard.css" rel="stylesheet" >
<link href="../static/static/css/demo_style.css" rel="stylesheet" >
<link href="../static/static/css/progressbutton.css" rel="stylesheet" >
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Pul</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Account <b class="caret"></b>
<ul class="dropdown-menu">
{% if not request.user.is_authenticated %}
<li>Login</li>
<li>Sign Up</li>
{% else %}
<li>Logout</li>
{% endif %}
</ul>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav><br><br><br><br><br>
{% block head_title %}
{% endblock %}
{% block main_content %}
{% endblock main_content %}
{% block content %}
{% endblock %}
{% block step1 %}
{% endblock %}
{% block step2 %}
{% endblock %}
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="../static/static/js/jquery.min.js"></script>
<script src="../static/static/js/button_click.js"></script>
<script src="../static/static/js/bootstrap.min.js"></script>
<script src="../static/static/js/jquery.smartWizard.js"></script>
</body>
</html>
login.html:
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load i18n %}
{% load account socialaccount %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block content %}
<div class = ' col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3'>
<h1>{% trans "login" %}</h1>
{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<p>{% blocktrans with site.name as site_name %}Please sign in with one
of your existing third party accounts. Or, sign up
for a {{ site_name }} account and sign in below:{% endblocktrans %}</p>
<div class="socialaccount_ballot">
<ul class="socialaccount_providers">
<!-- connecting login with scial account -->
<!-- {% include "socialaccount/snippets/provider_list.html" with process="login" %} -->
</ul>
<div class="login-or">{% trans 'or' %}</div>
</div>
{% include "socialaccount/snippets/login_extra.html" %}
{% else %}
<p>{% blocktrans %}If you have not created an account yet, then please
sign up first.{% endblocktrans %}</p>
{% endif %}
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form|crispy }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<a class="btn btn-link button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
<button class="btn btn-default primaryAction" type="submit">{% trans "Sign In" %}</button>
</form>
</div>
{% endblock %}
I still can not figure out what strange issue it is. Please help!
You load staticfiles with {% load staticfiles %} but you don't use static template tag.
Replace all your asset links with {% static 'path/to/file.ext' %}
E.g :
replace
../static/static/css/sticky-footer-navbar.css
with this : (if your files is a global static files)
{% static 'app_name/css/sticky-footer-navbar.css' %}
with this : (if your files is an app static files)
{% static 'app_name/css/sticky-footer-navbar.css' %}
I recommend you to read carefully Django docs : Managing static files