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