Jump to content
Blesta.Store

Site Integration With Blesta 3.1.x

Recommended Posts

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:

 

 
            <a href="<?php echo $this->Html->safe($this->client_uri . "accounts/");?>">Payment Accounts</a>
            <a href="<?php echo $this->Html->safe($this->client_uri . "contacts/");?>">Contacts</a>
            <a href="<?php echo $this->Html->safe($this->client_uri . "plugin/download_manager/client_main/");?>">Downloads</a>
            <a href="<?php echo $this->Html->safe($this->client_uri . "plugin/support_manager/client_tickets/");?>">Support</a>

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.

Share this post


Link to post
Share on other sites

Could I ask what file generates the main page (with my account, support, etc.  the main /client/ page that an unregistered sees)?

 

Mine is plugging in four empty <p> tags which is throwing off the alignment of the theme :(

Share this post


Link to post
Share on other sites

Could I ask what file generates the main page (with my account, support, etc.  the main /client/ page that an unregistered sees)?

 

Mine is plugging in four empty <p> tags which is throwing off the alignment of the theme :(

 

Structure edits all the files it's the main file.

Share this post


Link to post
Share on other sites

http://screencast.com/t/vUHd8gbu  structure doesn't edit this.  It throws off the alignment of the main page.

 

The code that I screencapped was from your site, to prove it's not just my integration that has the issue - it's all of them.

Probably a bug then I can see empty <p></p> but I can't see the half's.

Share this post


Link to post
Share on other sites

Found the issue!  Looks like a bug with the wysiwyg editor.

 

It's putting the <p></p> tags around "{% if plugins.support_manager %}" for the 3 optional modules, which is making it display funny.

 

Setting the editor to source, and removing them and saving fixes the issue.

Share this post


Link to post
Share on other sites

Found the issue!  Looks like a bug with the wysiwyg editor.

 

It's putting the <p></p> tags around "{% if plugins.support_manager %}" for the 3 optional modules, which is making it display funny.

 

Setting the editor to source, and removing them and saving fixes the issue.

after reading your other post I was going to say it's the portal plugin itself haha.

Share this post


Link to post
Share on other sites

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);?>

 

Please explain this step in a little more detail.

 

Additionally, if you could explain a wordpress integration it would be great.

Share this post


Link to post
Share on other sites

Please explain this step in a little more detail.

 

The code at the top quote, is for the link to blesta directory. You need to copy the css / js folders to the app/views/client/default/ folder, then instead of http://yourdomain.com/css/global.css that small code will turn it to: http://yourblestadomain.com/app/views/clients/default/css/global.css

 

So for example if my css was css/global.css and css/blesta.css and I had js in js/slider.js and js/navigation.js

 

you'd do

 

<?php echo $this->view_dir;?>css/global.css   Not  http://yourblestadomain.com/app/views/clients/default/css/global.css
<?php echo $this->view_dir;?>css/blesta.css   Not  http://yourblestadomain.com/app/views/clients/default/css/blesta.css
<?php echo $this->view_dir;?>js/slider.js   Not  http://yourblestadomain.com/app/views/clients/default/js/slider.js
<?php echo $this->view_dir;?>js/nagivation.js   Not  http://yourblestadomain.com/app/views/clients/default/js/navigation.js

 

Hope that explains it better for that section.

 

 

In the title you change this:

 

<title>Your site - Index</title> 

 

to 

 

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

 

That shows then eg:

 

<title>Portal | YourCompany</title>

 

<title>Support Tickets | YourCompany</title>

 

<title>Portal | YourCompany2</title>

 

<title>Shared Hosting | YourCompany</title>

 

Hope that explains that for you too.

Share this post


Link to post
Share on other sites

Do any of the template area files like structure.pdt get overwritten by updates?  I thought I saw Tyson mention that editing the portal button in structure.pdt would get updated since it was a core file.

Share this post


Link to post
Share on other sites

Do any of the template area files like structure.pdt get overwritten by updates?  I thought I saw Tyson mention that editing the portal button in structure.pdt would get updated since it was a core file.

 

yes. structure.pdt will get overwritten everytime. I usually download a copy of my modified version, upgrade blesta then replace the structure.

Share this post


Link to post
Share on other sites

Do any of the template area files like structure.pdt get overwritten by updates?  I thought I saw Tyson mention that editing the portal button in structure.pdt would get updated since it was a core file.

 

Yeah if you don't rename the new default folder before you move the files into the root, If you have a custom theme I recommend you do that before every update and keep a backup just in case.

Share this post


Link to post
Share on other sites

A new tip I just found out.

 

If you want to link do special links to the installation sometimes this plays up: 

 

<?php echo $this->Html->safe($this->base_uri);?>

Use this code instead: 

<?php echo $this->Html->_($system_company->hostname, true); ?>

 

Doing a customer's integration I found it and it's so much better.

Share this post


Link to post
Share on other sites

While $this->Html->_() escapes HTML content to avoid introducing XSS vulnerabilities, I think you should continue to use $this->Html->safe() for wrapping custom URLs. Using $this->Html->_() several times is not as clean and readable.

 

Also, these statements are equivalent:

<?php
$this->Html->_($variable);
echo $this->Html->_($variable, true);
?>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×