Jump to content

Site Integration With Blesta 3.1.x

Michael

By Michael
in Contribute

 Share

Recommended Posts

Michael Apprentice

Michael

Posted
Posted

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.

Link to comment
Share on other sites
  • 4 weeks later...
Michael Apprentice

Michael

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
Michael Apprentice

Michael

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
  • 5 weeks later...
Node24x7 Newbie

Node24x7

Posted
Posted

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.

Link to comment
Share on other sites
Michael Apprentice

Michael

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
  • 2 weeks later...
MemoryX2 Newbie

MemoryX2

Posted
Posted

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.

Link to comment
Share on other sites
Michael Apprentice

Michael

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
Michael Apprentice

Michael

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
Tyson Newbie

Tyson

Posted
Posted

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);
?>
Link to comment
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...
×
 Share
Go to topic listing
×
×
  • Create New...