html - Converting Web Template into Master Page -
i want convert web template master/content page. template runs fine when converted master/content page menu not working @ all, neither notification pop-ups nor message pop-ups works...
here web page without master/content page.
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %> <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>adminlte 2 | dashboard</title> <!-- tell browser responsive screen width --> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'/> <!-- bootstrap 3.3.4 --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <!-- font awesome icons --> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <!-- ionicons --> <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" /> <!-- theme style --> <link href="dist/css/adminlte.min.css" rel="stylesheet" type="text/css" /> <!-- adminlte skins. have chosen skin-blue starter page. however, can choose other skin. make sure apply skin class body tag changes take effect. --> <link href="dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" /> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body class="skin-blue sidebar-mini"> <form id="form1" runat="server"> <div class="wrapper"> <!-- main header --> <header class="main-header"> <!-- logo --> <a href="index2.html" class="logo"> <!-- mini logo sidebar mini 50x50 pixels --> <span class="logo-mini"><b>a</b>lt</span> <!-- logo regular state , mobile devices --> <span class="logo-lg"><b>admin</b>lte</span> </a> <!-- header navbar --> <nav class="navbar navbar-static-top" role="navigation"> <!-- sidebar toggle button--> <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> <span class="sr-only">toggle navigation</span> </a> <!-- navbar right menu --> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <!-- messages: style can found in dropdown.less--> <li class="dropdown messages-menu"> <!-- menu toggle button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-envelope-o"></i> <span class="label label-success">4</span> </a> <ul class="dropdown-menu"> <li class="header">you have 4 messages</li> <li> <!-- inner menu: contains messages --> <ul class="menu"> <li><!-- start message --> <a href="#"> <div class="pull-left"> <!-- user image --> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="user image"/> </div> <!-- message title , timestamp --> <h4> support team <small><i class="fa fa-clock-o"></i> 5 mins</small> </h4> <!-- message --> <p>why not buy new awesome theme?</p> </a> </li><!-- end message --> </ul><!-- /.menu --> </li> <li class="footer"><a href="#">see messages</a></li> </ul> </li><!-- /.messages-menu --> <!-- notifications menu --> <li class="dropdown notifications-menu"> <!-- menu toggle button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-bell-o"></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 notifications --> <ul class="menu"> <li><!-- start notification --> <a href="#"> <i class="fa fa-users text-aqua"></i> 5 new members joined today </a> </li><!-- end notification --> </ul> </li> <li class="footer"><a href="#">view all</a></li> </ul> </li> <!-- tasks menu --> <li class="dropdown tasks-menu"> <!-- menu toggle button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-flag-o"></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 tasks --> <ul class="menu"> <li><!-- task item --> <a href="#"> <!-- task title , progress text --> <h3> design buttons <small class="pull-right">20%</small> </h3> <!-- progress bar --> <div class="progress xs"> <!-- change css width attribute simulate progress --> <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 --> </ul> </li> <li class="footer"> <a href="#">view tasks</a> </li> </ul> </li> <!-- user account menu --> <li class="dropdown user user-menu"> <!-- menu toggle button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <!-- user image in navbar--> <img src="dist/img/user2-160x160.jpg" class="user-image" alt="user image"/> <!-- hidden-xs hides username on small devices image appears. --> <span class="hidden-xs">alexander pierce</span> </a> <ul class="dropdown-menu"> <!-- user image in menu --> <li class="user-header"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="user image" /> <p> alexander pierce - web developer <small>member since nov. 2012</small> </p> </li> <!-- menu body --> <li class="user-body"> <div class="col-xs-4 text-center"> <a href="#">followers</a> </div> <div class="col-xs-4 text-center"> <a href="#">sales</a> </div> <div class="col-xs-4 text-center"> <a href="#">friends</a> </div> </li> <!-- menu footer--> <li class="user-footer"> <div class="pull-left"> <a href="#" class="btn btn-default btn-flat">profile</a> </div> <div class="pull-right"> <a href="#" class="btn btn-default btn-flat">sign out</a> </div> </li> </ul> </li> <!-- control sidebar toggle button --> <li> <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a> </li> </ul> </div> </nav> </header> <!-- left side column. contains logo , sidebar --> <aside class="main-sidebar"> <!-- sidebar: style can found in sidebar.less --> <section class="sidebar"> <!-- sidebar user panel (optional) --> <div class="user-panel"> <div class="pull-left image"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="user image" /> </div> <div class="pull-left info"> <p>alexander pierce</p> <!-- status --> <a href="#"><i class="fa fa-circle text-success"></i> online</a> </div> </div> <!-- search form (optional) --> <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='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button> </span> </div> </form> <!-- /.search form --> <!-- sidebar menu --> <ul class="sidebar-menu"> <li class="header">header</li> <!-- optionally, can add icons links --> <li class="active"><a href="#"><i class='fa fa-link'></i> <span>link</span></a></li> <li><a href="#"><i class='fa fa-link'></i> <span>another link</span></a></li> <li class="treeview"> <a href="#"><i class='fa fa-link'></i> <span>multilevel</span> <i class="fa fa-angle-left pull-right"></i></a> <ul class="treeview-menu"> <li><a href="#">link in level 2</a></li> <li><a href="#">link in level 2</a></li> </ul> </li> </ul><!-- /.sidebar-menu --> </section> <!-- /.sidebar --> </aside> <!-- content wrapper. contains page content --> <div class="content-wrapper"> <!-- content header (page header) --> <section class="content-header"> <h1> page header <small>optional description</small> </h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> level</a></li> <li class="active">here</li> </ol> </section> <!-- main content --> <section class="content"> <!-- page content here --> </section><!-- /.content --> </div><!-- /.content-wrapper --> <!-- main footer --> <footer class="main-footer"> <!-- right --> <div class="pull-right hidden-xs"> want </div> <!-- default left --> <strong>copyright © 2015 <a href="#">company</a>.</strong> rights reserved. </footer> <!-- control sidebar --> <aside class="control-sidebar control-sidebar-dark"> <!-- create tabs --> <ul class="nav nav-tabs nav-justified control-sidebar-tabs"> <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li> <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li> </ul> <!-- tab panes --> <div class="tab-content"> <!-- home tab content --> <div class="tab-pane active" id="control-sidebar-home-tab"> <h3 class="control-sidebar-heading">recent activity</h3> <ul class='control-sidebar-menu'> <li> <a href='javascript::;'> <i class="menu-icon fa fa-birthday-cake bg-red"></i> <div class="menu-info"> <h4 class="control-sidebar-subheading">langdon's birthday</h4> <p>will 23 on april 24th</p> </div> </a> </li> </ul><!-- /.control-sidebar-menu --> <h3 class="control-sidebar-heading">tasks progress</h3> <ul class='control-sidebar-menu'> <li> <a href='javascript::;'> <h4 class="control-sidebar-subheading"> custom template design <span class="label label-danger pull-right">70%</span> </h4> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-danger" style="width: 70%"></div> </div> </a> </li> </ul><!-- /.control-sidebar-menu --> </div><!-- /.tab-pane --> <!-- stats tab content --> <div class="tab-pane" id="control-sidebar-stats-tab">stats tab content</div><!-- /.tab-pane --> <!-- settings tab content --> <div class="tab-pane" id="control-sidebar-settings-tab"> <form method="post"> <h3 class="control-sidebar-heading">general settings</h3> <div class="form-group"> <label class="control-sidebar-subheading"> report panel usage <input type="checkbox" class="pull-right" checked /> </label> <p> information general settings option </p> </div><!-- /.form-group --> </form> </div><!-- /.tab-pane --> </div> </aside><!-- /.control-sidebar --> <!-- add sidebar's background. div must placed after control sidebar --> <div class='control-sidebar-bg'></div> </div><!-- ./wrapper --> <!-- required js scripts --> <!-- jquery 2.1.4 --> <script src="plugins/jquery/jquery-2.1.4.min.js"></script> <!-- bootstrap 3.3.2 js --> <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <!-- adminlte app --> <script src="dist/js/app.min.js" type="text/javascript"></script> <!-- optionally, can add slimscroll , fastclick plugins. both of these plugins recommended enhance user experience. slimscroll required when using fixed layout. --> </form> </body> </html>how can convert master/content page? guidance appreciated. (i not able place master , content page code increases message size).
i stumble upon following 2 url's purpose.
this 1 github link link complete solution (i checked 1 , impressive conversion)
https://github.com/starchand/adminlte_mvc
this microsoft extension visualstudio. (don't know how work) https://marketplace.visualstudio.com/items?itemname=c0shea.adminltetemplate
Comments
Post a Comment