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>
Related
Using sb admin panel 2 in my application. I want to make second level menu in side menu, but when i do that, second level menu is always open. I want when I click first level menu then second menu appear. Not able to understand where is the problem.
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i>Sudent <span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Student
</li>
<li>
Subject
</li>
</ul>
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i>Routine <span class="fa arrow"></span>
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
this code is present in my page header and added all js in my footer
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/morrisjs/morris.min.js"></script>
<script src="../js/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
Add collapse class to your second level
<ul class="nav nav-second-level collapse">
P.S
it looks like you are using SBAdmin V2 and not V1, should specify that.
Also, i would suggest to try copy/paste from their demo pages and modifying it to your likings.
SBAdminV2 Live Preview
SBAdminV2 Github page (Source, Documentation, and HELP! :) )
SBAdminV1 Live Preview
EDIT
Seems to work fine with their exact code.
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" rel="stylesheet">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/morrisjs/morris.css" rel="stylesheet">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<!-- /.navbar-header -->
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav in" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
Flot Charts
</li>
<li>
Morris.js Charts
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-table fa-fw"></i> Tables
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Forms
</li>
<li>
<i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Icons
</li>
<li>
Grid
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
Second Level Item
</li>
<li>
Second Level Item
</li>
<li>
Third Level <span class="fa arrow"></span>
<ul class="nav nav-third-level collapse">
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
Blank Page
</li>
<li>
Login Page
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- /#page-wrapper -->
</div>
<script src="//blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script src="//blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="//blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"></script>
<script src="//blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
</body>
I'm working on the navbar for a site and for the menu it has an unordered list with submenus that are actived when the menu item is hovered over, but when you remove your mouse from the menu item to attempt to click on a submenu item the submenu dissapears. Is there a way with CSS/HTML to hover over it, then have the user click on it to keep it activated? If that's not possible, is it possible to change it to stay activated on a click without the preview on the hover?
HTML:
<!-- Navbar -->
<div class="header">
<div class="topbar">
<ul class="list-inline">
<li class="smallsocial"> </li><li> </li>
<li class="smallsocial"> <a href="https://www.facebook.com/prayingpelicanmissions" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://plus.google.com/+PrayingpelicanmissionsOrg" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Google Plus">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://www.youtube.com/user/petepelican?sub_confirmation=1" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Youtube">
<i class="fa fa-youtube"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://twitter.com/PrayingPelican" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://www.instagram.com/prayingpelicanmissions/" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Instagram">
<i class="fa fa-instagram"></i>
</a></li><li> </li>
<li class="pull-right"><button class="btn btn-dark">CONTACT US</button></li>
<li class="pull-right"><button class="btn btn-dark">LOGIN</button></li>
</ul>
</div>
<!-- End Social Links -->
<div class="navbar mega-menu" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Navbar Brand -->
<div class="navbar-brand">
<a href="index.html">
<img class="default-logo" src="assets/img/whitelogo.png" alt="Logo">
<img class="shrink-logo" src="assets/img/blacklogo.png" alt="Logo">
</a>
</div>
<!-- ENd Navbar Brand -->
<!-- Header Inner Right -->
<!-- End Header Inner Right -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="menu-container">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="dropdown">
<a href="javascript:void(0);" class="pull-right dropdown-toggle" data-toggle="dropdown">
About Us
</a>
<ul class="dropdown-menu">
<li>Who We Are</li>
<li>Partners</li>
<li>Trip Media</li>
<li>Trip Journals</li>
<li role="separator" class="divider"></li>
<li> Donate</li>
</ul>
<!-- End Home -->
<!-- Shortcodes -->
<li class="dropdown mega-menu-fullwidth">
<a href="javascript:void(0);" class="pull-right dropdown-toggle" data-toggle="dropdown">
Locations
</a>
<ul class="dropdown-menu">
<li>
<div class="mega-menu-content disable-icons">
<div class="container">
<div class="row equal-height">
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>United States</h3></li>
<!-- Typography -->
<li class="location"><i></i> Tucson, AZ</li>
<li class="location"><i></i>San Francisco, CA</li>
<li class="location"><i></i> Miami, FL</li>
<li class="location"><i></i> Chicago, IL</li>
<li class="location"><i></i> Boston, MA</li>
<li class="location"><i></i>Minneapolis, MN</li>
<li class="location"><i></i> Pittsburg, PA</li>
<li class="location"><i></i> Providence, RI</li>
<li class="location"><i></i> Memphis, TN</li>
<li class="location"><i></i>US Reservations</li>
<!-- End Typography -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>CENTRAL AMERICA</h3></li>
<!-- Buttons -->
<li class="location"><i></i>Belize</li>
<li class="location"><i></i>Costa Rica</li>
<li class="location"><i></i>Guatemala</li>
<li class="location"><i></i>Mexico</li>
<li class="location"><i></i>Nicaragua</li>
<!-- End Buttons -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>CARIBBEAN</h3></li>
<!-- Buttons -->
<li class="location"><i></i>Bahamas</li>
<li class="location"><i></i>Cuba</li>
<li class="location"><i></i>Dominican Republic</li>
<li class="location"><i></i>Haiti</li>
<li class="location"><i></i>Jamaica</li>
<li class="location"><i></i>Puerto Rico</li>
<!-- End Buttons -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>AFRICA/EUROPE</h3></li>
<!-- Buttons -->
<li class="location"><i></i>Italy</li>
<li class="location"><i></i>Ghana</li>
<li class="location"><i></i>South Africa</li>
<!-- End Buttons -->
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<!-- End Shortcodes -->
<!-- Demo Pages -->
<li class="">
<a href="http://www.prayingpelicanmissions.org/journals">
Trip Journals
</a>
</li>
<li class=".button12">
<a href="http://www.prayingpelicanmissions.org/mission-trip-registration">
<button type="button" class="btn btn-default">REGISTER FOR A TRIP</button>
</a>
</li>
<div class="header-inner-right">
<li class="menu-icons">
<i class="menu-icons-style search search-close search-btn fa fa-search"></i>
<div class="search-open">
<input type="text" class="animated fadeIn form-control" placeholder="Start searching ...">
</div>
<!-- End Demo Pages -->
</ul>
<!--/navbar-collapse-->
</div>
</div>
</div>
</div>
</div> <!-- End Navbar -->
There might be a small gap between the menu and submenu. Take a look here.
Ideally some code would help, but sounds like a nested dropdown would be more accurate, also I assume you are using Bootstrap 3?
Check this example Multi level dropdown menu BS3
I have this problem:
(sorry for the Greek).
I want this dropdown menu, positioned on top of everything else on the page.
I don't think that I can use position:fixed, as I want the dropdown to always be below the blue button above it.
Here is the html (I'm using bootstrap):
https://jsfiddle.net/9pLg1kLy/2/
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="navbar-default sidebar" role="navigation">
<div id="navbar-root-div" class="sidebar-nav navbar-collapse in">
<ul class="nav" id="side-menu">
<!--<sidebar-search></sidebar-search>-->
<li ng-show=currentUser ui-sref-active="active"> <a ui-sref="dashboard.map"><i class="fa fa-map fa-fw"></i> Χάρτης</a>
<!-- </li>
<li ng-show=currentUser ui-sref-active="active">
<a ui-sref="dashboard.chart"><i class="fa fa-line-chart fa-fw"></i> Δείκτες Απόδοσης</a>
</li>-->
<li id="deleteDevicePathsID" ng-show="devicePaths.p1" ui-sref-active="active"> </i> Διαγραφή Διαδρομών
</li>
<li ng-class="{active: collapseVar==1}" ng-cloak ng-show="devicesLoaded && currentUser">{{dropDown}} <a href="" ng-click="check(1)"><i class="fa fa-car fa-fw"></i> Συσκευές<span ng-show=DevicesArray
class="fa arrow"></span></a>
<ul id="deviceDataList" class="nav nav-second-level" collapse="collapseVar!=1">
<li ng-show=devicesLoaded class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" ng-model="searchText" placeholder="Αναζήτηση..."> <span class="input-group-btn">
<!--<button class="btn btn-primary dropdown" type="button"></button> -->
<div class="dropdown">
<a id="toolsDrop" href="" role="button"
class="dropdown-toggle btn btn-primary"
data-toggle="dropdown"
style="padding: 6px 6px 6px 8px;">Φίλτρα <b
class="caret"></b></a>
<ul class="dropdown-menu" style="min-width: 0; top: 34px; left: -20px;">
<li>
<a href="" style="padding: 6px; min-width: 0"
ng-click="statusFilter = movingFilter"> <img
src="misc/images/pinOntheMove.png"> Κινείται</a>
</li>
<li><a href="" style="padding: 6px;min-width: 0"
ng-click="statusFilter = stoppedFilter"> <img
src="misc/images/pinStopped.png"> Σε Στάση</a>
</li>
<li><a href="" style="padding: 6px;min-width: 0"
ng-click="statusFilter = unknownFilter"> <img
src="misc/images/pinUnknown.png"> Άγνωστο</a>
</li>
<li class="divider hidden-xs"></li>
<li><a href="" style="padding: 6px;min-width: 0"
ng-click="statusFilter = allFilter"> <i class="fa fa-th-list"></i> Όλα</a>
</li>
</ul>
</div>
</span>
</div>
</li>
<li>
<ul class="nav nav-second-level sidebar-device-list">
<li ng-init="third=!third" ng-class="{active: multiCollapseVar==3}" ng-repeat="device in DevicesArray | filter:dataFilter | filter:searchText | filter: statusFilter" id="{{device.DeviceId}}" lat="{{device.DeviceData.Position.Y}}" lng="{{device.DeviceData.Position.X}}" ui-sref-active="active"> <a style="font-weight:bold; border-style: none none solid none;" href="" ng-click="CenterMapOnPosition(device.DeviceData.Position, device.DeviceData.DeviceId)"><img
width="26"
height="26"
ng-src="misc/images/pin{{device.DeviceData.State}}.png">
{{device.Name}} <p style="font-weight: normal; color: #002a80">{{device.DeviceData.Location}}</p></a>
</li>
</ul>
</li>
</ul>
<li ng-show="devicesLoaded && currentUser" ui-sref-active="active"> </i><i ng-hide="labelsShown" class="fa fa-square-o fa-fw"></i> Ονόματα Οχημάτων
</li>
<li ng-show=currentUser ui-sref-active="active"> </i> Αποσύνδεση
</li>
</ul>
</div>
</div>
The dropdown menu is at line 32.
Try to add z-index with position:relative that's make it visible
Try adding a z-index on the element which is cut off. This will bring the element to the front
I have a left sidebar and a main menu.....i need to keep the left sidebar fixed while scrolling down the page....but am not getting it.
This is my code.
Can anyone help me how to do it?
<div class="nav-wrapper">
<!-- START Left navbar-->
<ul class="nav navbar-nav">
<li>
<!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
<a href="" data-toggle-state="aside-collapsed" class="hidden-xs">
<em class="fa fa-navicon"></em>
</a>
<!-- Button to show/hide the sidebar on mobile. Visible on mobile only.-->
<a href="" data-toggle-state="aside-toggled" data-no-persist="true" class="visible-xs sidebar-toggle">
<em class="fa fa-navicon"></em>
</a>
</li>
</ul>
<!-- END Left navbar-->
<!-- START Right Navbar-->
<ul class="nav navbar-nav navbar-right">
<!-- <li>
<a href="" data-search-open="">
<em class="icon-magnifier"></em>
</a>
</li> -->
<!-- Fullscreen (only desktops)-->
<!-- <li class="visible-lg">
<a href="" data-toggle-fullscreen="">
<em class="fa fa-expand"></em>
</a>
</li> -->
<li class="dropdown user">
<!-- <span style="color: #ddd;"></span> -->
<a title="Log Out" style="text-decoration: none; box-shadow:0px 0px 0px; cursor: pointer;" class="dropdown-toggle"
data-toggle="dropdown" data-hover="dropdown"
data-close-others="true">
{{loggedInUser.userFirstName}} {{loggedInUser.userLastName}} <i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li><i class="fa fa-sign-out"></i> Log Out</li>
</ul>
</li>
</ul>
</div>
Use position:fixed;overflow:auto; on the left one. You may need to adjust the position of the right one. Use position:relative; on the right panel.
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" %}" ...