Michael Posted October 31, 2014 Report Posted October 31, 2014 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. Blesta Addons, PauloV, Darin and 6 others 9 Quote
Blesta Addons Posted October 31, 2014 Report Posted October 31, 2014 it was better if you have made it as a new template with your change . this way no core files has been touched thanks for your share . Michael 1 Quote
Michael Posted November 1, 2014 Author Report Posted November 1, 2014 it was better if you have made it as a new template with your change . this way no core files has been touched thanks for your share . Yeah I might do one soon, this is just to help people make their Blesta installation look like their website, showing how I did my new one. Since my 3.1 one here is outdated: http://www.blesta.com/forums/index.php?/topic/370-site-integration-with-blesta-31x/ and has over 4,000+ views this one should help people better. Quote
Joseph H Posted November 1, 2014 Report Posted November 1, 2014 Nice one @Licencecart .... full of details... Thanks Michael 1 Quote
Michael Posted November 1, 2014 Author Report Posted November 1, 2014 Nice one @Licencecart .... full of details... Thanks Welcome I tried to do a tutorial as I went did mine so it was easier to try and explain what and why Quote
Paul Posted November 2, 2014 Report Posted November 2, 2014 Nice work! Very detailed. Michael 1 Quote
Michael Posted November 2, 2014 Author Report Posted November 2, 2014 Nice work! Very detailed. Thanks mate glad you like it Quote
Sndan Posted December 28, 2014 Report Posted December 28, 2014 is it possible to start a new directory name instead of bootstrap ? Quote
Michael Posted December 28, 2014 Author Report Posted December 28, 2014 is it possible to start a new directory name instead of bootstrap ? Yep just copy the folder and re-name it we have "Licensecart" and inside that edit the config file and change the names in that and it should show up as the new name on the dropdown menu. Quote
Michael Posted January 2, 2015 Author Report Posted January 2, 2015 Where is the bootstrap folder? /app/views/client/bootstrap/ it comes with 3.2.0, 3.3.0 and 3.4.0 Quote
kpmedia Posted January 2, 2015 Report Posted January 2, 2015 Yep, found it.It was copied, and the folder renamed, in order to alter it. But it's still called "bootstrap". I'm not seeing where Blesta is pulling that from. Quote
Michael Posted January 2, 2015 Author Report Posted January 2, 2015 Yep, found it. It was copied, and the folder renamed, in order to alter it. But it's still called "bootstrap". I'm not seeing where Blesta is pulling that from. inside the folder there's a config.json Quote
kpmedia Posted January 2, 2015 Report Posted January 2, 2015 Ah! I had wingrepped the folder, but it was still case sensitive from my last search. So, am I correct in my understanding that creating a new template will allow me to remove some of the unwanted code? And that next time Blesta is updated, the update will not wipe out the adjusted theme? (Of course, I guess the issue is now new stuff that's not accounted for in the template, which means I'll have to redo my edits again.) I wish what's-his-name's css/html/js plugin would also REPLACE content, not merely add it. Hint, hint. Blesta either needs (1) to make some of the things non-manual. Or (2) make some versions LTS for security only, not for features that forces a design tweak/change. Quote
Michael Posted January 2, 2015 Author Report Posted January 2, 2015 Ah! I had wingrepped the folder, but it was still case sensitive from my last search. So, am I correct in my understanding that creating a new template will allow me to remove some of the unwanted code? And that next time Blesta is updated, the update will not wipe out the adjusted theme? (Of course, I guess the issue is now new stuff that's not accounted for in the template, which means I'll have to redo my edits again.) I wish what's-his-name's css/html/js plugin would also REPLACE content, not merely add it. Hint, hint. Blesta either needs (1) to make some of the things non-manual. Or (2) make some versions LTS for security only, not for features that forces a design tweak/change. that's correct you don't need to worry about upgrading and edit / remove what you like Quote
LeonardChallis Posted April 11, 2015 Report Posted April 11, 2015 Thanks Licensecart, your various posts around the forum are helping me get to grips with Blesta a lot! I wanted to ask, is there any information aynwhere on which css/javascript/etc includes should be kept in the page when I make my own custom structure.pdt file? I want to make sure I don't lose anything needed (for instance the icons in awesome fonts would break if I removed that CSS include) but at the same time I don't want to a) make it harder to overwrite styles and add loading time to requests by having unnecessary stuff in there. Currently I have copied the bootstrap folder and am in the process of making my own client theme so that I can style the web site how I wish, integrating it with my site. Quote
Michael Posted April 11, 2015 Author Report Posted April 11, 2015 Thanks Licensecart, your various posts around the forum are helping me get to grips with Blesta a lot! I wanted to ask, is there any information aynwhere on which css/javascript/etc includes should be kept in the page when I make my own custom structure.pdt file? I want to make sure I don't lose anything needed (for instance the icons in awesome fonts would break if I removed that CSS include) but at the same time I don't want to a) make it harder to overwrite styles and add loading time to requests by having unnecessary stuff in there. Currently I have copied the bootstrap folder and am in the process of making my own client theme so that I can style the web site how I wish, integrating it with my site. I would keep the JS / CSS files Blesta provide in the same locations they are just to ensure that they work fine. But if you make a custom folder in /app/views/client/ you can customize everything PauloV 1 Quote
serge Posted April 11, 2015 Report Posted April 11, 2015 yeah best is to create you own theme directory, just do a copy of the bootstrap & rename it, and best to place your custom java in the java dir, etc, so you keep the same structure logic Michael 1 Quote
LeonardChallis Posted April 12, 2015 Report Posted April 12, 2015 Thanks guys, I think I didn't explain myself correctly. I certainly have made my own folder (leaving bootstrap alone), but what I meant is that in the structure.pdt there is code linking CSS, JavaScript, etc and I wondered if I need to keep all of those in the HTML? For instance, it might look great on the front page, but there may be other places (i.e. in the client area) that could break as I took something out. Quote
Michael Posted April 12, 2015 Author Report Posted April 12, 2015 Thanks guys, I think I didn't explain myself correctly. I certainly have made my own folder (leaving bootstrap alone), but what I meant is that in the structure.pdt there is code linking CSS, JavaScript, etc and I wondered if I need to keep all of those in the HTML? For instance, it might look great on the front page, but there may be other places (i.e. in the client area) that could break as I took something out. The Structure is the main file everything from client area / order forms / login use the structure. Quote
Tyson Posted April 16, 2015 Report Posted April 16, 2015 Thanks guys, I think I didn't explain myself correctly. I certainly have made my own folder (leaving bootstrap alone), but what I meant is that in the structure.pdt there is code linking CSS, JavaScript, etc and I wondered if I need to keep all of those in the HTML? For instance, it might look great on the front page, but there may be other places (i.e. in the client area) that could break as I took something out. If you only want to change the structure, then you should keep the current CSS/script files because they will continue to be used on other pages. If you're making a completely new client template theme by redesigning the entire interface, then you can include whatever you want. You should note that extensions assume the client interface uses the default bootstrap theme, so those extensions would need to be updated as well when redoing all of the template files. Michael and EidolonHost 2 Quote
Michael Posted June 7, 2015 Author Report Posted June 7, 2015 Please note if you are using 3.5.x you need to change this: <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.2.0.js"></script> To: <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.5.0.js"></script> serge 1 Quote
kikloo Posted March 29, 2016 Report Posted March 29, 2016 Hi, Is this guide latest and updated ? I have a very simple template with 1 css and 4 js files. I would like to get blesta integrated with my template. Can I go with this ??? Thanks. Quote
Michael Posted March 29, 2016 Author Report Posted March 29, 2016 Hi, Is this guide latest and updated ? I have a very simple template with 1 css and 4 js files. I would like to get blesta integrated with my template. Can I go with this ??? Thanks. It is updated, the only change so far is: <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.2.0.js"></script> should be: <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.5.0.js"></script> Quote
kikloo Posted March 29, 2016 Report Posted March 29, 2016 Hi, I tried this guide and its not working with my template. How do I create my own theme ?? Thanks. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.