Michael Posted August 5, 2019 Report Posted August 5, 2019 So you would like to integrate Blesta into your theme but don't know how to? Why pay for expensive integrations when you have to relay on them replying in time and giving you updates when you need them when you can do it yourself. If you can't do it I highly recommend you use a third party integration company. I personally recommend ExpertIntegrations.com but you can use Blestaintegrations.com, etc. Today I will be using the theme Appy. It's a free theme if you KEEP the copyright otherwise you have to pay to have permission to do so. Meaning you are not allowed to remove footer credits for that you must purchase a License. Download the theme from: https://colorlib.com/wp/template/appy/ Extract the files to your computer and create the folder on Blesta in /app/views/client/ In this tutorial we're calling it appy. You'll need to copy the files from the default bootstrap folder to the new one appy. After you want to upload the files from Appy to the custom theme folder you are creating. /css /fonts /images /js /style.css Next we need to add the images to the root of Blesta so the CMS can use them straight away. So simply copy the images folder to the root of blesta like so: Back to the theme let's rename it to Appy. In the folder: /app/views/client/appy/ Find the following: config.json with: { "version": "1.0.0", "name": "Bootstrap", "description": "Built on Bootstrap 3.1.", "authors": [ { "name": "Phillips Data, Inc.", "url": "http://www.blesta.com" } ], "require": { "blesta": ">=3.2.0" } } Rename the name to anything you like. I'm going with Appy. So mine looks like: { "version": "1.0.0", "name": "Appy", "description": "Built on Bootstrap 3.1.", "authors": [ { "name": "Phillips Data, Inc.", "url": "http://www.blesta.com" } ], "require": { "blesta": ">=3.2.0" } } Finally go to Blesta and enable the theme so we can start integrating the theme. Go to: Settings > Company > Look and Feel Click on Template on the left and click Appy (or your chosen name). EuroDomenii and activa 2 Quote
Michael Posted August 5, 2019 Author Report Posted August 5, 2019 Now we've finally got the theme set-up ready for customising. Time to open the following: / /app/views/client/appy/structure.pdt Also open the following: appy/blog.html Notice: I'm opening the blog because it has a nice header I would like to integrate first. Simple is always better! well easier. Ok so copy and paste this into the head part of Blesta (I choose to do this below the Blesta default css: <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="shortcut icon" type="image/ico" href="images/favicon.ico" /> <!-- Plugin-CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/linearicons.css"> <link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/animate.css"> <!-- Main-Stylesheets --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="css/responsive.css"> <script src="js/vendor/modernizr-2.8.3.min.js"></script> <!--[if lt IE 9]> <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> You'll need to now add the Blesta directory code and remove the Bootstrap files because they will overwrite the Blesta one and cause issues. So it should look like this in the Blesta header. <?php $html_dir = (in_array($this->_('AppController.lang.dir', true), ['ltr', 'rtl']) ? $this->_('AppController.lang.dir', true) : 'ltr'); $html_lang = (!empty($language) ? substr($language, 0, 2) : 'en'); ?> <!DOCTYPE html> <html dir="<?php $this->Html->_($html_dir);?>" lang="<?php $this->Html->_($html_lang);?>" xml:lang="<?php $this->Html->_($html_lang);?>"> <head> <meta http-equiv="content-type" content="text/html" /> <meta charset="UTF-8" /> <title><?php echo $this->Html->safe(($this->Html->ifSet($page_title) ? $page_title . ' | ' : '') . $this->Html->ifSet($system_company->name));?></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" /> <link href="<?php echo $this->view_dir;?>css/application.min.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 } ?> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" rel="stylesheet" type="text/css" /> <link rel="apple-touch-icon" href="<?php echo $this->view_dir;?>images/apple-touch-icon.png"> <link rel="shortcut icon" type="<?php echo $this->view_dir;?>image/ico" href="images/favicon.ico" /> <!-- Plugin-CSS --> <link rel="stylesheet" href="<?php echo $this->view_dir;?>css/owl.carousel.min.css"> <link rel="stylesheet" href="<?php echo $this->view_dir;?>css/linearicons.css"> <link rel="stylesheet" href="<?php echo $this->view_dir;?>css/magnific-popup.css"> <link rel="stylesheet" href="<?php echo $this->view_dir;?>css/animate.css"> <!-- Main-Stylesheets --> <link rel="stylesheet" href="<?php echo $this->view_dir;?>css/normalize.css"> <link rel="stylesheet" href="<?php echo $this->view_dir;?>style.css"> <link rel="stylesheet" href="<?php echo $this->view_dir;?>css/responsive.css"> <script src="<?php echo $this->view_dir;?>js/vendor/modernizr-2.8.3.min.js"></script> <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery.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->Html->safe($this->view_dir . 'javascript/app.min.js' . (!empty($hash_version) ? '?v=' . $hash_version : ''));?>"></script> <!--[if lt IE 9]> <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <?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> Next we need to add the CMS code so it loads the files this is from our docs: <?php Loader::loadModels($this, array("BlestaCms.CmsPages")); $menu_items = $this->CmsPages->getMenuItemsWithChilds(); $lang = $this->CmsPages->getCurrentLang(); $default_lang = $this->CmsPages->getAllLang()[0]->uri; ?> That code needs to be below the top of the Blesta code like so: <?php $html_dir = (in_array($this->_('AppController.lang.dir', true), ['ltr', 'rtl']) ? $this->_('AppController.lang.dir', true) : 'ltr'); $html_lang = (!empty($language) ? substr($language, 0, 2) : 'en'); Loader::loadModels($this, array("BlestaCms.CmsPages")); $menu_items = $this->CmsPages->getMenuItemsWithChilds(); $lang = $this->CmsPages->getCurrentLang(); $default_lang = $this->CmsPages->getAllLang()[0]->uri; ?> <!DOCTYPE html> Right now we've got the CMS connected to the theme and got the main parts ready, time to add the header to the theme. I will be removing the Blesta admin back to admin link for now and moving the Blesta logo. You can replace the logo part with your own logo link if you prefer. Find this code and highlight it: <body> <?php echo $this->Html->ifSet($body_start);?> <?php if ($this->Html->ifSet($show_header, true)) { ?> <div class="header"> <div class="container"> <div class="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 } elseif (!empty($blesta_logo)) { ?> <img class="blesta" src="<?php $this->Html->_($blesta_logo);?>" alt="Blesta" /> <?php } else { ?> <img class="blesta" src="<?php echo $this->view_dir;?>images/logo.svg" alt="Blesta" /> <?php } ?> </a> </div> <?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 } elseif ($this->Html->ifSet($show_language) && count($this->Html->ifSet($languages, [])) > 1) { ?> <div class="top-nav pull-right"> <?php $this->Form->create($this->client_uri . 'main/setlanguage/', ['id' => 'language_selector']); $this->Form->fieldHidden('redirect_uri', $this->Html->ifSet($request_uri)); $this->Form->fieldHidden('language_code', Configure::get('Blesta.language'), ['id' => 'language_code']); $this->Form->end(); ?> <ul> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><?php $this->Html->_($languages[Configure::get('Blesta.language')])?> <b class="caret"></b></a> <ul class="dropdown-menu dropdown-menu-right" id="language_switcher"> <?php foreach ($languages as $code => $language) { ?> <li class="language_code" language_code="<?php echo $this->Html->safe($code);?>"><a href="#"><?php echo $this->Html->safe($language);?></a></li> <?php } ?> </ul> </li> </ul> </div> <?php } ?> </div> </div> <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, []) as $link => $value) { $attributes = []; $link_attributes = []; $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'], []) 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'], []) 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"> <?php if ($this->Html->ifSet($logged_in)) { ?> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <?php $this->Html->_($contact->first_name);?> <?php $this->Html->_($contact->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> <?php } else { ?> <li> <a href="<?php echo $this->Html->safe($this->client_uri . 'login/');?>"> <?php $this->_('AppController.client_structure.text_login');?> </a> </li> <?php } ?> </ul> </div> </div><!-- /.navbar-collapse --> </nav> </div> </div> Replace it with the following: <body data-spy="scroll" data-target=".mainmenu-area"> <?php echo $this->Html->ifSet($body_start); if ($this->Html->ifSet($show_header, true)) { ?> <!-- Preloader-content --> <div class="preloader"> <span><i class="lnr lnr-sun"></i></span> </div> <!-- MainMenu-Area --> <nav class="mainmenu-area" data-spy="affix" data-offset-top="200"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#primary_menu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="images/logo.png" alt="Logo"></a> </div> <div class="collapse navbar-collapse" id="primary_menu"> <ul class="nav navbar-nav mainmenu"> <li><a href="index.html#home_page">Home</a></li> <li><a href="index.html#about_page">About</a></li> <li><a href="index.html#features_page">Features</a></li> <li><a href="index.html#gallery_page">Gallery</a></li> <li><a href="index.html#price_page">Pricing</a></li> <li><a href="index.html#questions_page">FAQ</a></li> <li class="active"><a href="blog.html">Blog</a></li> <li><a href="index.html#contact_page">Contacts</a></li> </ul> <div class="right-button hidden-xs"> <a href="#">Sign Up</a> </div> </div> </div> </nav> <?php } ?> We need to add the theme JS to the Blesta footer so we can get the preloader working. Find: <?php echo $this->Javascript->getFiles('body');?> <?php echo $this->Javascript->getInline();?> <?php echo $this->Html->ifSet($body_end);?> </body> </html> Replace it with: <?php echo $this->Javascript->getFiles('body');?> <?php echo $this->Javascript->getInline();?> <?php echo $this->Html->ifSet($body_end);?> <script src="<?php echo $this->view_dir;?>js/vendor/jquery-ui.js"></script> <!--Plugin-JS--> <script src="<?php echo $this->view_dir;?>js/owl.carousel.min.js"></script> <script src="<?php echo $this->view_dir;?>js/contact-form.js"></script> <script src="<?php echo $this->view_dir;?>js/ajaxchimp.js"></script> <script src="<?php echo $this->view_dir;?>js/scrollUp.min.js"></script> <script src="<?php echo $this->view_dir;?>js/magnific-popup.min.js"></script> <script src="<?php echo $this->view_dir;?>js/wow.min.js"></script> <!--Main-active-JS--> <script src="<?php echo $this->view_dir;?>js/main.js"></script> </body> </html> Quote
Michael Posted August 5, 2019 Author Report Posted August 5, 2019 Now we've got the main part of the integration sorted we need to add the new header, so find this code: <div class="title"> <div class="container"> <h3><?php echo ($this->Html->ifSet($title) ? $this->Html->_($title, true) : $this->_('AppController.client_structure.default_title', true));?></h3> </div> </div> Replace it with: <header class="site-header"> <div class="container"> <div class="row"> <div class="col-xs-12 text-center"> <h1 class="white-color"> <?php if (strpos($_SERVER['REQUEST_URI'], "blog") == true){ echo $page_title; }elseif (strpos($_SERVER['REQUEST_URI'], "category") == true){ echo "Categories"; }elseif(isset($page_title) && !empty($page_title)){ echo $page_title; }else{ echo ($this->Html->ifSet($title) ? $this->Html->_($title, true) : $this->_("AppController.client_structure.default_title", true)); } ?> </h1> <ul class="breadcrumb"> <li> <?php if (strpos($_SERVER['REQUEST_URI'], "category") == true){ ?> Blog <?php }elseif (strpos($_SERVER['REQUEST_URI'], "blog") == true){ ?> <?php echo $categories[$category_id]; ?> <?php }elseif (strpos($_SERVER['REQUEST_URI'], "order") == true){ ?> Order <?php }else{ if(!isset($description) && empty($description)){ echo "Billing Area"; }else{ echo $description; } } ?> </li> </ul> </div> </div> </div> </header> So far our theme integration should look something like this: As you can see the header is quiet big so to change that we need to edit the css: /app/views/client/appy/style.css Find: .site-header { background: rgb(72, 44, 191); background: -webkit-linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%); background: -o-linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%); background: linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#482cbf', endColorstr='#6ac6f0', GradientType=1); color: #ffffff; padding: 180px 0 120px; } Change it to this: .site-header { background: rgb(72, 44, 191); background: -webkit-linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%); background: -o-linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%); background: linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#482cbf', endColorstr='#6ac6f0', GradientType=1); color: #ffffff; padding: 140px 0 60px; } Feel free to change the colours too here. The next bit is to change the navigation to the CMS one: Find: <ul class="nav navbar-nav mainmenu"> <li><a href="index.html#home_page">Home</a></li> <li><a href="index.html#about_page">About</a></li> <li><a href="index.html#features_page">Features</a></li> <li><a href="index.html#gallery_page">Gallery</a></li> <li><a href="index.html#price_page">Pricing</a></li> <li><a href="index.html#questions_page">FAQ</a></li> <li class="active"><a href="blog.html">Blog</a></li> <li><a href="index.html#contact_page">Contacts</a></li> </ul> Replace it with: <ul class="nav navbar-nav mainmenu"> <?php if(!empty($menu_items)){ foreach ($menu_items as $item) { ?> <li> <a href="<?php if($item->target != 'newtab'){ ?>//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($item->uri == '/' ? null : $item->uri)), ''); }else{ echo $item->uri; } ?>" <?php if($item->target === 'newtab'){ ?>target="_blank"<?php } ?> <?php if (!empty($item->childs)) { ?>aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown"<?php } ?>> <?php echo $this->Html->ifSet($item->title[$lang], $item->title[$default_lang]); ?> <?php if (!empty($item->childs)) { ?><b class="caret"></b><?php } ?> </a> <?php if (!empty($item->childs)) { ?> <ul class="dropdown-menu"> <?php foreach ($item->childs as $child) { ?> <li> <a href="<?php if($child->target != 'newtab'){ ?>//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR) . ($default_lang == $lang ? null : $lang . '/') . ($child->uri == '/' ? null : $child->uri)), ''); }else{ echo $child->uri; } ?>" <?php if($child->target == 'newtab'){ ?>target="_blank"<?php } ?>> <?php echo $this->Html->ifSet($child->title[$lang], $child->title[$default_lang]); ?> </a> </li> <?php } ?> </ul> <?php } ?> </li> <?php } }else{ ?> <li><a href="#">No menu set.</a></li> <?php } ?> </ul> This will show a No menu set. like so until you add menu items: Add menu items like so: To show: If you're still reading this good for you cause this is hard work ;). Ok so the next step is change the Sign up to Client area. You can use either of the two I'll use the later. Find: <div class="right-button hidden-xs"> <a href="#">Sign Up</a> </div> Change it to either: <div class="right-button hidden-xs"> <a href="<?php echo $this->Html->safe($this->client_uri . "login");?>">Client Area</a> </div> or <div class="right-button hidden-xs"> <a href="//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR)));?>portal">Client Area</a> </div> If you are using the later please create a page on the CMS called portal with the uri: portal and the following content: <div class="col-md-4 col-sm-6 portal-box"> <a href="{client_url}login/"> <div class="well"> <i class="fas fa-user-lock fa-4x"></i> <h4>My Account</h4> <p>Log in here to manage your account.</p> </div> </a> </div> {% if plugins.support_manager.enabled %}<div class="col-md-4 col-sm-6 portal-box"> <a href="{client_url}plugin/support_manager/client_tickets/add/"> <div class="well"> <i class="far fa-comment-dots fa-4x"></i> <h4>Support</h4> <p>You can open a trouble ticket here.</p> </div> </a> </div> <div class="col-md-4 col-sm-6 portal-box"> <a href="{client_url}plugin/support_manager/knowledgebase/"> <div class="well"> <i class="fas fa-info fa-4x"></i> <h4>Knowledge Base</h4> <p>Search the knowledge base for an answer.</p> </div> </a> </div>{% endif %} {% if plugins.order.enabled %}<div class="col-md-4 col-sm-6 portal-box"> <a href="{blesta_url}order/"> <div class="well"> <i class="fas fa-shopping-basket fa-4x"></i> <h4>Order</h4> <p>Visit the order form to buy new services.</p> </div> </a> </div>{% endif %} {% if plugins.download_manager.enabled %}<div class="col-md-4 col-sm-6 portal-box"> <a href="{client_url}plugin/download_manager/"> <div class="well"> <i class="fa fa-download fa-4x"></i> <h4>Download</h4> <p>You may need to be logged in to download files.</p> </div> </a> </div>{% endif %} Next step we need to make the logo go back home and add the Blesta logo code. Find: <a class="navbar-brand" href="#"><img src="images/logo.png" alt="Logo"></a> Replace: <a class="navbar-brand" href="//<?php echo $this->Html->safe(trim($system_company->hostname . $this->Html->safe(WEBDIR))); ?>"> <?php if (!empty($theme_logo)) { ?> <img src="<?php $this->Html->_($theme_logo);?>" alt="Logo" /> <?php } elseif (!empty($blesta_logo)) { ?> <img class="blesta" src="<?php $this->Html->_($blesta_logo);?>" alt="Blesta" /> <?php } else { ?> <img class="blesta" src="<?php echo $this->view_dir;?>images/logo.svg" alt="Blesta" /> <?php } ?> </a> PS: You don't need to do this logo part but if you do, and you have a logo go to: Settings > Company > Look and Feel > edit the template (not default) and then go to Header Logo url Quote
Michael Posted August 5, 2019 Author Report Posted August 5, 2019 Time to do the footer. Find: <div class="row footer"> <div class="col-md-12"> <hr /> <p class="text-center">Powered by <a href="http://www.blesta.com/">Blesta</a>, © Phillips Data, Inc.</p> </div> </div> Remove it and make sure you go outside the div below it and paste the following: <footer class="footer-area" id="contact_page"> <!-- Footer-Bootom --> <div class="footer-bottom"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-5"> <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> <span style="font-size: 12px;">Copyright ©<script>document.write(new Date().getFullYear());</script> <?php echo $this->Html->safe($system_company->name);?>. All rights reserved<br />This template is made with <i class="lnr lnr-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a> ~ Powered by <a href="https://blesta.com/" target="_blank">Blesta</a>, © Phillips Data, Inc.</span> <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> <div class="space-30 hidden visible-xs"></div> </div> <div class="col-xs-12 col-md-7"> <div class="footer-menu"> <ul> <li class="active"><a href="index.html#home_page">Home</a></li> <li><a href="index.html#about_page">About</a></li> <li><a href="index.html#features_page">Features</a></li> <li><a href="index.html#gallery_page">Gallery</a></li> <li><a href="index.html#price_page">Pricing</a></li> <li><a href="index.html#questions_page">FAQ</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="index.html#contact_page">Contacts</a></li> </ul> </div> </div> </div> </div> </div> <!-- Footer-Bootom-End --> </footer> So it looks like: <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 borderless 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> <footer class="footer-area" id="contact_page"> <!-- Footer-Bootom --> <div class="footer-bottom"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-5"> <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> <span style="font-size: 12px;">Copyright ©<script>document.write(new Date().getFullYear());</script> <?php echo $this->Html->safe($system_company->name);?>. All rights reserved<br />This template is made with <i class="lnr lnr-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a> ~ Powered by <a href="https://blesta.com/" target="_blank">Blesta</a>, © Phillips Data, Inc.</span> <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> <div class="space-30 hidden visible-xs"></div> </div> <div class="col-xs-12 col-md-7"> <div class="footer-menu"> <ul> <li class="active"><a href="index.html#home_page">Home</a></li> <li><a href="index.html#about_page">About</a></li> <li><a href="index.html#features_page">Features</a></li> <li><a href="index.html#gallery_page">Gallery</a></li> <li><a href="index.html#price_page">Pricing</a></li> <li><a href="index.html#questions_page">FAQ</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="index.html#contact_page">Contacts</a></li> </ul> </div> </div> </div> </div> </div> <!-- Footer-Bootom-End --> </footer> It will now look like this: The next step is to open the following file from Appy: index.html Copy the following section: <header class="home-area overlay" id="home_page"> <div class="container"> <div class="row"> <div class="col-xs-12 hidden-sm col-md-5"> <figure class="mobile-image wow fadeInUp" data-wow-delay="0.2s"> <img src="images/header-mobile.png" alt=""> </figure> </div> <div class="col-xs-12 col-md-7"> <div class="space-80 hidden-xs"></div> <h1 class="wow fadeInUp" data-wow-delay="0.4s">Start your amazing stuff through appy.</h1> <div class="space-20"></div> <div class="desc wow fadeInUp" data-wow-delay="0.6s"> <p>Lorem ipsum dolor sit amet, consectetur adipiing elit, sed do eiusmod tempor incididunt ut labore et laborused sed do eiusmod tempor incididunt ut labore et laborused.</p> </div> <div class="space-20"></div> <a href="#" class="bttn-white wow fadeInUp" data-wow-delay="0.8s"><i class="lnr lnr-download"></i>Download App</a> </div> </div> </div> </header> <section class="section-padding" id="about_page"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-10 col-md-offset-1"> <div class="page-title text-center"> <img src="images/about-logo.png" alt="About Logo"> <div class="space-20"></div> <h5 class="title">About Appy</h5> <div class="space-30"></div> <h3 class="blue-color">A beautiful app for consectetur adipisicing elit, sed do eiusmod tempor incididunt ut mollit anim id est laborum. Sedut perspiciatis unde omnis. </h3> <div class="space-20"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiing elit, sed do eiusmod tempor incididunt ut labore et laborused sed do eiusmod tempor incididunt ut labore et laborused.</p> </div> </div> </div> </div> </section> <!-- About-Area-End --> <!-- Progress-Area --> <section class="progress-area gray-bg" id="progress_page"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-6"> <div class="page-title section-padding"> <h5 class="title wow fadeInUp" data-wow-delay="0.2s">Our Progress</h5> <div class="space-10"></div> <h3 class="dark-color wow fadeInUp" data-wow-delay="0.4s">Grat Application Ever</h3> <div class="space-20"></div> <div class="desc wow fadeInUp" data-wow-delay="0.6s"> <p>Lorem ipsum dolor sit amet, consectetur adipiing elit, sed do eiusmod tempor incididunt ut labore et laborused sed do eiusmod tempor incididunt ut labore et laborused.</p> </div> <div class="space-50"></div> <a href="#" class="bttn-default wow fadeInUp" data-wow-delay="0.8s">Learn More</a> </div> </div> <div class="col-xs-12 col-md-6"> <figure class="mobile-image"> <img src="images/progress-phone.png" alt=""> </figure> </div> </div> </div> </section> <section class="video-area section-padding"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-6"> <div class="video-photo"> <img src="images/video-image.jpg" alt=""> <a href="https://www.youtube.com/watch?v=ScrDhTsX0EQ" class="popup video-button"> <img src="images/play-button.png" alt=""> </a> </div> </div> <div class="col-xs-12 col-md-5 col-md-offset-1"> <div class="space-60 hidden visible-xs"></div> <div class="page-title"> <h5 class="title wow fadeInUp" data-wow-delay="0.2s">VIDEO FEATURES</h5> <div class="space-10"></div> <h3 class="dark-color wow fadeInUp" data-wow-delay="0.4s">Grat Application Ever</h3> <div class="space-20"></div> <div class="desc wow fadeInUp" data-wow-delay="0.6s"> <p>Lorem ipsum dolor sit amet, consectetur adipiing elit, sed do eiusmod tempor incididunt ut labore et laborused sed do eiusmod tempor incididunt ut labore et laborused.</p> </div> <div class="space-50"></div> <a href="#" class="bttn-default wow fadeInUp" data-wow-delay="0.8s">Learn More</a> </div> </div> </div> </div> </section> <section class="feature-area section-padding-top" id="features_page"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 col-sm-offset-2"> <div class="page-title text-center"> <h5 class="title">Features</h5> <div class="space-10"></div> <h3>Pwoerful Features As Always</h3> <div class="space-60"></div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="service-box wow fadeInUp" data-wow-delay="0.2s"> <div class="box-icon"> <i class="lnr lnr-rocket"></i> </div> <h4>Fast & Powerful</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="space-60"></div> <div class="service-box wow fadeInUp" data-wow-delay="0.4s"> <div class="box-icon"> <i class="lnr lnr-paperclip"></i> </div> <h4>Easily Editable</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="space-60"></div> <div class="service-box wow fadeInUp" data-wow-delay="0.6s"> <div class="box-icon"> <i class="lnr lnr-cloud-download"></i> </div> <h4>Cloud Storage</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="space-60"></div> </div> <div class="hidden-xs hidden-sm col-md-4"> <figure class="mobile-image"> <img src="images/feature-image.png" alt="Feature Photo"> </figure> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="service-box wow fadeInUp" data-wow-delay="0.2s"> <div class="box-icon"> <i class="lnr lnr-clock"></i> </div> <h4>Easy Notifications</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="space-60"></div> <div class="service-box wow fadeInUp" data-wow-delay="0.4s"> <div class="box-icon"> <i class="lnr lnr-laptop-phone"></i> </div> <h4>Fully Responsive</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="space-60"></div> <div class="service-box wow fadeInUp" data-wow-delay="0.6s"> <div class="box-icon"> <i class="lnr lnr-cog"></i> </div> <h4>Editable Layout</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="space-60"></div> </div> </div> </div> </section> <section class="testimonial-area" id="testimonial_page"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="page-title text-center"> <h5 class="title">Testimonials</h5> <h3 class="dark-color">Our Client Loves US</h3> <div class="space-60"></div> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="team-slide"> <div class="team-box"> <div class="team-image"> <img src="images/team-1.png" alt=""> </div> <h4>Ashekur Rahman</h4> <h6 class="position">Art Dirrector</h6> <p>Lorem ipsum dolor sit amet, conseg sed do eiusmod temput laborelaborus ed sed do eiusmod tempo.</p> </div> <div class="team-box"> <div class="team-image"> <img src="images/team-2.jpg" alt=""> </div> <h4>Ashekur Rahman</h4> <h6 class="position">Art Dirrector</h6> <p>Lorem ipsum dolor sit amet, conseg sed do eiusmod temput laborelaborus ed sed do eiusmod tempo.</p> </div> <div class="team-box"> <div class="team-image"> <img src="images/team-3.jpg" alt=""> </div> <h4>Ashekur Rahman</h4> <h6 class="position">Art Dirrector</h6> <p>Lorem ipsum dolor sit amet, conseg sed do eiusmod temput laborelaborus ed sed do eiusmod tempo.</p> </div> <div class="team-box"> <div class="team-image"> <img src="images/team-1.png" alt=""> </div> <h4>Ashekur Rahman</h4> <h6 class="position">Art Dirrector</h6> <p>Lorem ipsum dolor sit amet, conseg sed do eiusmod temput laborelaborus ed sed do eiusmod tempo.</p> </div> <div class="team-box"> <div class="team-image"> <img src="images/team-2.jpg" alt=""> </div> <h4>Ashekur Rahman</h4> <h6 class="position">Art Dirrector</h6> <p>Lorem ipsum dolor sit amet, conseg sed do eiusmod temput laborelaborus ed sed do eiusmod tempo.</p> </div> <div class="team-box"> <div class="team-image"> <img src="images/team-3.jpg" alt=""> </div> <h4>Ashekur Rahman</h4> <h6 class="position">Art Dirrector</h6> <p>Lorem ipsum dolor sit amet, conseg sed do eiusmod temput laborelaborus ed sed do eiusmod tempo.</p> </div> </div> </div> </div> </div> </section> <section class="gallery-area section-padding" id="gallery_page"> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-6 gallery-slider"> <div class="gallery-slide"> <div class="item"><img src="images/gallery-1.jpg" alt=""></div> <div class="item"><img src="images/gallery-2.jpg" alt=""></div> <div class="item"><img src="images/gallery-3.jpg" alt=""></div> <div class="item"><img src="images/gallery-4.jpg" alt=""></div> <div class="item"><img src="images/gallery-1.jpg" alt=""></div> <div class="item"><img src="images/gallery-2.jpg" alt=""></div> <div class="item"><img src="images/gallery-3.jpg" alt=""></div> <div class="item"><img src="images/gallery-1.jpg" alt=""></div> <div class="item"><img src="images/gallery-2.jpg" alt=""></div> <div class="item"><img src="images/gallery-3.jpg" alt=""></div> <div class="item"><img src="images/gallery-4.jpg" alt=""></div> <div class="item"><img src="images/gallery-1.jpg" alt=""></div> <div class="item"><img src="images/gallery-2.jpg" alt=""></div> <div class="item"><img src="images/gallery-3.jpg" alt=""></div> </div> </div> <div class="col-xs-12 col-sm-5 col-lg-3"> <div class="page-title"> <h5 class="white-color title wow fadeInUp" data-wow-delay="0.2s">Screenshots</h5> <div class="space-10"></div> <h3 class="white-color wow fadeInUp" data-wow-delay="0.4s">Screenshot 01</h3> </div> <div class="space-20"></div> <div class="desc wow fadeInUp" data-wow-delay="0.6s"> <p>Lorem ipsum dolor sit amet, consectetur adipiing elit, sed do eiusmod tempor incididunt ut labore et laborused sed do eiusmod tempor incididunt ut labore et laborused.</p> </div> <div class="space-50"></div> <a href="#" class="bttn-default wow fadeInUp" data-wow-delay="0.8s">Learn More</a> </div> </div> </div> </section> <section class="section-padding"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6"> <div class="page-title"> <h5 class="title wow fadeInUp" data-wow-delay="0.2s">Our features</h5> <div class="space-10"></div> <h3 class="dark-color wow fadeInUp" data-wow-delay="0.4s">Aour Approach of Design is Prety Simple and Clear</h3> </div> <div class="space-20"></div> <div class="desc wow fadeInUp" data-wow-delay="0.6s"> <p>Lorem ipsum dolor sit amet, consectetur adipiing elit, sed do eiusmod tempor incididunt ut labore et laborused sed do eiusmod tempor incididunt ut labore et laborused.</p> </div> <div class="space-50"></div> <a href="#" class="bttn-default wow fadeInUp" data-wow-delay="0.8s">Learn More</a> </div> <div class="col-xs-12 col-sm-6 col-md-5 col-md-offset-1"> <div class="space-60 hidden visible-xs"></div> <div class="service-box wow fadeInUp" data-wow-delay="0.2s"> <div class="box-icon"> <i class="lnr lnr-clock"></i> </div> <h4>Easy Notifications</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> <div class="space-50"></div> <div class="service-box wow fadeInUp" data-wow-delay="0.2s"> <div class="box-icon"> <i class="lnr lnr-laptop-phone"></i> </div> <h4>Fully Responsive</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> <div class="space-50"></div> <div class="service-box wow fadeInUp" data-wow-delay="0.2s"> <div class="box-icon"> <i class="lnr lnr-cog"></i> </div> <h4>Editable Layout</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> </div> </div> </div> </section> <div class="download-area overlay"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 hidden-sm"> <figure class="mobile-image"> <img src="images/download-image.png" alt=""> </figure> </div> <div class="col-xs-12 col-md-6 section-padding"> <h3 class="white-color">Download The App</h3> <div class="space-20"></div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam possimus eaque magnam eum praesentium unde.</p> <div class="space-60"></div> <a href="#" class="bttn-white sq"><img src="images/apple-icon.png" alt="apple icon"> Apple Store</a> <a href="#" class="bttn-white sq"><img src="images/play-store-icon.png" alt="Play Store Icon"> Play Store</a> </div> </div> </div> </div> <section class="section-padding price-area" id="price_page"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="page-title text-center"> <h5 class="title">Pricing Plan</h5> <h3 class="dark-color">Our Awesome Pricing Plan</h3> <div class="space-60"></div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-4"> <div class="price-box"> <div class="price-header"> <div class="price-icon"> <span class="lnr lnr-rocket"></span> </div> <h4 class="upper">Free</h4> </div> <div class="price-body"> <ul> <li>Easy Installations</li> <li>Unlimited support</li> <li>Uniqe Elements</li> </ul> </div> <div class="price-rate"> <sup>$</sup> <span class="rate">0</span> <small>/Month</small> </div> <div class="price-footer"> <a href="#" class="bttn-white">Purchase</a> </div> </div> <div class="space-30 hidden visible-xs"></div> </div> <div class="col-xs-12 col-sm-4"> <div class="price-box"> <div class="price-header"> <div class="price-icon"> <span class="lnr lnr-diamond"></span> </div> <h4 class="upper">Medium</h4> </div> <div class="price-body"> <ul> <li>Easy Installations</li> <li>Unlimited support</li> <li>Free Forever</li> </ul> </div> <div class="price-rate"> <sup>$</sup> <span class="rate">49</span> <small>/Month</small> </div> <div class="price-footer"> <a href="#" class="bttn-white">Purchase</a> </div> </div> <div class="space-30 hidden visible-xs"></div> </div> <div class="col-xs-12 col-sm-4"> <div class="price-box"> <div class="price-header"> <div class="price-icon"> <span class="lnr lnr-pie-chart"></span> </div> <h4 class="upper">Business</h4> </div> <div class="price-body"> <ul> <li>Easy Installations</li> <li>Unlimited support</li> <li>Free Forever</li> </ul> </div> <div class="price-rate"> <sup>$</sup> <span class="rate">99</span> <small>/Month</small> </div> <div class="price-footer"> <a href="#" class="bttn-white">Purchase</a> </div> </div> </div> </div> </div> </section> <section id="questions_page" class="questions-area section-padding"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="page-title text-center"> <h5 class="title">FAQ</h5> <h3 class="dark-color">Frequently Asked Questions</h3> <div class="space-60"></div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-6"> <div class="toggole-boxs"> <h3>Faq first question goes here? </h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> <h3>About freewuent question goes here? </h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> <h3>Why more question goes here? </h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> <h3>What question goes here? </h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="space-20 hidden visible-xs"></div> <div class="toggole-boxs"> <h3>Faq second question goes here? </h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> <h3>Third faq question goes here? </h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> <h3>Why more question goes here? </h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> <h3>Seventh frequent question here? </h3> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> </div> </div> </div> </div> </section> <div class="subscribe-area section-padding"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 col-sm-offset-2"> <div class="subscribe-form text-center"> <h3 class="blue-color">Subscribe for More Features</h3> <div class="space-20"></div> <form id="mc-form"> <input type="email" class="control" placeholder="Enter your email" required="required" id="mc-email"> <button class="bttn-white active" type="submit"><span class="lnr lnr-location"></span> Subscribe</button> <label class="mt10" for="mc-email"></label> </form> </div> </div> </div> </div> </div> Into the welcome page on the CMS. It should work. It will look something like this: As you can see that's not what we want as that's centered and not fluid. So we need to do a BlestaCMS Change so find: <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 borderless 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> We need to replace that with: <?php if (strpos($_SERVER['REQUEST_URI'], "client") && $page_title != "Log In" && $page_title != "Reset Password" || strpos($_SERVER['REQUEST_URI'], "order") || strpos($_SERVER['REQUEST_URI'], "plugin") || strpos($_SERVER['REQUEST_URI'], "blog") !== false){ ?> <div class="container"> <?php }else{ ?> <div class="container-fluid"> <?php } ?> <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 borderless 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> It should now look like: Now finally lets only display the "header" when not on the index page. Our page is called "Welcome" so I'm using that for this tutorial. Find our header: <header class="site-header"> <div class="container"> <div class="row"> <div class="col-xs-12 text-center"> <h1 class="white-color"> <?php if (strpos($_SERVER['REQUEST_URI'], "blog") == true){ echo $page_title; }elseif (strpos($_SERVER['REQUEST_URI'], "category") == true){ echo "Categories"; }elseif(isset($page_title) && !empty($page_title)){ echo $page_title; }else{ echo ($this->Html->ifSet($title) ? $this->Html->_($title, true) : $this->_("AppController.client_structure.default_title", true)); } ?> </h1> <ul class="breadcrumb"> <li> <?php if (strpos($_SERVER['REQUEST_URI'], "category") == true){ ?> Blog <?php }elseif (strpos($_SERVER['REQUEST_URI'], "blog") == true){ ?> <?php echo $categories[$category_id]; ?> <?php }elseif (strpos($_SERVER['REQUEST_URI'], "order") == true){ ?> Order <?php }else{ if(!isset($description) && empty($description)){ echo "Billing Area"; }else{ echo $description; } } ?> </li> </ul> </div> </div> </div> </header> Replace it with: <?php if(isset($page_title) && !empty($page_title) && $page_title != 'Welcome'){ ?> <header class="site-header"> <div class="container"> <div class="row"> <div class="col-xs-12 text-center"> <h1 class="white-color"> <?php if (strpos($_SERVER['REQUEST_URI'], "blog") == true){ echo $page_title; }elseif (strpos($_SERVER['REQUEST_URI'], "category") == true){ echo "Categories"; }elseif(isset($page_title) && !empty($page_title)){ echo $page_title; }else{ echo ($this->Html->ifSet($title) ? $this->Html->_($title, true) : $this->_("AppController.client_structure.default_title", true)); } ?> </h1> <ul class="breadcrumb"> <li> <?php if (strpos($_SERVER['REQUEST_URI'], "category") == true){ ?> Blog <?php }elseif (strpos($_SERVER['REQUEST_URI'], "blog") == true){ ?> <?php echo $categories[$category_id]; ?> <?php }elseif (strpos($_SERVER['REQUEST_URI'], "order") == true){ ?> Order <?php }else{ if(!isset($description) && empty($description)){ echo "Billing Area"; }else{ echo $description; } } ?> </li> </ul> </div> </div> </div> </header> <?php } ?> The index page will now look like this: The next step is the portal page. Remember the boxes are stuck to the top we'll now fix that by adding the Blesta navigation. Find: <?php if (strpos($_SERVER['REQUEST_URI'], "client") && $page_title != "Log In" && $page_title != "Reset Password" || strpos($_SERVER['REQUEST_URI'], "order") || strpos($_SERVER['REQUEST_URI'], "plugin") || strpos($_SERVER['REQUEST_URI'], "blog") !== false){ ?> Add above it the Blesta navigation: <?php if (strpos($_SERVER['REQUEST_URI'], "client") || strpos($_SERVER['REQUEST_URI'], "portal") || strpos($_SERVER['REQUEST_URI'], "plugin") || strpos($_SERVER['REQUEST_URI'], "order") !== false){ if (!$this->Html->ifSet($logged_in)) { ?> <div class="clearfix"></div> <div class="no-nav"></div> <?php }else{ ?> <div class="nav-content <?php if( strpos($_SERVER['REQUEST_URI'], "plugin") ){echo "navbar-plugins";} ?>" style="margin-top: 0px;margin-bottom: 10px;"> <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->_($contact->first_name);?> <?php $this->Html->_($contact->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> <li><a href="<?php echo $this->Html->safe(WEBDIR);?>members"><i class="fa fa-circle-o fa-fw"></i> <?php $this->_("AppController.client_structure.text_return_to_portal");?></a></li> <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><!-- /#header .navbar-collapse --> </nav> </div> </div> <?php } } ?> It will now look like this to logged in customers: Now we need to do some tidy up css: So open: /app/views/client/appy/style.css Add the following to the bottom of the css: .page-title .title { position: relative; display: inline-block; text-transform: uppercase; letter-spacing: 1.5px; color: #8790af; font-weight: 600; background: transparent !important; } .page-title .title { position: relative; display: inline-block; text-transform: uppercase; letter-spacing: 1.5px; color: #8790af; font-weight: 600; background: transparent !important; } fieldset { border: 1px solid transparent !important; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } One last thing to do before we put one more page in is find: <li><a href="#">Contacts</a></li> Replace with: <?php if ($this->Html->ifSet($staff_as_client)) { ?> <li><a href="<?php echo $this->Html->safe($this->admin_uri . 'clients/logoutasclient/');?>"> <?php $this->_('AppController.client_structure.staff_as_client_note');?> </a></li> <?php } ?> This shows "Return back to Staff Portal". Finally let's go to the CMS plugin and create a page called Shared Hosting with the uri: shared-hosting and paste in the following: <section class="section-padding price-area" id="price_page"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="page-title text-center"> <h5 class="title">Pricing Plan</h5> <h3 class="dark-color">Our Awesome Pricing Plan</h3> <div class="space-60"></div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-4"> <div class="price-box"> <div class="price-header"> <div class="price-icon"> <span class="lnr lnr-rocket"></span> </div> <h4 class="upper">Free</h4> </div> <div class="price-body"> <ul> <li>Easy Installations</li> <li>Unlimited support</li> <li>Uniqe Elements</li> </ul> </div> <div class="price-rate"> <sup>$</sup> <span class="rate">0</span> <small>/Month</small> </div> <div class="price-footer"> <a href="#" class="bttn-white">Purchase</a> </div> </div> <div class="space-30 hidden visible-xs"></div> </div> <div class="col-xs-12 col-sm-4"> <div class="price-box"> <div class="price-header"> <div class="price-icon"> <span class="lnr lnr-diamond"></span> </div> <h4 class="upper">Medium</h4> </div> <div class="price-body"> <ul> <li>Easy Installations</li> <li>Unlimited support</li> <li>Free Forever</li> </ul> </div> <div class="price-rate"> <sup>$</sup> <span class="rate">49</span> <small>/Month</small> </div> <div class="price-footer"> <a href="#" class="bttn-white">Purchase</a> </div> </div> <div class="space-30 hidden visible-xs"></div> </div> <div class="col-xs-12 col-sm-4"> <div class="price-box"> <div class="price-header"> <div class="price-icon"> <span class="lnr lnr-pie-chart"></span> </div> <h4 class="upper">Business</h4> </div> <div class="price-body"> <ul> <li>Easy Installations</li> <li>Unlimited support</li> <li>Free Forever</li> </ul> </div> <div class="price-rate"> <sup>$</sup> <span class="rate">99</span> <small>/Month</small> </div> <div class="price-footer"> <a href="#" class="bttn-white">Purchase</a> </div> </div> </div> </div> </div> </section> That now shows: Quote
Michael Posted August 5, 2019 Author Report Posted August 5, 2019 There you go, you've now integrated your first Blesta theme. Customers for the Premium CMS or have a Blesta license can download this integration already completed. https://blesta.store/client/plugin/download_manager/client_main/download/42/appy-cms.zip This post is reserved for any Questions you may have: 1. How to use the default Blesta logo but in white? Find: <?php } elseif (!empty($blesta_logo)) { ?> <img class="blesta" src="<?php $this->Html->_($blesta_logo);?>" alt="Blesta" /> Replace with: <?php } elseif (!empty($blesta_logo)) { ?> <img class="blesta" src="<?php echo $this->view_dir;?>images/logo.svg" alt="Blesta" /> Paul and activa 1 1 Quote
Amit Kumar Mishra Posted August 5, 2019 Report Posted August 5, 2019 hey whats up mate so many reserved posts and you said about integration but nothing in here czizou 1 Quote
Michael Posted August 5, 2019 Author Report Posted August 5, 2019 3 minutes ago, Amit Kumar Mishra said: hey whats up mate so many reserved posts and you said about integration but nothing in here Give me a chance jesus christ Quote
Amit Kumar Mishra Posted August 5, 2019 Report Posted August 5, 2019 1 minute ago, Blesta.Store said: Give me a chance jesus christ hahaha you may have it! czizou 1 Quote
Michael Posted August 5, 2019 Author Report Posted August 5, 2019 1 hour ago, Amit Kumar Mishra said: hahaha you may have it! Right I've updated a lot I'm off to bed now hope you enjoy looking for a bit. Quote
Amit Kumar Mishra Posted August 7, 2019 Report Posted August 7, 2019 see, i helped you complete it faster!!! activa and czizou 1 1 Quote
VAG Posted September 5, 2019 Report Posted September 5, 2019 I think there are a few mistakes such as: getMenuItemsWithChilds() error_log says Blesta doesn't know such a function. This line: $menu_items = $this->CmsPages->getMenuItemsWithChilds(); And we added menu items manually by changing body so why did we need to load menu items from cms I dont understand. Edit: OK. I see why we trying to fetch menu items but still the method called 'getMenuItemsWithChilds' is unknown. So it won't work anyway. Quote
Tyson Posted September 5, 2019 Report Posted September 5, 2019 11 hours ago, VAG said: I think there are a few mistakes such as: getMenuItemsWithChilds() error_log says Blesta doesn't know such a function. This line: $menu_items = $this->CmsPages->getMenuItemsWithChilds(); And we added menu items manually by changing body so why did we need to load menu items from cms I dont understand. Edit: OK. I see why we trying to fetch menu items but still the method called 'getMenuItemsWithChilds' is unknown. So it won't work anyway. It sounds like you may not have installed his "CmsPages" plugin. He linked to it above in one of the posts. Michael 1 Quote
Michael Posted September 8, 2019 Author Report Posted September 8, 2019 On 9/5/2019 at 6:23 AM, VAG said: I think there are a few mistakes such as: getMenuItemsWithChilds() error_log says Blesta doesn't know such a function. This line: $menu_items = $this->CmsPages->getMenuItemsWithChilds(); And we added menu items manually by changing body so why did we need to load menu items from cms I dont understand. Edit: OK. I see why we trying to fetch menu items but still the method called 'getMenuItemsWithChilds' is unknown. So it won't work anyway. As Tyson mentioned you need the cms the premium paid or the Community edition: https://github.com/atlanical/BlestaCMS-Community-Edition 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.