Leaderboard
Popular Content
Showing content with the highest reputation on 06/16/2013 in all areas
-
So you want to make your blesta installation to look like your website? First go to: app/views/client/default/ Make sure you Take a backup of the default folder or do make a new folder called default_backup and copy the files first before editing. upload the folders you need from your website like /css and /images and even /js if you have custom JS. Now go and edit: structure.pdt Here you can see everything which displays the Top / Content / footer. So remove everything except this: <section id="outer_layout"<?php echo ($this->Html->ifSet($outer_class) ? " class=\"" . $this->Html->_($outer_class, true) . "\"" : "");?>> <section class="layout"> <div class="page"> <?php echo $content;?> </div> </section> As that is the middle content Which we want to keep the same of course. Now copy the header from your website. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My site Name</title> <meta name="author" content="Blesta" /> <meta name="rating" content="Safe For Kids" /> <link href="http://yoursite.com/css/bootstrap.css" rel="stylesheet"> <link href="http://yoursite.com/css/cubicwebs.css?v=2" rel="stylesheet"> </head> <body> <section id="outer_layout"<?php echo ($this->Html->ifSet($outer_class) ? " class=\"" . $this->Html->_($outer_class, true) . "\"" : "");?>> <section class="layout"> <div class="page"> <?php echo $content;?> </div> </section> Now replace the http://yoursite.com/ of your CSS / JS to: [Remember to leave the external links like google the same] <?php echo $this->view_dir;?> And replace the Title of your design to: <?php echo (($page_title = (isset($page_title) ? $page_title : $this->_($page_title_lang, true, $get_params))) ? $this->Html->_($page_title, true) . " | " : "") . $this->Html->_($system_company->name, true);?> Like: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><?php echo (($page_title = (isset($page_title) ? $page_title : $this->_($page_title_lang, true, $get_params))) ? $this->Html->_($page_title, true) . " | " : "") . $this->Html->_($system_company->name, true);?></title> <meta name="author" content="Blesta" /> <meta name="rating" content="Safe For Kids" /> <link href="<?php echo $this->view_dir;?>css/bootstrap.css" rel="stylesheet"> <link href="<?php echo $this->view_dir;?>css/cubicwebs.css?v=2" rel="stylesheet"> </head> <body> <section id="outer_layout"<?php echo ($this->Html->ifSet($outer_class) ? " class=\"" . $this->Html->_($outer_class, true) . "\"" : "");?>> <section class="layout"> <div class="page"> <?php echo $content;?> </div> </section> Now that will make the header the same. However we now need to add the final Blesta Header code, just above the </head><body> put the following code: <!--[if IE 9]><link href="<?php echo $this->view_dir;?>css/ie9_css3.css" rel="stylesheet" type="text/css" /><![endif]--> <link href="<?php echo $this->view_dir;?>css/jquery.qtip.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 } ?> <?php echo $this->Javascript->getFiles("head");?> <?php echo $this->Html->ifSet($custom_head); ?> <link href="<?php echo $this->view_dir;?>css/jquery.qtip.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 } ?> <?php echo $this->Javascript->getFiles("head");?> <?php echo $this->Html->ifSet($custom_head); ?> Now it's time for the Footer. Paste your footer under the </section> like: <section id="outer_layout"<?php echo ($this->Html->ifSet($outer_class) ? " class=\"" . $this->Html->_($outer_class, true) . "\"" : "");?>> <section class="layout"> <div class="page"> <?php echo $content;?> </div> </section> <div class="footer"> <div class="wrap"> <div class="foot_left"> <b>Our Products</b><br /> </div> <div class="foot_middle"> <b>Blesta</b><br /> </div> <div class="foot_middle"> <b>Legal</b><br /> </div> <div class="foot_right"> <a href="https://cubicwebs.com/" class="footlogo"></a><br /> © Blesta 2013. All Rights Reserved.<br /> </div> </div> </div> Now to add the final Blesta code to the footer, Under your last DIV put the following: <?php echo $this->Javascript->getFiles("body");?> <?php echo $this->Javascript->getInline();?> </section> </body> </html> Like: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><?php echo (($page_title = (isset($page_title) ? $page_title : $this->_($page_title_lang, true, $get_params))) ? $this->Html->_($page_title, true) . " | " : "") . $this->Html->_($system_company->name, true);?></title> <meta name="author" content="Blesta" /> <meta name="rating" content="Safe For Kids" /> <link href="<?php echo $this->view_dir;?>css/bootstrap.css" rel="stylesheet"> <link href="<?php echo $this->view_dir;?>css/blesta.css?v=2" rel="stylesheet"> link href="<?php echo $this->view_dir;?>css/jquery.qtip.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 } ?> <?php echo $this->Javascript->getFiles("head");?> <?php echo $this->Html->ifSet($custom_head); ?> </head> <body> <section id="outer_layout"<?php echo ($this->Html->ifSet($outer_class) ? " class=\"" . $this->Html->_($outer_class, true) . "\"" : "");?>> <section class="layout"> <div class="page"> <?php echo $content;?> </div> </section> <div class="footer"> <div class="wrap"> <div class="foot_left"> <b>Our Products</b><br /> </div> <div class="foot_middle"> <b>Blesta</b><br /> </div> <div class="foot_middle"> <b>Legal</b><br /> <a href="https://cubicwebs.com/terms-of-service2">Terms & Conditions</a><br /> </div> <div class="foot_right"> <a href="https://cubicwebs.com/" class="footlogo"></a><br /> © Blesta 2013. All Rights Reserved.<br /> </div> </div> </div> <?php echo $this->Javascript->getFiles("body");?> <?php echo $this->Javascript->getInline();?> </section> </body> </html> Now you've got the Main core bit's done. Time to replace the extra bits, to make it easier I've made them sections and you can use what you need. Show Login when not logged in, but show Log out when logged in: <?php if ($this->Html->ifSet($logged_in)) { ?> <a href="<?php echo $this->Html->safe($this->client_uri . "logout/");?>">Logout</a> <?php } else { ?> <a href="<?php echo $this->Html->safe($this->client_uri . "login/");?>">Login</a> <?php } ?> Show different navigation depending whether user is logged in or not: <?php if ($this->Html->ifSet($logged_in)) { ?> <a href="http://billing.yourdomain.com/customers/accounts/">Payment Accounts</a> <a href="http://billing.yourdomain.com/customers/contacts/">Contacts</a> <a href="http://billing.yourdomain.com/customers/plugin/download_manager/client_main/">Downloads</a> <a href="http://billing.yourdomain.com/customers/plugin/support_manager/client_main/">Support</a> <a href="https://billing.yourdomain.com/plugin/order/main/signup/register">Sign up</a> <?php }else{ ?> <a href="https://yourdomain.com/shared-hosting">WebHosting</a> <a href="https://yourdomain.com/resellers">Resellers</a> <a href="https://yourdomain.com/managed-vps">VPS</a> <a href="https://yourdomain.com/shoutcasts">Streaming</a> <a href="https://yourdomain.com/domains">Domains</a> <a href="https://yourdomain.com/about-us">Company</a> <a href="https://billing.yourdomain.com/plugin/order/main/signup/register">Sign up</a> <?php } ?> If you have Multi-company licenses and you want the urls to change per company you will need to use this style URLs: Show the page title: <?php if ($this->Html->ifSet($title)) { $this->Html->_($title); } else { $this->_("AppController.client_structure.default_title"); } ?> Showing Theme Logo: <a href="<?php echo $this->Html->safe($this->base_uri);?>"> <?php if (!empty($theme_logo)) { ?> <img src="<?php $this->Html->_($theme_logo);?>" alt="Logo" /> <?php } else { ?> <img src="<?php echo $this->view_dir;?>images/logo.png" alt="Blesta" /> <?php } ?> </a> Showing your own logo with link to the index: <a href="<?php echo $this->Html->safe($this->base_uri);?>"><img src="urltologo.png"></a> or <a href="<?php echo $this->Html->safe($this->base_uri);?>"><div class="logo"></div></a> or <a href="<?php echo $this->Html->safe($this->base_uri);?>" class="logo"></a> Return to Admin panel message: <?php if ($this->Html->ifSet($staff_as_client)) { ?> <div class="global_note"><?php $this->_("AppController.client_structure.staff_as_client_note", false, $this->Html->ifSet($this->admin_uri) . "clients/logoutasclient/");?></div> <?php } ?> The buttons which say Login / Return to portal etc: <?php if ($this->Html->ifSet($logged_in)) { ?> <span class="button"><a href="<?php echo $this->Html->safe($this->client_uri . "logout/");?>"><?php $this->_("AppController.client_structure.text_logout");?></a></span> <?php } else { ?> <span class="button"><a href="<?php echo $this->Html->safe($this->client_uri . "login/");?>"><?php $this->_("AppController.client_structure.text_login");?></a></span> <?php } ?> <span class="button"><a href="<?php echo $this->Html->safe(WEBDIR);?>"><?php $this->_("AppController.client_structure.text_return_to_portal");?></a></span> Navigation with Link / Link / Link / Link and the bar under the header on default: <section class="outer_nav"> <section class="layout"> <div class="inner_layout"> <nav id="nav"> <ul> <?php $i = 0; $nav_total = count($nav); foreach ($this->Html->ifSet($nav, array()) as $link => $value) { $attributes = array(); $link_attributes = array(); if ($value['active']) $link_attributes['class'][] = "active"; if ($i == 0) $attributes['class'][] = "first"; elseif ($i == $nav_total-1) $attributes['class'][] = "last"; ?> <li<?php echo $this->Html->buildAttributes($attributes);?>> <a href="<?php $this->Html->_($link);?>"<?php echo $this->Html->buildAttributes($link_attributes);?>><?php $this->Html->_($value['name']);?></a> </li> <?php $i++; } unset($i); ?> </ul> </nav> </div> </section> </section> Hope this is a easier tut to follow, I've tried to make it as simple as I can. Good luck customizing your Blesta.1 point
-
Very helpful. Now to figure out multi-company.1 point
-
Well so far, Blesta has given us the best initial impression of any billing system we've used. We managed to code up our own merchant gateway without much issue. The 2 bugs we found were fixed the same day they were reported. I also love the level of interaction here in the forums.1 point