I'm trying to inherit this bootstrap (https://github.com/almasaeed2010/AdminLTE) from my base.html. I use this form to do it:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Dracoin | Dashboard </title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="media/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="media/bootstrap/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="media/bootstrap/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="media/bootstrap/css/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- jvectormap -->
<link href="media/bootstrap/css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- Date Picker -->
<link href="media/bootstrap/css/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="media/bootstrap/css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<link href="media/bootstrap/css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="media/bootstrap/css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body class="skin-blue">
<!-- header logo: style can be found in header.less -->
<header class="header">
<a href="{% url 'vista_principal' %}" class="logo">
<!-- Add the class icon to your logo image or logo icon to add the margining -->
<img src="img/avatar3.png" class="img-circle"/>
</a>
<!-- Header Navbar: style can be found in header.less -->
{% if user.is_authenticated %}
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-right">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope"></i>
<span class="label label-success">5</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 5 messages</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="img/avatar3.png" class="img-circle" alt="User Image"/>
</div>
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li><!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="img/avatar2.png" class="img-circle" alt="user image"/>
</div>
<h4>
AdminLTE Design Team
<small><i class="fa fa-clock-o"></i> 2 hours</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="img/avatar.png" class="img-circle" alt="user image"/>
</div>
<h4>
Developers
<small><i class="fa fa-clock-o"></i> Today</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="img/avatar2.png" class="img-circle" alt="user image"/>
</div>
<h4>
Sales Department
<small><i class="fa fa-clock-o"></i> Yesterday</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="img/avatar.png" class="img-circle" alt="user image"/>
</div>
<h4>
Reviewers
<small><i class="fa fa-clock-o"></i> 2 days</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
</ul>
</li>
<li class="footer">See All Messages</li>
</ul>
</li>
<!-- Notifications: style can be found in dropdown.less -->
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-warning"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="ion ion-ios7-people info"></i> 5 new members joined today
</a>
</li>
<li>
<a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users warning"></i> 5 new members joined
</a>
</li>
<li>
<a href="#">
<i class="ion ion-ios7-cart success"></i> 25 sales made
</a>
</li>
<li>
<a href="#">
<i class="ion ion-ios7-person danger"></i> You changed your username
</a>
</li>
</ul>
</li>
<li class="footer">View all</li>
</ul>
</li>
<!-- Tasks: style can be found in dropdown.less -->
<li class="dropdown tasks-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-tasks"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li><!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Create a nice theme
<small class="pull-right">40%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">40% Complete</span>
</div>
</div>
</a>
</li><!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Some task I need to do
<small class="pull-right">60%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">60% Complete</span>
</div>
</div>
</a>
</li><!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Make beautiful transitions
<small class="pull-right">80%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">80% Complete</span>
</div>
</div>
</a>
</li><!-- end task item -->
</ul>
</li>
<li class="footer">
View all tasks
</li>
</ul>
</li>
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-user"></i>
<span>{{user.username}} <i class="caret"></i></span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header bg-light-blue">
{% if user.userprofile.photo %}
<img src="/media/{{user.userprofile.photo}}" width="100px" height="100px"/>
{% endif %}
<p>
{{user.username}} - Standard User
<small>{{user.userprofile.email}}</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="col-xs-4 text-center">
XXXX
</div>
<div class="col-xs-4 text-center">
Sales
</div>
<div class="col-xs-4 text-center">
XXXX
</div>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
Profile
</div>
<div class="pull-right">
Sign out
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
{% endif %}
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- Left side column. contains the logo and sidebar -->
<aside class="left-side sidebar-offcanvas">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
{% if user.is_authenticated %}
<div class="user-panel">
<div class="pull-left image">
<img src="/media/{{user.userprofile.photo}}" class="img-circle" alt="User Image" />
</div>
<div class="pull-left info">
<p>Hello, {{user.username}}</p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
{% endif %}
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="active">
<a href="{% url 'vista_principal' %}">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li>
<a href="{% url 'vista_aterrizaje' %}">
<i class="fa fa-th"></i> <span>Landing</span> <small class="badge pull-right bg-green">news</small>
</a>
</li>
{% if user.is_authenticated %}
<li>
<a href="/shop/page/1/">
<i class="fa fa-shopping-cart"></i> <span>Shop</span>
<small class="badge pull-right bg-red">5</small>
</a>
</li>
{% endif %}
<li>
<a href="{% url 'vista_contacto' %}">
<i class="fa fa-comment"></i> <span>Support</span>
</a>
</li>
{% if user.is_authenticated %}
<li>
<a href="{% url 'vista_logout' %}">
<i class="fa fa-sign-in"></i> <span>Sign out</span>
</a>
</li>
{% else %}
<li>
<a href="{% url 'vista_login' %}">
<i class="fa fa-sign-in"></i> <span>Sign in</span>
</a>
</li>
{% endif %}
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- Right side column. Contains the navbar and content of the page -->
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
{% block content %}
{% endblock %}
<!-- /.content -->
</aside><!-- /.right-side -->
</div><!-- ./wrapper -->
<!-- add new calendar event modal -->
<!-- jQuery 2.0.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- jQuery UI 1.10.3 -->
<script src="media/bootstrap/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="media/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Morris.js charts -->
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="media/bootstrap/js/plugins/morris/morris.min.js" type="text/javascript"></script>
<!-- Sparkline -->
<script src="media/bootstrap/js/plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<!-- jvectormap -->
<script src="media/bootstrap/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
<script src="media/bootstrap/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
<!-- jQuery Knob Chart -->
<script src="media/bootstrap/js/plugins/jqueryKnob/jquery.knob.js" type="text/javascript"></script>
<!-- daterangepicker -->
<script src="media/bootstrap/js/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- datepicker -->
<script src="media/bootstrap/js/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="media/bootstrap/js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="media/bootstrap/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="media/bootstrap/js/AdminLTE/app.js" type="text/javascript"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="media/bootstrap/js/AdminLTE/dashboard.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="media/bootstrap/js/AdminLTE/demo.js" type="text/javascript"></script>
</body>
</html>
My problem is only index.html display all heritage from base but my other pages (shop.html, contacto.html, landing.html) appear only with inherited content from base.html, the pages appear without any style.
I'm trying to find the mistake but i can't conceive...
I was trying using other styles from this page (http://getbootstrap.com/getting-started/) and heritage run perfectly in all pages. why my other bootstrap doesn't work? I'd have liked that my bootstrap run in all pages.
apologizeme in advance my extensive question and if I overlook something.
Thanks!!
You should use absolute paths for all of your assets:
<link href="/media/bootstrap/css/bootstrap.min.css" ...
(note the leading slash).
Even better, you should use the static tags to generate the locations automatically, according to your STATIC_URL setting:
{% load static %}
...
<link href="{% static "bootstrap/css/bootstrap.min.css" %}" ...
Related
i have 3 files, Base.html, Navbar.html and dashboard.html. im trying to extend base.html and include navbar.html in dashboard. its getting extended but the problem is then dashboard's content data is not visible. If i remove navbar.html it works but no navbars. Below are the files pls check and help to resolve.
Navbar.html
{% load static %}
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<div class="dropdown-divider"></div>
</ul>
# Side configutarion
{# <li class="nav-item">#}
{# <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">#}
{# <i class="fas fa-th-large"></i>#}
{# </a>#}
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="dashboard" class="brand-link">
<img src="{% static 'img/AdminLTELogo.png' %}" alt="AdminLTE Logo"
class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">Acro Paints</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="{% static 'img/user2-160x160.jpg' %}" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
Alexander Pierce
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
data-accordion="false">
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
</p>
</a>
<li class="nav-item">
<a href="pages/widgets.html" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Painters
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Product Master
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-chart-pie"></i>
<p>
Scheme
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-tree"></i>
<p>
Coupon Code Master
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p>
Reward Master
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-table"></i>
<p>
Redemption
</p>
</a>
</li>
<li class="nav-item">
<a href="pages/calendar.html" class="nav-link">
<i class="nav-icon far fa-calendar-alt"></i>
<p>
Passbook
</p>
</a>
</li>
<li class="nav-item">
<a href="pages/gallery.html" class="nav-link">
<i class="nav-icon far fa-image"></i>
<p>
SMS Logs
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon far fa-envelope"></i>
<p>
Stake Holders
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-book"></i>
<p>
Dealer Master
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon far fa-plus-square"></i>
<p>
Beat Plan
</p>
</a>
</li>
<li class="nav-item">
<a href="https://adminlte.io/docs/3.0" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Compliance</p>
</a>
</li>
<li class="nav-item">
<a href="https://adminlte.io/docs/3.0" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Tickets</p>
</a>
</li>
<li class="nav-item">
<a href="https://adminlte.io/docs/3.0" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Leads</p>
</a>
</li>
<li class="nav-item">
<a href="https://adminlte.io/docs/3.0" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Notification</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Dashboard</h1>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
</div>
<aside class="control-sidebar control-sidebar-dark">
Base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
<link rel="stylesheet"
href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet"
href="{% static 'plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-
4.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css'
%}">
<link rel="stylesheet" href="{% static 'plugins/jqvmap/jqvmap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/adminlte.min.css' %}">
<link rel="stylesheet" href="{% static
'plugins/overlayScrollbars/css/OverlayScrollbars.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
<link rel="stylesheet" href="{% static 'plugins/summernote/summernote-bs4.css' %}">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700"
rel="stylesheet">
</head>
<body>
<div class="wrapper">
{% include 'navbar.html' %}
{% block content %}
{% endblock %}
</div>
</body>
<script src=" {% static 'plugins/jquery/jquery.min.js' %} "></script>
<script src=" {% static 'plugins/jquery-ui/jquery-ui.min.js' %} "></script>
<script>
$.widget.bridge('uibutton', $.ui.button)
</script>
<script src=" {% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %} "></script>
<script src=" {% static 'plugins/chart.js/Chart.min.js' %} "></script>
<script src=" {% static 'plugins/sparklines/sparkline.js' %} "></script>
<script src=" {% static 'plugins/jqvmap/jquery.vmap.min.js' %} "></script>
<script src=" {% static 'plugins/jqvmap/maps/jquery.vmap.usa.js' %} "></script>
<script src=" {% static 'plugins/jquery-knob/jquery.knob.min.js' %} "></script>
<script src=" {% static 'plugins/moment/moment.min.js' %} "></script>
<script src=" {% static 'plugins/daterangepicker/daterangepicker.js' %} "></script>
<script src=" {% static 'plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-
4.min.js' %} "></script>
<script src=" {% static 'plugins/summernote/summernote-bs4.min.js' %} "></script>
<script src=" {% static 'plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' %}
">.
</script>
<script src="{% static 'js/adminlte.js' %} "></script>
<script src="{% static 'js/pages/dashboard.js' %} "></script>
<script src="{% static 'js/demo.js' %} "></script>
</html>
dashboard.html
{% extends 'base.html' %}
{% block content %}
<p>Hello </p>
{% endblock %}
You can put your navbar in your base.html also like the way i did here https://github.com/YashMarmat/Blog-App-django-v3/blob/master/templates/base.html
after that, place below code at the top of those templates where you wish to include your navbar
{% extends "base.html" %}
Now, place the code of other templates between these two code,
{% block content %}
{% endblock content %}
For example, home.html (other templates should look like below),
{% extends "base.html" %}
{% block content %}
<h1>Hello World !</h1>
{% endblock content %}
that's it.
I am trying to use the laravel helper method for active the sidebar but it does not working. Can anyone tell us how to apply Laravel helper method to this sidebar.
Here this is my sidebar.blade.php file
<aside class="main-sidebar sidebar-dark-primary">
<!-- Main Sidebar Container -->
<!-- Brand Logo -->
<a href="{{url('dashboard')}}" class="brand-link">
<img src="{{asset('assets/adminlte-boot-4/dist/img/AdminLTELogo.png')}}" alt="Digital CRM" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">DIgital CRM</span>
</a>
<!-- Sidebar -->
<div class="sidebar-menu">
<!-- Sidebar user panel (optional) -->
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item">
<a href="{{url('dashboard')}}" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('webtolead')}}" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Web to Lead</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
Solution for this: add these method in your tag:
<li class="nav-item">
<a href="{{url('accounts')}}" class="nav-link {{ request()->is('accounts*') ? 'active' : '' }}">
<i class="nav-icon fas fa-user"></i>
<p>Accounts</p>
</a>
</li>
OR
<li class="nav-item ">
<a href="{{url('admin/updateprofile')}}" class="nav-link {{ Request::is('*admin/updateprofile*')? 'active' : '' }}">
<i class="fas fa-user nav-icon"></i>
<p>ProfileEdit</p>
</a>
</li>
both method are working...
Creating helper.php is good but this method is short in my case.
<aside class="main-sidebar sidebar-dark-primary">
<!-- Main Sidebar Container -->
<!-- Brand Logo -->
<a href="{{url('dashboard')}}" class="brand-link">
<img src="{{asset('assets/adminlte-boot-4/dist/img/AdminLTELogo.png')}}" alt="Digital CRM" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">DIgital CRM</span>
</a>
<!-- Sidebar -->
<div class="sidebar-menu">
<!-- Sidebar user panel (optional) -->
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item">
<a href="{{url('dashboard')}}" class="nav-link {{ request()->is('dashboard') ? 'active' : '' }}">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('webtolead')}}" class="nav-link {{ request()->is('webtolead*') ? 'active' : '' }}">
<i class="nav-icon fas fa-file"></i>
<p>Web to Lead</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
I have a very simple use case. I have downloaded the flask clean blog files from the link : https://startbootstrap.com/template-overviews/clean-blog/ and my intention is to build a blog website.
For starters i am just trying to load the index page using a very simple script :
Test.py :
from flask import Flask,render_template
app = Flask(__name__)
#app.route('/index')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
I have the below module structure :
C:.
│ Test.py
│
├───static
│ └───css
│ bootstrap.min.css
│ clean-blog.min.css
│ font-awesome.min.css
│
└───templates
index.html
Now my index.html file is as follows :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}" >
<!-- Custom fonts for this template -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/font-awesome.min.css') }}" >
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link rel="stylesheet" href="{{ url_for('static',filename='css/clean-blog.min.css') }}" >
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Sample Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Header -->
<header class="masthead" style="background-image: url('img/home-bg.jpg')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Man must explore, and this is exploration at its greatest
</h2>
<h3 class="post-subtitle">
Problems look mighty small from 150 miles up
</h3>
</a>
<p class="post-meta">Posted by
Start Bootstrap
on September 24, 2018</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
</h2>
</a>
<p class="post-meta">Posted by
Start Bootstrap
on September 18, 2018</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Science has not yet mastered prophecy
</h2>
<h3 class="post-subtitle">
We predict too much for the next year and yet far too little for the next ten.
</h3>
</a>
<p class="post-meta">Posted by
Start Bootstrap
on August 24, 2018</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Failure is not an option
</h2>
<h3 class="post-subtitle">
Many say exploration is part of our destiny, but it’s actually our duty to future generations.
</h3>
</a>
<p class="post-meta">Posted by
Start Bootstrap
on July 8, 2018</p>
</div>
<hr>
<!-- Pager -->
<div class="clearfix">
<a class="btn btn-primary float-right" href="#">Older Posts →</a>
</div>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="container">
<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="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © Your Website 2018</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>
I am not sure why but this does not seem to work. The navigation bar is not visible .
Even more strangely when i change the lines :
<link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}" >
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/font-awesome.min.css') }}" >
<link rel="stylesheet" href="{{ url_for('static',filename='css/clean-blog.min.css') }}" >
to
<link rel="stylesheet" href="{{ url_for('static',filename='bootstrap.min.css') }}" >
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='font-awesome.min.css') }}" >
<link rel="stylesheet" href="{{ url_for('static',filename='clean-blog.min.css') }}" >
everything works normally and i can see the indentation and navigation bar works normally . Ideally it should not work since the css files are inside the /static/css folder and not directly under static.
Can someone please tell me what is the issue here ?
Thanks in advance.
It looks like you have a problem in your path / folder : Flask seems to be serving files from static/css/ instead of static/.
Try playing with those parameters :
app = Flask(__name__, static_url_path='/static',static_folder='static/')
I'm just developing a Reproting Tool and due to some reason i have two scroll bars,one which is for Chrome or any other browser and the other is part of the HTML,i couldn't trace anything back to the HTML..
> </head>
<body style="min-height:20px">
<!-- START PAGE CONTAINER -->
<div class="page-container" style="min-height:20px">
<!-- START PAGE SIDEBAR -->
<div class="page-sidebar">
<!-- START X-NAVIGATION -->
<ul class="x-navigation">
<li class="xn-logo">
Reports
</li>
<li class="xn-profile">
<!--<a href="#" class="profile-mini">
<img src="assets/images/users/avatar.jpg" alt="John Doe" />
</a>-->
<div class="profile">
<!--<div class="profile-image">
<img src="assets/images/users/avatar.jpg" alt="John Doe" />
</div>-->
<!--<div class="profile-data">
<div class="profile-data-name">John Doe</div>
<div class="profile-data-title">Web Developer/Designer</div>
</div>-->
<!--<div class="profile-controls">
<span class="fa fa-info"></span>
<span class="fa fa-envelope"></span>
</div>-->
</div>
</li>
<li class="xn-title">Navigation</li>
<li >
<span class="fa fa-cogs fa-spin" title="Configure Reports"></span> <span class="xn-text">Configure Reports</span>
</li>
<li>
<span class="fa fa-cogs fa-spin" title="Configure Dashboard"></span> <span class="xn-text">Configure Dashboard</span>
</li>
<li class="active">
<span class="fa fa-eye" title="View Dashboard"></span> <span class="xn-text">View Dashboard</span>
</li>
</ul>
<!-- END X-NAVIGATION -->
Any Help would be deeply appreciated
what you can do is
to the main div you can apply css like for example you have
<div class ="main">
// rest of your code
</div>
in your main style.css you can put
.main {
width:100%;
height:90%;
overflow:hidden;
}
if this doesn't work you can use
body {
overflow-y:hidden;
}
I'm trying to use a Bootsnipp snippet in my page.
Namely, collapsible-tree-menu-with-accordion.
However the entire thing is being rendered in a 'flat' way. The collapse/expand mechanism is working fine, but the list items are not indented, nor are they surrounded with a box.
I imagine this is a CSS issue, but I can't figure it out.
Here is the HTML (generated from django templates), with the snippet pasted as-is:
<!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.0">
<title></title>
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Hasadna: Community</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>admin</li>
</ul>
</div>
</div>
<div class="container">
<ol class="breadcrumb">
<li>Users</li>
<li class="active">Lucid</li>
</ol>
<div class="well">
<center>
<img src="http://www.gravatar.com/avatar/8b1d41ccb353509f6c864b1faddf3202?d=blank?s=140" name="aboutme" width="140" height="140" border="0" class="img-circle"></a>
<h3 class="media-heading">Lucid</h3>
<h3 class="media-heading"><small>עמרי דור | Omri Dor</small></h3>
<span><strong>Skills: </strong></span>
<span class="label label-warning">Baking Cookies</span>
</center>
<hr>
<p class="text-left"><strong>Email: </strong><br>
a#b.c</p>
<hr>
<center>
<p class="text-left"><strong>Bio: </strong><br>
Hi guys.
</p>
</center>
<hr>
<p class="text-left"><strong>Code Contributions: </strong></p>
<ul class="list-group">
<li class="list-group-item"><strong>Total Commits:</strong> 7</li>
</ul>
<div class="container">
<div class="row">
<div class="span12">
<div class="menu">
<div class="accordion">
<!-- Áreas -->
<div class="accordion-group">
<!-- Área -->
<div class="accordion-heading area">
<a class="accordion-toggle" data-toggle="collapse" href=
"#area1">Área #1</a>
<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil" data-toggle=
"dropdown" href="#" style="font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar equipamento -->
<li>
<a href="../equipamento/add.php"><i class=
"icon-plus"></i> Adicionar equipamento</a>
</li>
<li class="divider"></li><!-- Editar área -->
<li>
<a href="../area/edit.php"><i class=
"icon-pencil"></i> Editar área</a>
</li>
<li class="divider"></li><!-- Remover área -->
<li>
<a class="danger" href="#remove"><i class=
"icon-remove"></i> Remover área</a>
</li>
</ul>
</div>
</div><!-- /Área -->
<div class="accordion-body collapse" id="area1">
<div class="accordion-inner">
<div class="accordion" id="equipamento1">
<!-- Equipamentos -->
<div class="accordion-group">
<div class="accordion-heading equipamento">
<a class="accordion-toggle" data-parent=
"#equipamento1-1" data-toggle="collapse" href=
"#ponto1-1">Equipamento #1-1</a>
<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil"
data-toggle="dropdown" href="#" style=
"font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar ponto -->
<li>
<a href=
"../ponto/add.php"><i class="icon-plus">
</i> Adicionar ponto</a>
</li>
<li class="divider"></li>
<!-- Editar equipamento -->
<li>
<a href=
"../equipamento/edit.php"><i class=
"icon-pencil"></i> Editar
equipamento</a>
</li>
<li class="divider"></li>
<!-- Remover equipamento -->
<li>
<a class="danger" href=
"#remove"><i class=
"icon-remove"></i> Remover
equipamento</a>
</li>
</ul>
</div>
</div><!-- Pontos -->
<div class="accordion-body collapse" id="ponto1-1">
<div class="accordion-inner">
<div class="accordion" id="servico1">
<div class="accordion-group">
<div class=
"accordion-heading ponto">
<a class="accordion-toggle"
data-parent="#servico1-1-1"
data-toggle="collapse" href=
"#servico1-1-1">Ponto
#1-1-1</a>
<div class="dropdown edit">
<a class=
"dropdown-toggle icon-pencil"
data-toggle="dropdown"
href="#" style=
"font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar servico -->
<li>
<a href=
"../servico/add.php">
<i class=
"icon-plus"></i>
Adicionar
servico</a>
</li>
<li class="divider">
</li><!-- Editar ponto -->
<li>
<a href=
"../ponto/edit.php">
<i class=
"icon-pencil"></i>
Editar ponto</a>
</li>
<li class="divider">
</li><!-- Remover ponto -->
<li>
<a class="danger"
href=
"#remove"><i class=
"icon-remove"></i>
Remover ponto</a>
</li>
</ul>
</div>
</div><!-- Serviços -->
<div class=
"accordion-body collapse" id=
"servico1-1-1">
<div class="accordion-inner">
<ul class="nav nav-list">
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-1</a>
</li>
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-2</a>
</li>
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-3</a>
</li>
</ul>
</div>
</div><!-- /Serviços -->
</div>
</div>
</div>
</div><!-- /Pontos -->
</div><!-- /Equipamentos -->
</div>
</div>
</div>
</div>
</div><!-- /accordion -->
</div>
</div>
</div>
</div>
</div>
<hr>
<footer>
<p></p>
</footer>
</div>
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And this is the additional CSS file, '/static/css/style.css', containing the CSS snippet that's supposed to go along with the HTML snippet:
body {
padding-top: 80px;
padding-bottom: 20px;
}
.menu .accordion-heading { position: relative; }
.menu .accordion-heading .edit {
position: absolute;
top: 8px;
right: 30px;
}
.menu .area { border-left: 4px solid #f38787; }
.menu .equipamento { border-left: 4px solid #65c465; }
.menu .ponto { border-left: 4px solid #98b3fa; }
.menu .collapse.in { overflow: visible; }
Any ideas?
So it turns out I had two problems:
I was using Bootstrap v3.1.0, which was incompatible with this snippet.
Even after switching to v2.3.2, the files sat in the same exact (django served /static/) path, and my browser kept using the cached version (3.1.0).
About (1):
Unfortunately if I go back to 2.3.2 then my navbar is no longer rendered correctly. I would really like to migrate the snippet to Bootstrap 3.1.0, but my CSS is far too poor for me to be able to do it.
About (2):
A quick workaround was to indicate the version number somewhere in the path (i.e. boostrap/2.3.2/css/...).
A cleaner solution is django-cachebuster, which adds a meaningless get parameter for your static resources (i.e. /static/my.css?v=9393939). This parameter can be set to be the file's last modification date, so that ought to do it.
Thanks for your help guys!