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.
Ken Ng reacted to NixTree in Where To List Orders? Also No Order Alerts After Placing One From Order Form
Ken Ng got a reaction from ariq01 in Alternative Client Login Theme For Blesta
Ken Ng got a reaction from lukasP in Makeover For Blesta Client Theme?
Ken Ng got a reaction from Michael in Alternative Client Login Theme For Blesta
Ken Ng got a reaction from PauloV in Makeover For Blesta Client Theme?
Ken Ng got a reaction from ExonHost in Makeover For Blesta Client Theme?
Ken Ng got a reaction from ModulesBakery in Makeover For Blesta Client Theme?
Ken Ng got a reaction from Paul in Makeover For Blesta Client Theme?
Ken Ng got a reaction from serge in Makeover For Blesta Client Theme?
Ken Ng got a reaction from Joseph H in Makeover For Blesta Client Theme?
Ken Ng got a reaction from Daniel B in Alternative Client Login Theme For Blesta