FOR DOLPHIN 7.1 USE ONLY
Often, someone will want to change something about the look of the standard Dolphin Pro installation that uses the provided UNI or ALT templates. Typically those people are advised to NOT make any changes to files in the /templates/base folder, as those files may be overwritten whenever the site is upgraded from one version to the next, and customizations may be lost.
Those same people are often advised to "Make a copy of the UNI template and make changes to it", The trouble is, that is a little more complicated than it seems. The UNI temple has NO files in its css folder, and there are NO html template files in the tmpl_uni folder. The UNI template uses ALL of the css files from the /templates/base/css folder and ALL of the html template files from the /templates/base folder. For a beginner, dealing with creating a template that imports css from the /templates/base/css folder, then overrides portions of the base css with new css, is probably not a good path to success.
If you want to create a new template, here's something that's a bit more straightforward. Attached is a zip file containing what is basically a complete self contained UNI template. Just unzip, and upload the tmpl_custom folder to your sites /templates folder and switch to the template in admin or by adding ?skin=custom to your sites url.
This template is better for development purposes because the tmpl_custom/css folder contains every css file that is used. Make any desired changes directly to the css files in this folder. The tmpl_custom folder also contains all the *.html files. These files control the layout of various blocks on your Dolphin site, and you shouldn't alter them unles you're confident you know what you're doing. One mistake in any of these files can wreck the entire layout of your site.... the same can be said of the css files. A single syntax error in any of the css files can disrupt the layout of the entire site.
During development, I usually turn of ALL caching and clear the cache folders.... you'll drive yourself crazy if you don't.
If you want to call this template something else, simply rename the folder from tmpl_custom to tmpl_somethingelse
Once you do that, you'll need to edit the /tmpl_somethingelse/scripts/BxTemplName.php file and change the text highlighted in red below:
<?php
$sTemplName = 'Custom';
$sTemplVer = $GLOBALS['site']['ver'] . '.' . $GLOBALS['site']['build'];
$sTemplVendor = 'Me';
$sTemplPreview = 'preview.png';
$sTemplDesc = _t('_adm_txt_templ_custom_desc');
_adm_txt_templ_custom_desc or _adm_txt_templ_somethingelse_desc is a language key you must then add in admin. It is the description text that appears in the template section of your admin console.
The template's preview image that you see in your sites admin, is located in the templates /images folder and in this template it is named preview.png When you are finished designing your template, you can take a screen shot of it, and use it instead of the one included in this template. Scale down your screen shot, and crop out a 200px by 200px portion of it. It can be any name or image type, just change the above image name appropriately.
tmpl_custom contains the most recent version of Font Awesome icons. For a complete reference, see this page: http://fortawesome.github.io/Font-Awesome/icons/ Click on any icon to get the unicode designation for the icon. You can see what icons are used in Dolphin by viewing icons.css If you want to use a different one, just change the unicode character designation.
tmpl_custom contains an additional folder, jquery-ui-themes-1.10.0 This is just a convenience I added to make it easier to change the color scheme of jQuery UI elements such as calendar popups, sliders, etc. You will find an example of how to use a different theme in _header.html
<link type="text/css" rel="stylesheet" href="<bx_url_root />templates/tmpl_custom/jquery-ui-themes-1.10.0/themes/dark-hive/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="<bx_url_root />templates/tmpl_custom/jquery-ui-themes-1.10.0/themes/dark-hive/jquery.iu.theme.css" />
</head>
The text highlighted in red above, is the name of the sub folder where the theme resides. To use a different theme, edit the folder name in red appropriately. You can view all the themes here: http://jqueryui.com/themeroller/ Click on the Gallery tab in the ThemeRolller box, then any thumbnail to see what all the UI elements will look like on your site using the selected theme.
Have fun, and try not to screw everything up.
