Visualize: Embed table view

Test plugins

HTML

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>

	<body {{ body }}>
	<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1647970105516281',
      xfbml      : true,
      version    : 'v2.7'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
		<div id="pf-loading-message">
			<span class="l-1"></span>
			<span class="l-2"></span>
			<span class="l-3"></span>
			<span class="l-4"></span>
			<span class="l-5"></span>
			<span class="l-6"></span>
		</div>
		<div id="section-header">
			<div class="sticky-bar visible-md visible-lg">
				<div class="container-fluid">
					{% if is_user() == true %}
						<div class="row">
							<div class="col-md-3 col-sm-3 hidden-xs">
								{{ logo }}
							</div>
							{% if user_group_setting('search.can_use_global_search') %}
								<div id="search-panel" class="col-md-4 col-sm-4 hidden-xs">
									<div class="js_temp_friend_search_form"></div>
									<form method="get" action="{{url('search')}}" class="header_search_form" id="header_search_form">
										<div class="form-group has-feedback">
											<input type="text" name="q" placeholder="{{ _p('Search...') }}" autocomplete="off" class="form-control js_temp_friend_search_input in_focus" id="h
eader_sub_menu_search_input" />
											<span class="fa fa-search form-control-feedback" aria-hidden="true"></span>
										</div>
									</form>
								</div>
							{% endif %}
							<div id="user_sticky_bar" class="col-md-5 col-sm-5"></div>
						</div>
						<div class="row visible-xs" id="header_search_form_xs">
							<div class="col-md-12 panel_xs">
								{% if user_group_setting('search.can_use_global_search') %}
									<div...

CSS

body {
  background: #e4e8eb;
  color: #555555;
}
a,
a:hover {
  color: #297fc7;
}
a:hover {
  color: #297fc7;
}
.breadcrumbs-top {
  border-bottom-color: #dddddd;
}
.navbar-default {
  background: #ffffff;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover {
  color: #777777;
}
.navbar-default .navbar-nav > li > a:hover {
  background: #f4f5f6;
  color: #333333;
}
.navbar-default .navbar-nav > li > a.menu_is_selected,
.navbar-default .navbar-nav > li > a.menu_is_selected:hover,
.navbar-default .navbar-nav > li > a.menu_is_selected:focus {
  background: #848586;
  color: #ffffff;
}
.sticky-bar {
  background: #297fc7;
}
@media (max-width: 992px) {
  .navbar-header {
    background-color: #297fc7;
  }
}
#js_block_border_core_menusub ul.action > li.active > a,
#js_block_border_core_menusub ul.action > li.active > a:hover,
#js_block_border_core_menusub ul.action > li.active > a:focus {
  border-left-color: #297fc7;
  background: #f0f0f0;
  color: #297fc7;
}
#content-stage {
  background: #ffffff;
}
.container-fluid {
  max-width: 1190px;
}
footer,
.footer-holder {
  background: #1a1a1a;
  color: #6f8494;
}
footer a,
.footer-holder a,
footer a:hover,
.footer-holder a:hover {
  color: #6f8494;
}
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background: #5cb85c;
  color: #ffffff;
  border-color: #5cb85c;
}
.btn-success:hover {
  background: #6ec06e;
}
.form-control,
.edit_menu_container {
  border-color: #dddddd;
  background: #ffffff;
  color: #555555;
}
.form-control:focus {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
  border-color: #66afe9;
}
#header_search_form span.form-control-feedback {
  background: #d8eef6 !important;
  color: #74b8f2 !important;
}
ul.action > li {
  border-bottom-color: #dddddd !important;
}
ul.action > li > a,
ul.action > li > a:hover {
  color: #888888 !important;
}
ul.action > li > a:hover {
  color: #297fc7 !important;
}
.block {
 ...

JavaScript

var username_set = false;

$Ready(function() {
	if( !username_set ){
		var username = $("#auth-user").attr("data-name");
		$("#hd-user>a").append("<div id='phpfoxer_username'>"+username+"</div>");
		username_set = true;
	/**/	
	$("<i class='fa fa-dashboard'></i>").prependTo("#leftSideMenu .navbar-default .navbar-nav > li[rel='menu1'] a");
	$("<i class='fa fa-pencil-square'></i>").prependTo("#leftSideMenu .navbar-default .navbar-nav > li[rel='menu30'] a");
	$("<i class='fa fa-users'></i>").prependTo("#leftSideMenu .navbar-default .navbar-nav > li[rel='menu17'] a");
	$("<i class='fa fa-photo'></i>").prependTo("#leftSideMenu .navbar-default .navbar-nav > li[rel='menu55'] a");
	$("<i class='fa fa-comments'></i>").prependTo("#leftSideMenu .navbar-default .navbar-nav > li[rel='menu39'] a");
	$("<i class='fa fa-bar-chart'></i>").prependTo("#leftSideMenu .navbar-default .navbar-nav > li[rel='menu60'] a");
	$("<i class='fa fa-puzzle-piece'></i>").prependTo("#leftSideMenu .navbar-default .navbar-nav > li[rel='menu64'] a");
	$("<i class='fa fa-calendar'></i>").prependTo("#leftSideMenu .navbar-default .navbar-nav > li[rel='menu35'] a");
	$("<i class='fa fa-music'></i>").prependTo("#leftSideMenu .navbar-default .navbar-nav > li[rel='menu51'] a");
	$("<i class='fa fa-usd'></i>").prependTo("#leftSideMenu .navbar-default .navbar-nav > li[rel='menu48'] a");
	$("<i class='fa fa-dashboard'></i>").prependTo("#leftSideMenu .navbar-default .navbar-nav > li[rel='menu53'] a");
	$("<i class='fa fa-users'></i>").prependTo("#leftSideMenu .navbar-default .navbar-nav > li[rel='menu70'] a");
	$("<i class='fa fa-video-camera'></i>").prependTo("#leftSideMenu .navbar-default .navbar-nav > li[rel='menu71'] a");
	}
	
});