Part 1!
So you want to integrate your website into Blesta. Well first off copy all your images / css / javascript into the /app/views/client/bootstrap/
And empty your Blesta's structure.pdt and use the following base template:
<!DOCTYPE html>
<html dir="<?php echo (in_array($this->_("AppController.lang.dir", true), array("ltr", "rtl")) ? $this->_("AppController.lang.dir", true) : "ltr");?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo (($page_title = (isset($page_title) ? $page_title : $this->_($page_title_lang, true, $get_params))) ? $this->Html->_($page_title, true) . " ~ " : "") . $this->Html->_($system_company->name, true);?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="<?php echo $this->view_dir;?>images/favicon.ico" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/json2.js"></script><![endif]-->
<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.adapter.jquery.js"></script>
<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.js"></script>
<!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.html4.js"></script><![endif]-->
<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.2.0.js"></script>
<!-- Begin Content -->
<div class="container">
<div class="row<?php echo (!$this->Html->ifSet($show_header, true) ? " login" : "");?>">
<?php
if (!empty($active_nav['secondary'])) {
?>
<div class="col-md-3">
<div class="list-group">
<?php
foreach ($active_nav['secondary'] as $link => $value) {
?>
<a href="<?php $this->Html->_($link);?>" class="list-group-item left-nav <?php echo ($value['active'] ? "active" : "");?>">
<i class="<?php $this->Html->_($value['icon']);?>"></i>
<?php
$this->Html->_($value['name']);
?>
</a>
<?php
}
?>
</div>
</div>
<div class="col-md-9">
<div class="row">
<?php echo $content;?>
</div>
</div>
<?php
}
else {
echo $content;
}
?>
</div>
</div>
<div class="modal fade" id="global_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="global_modal_title"></h4>
</div>
<div class="modal-body"><i class="fa fa-spinner fa-spin"></i></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<?php echo $this->Javascript->getFiles("body");?>
<?php echo $this->Javascript->getInline();?>
<?php echo $this->Html->ifSet($body_end);?>
</body>
</html>
Then add your CSS to the head section:
<!-- Meta Tags -->
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content=" " />
<meta name="keywords" lang="en" content=" " xml:lang="en" />
<meta name="revisit-after" content="1 month" />
<meta name="rating" content="Safe For Kids" />
<meta name="author" content="Licensecart" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/json2.js"></script><![endif]-->
<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.adapter.jquery.js"></script>
<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.js"></script>
<!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.html4.js"></script><![endif]-->
<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.2.0.js"></script>
<!-- CSS Files -->
<link href='//fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/global.css" rel="stylesheet">
<link href="css/nivo-lightbox.css" rel="stylesheet">
<link rel="stylesheet" href="css/default/default.css" type="text/css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
<!-- Facebook Tags -->
<meta property="og:site_name" content="Licensecart" />
<meta property="og:image" content="https://licensecart.com/imgs/Facebook.png" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://licensecart.com/" />
<meta property="og:title" content="Licensecart, the number one for Blesta Licenses and SSL Certificates." />
</head>
<body>
Now add the Blesta files at the bottom of the head and the start of the body:
<?php
echo $this->Javascript->getFiles("head");
echo $this->Html->ifSet($custom_head);
?>
<!--[if lt IE 9]>
<script src="<?php echo $this->view_dir;?>javascript/html5shiv.js" type="text/javascript"></script>
<script src="<?php echo $this->view_dir;?>javascript/respond.min.js" type="text/javascript"></script>
<![endif]-->
<?php echo $this->Html->ifSet($head);?>
</head>
<body>
<?php echo $this->Html->ifSet($body_start);?>
Now add the Blesta CSS above or below your CSS whichever is easier to help override any CSS you need to.
<!-- Blesta Files -->
<link href="<?php echo $this->view_dir;?>css/styles.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->view_dir;?>css/slider.css" rel="stylesheet" type="text/css" />
<?php
// Theme CSS
if (isset($theme_css)) {
?>
<link href="<?php $this->Html->_($theme_css);?>" rel="stylesheet" type="text/css" media="screen" />
<?php
}
if ($this->_("AppController.lang.dir", true) == "rtl") {
?>
<link href="<?php echo $this->view_dir;?>css/rtl.css" rel="stylesheet" type="text/css" media="screen" />
<?php
}
?>
Finally add your javascript to the footer bellow the Blesta JS already there. (If needed you can put the Blesta JS at the bottom of yours.)
<script type="text/javascript" src="<?php echo $this->view_dir;?>js/jquery.cookie.js"></script>
<script type="text/javascript" src="<?php echo $this->view_dir;?>js/jquery.cookiecuttr.js"></script>
<script type="text/javascript" src="<?php echo $this->view_dir;?>js/nivo-lightbox.min.js"></script>
<script type="text/javascript">$('.tooltips').tooltip()</script>
<script type="text/javascript">$(document).ready(function(){$('a').nivoLightbox();});</script>
<script type="text/javascript">$(document).ready(function () {$.cookieCuttr();});</script>
<script type="text/javascript">$(document).on('click', '.yamm .dropdown-menu', function(e) {e.stopPropagation()})</script>
And add your footer code above the Blesta:
<div class="footerjumbotron">
<div class="container">
<div class="row">
<div class="col-xs-6 visible-xs-inline">
<a href="//licensecart.com/blesta-monthly"><div class="sprites1 showcase-mini blesta-mini"></div></a>
</div>
<div class="col-xs-6 visible-xs-inline">
<a href="//licensecart.com/interworx"><div class="sprites1 showcase-mini interworx-mini"></div></a>
</div>
<div class="col-xs-6 visible-xs-inline">
<a href="//licensecart.com/litespeed"><div class="sprites1 showcase-mini litespeed-mini"></div></a>
</div>
<div class="col-xs-6 visible-xs-inline">
<a href="//licensecart.com/kernelcare"><div class="sprites1 showcase-mini kernelcare-mini"></div></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
<a href="//licensecart.com/blesta-monthly"><div class="sprites1 showcase blesta"></div></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
<a href="//licensecart.com/interworx"><div class="sprites1 showcase interworx"></div></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
<a href="//licensecart.com/litespeed"><div class="sprites1 showcase litespeed"></div></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
<a href="//licensecart.com/kernelcare"><div class="sprites1 showcase kernelcare"></div></a>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-9">
<p>© 2014 Licensecart. All Rights Reserved.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<p class="footright"><a href="//blesta.com/" target="_blank"><img class='pull-right' style='text-align: right !important;background-color: #ffffff;margin-top:-10px !important;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;' alt='Powered by Blesta' src='<?php echo $this->view_dir;?>img/poweredbyblestasmall.png' /></a></p>
</div>
</div>
</div>
</footer>
Now please add the following to your links
<?php echo $this->view_dir;?>
So overall it should look like this:
<!DOCTYPE html>
<html dir="<?php echo (in_array($this->_("AppController.lang.dir", true), array("ltr", "rtl")) ? $this->_("AppController.lang.dir", true) : "ltr");?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo (($page_title = (isset($page_title) ? $page_title : $this->_($page_title_lang, true, $get_params))) ? $this->Html->_($page_title, true) . " | " : "") . $this->Html->_($system_company->name, true);?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="<?php echo $this->view_dir;?>images/favicon.ico" />
<!-- Meta Tags -->
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content=" " />
<meta name="keywords" lang="en" content=" " xml:lang="en" />
<meta name="revisit-after" content="1 month" />
<meta name="rating" content="Safe For Kids" />
<meta name="author" content="Licensecart" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/json2.js"></script><![endif]-->
<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.adapter.jquery.js"></script>
<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.js"></script>
<!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.html4.js"></script><![endif]-->
<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.2.0.js"></script>
<!-- Blesta Files -->
<link href="<?php echo $this->view_dir;?>css/styles.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->view_dir;?>css/slider.css" rel="stylesheet" type="text/css" />
<?php
// Theme CSS
if (isset($theme_css)) {
?>
<link href="<?php $this->Html->_($theme_css);?>" rel="stylesheet" type="text/css" media="screen" />
<?php
}
if ($this->_("AppController.lang.dir", true) == "rtl") {
?>
<link href="<?php echo $this->view_dir;?>css/rtl.css" rel="stylesheet" type="text/css" media="screen" />
<?php
}
?>
<!-- CSS Files -->
<link href='//fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/global.css" rel="stylesheet">
<link href="css/nivo-lightbox.css" rel="stylesheet">
<link rel="stylesheet" href="css/default/default.css" type="text/css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
<!-- Facebook Tags -->
<meta property="og:site_name" content="Licensecart" />
<meta property="og:image" content="https://licensecart.com/imgs/Facebook.png" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://licensecart.com/" />
<meta property="og:title" content="Licensecart, the number one for Blesta Licenses and SSL Certificates." />
<?php
echo $this->Javascript->getFiles("head");
echo $this->Html->ifSet($custom_head);
?>
<!--[if lt IE 9]>
<script src="<?php echo $this->view_dir;?>javascript/html5shiv.js" type="text/javascript"></script>
<script src="<?php echo $this->view_dir;?>javascript/respond.min.js" type="text/javascript"></script>
<![endif]-->
<?php echo $this->Html->ifSet($head);?>
</head>
<body>
<?php echo $this->Html->ifSet($body_start);?>
<!-- Begin Content -->
<div class="container">
<div class="row<?php echo (!$this->Html->ifSet($show_header, true) ? " login" : "");?>">
<?php
if (!empty($active_nav['secondary'])) {
?>
<div class="col-md-3">
<div class="list-group">
<?php
foreach ($active_nav['secondary'] as $link => $value) {
?>
<a href="<?php $this->Html->_($link);?>" class="list-group-item left-nav <?php echo ($value['active'] ? "active" : "");?>">
<i class="<?php $this->Html->_($value['icon']);?>"></i>
<?php
$this->Html->_($value['name']);
?>
</a>
<?php
}
?>
</div>
</div>
<div class="col-md-9">
<div class="row">
<?php echo $content;?>
</div>
</div>
<?php
}
else {
echo $content;
}
?>
</div>
</div>
<div class="modal fade" id="global_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="global_modal_title"></h4>
</div>
<div class="modal-body"><i class="fa fa-spinner fa-spin"></i></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<div class="footerjumbotron">
<div class="container">
<div class="row">
<div class="col-xs-6 visible-xs-inline">
<a href="//licensecart.com/blesta-monthly"><div class="sprites1 showcase-mini blesta-mini"></div></a>
</div>
<div class="col-xs-6 visible-xs-inline">
<a href="//licensecart.com/interworx"><div class="sprites1 showcase-mini interworx-mini"></div></a>
</div>
<div class="col-xs-6 visible-xs-inline">
<a href="//licensecart.com/litespeed"><div class="sprites1 showcase-mini litespeed-mini"></div></a>
</div>
<div class="col-xs-6 visible-xs-inline">
<a href="//licensecart.com/kernelcare"><div class="sprites1 showcase-mini kernelcare-mini"></div></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
<a href="//licensecart.com/blesta-monthly"><div class="sprites1 showcase blesta"></div></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
<a href="//licensecart.com/interworx"><div class="sprites1 showcase interworx"></div></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
<a href="//licensecart.com/litespeed"><div class="sprites1 showcase litespeed"></div></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
<a href="//licensecart.com/kernelcare"><div class="sprites1 showcase kernelcare"></div></a>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-9">
<p>© 2014 Licensecart. All Rights Reserved.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<p class="footright"><a href="//blesta.com/" target="_blank"><img class='pull-right' style='text-align: right !important;background-color: #ffffff;margin-top:-10px !important;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;' alt='Powered by Blesta' src='<?php echo $this->view_dir;?>img/poweredbyblestasmall.png' /></a></p>
</div>
</div>
</div>
</footer>
<?php echo $this->Javascript->getFiles("body");?>
<?php echo $this->Javascript->getInline();?>
<?php echo $this->Html->ifSet($body_end);?>
<script type="text/javascript" src="<?php echo $this->view_dir;?>js/jquery.cookie.js"></script>
<script type="text/javascript" src="<?php echo $this->view_dir;?>js/jquery.cookiecuttr.js"></script>
<script type="text/javascript" src="<?php echo $this->view_dir;?>js/nivo-lightbox.min.js"></script>
<script type="text/javascript">$('.tooltips').tooltip()</script>
<script type="text/javascript">$(document).ready(function(){$('a').nivoLightbox();});</script>
<script type="text/javascript">$(document).ready(function () {$.cookieCuttr();});</script>
<script type="text/javascript">$(document).on('click', '.yamm .dropdown-menu', function(e) {e.stopPropagation()})</script>
</body>
</html>
CONFLICTS!!!
You will have fun playing around with your Javascript and Blesta's Javascript to get it working however it's easier if everything is as above to play around with it.
You can find out by logging into your client area as a customer. If the right hand side doesn't work, then you need to play with sections. The above is Bootrstrap, Javascript, Blesta's Javascript and Finally our custom code.
Part 2!
So now we have the core we need the navigation for us to browse. You want to have a menu for when your logged in and not you can use the following structure:
<?php if (!$this->Html->ifSet($logged_in)) { ?>
Navigation when your are NOT logged in.
<?php }else{ ?>
Navigation when you are logged in.
<?php } ?>
Here's my navigation:
<?php if (!$this->Html->ifSet($logged_in)) { ?>
<div class="navbar navbar-default yamm lc-nav">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a href="./" class="navbar-brand visible-lg" style="margin-top: -4px;margin-right: 20px;"><div class="sprites1 lc-logo lclogo"></div></a>
<a href="./" class="navbar-brand visible-sm visible-xs" style="margin-top: -5px;;"><div class="sprites1 lc-logo lclogo"></div></a>
<a href="./" class="navbar-brand visible-md" style="margin-top: -5px;;"><div class="sprites1 lc-logo lclogo"></div></a>
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Blesta <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="grid-menu">
<div class="row">
<div class="col-sm-4"><a href="//licensecart.com/blesta-monthly"><i class="fa fa-shopping-cart"></i> Blesta Monthly License</a></div>
<div class="col-sm-4"><a href="//licensecart.com/blesta-owned"><i class="fa fa-shopping-cart"></i> Blesta Owned License</a></div>
<div class="col-sm-4"><a href="//licensecart.com/blesta-one-time"><i class="fa fa-shopping-cart"></i> Blesta One-Time License</a></div>
</div>
<div class="row">
<div class="col-sm-4"><a href="//licensecart.com/blesta-license-manager"><i class="fa fa-exchange"></i> Blesta License System</a></div>
<div class="col-sm-4"><a href="//licensecart.com/blesta-project-manager"><i class="fa fa-briefcase"></i> Blesta Project Management</a></div>
<div class="col-sm-4"><a href="//licensecart.com/community-addons"><i class="fa fa-puzzle-piece"></i> Blesta Third Party Addons</a></div>
</div>
</li>
</ul>
</li>
<!--/ End Grid 12 Menu /-->
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Other Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="grid-menu">
<div class="row">
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/interworx"><i class="fa fa-cogs"></i> InterWorx</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/litespeed"><i class="fa fa-bolt"></i> LiteSpeed</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/kernelcare"><i class="fa fa-shield"></i> KernelCare</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/craftsrv"><i class="fa fa-gamepad"></i> CraftSRV</a></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/softaculous"><i class="fa fa-download"></i> Softaculous</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/solusvm"><i class="fa fa-cloud"></i> SolusVM</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/ssl-certificates"><i class="fa fa-lock"></i> SSL Certificates</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/webhost-bundle"><i class="fa fa-cubes"></i> WebHost Bundle</a></div>
</div>
</li>
</ul>
</li>
<!--/ End Grid 12 Menu /-->
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="grid-menu">
<div class="row">
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/integration"><i class="fa fa-magic"></i> Blesta Integration</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/upgrade"><i class="fa fa-wrench"></i> Blesta Upgrade</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/import"><i class="fa fa-truck"></i> Import to Blesta</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/out-of-the-box"><i class="fa fa-tasks"></i> Out of the Box Full service</a></div>
</div>
</li>
</ul>
</li>
<!--/ End Grid 12 Menu /-->
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Company <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="grid-menu">
<div class="row">
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/company"><i class="fa fa-map-marker"></i> About us</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/terms-of-service"><i class="fa fa-gavel"></i> Terms & Conditions</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/privacy-policy"><i class="fa fa-exclamation-triangle"></i> Privacy Policy</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/partners"><i class="fa fa-users"></i> Partners</a></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/portfolio"><i class="fa fa-desktop"></i> Portfolio</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/billing/customers/plugin/support_manager/client_tickets/departments/"><i class="fa fa-life-ring"></i> Submit a ticket</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/careers"><i class="fa fa-suitcase"></i> Our careers</a></div>
<div class="col-xs-6 col-sm-3"><a href="//licensecart.com/compare"><i class="fa fa-line-chart"></i> Compare our prices</a></div>
</div>
</li>
</ul>
</li>
<!--/ End Grid 12 Menu /-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Client Area <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<form method="post" action="https://licensecart.com/billing/customers/login/" target="_blank">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" name="username" class="form-control" id="login_username" placeholder="Username" autocomplete="off">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-lock"></i></div>
<input type="password" name="password" class="form-control" id="login_password" placeholder="Password" autocomplete="off">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block">Login to Client Area</button>
</div>
</form>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<?php }else{ ?>
<div class="navbar navbar-default yamm lc-nav">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a href="./" class="navbar-brand visible-lg" style="margin-top: -4px;margin-right: 20px;"><div class="sprites1 lc-logo lclogo"></div></a>
<a href="./" class="navbar-brand visible-sm visible-xs" style="margin-top: -5px;;"><div class="sprites1 lc-logo lclogo"></div></a>
<a href="./" class="navbar-brand visible-md" style="margin-top: -5px;;"><div class="sprites1 lc-logo lclogo"></div></a>
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw"><a href="<?php echo $this->Html->safe($this->client_uri . "accounts/");?>" class="dropdown-toggle"><i class=""></i> Payment Accounts</a></li>
<!--/ End Grid 12 Menu /-->
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw"><a href="<?php echo $this->Html->safe($this->client_uri . "contacts/");?>" class="dropdown-toggle"><i class=""></i> Contacts</a></li>
<!--/ End Grid 12 Menu /-->
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw"><a href="<?php echo $this->Html->safe($this->client_uri . "plugin/support_manager/client_main/");?>" class="dropdown-toggle"><i class=""></i> Support</a></li>
<!--/ End Grid 12 Menu /-->
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw"><a href="<?php echo $this->Html->safe($this->client_uri . "plugin/client_documents/client_main/");?>" class="dropdown-toggle"><i class=""></i> Client Documents</a></li>
<!--/ End Grid 12 Menu /-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Michael Dance <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/client/main/edit/"><i class="fa fa-edit fa-fw"></i> Manage Account</a></li>
<li><a href="/"><i class="fa fa-circle-o fa-fw"></i> Return to Portal</a></li>
<li class="divider"></li>
<li><a href="/client/logout/"><i class="fa fa-sign-out fa-fw"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
You can use the following if you wish to use the Blesta Menu and not the Bootstrap style menu:
<div class="nav-content">
<div class="nav">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"><?php $this->_("AppController.sreader.navigation");?></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="container">
<?php
$active_nav = null;
?>
<ul class="nav navbar-nav">
<?php
foreach ($this->Html->ifSet($nav, array()) as $link => $value) {
$attributes = array();
$link_attributes = array();
$dropdown = !empty($value['sub']);
$active = false;
if ($value['active']) {
$active = true;
$attributes['class'][] = "active";
$active_nav = $value;
}
if ($dropdown) {
$attributes['class'][] = "dropdown";
$link_attributes['class'][] = "dropdown-toggle";
$link_attributes['data-toggle'][] = "dropdown";
// Set parent to active if child is
if (!$active) {
foreach ($this->Html->ifSet($value['sub'], array()) as $sub_link => $sub_value) {
if ($sub_value['active']) {
$attributes['class'][] = "active";
break;
}
}
}
}
?>
<li<?php echo $this->Html->buildAttributes($attributes);?>>
<a href="<?php $this->Html->_($link);?>"<?php echo $this->Html->buildAttributes($link_attributes);?>>
<i class="<?php $this->Html->_($value['icon']);?>"></i>
<?php
$this->Html->_($value['name']);
if ($dropdown) {
?>
<b class="caret"></b>
<?php
}
?>
</a>
<?php
if (!empty($value['sub'])) {
?>
<ul class="dropdown-menu">
<?php
foreach ($this->Html->ifSet($value['sub'], array()) as $sub_link => $sub_value) {
?>
<li>
<a href="<?php $this->Html->_($sub_link);?>"><i class="<?php $this->Html->_($sub_value['icon']);?>"></i> <?php $this->Html->_($sub_value['name']);?></a>
</li>
<?php
}
?>
</ul>
<?php
}
?>
</li>
<?php
}
?>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<?php $this->Html->_($client->first_name);?> <?php $this->Html->_($client->last_name);?>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="<?php echo $this->Html->safe($this->client_uri . "main/edit/");?>"><i class="fa fa-edit fa-fw"></i> <?php $this->_("AppController.client_structure.text_update_account");?></a></li>
<?php
if ($this->Html->ifSet($portal_installed, false)) {
?>
<li><a href="<?php echo $this->Html->safe(WEBDIR);?>"><i class="fa fa-circle-o fa-fw"></i> <?php $this->_("AppController.client_structure.text_return_to_portal");?></a></li>
<?php
}
?>
<li class="divider"></li>
<li><a href="<?php echo $this->Html->safe($this->client_uri . "logout/");?>"><i class="fa fa-sign-out fa-fw"></i> <?php $this->_("AppController.client_structure.text_logout");?></a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
<?php
}
}
?>
Part 3!
You might want to custom bits of your integration to include other features like:
Login / Log out:
<?php if ($this->Html->ifSet($logged_in)) { ?>
<a href="<?php echo $this->Html->safe($this->client_uri . "logout/");?>">Logout</a>
<?php }else{ ?>
<a href="<?php echo $this->Html->safe($this->client_uri . "login/");?>">Login</a>
<?php } ?>
Page Title:
<?php echo ($this->Html->ifSet($title) ? $this->Html->_($title, true) : $this->_("AppController.client_structure.default_title", true));?>
Show Theme Logo:
<a href="<?php echo $this->Html->safe($this->base_uri);?>">
<?php if (!empty($theme_logo)) { ?>
<img src="<?php $this->Html->_($theme_logo);?>" alt="Logo" />
<?php }else{ ?>
<img src="<?php echo $this->view_dir;?>images/logo.png" alt="Blesta" />
<?php } ?>
</a>
Custom Logo:
<a href="<?php echo $this->Html->safe($this->base_uri);?>"><img src="urltologo.png"></a>
or
<a href="<?php echo $this->Html->safe($this->base_uri);?>"><div class="logo"></div></a>
or
<a href="<?php echo $this->Html->safe($this->base_uri);?>" class="logo"></a>
Logged in as Staff:
<?php if ($this->Html->ifSet($staff_as_client)) { ?>
<span class="label label-info pull-right"><a href="<?php echo $this->Html->safe($this->admin_uri . "clients/logoutasclient/");?>"><span class="fa fa-info-circle"></span> <?php $this->_("AppController.client_structure.staff_as_client_note");?></a></span>
<?php } ?>
Client Name:
<?php $this->Html->_($client->first_name);?> <?php $this->Html->_($client->last_name);?>
Company Name:
<?php $this->Html->_($client->company);?>
Email Address:
<?php $this->Html->_($client->email);?>
Client area Dashboard:
<?php echo $this->Html->safe($this->client_uri . "");?>
Hostname:
<?php echo $this->Html->safe($this->Html->ifSet($system_company->hostname)); ?>
Feel free to ask for help here. This is only for 3.3.1 and up. It varies per requirement.
Before:
After:
Warning!
I have had to change a bit of this tutorial to put this in the HEAD Section:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/json2.js"></script><![endif]-->
<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.adapter.jquery.js"></script>
<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.js"></script>
<!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.html4.js"></script><![endif]-->
<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.2.0.js"></script>
Why? Because the order forms inject Javascript in the content area, and without it loading first you get a broken order form
My mistake sorry.
101101101 got a reaction from Amyamoxylea in The Game