|
With the release of Jamroom 3, a new way of having a Jamroom "Skin" was created that is much easier to use and modify then the "template" setup that is part of Jamroom 2.x. One of the hardest parts of upgrading a Jamroom 2.x system to Jamroom 3 is converting the "old" template structure into a new Skin that can be used in Jamroom 3.
Jamroom 3 Skin structure
Jamroom 3 has simplified the creation and design of a skin, by having all Skin related files located in a single directory. You can see how this is by looking at the default "Cobalt" Jamroom Skin that comes with Jamroom 3. You will find all of the templates that define the design are located in the Cobalt Skin directory:
jamroom/skins/Cobalt
There is 1 requirement that a skin must meet before Jamroom will "see" the skin:
- There must be a file called "jr_index.tpl" located within a sub directory of the skin directory
So... if you wanted to create a skin called "TestSkin", it would need to have at the VERY minimum this setup:
jamroom/skins/TestSkin
jamroom/skins/TestSkin/jr_index.tpl
The jr_index.tpl is the "default" index template that will be shown to the visitor when the TestSkin is selected as the active Jamroom Skin from the Jamroom Config.
It is highly recommended that you follow the recommended Skin structure with some extra files and folders:
jamroom/skins/TestSkin/TestSkin.css - the CSS file used throughout the skin (CSS is not required, but highly recommended) jamroom/skins/TestSkin/images - directory containing images used exclusively by this skin
Converting Jamroom 2.x templates to new Jamroom 3 structure
So, now that the structure of a Jamroom Skin has been covered, let's go through the steps necessary to convert a Jamroom 2.x template set to a Jamroom 3.x skin:
- The first step is to decide on a name for your new Jamroom 3.x skin. For the example, I will be using the name "OldSkin", which is based on the default Jamroom 2.x template set. If you have named your Jamroom 2.x templates differently, you will want to make the necessary adjustment while following along. One you have decided on a name for your Jamroom 3 skin, create a directory within your Jamroom 3 skins directory:
jamroom/skins/OldSkin
- The second step is to copy the Jamroom 2.x templates to their new name and location (the "old" jamroom 2.x templates are located in jamroom2/templates for this example):
jamroom2/templates/index/default_index.tpl â–º jamroom3/skins/OldSkin/jr_index.tpl
jamroom2/templates/index/default_index.css â–º jamroom3/skins/OldSkin/OldSkin.css
jamroom2/templates/index/*.tpl (rest of templates) â–º jamroom3/skins/OldSkin
Next, copy ALL of the templates from the following directories (some of the directories may not exist on your system) to the jamroom3/skins/OldSkin directory:
jamroom2/templates/calendar
jamroom2/templates/login
jamroom2/templates/ranking
jamroom2/templates/newsearch
jamroom2/templates/newchart
jamroom2/templates/videochart
jamroom2/templates/signup
jamroom2/templates/message
Note that if you have any template files that are NAMED THE SAME, make sure and rename them before copying them over - i.e. you may have a "common_footer.tpl" or "common_header.tpl" in more than 1 of the directories listed above. If you have to rename them, it is recommended you rename it with a name that signifies the script it is run with - i.e. "jr_ranking_footer.tpl".
- Now, you want to modify any PATHS and URLS in your new skin that point to the old jamroom/templates location. Note that you can use the new $SKIN_DIR and $SKIN_URL Smarty variables to reference your new directory. i.e. this:
{include file="$JAMROOM_DIR/templates/index/header.tpl"}
would become this:
{include file="$SKIN_DIR/header.tpl"}
- Next, log into your Jamroom 3 as the Master Admin, and go to the Jamroom Config -> System Settings section. About half way down the page you will see a selector for "Jamroom Skin". Select the new Jamroom Skin in the selector (i.e. "OldSKin") and press the "Update Settings" button at the bottom of the page - this will save the settings making the "OldSkin" the active Jamroom skin.
- Next, load up a new browser (don't use the same browser you used to modify the Jamroom Config) and load up your site:
http://yoursite.com/jamroom3/
You should see the (beginnings) of your new Jamroom 3 skin. More than likely, if you overlooked some paths or URLs in your templates, you will see some errors or missing images. simply modify the template files to use the correct path to the Skin templates and images.
- Next, it is recommended that you create a link to the Jamroom Control Panel in your new skin, since Jamroom 3 allows the user to be sent to the main Jamroom Index after a successful login - and without a link to the Jamroom Control panel your users won't know where to go:
index.php?mode=cp
|
