Tutorial

One of the nice features available in DolphinPro is the head and body injections, which are available in the Dolphin Administration under Settings > Basic Settings at the very bottom of the page.

Adding code to the head injection would add code between the <head></head> tags, which would look like this:

<head>
Your code
</head>

Adding code to the body injection would add code before the closing </body> tag, which would look like this:

        Your code
</body>
</html>


This is very handy for adding css style sheets for example:
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/path/to/some.css" />


Or, Javascript files like:
<script type="text/javascript" src="http://www.yoursite.com/path/to/some.js"></script>


But, also for fav icons (traditional, Apple icons, etc.), as well as Google webmaster tools verification code, Google Analytics tracking code, and a variety of others.



It simplifies the process of adding to either the head or body/footer. Years ago, in previous versions of Dolphin we didn't have this feature available. We had to manually edit the /template/tmpl_name/_footer.html and /template/tmpl_name/_header.html files and add our code. On top of that if there was an update that happened to include the particular template you had to remember to apply the changes again. Luckily these files didn't change too often.


The only drawback is for example if you are adding css or js with:
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/path/to/some.css" />


Or:
<script type="text/javascript" src="http://www.yoursite.com/path/to/some.js"></script>


The actual css file some.css and the Javascript file some.js won't be added to the combined non-gzipped or combined gzipped files, which looks like this:


Non-gzipped css:
<link href="http://www.yoursite.com/cache_public/bx_templ_css_626e082f2d5b17b91b5358e9a9528e4f.css" rel="stylesheet" type="text/css" />

<link href="http://www.yoursite.com/cache_public/bx_templ_css_a5dfbc4a59af19a66492d58d45ba6b9a.css" rel="stylesheet" type="text/css" />


Non-gzipped js:
<script language="javascript" type="text/javascript" src="http://www.yoursite.com/cache_public/bx_templ_js_b688fee7ceb5d3a7eeea1736ca475e0d.js"></script>

<script language="javascript" type="text/javascript" src="http://www.yoursite.com/cache_public/bx_templ_js_1ef733ffc5a50215bfaca0dab45b4369.js"></script>


Or, with gzip:


gzipped css:
<link href="http://www.yoursite.com/gzip_loader.php?file=bx_templ_css_626e082f2d5b17b91b5358e9a9528e4f.css" rel="stylesheet" type="text/css" />

<link href="http://www.yoursite.com/gzip_loader.php?file=bx_templ_css_a5dfbc4a59af19a66492d58d45ba6b9a.css" rel="stylesheet" type="text/css" />


gzipped js:
<script language="javascript" type="text/javascript" src="http://www.yoursite.com/gzip_loader.php?file=bx_templ_js_b688fee7ceb5d3a7eeea1736ca475e0d.js"></script>

<script language="javascript" type="text/javascript" src="http://www.yoursite.com/gzip_loader.php?file=bx_templ_js_1ef733ffc5a50215bfaca0dab45b4369.js"></script>


You will notice in the gzipped css and js examples you find gzip_loader.php and the non gzipped option you do not.


Your css and js files are combined into 2 files rather than loading numerous files individually. This reduces the number of requests to your server/host, and speeds up the loading time. It is much faster to download one or two large files than it is to download a bunch of smaller files.


The difference between the non-gzipped and gzipped examples above is of course the gzipped option compresses the files making them smaller and slightly faster to download. The trade-off is it takes more cpu power/resources to gzip (compress) them than the non-gzipped option.



You basically have 2 simple options, the third being more complex that I'm not going to get into is to create a custom Dolphin module.


The first is to use the head / body injection available in the Dolphin Administration Dashboard:
Settings
> Basic Settings (HEAD Injection / BODY Injection)


Simply paste in you fav icon code, Google webmaster tools verification code, Google Analytics tracking code, css stylesheet code, js, etc. and save the changes. These will then be stored in the database and you won't have to worry about losing them after upgrading Dolphin.


How To Get Dolphin To Combine Custom .css or .js Files And Optionally Gzip Them

The second is if you are adding css or js, and you want them to become part of the combined .css / .js (non-gzipped or gzipped) for faster loading, then it involves editing a core Dolphin file, which means you may end up re-applying this if an upgrade happens to overwrite the file.


To do this, I will be adding an example.css and example.js file to the template folder called tmpl_example.


For example:
-templates
  -tmpl_example
    -css
      -example.css
    -js
      -example.js


Or:
/templates/tmpl_example/css/example.css
/templates/tmpl_example/js/example.js


Now to instruct Dolphin to combine them with the other .css or .js files you need to open and edit:
/inc/params.inc.php


Near the top you will find a section "Add default CSS" and "Add default JS". This is where you add your file names.


Keep in mind the above files and location as examples.


I would then add to the css section like so:
//--- Add default CSS ---//
$oSysTemplate->addCssSystem(array(
'default.css',
'common.css',
'common_phone.css',
'common_tablet.css',
'general.css',
'general_phone.css',
'anchor.css',
'forms_adv.css',
'join.css',
'login_form.css',
'top_menu.css',
'icons.css',
'loading.css',
'../../tmpl_example/css/example.css',
));

For the js I would add the following:
//--- Add default JS ---//
$oSysTemplate->addJsSystem(array(
'jquery.js',
'jquery-migrate.min.js',
'jquery.jfeed.js',
'jquery.embedly.min.js',
'jquery.ui.core.min.js',
'jquery.ui.widget.min.js',
'jquery.ui.position.min.js',
'jquery.ui.tabs.min.js',
'functions.js',
'jquery.dolRSSFeed.js',
'jquery.float_info.js',
'jquery.webForms.js',
'jquery.form.min.js',
'jquery.dolEmbedly.js',
'jquery.dolPopup.js',
'jquery.dolRetina.js',
'common_anim.js',
'join.js',
'login.js',
'BxDolVoting.js',
'user_status.js',
'jquery.cookie.min.js',
'jquery.smoothscroller.min.js',
'../../templates/tmpl_example/js/example.js',
));


Save the changes to the /inc/params.inc.php file.


Then, clear your Dolphin Administration cache so it will be rebuilt with your .css and .js file.


You can enable or disable gzip in Dolphin Administration:
Tools
> Cache
Settings (Far right)
Check or un-check the box "Enable compression for JS/CSS files(cache must be enabled)".


Just remember any future Dolphin updates that happen to include params.inc.php will wipe out the lines that you add to this file and you will have to add them again, which isn't always easy to remember.


On the plus side, params.inc.php doesn't change or get updated very often.


If combining with the other .css or .js files isn't important to you, then definitely use the head / body injection instead.


A few little files won't noticeably slow your page load time down.

 
Written By
Tutorial by: Jeremy LeSarge (AKA Ray)

I am the owner and administrator of DialMe.com. I write Tutorials for Boonex Dolphin as well as tips and resources surrounding website programming and development. I enjoy working with WordPress, SEO, and Web Hosting / Servers. I also maintain a WordPress Blog here on this site where you will find a variety of technology and webmaster resources.

Actions
Sponsored Links
Recommend