Jump to content
Sign in to follow this  
Blesta.Store

Blesta 4.6.x + integration with BlestaCMS Community Edition (Free)

Recommended Posts

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

wgeid2yl.png

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:

wmakjmk8.png


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).

h8z778d3.png

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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:

8zv2qmom.png

 

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:

9d5suj1w.png

Add menu items like so:

9ye59ozu.png

To show:

2fp6kely.png

 

 

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

pgn8dki4.png

Share this post


Link to post
Share on other sites

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>, &copy; 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:

08f0q5qj.png

 

 

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 &amp; 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>&#36;</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>&#36;</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>&#36;</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:

wj39raob.png

 

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:

wfj58wcl.png

 

 

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:

wi09orxh.png

 

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:

2vehnfc6.png

 

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>&#36;</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>&#36;</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>&#36;</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:

4yes0v9p.png

Share this post


Link to post
Share on other sites

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" />

gitj1t47.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...