Dolphin 7.1 changes for Template Developers

Dolphin 7.1 design has changed a lot in comparison to 7.0. We believe that recent changes will make it easier to create templates and it will be more robust across all BoonEx modules and 3rd-party modules.

1. We introduced default CSS classes for common purposes, like paddings, margins, font sizes, etc. You need to use these styles as much as possible in your design: 

bx-def-padding*: for any paddings

bx-def-margin*: for any margins

bx-def-font*: for any font sizes, and colours

bx-def-bc*: for design box content padding, usually it is always bx-def-bc-padding, try to use it in all cases

bx-def-border*: for borders

bx-def-shadow: for default shadow behind images like avatars, thumbnails 

bx-def-round-corners: for default round corners for images like avatars, thumbnails

bx-def-round-corners-with-border: default style for inputs, but better to use forms

bx-def-hr: for divider line

You can override any of these classes in your custom template to make unique look. Any changes in these classes affects all the site, BoonEx modules and 3rd-party modules. 

2. Dolphin is using vector icons everywhere. We highly recommend to use vector icons as well. If your design changes some menu with icons it must support vector icons. We used "Font Awesome" font for this purpose with great set of icon for any purpose - http://fortawesome.github.com/Font-Awesome/. Please have a look at existing BoonEx code on how to use font icons. 

3. New default page width is 1140px and columns are 28.1% and 71.9% with wide column on the left. You need to keep this in mind when designing your template. 

4. To override default template make minimum changes. Boonex ALT template is and very basic example on how to override only necessary files and CSS classes. You can use it as staring point for your custom template. 

5. Now Dolphin supports templates preview and uploading via admin panel. To make preview work you need  to include the following info in templates/tmpl_NAME/scripts/BxTemplName.php file:

$sTemplName = 'my_name'; // short template name
$sTemplVer = '1.1'; // template version
$sTemplVendor = 'MyCompany'; // vendor name
$sTemplPreview = 'preview.png'; // preview image located in templates/tmpl_NAME/images folder, 200x200px in size
$sTemplDesc = 'Very unique template'; // template description 

To make your template uploadable from Dolphin admin panel archive tmpl_NAME folder in ZIP format, the resulting ZIP file should be ready for this purpose.