jfh-converting-cfs-html-templates [Jcink.com Wiki]

Jcink Forum Hosting: Converting Custom Forum to Structure HTML Templates

Custom Forum Structure, or “CFS” (also known as Black's CFS), is a third party JavaScript ”DOM manipulation library specifically designed for the Jcink Hosted Forum service… This script allows full customization of your forum's appearance by placing control of its structure directly into your hands.

The HTML Templates feature renders most of this library to be no longer necessary, as you can fully customize forum rows, topic rows, profiles, and more directly from your Admin CP. However, you may have a theme or template that still uses Custom Forum Structure. This guide will help you migrate design code that you have utilizing CFS seamlessly into the HTML Template system.

Setup for Migration

The first thing to do is to backup your entire skin template. This is easy to do just go to:

Admin CP → Skins and Templates → Manage Skin Sets → Export the full XML skin set file and download it.

Now your skin is saved in case you have to go back for any reason.

Next, create a new blank template set.

Admin CP → Skins and Templates → HTML Templates

Set the “Allocate to skin” to the one that you are trying to convert, and make the template set blank. Once added and allocated, you are now ready to begin converting the templates.

Identifying CFS Objects and Version

Template configuration for CFS is done using javascript objects in the Board Wrappers. To find them, look in your wrappers for the word “custom”, ”.init” and, ”.initialize” It should lead you to blocks of code that look similar to this:

customIndex.init({
	page: "idx",
	html: 'contents'
})

This example object, customIndex.init, controls the individual forum row templates. The contents you're going to be interested here are what lies between the quotes in “html:” – you'll copy everything between there into the HTML Template system, save, and then make any adjustments as necessary.

The object might be *.initialize or *.init depending on the version of CFS you're using. The latest version (1.8.x) of CFS uses .initialize, while the older versions (1.5.x⇐) uses .init. Please take note of your version, since it will matter in certain conversion instances. In either case, the process of locating and copying the appropriate code is the same. Use CTRL + F to find them.

Easy version identification, search wrappers for these strings:

  • customIndex.initialize = 1.8.x
  • customIndex.init = 1.5.x or lower.

The rest of the guide will focus on how best to migrate each CFS object you have in your wrappers to the template system and assumes that you know how to locate each one based on the example above.

You do not need to migrate them all at once. We recommend migrating one piece at a time, starting with whatever you feel most comfortable with trying first.

customIndex.init

To migrate the Forum Index template, start by pasting the following in the Forum Row template.

<div id="row-<!-- |forum_id| -->" alt="" class="new-row">
   (customIndex.init html contents here)
</div>

Now copy the contents of “html:” from the customIndex.init object, delete the ”(customIndex.init html contents here)” and paste it right there.

Save the forum row index template.

Remove the customIndex.init object block from the wrappers.

Take a look at your forum rows. Do they look ok?

  • If YES, skip the Category Header template step.
  • If NO, proceed to the next step:

Navigate to the Category Header template. There are two different codes to use depending on your CFS version.

If your CFS version is 1.8.x, copy the following code into the Category Header template.

<div class="tableborder category" id="cat-<!-- |cat_id| -->">
 <div class='maintitle<!-- |collapsed_class| -->' align='left'>
<span style='float:right;'><a href='#' onclick='catcollapse("<!-- |cat_id| -->");return false;' id='main_<!-- |cat_id| -->'><!-- |collapse_img| --></a>&nbsp;&nbsp;</span>
<{CAT_IMG}><a href="index.php?c=<!-- |cat_id| -->"><!-- |cat_name| --></a></div>
<div id='cat_<!-- |cat_id| -->' style="<!-- |collapsed_style| -->">
        <!-- The markup generated by Custom Structure (1.8.x) begins here. -->
        <div id="category-<!-- |cat_id| -->" class="new-category">
        <% FORUM_ROWS %>
        </div>
       <!-- The markup generated by Custom Structure (1.8.x). -->
</div>
</div>
<br class='cat-lb' />

If your CFS version is 1.5.x, copy the following code into the Category Header template.

<div class="tableborder category" id="cat-<!-- |cat_id| -->">
 <div class='maintitle<!-- |collapsed_class| -->' align='left'>
<span style='float:right;'><a href='#' onclick='catcollapse("<!-- |cat_id| -->");return false;' id='main_<!-- |cat_id| -->'><!-- |collapse_img| --></a>&nbsp;&nbsp;</span>
<{CAT_IMG}><a href="index.php?c=<!-- |cat_id| -->"><!-- |cat_name| --></a></div>
<div id='cat_<!-- |cat_id| -->' style="<!-- |collapsed_style| -->">
        <!-- The markup generated by Custom Structure (1.5.x) begins here. -->
        <div class="new-section" id="section-<!-- |cat_id| -->">
        <% FORUM_ROWS %>
        </div>
       <!-- The markup generated by Custom Structure (1.5.x). -->
</div>
</div>
<br class='cat-lb' />

Save the template.

Navigate to the Subforum Headers template, and copy the following code into it:

<div class="tableborder" id="subforum-list">
<% FORUM_ROWS %>
</div>

If you have custom subforum separators setup, please refer to the SUB_SEPCHAR macro where you will be able to add it.

You are now finished.

customStats.init

To migrate the Board Statistics template, start by pasting the following in the Board Statistics template.

<div id="boardstats" class="tableborder">
   <div class="maintitle">Board Statistics</div>
   <!-- The markup generated by Custom Structure begins here. -->
   <div id="new-statistics">
       (customStats.init html contents here)
   </div>
   <!-- The markup generated by Custom Structure ends here. -->
</div>

Now copy the contents of “html:” from the customStats.init object, delete the ”(customStats.init html contents here)” and paste it right there.

Finally, remove the customStats.init object block from the wrappers. This needs to be done or you will see “undefined” printed over and over again. Your stats template should be working after it is removed.

You are now finished.

customTopics.init

To migrate the Topic Row template, start by pasting the following in the Topic Row template.

<div class="topic-row <!-- |type| -->-topic">
   (customTopics.init html contents here)
</div>

Now copy the contents of “html:” from the customTopics.init object, delete the ”(customTopics.init html contents here)” and paste it right there.

Next, you will need to add some macros. Navigate to Admin CP » Skins & Templates » Macros and edit the macro set for your board. Look for “Current Macros: [ Add a Macro ]”

In the macro adder, enter the following keys and replacement values:

Macro Key Macro Replacements
T_ANNO_SUBHEAD <div class='topic-title-row'>Announcements</div>
T_PIN_SUBHEAD <div class='topic-title-row'>Important Topics</div>
T_REG_SUBHEAD <div class='topic-title-row'>Forum Topics</div>

Finally, paste the following code in the Topic List Header template:

<div class="tableborder" id="topic-list">
	<div class='maintitle'><{CAT_IMG}>&nbsp;<!-- |forum_name| --></div>
		<div id="new-topics">
			<% ANNOUNCEMENTS %>
			<% TOPIC_ROWS %>
		</div>
	<!-- |mod_form_end| -->
	<!-- |forum_active| -->
	<!-- |sort_options| -->
</div>

Finally, remove the customTopics.init object block from the wrappers.

You are now finished.

customProfile.init

To migrate the Custom Profile template, start by pasting the following in the Main Profile template:

  <div id="new-profile">
    (customProfile.init html contents here)
  </div>

Now copy the contents of “html:” from the customProfile.init object, delete the ”(customProfile.init html contents here)” and paste it right there.

NOTE ON CUSTOM PROFILE FIELDS: Although most of your profile will transfer, the fields do not. You will need to reassign the field_# variables to match the ones exactly as shown in the Admin CP. Use the syntax described here to handle the fields.

customPosts.init

To migrate the Custom Posts template (only found in 1.8.x), start by migrating your current mini profile template under Skins & Templates → Profile Templates to the HTML Template System. You MUST do this before even trying to convert the post template. It should be a straight copy and paste, with only needing minor fixes. Once that's set remove the old mini profile template from Skins & Templates → Profile Templates.

The next thing you need to do, if you're using quick edit in CFS and want to keep it when you migrate, is to turn it back on the Admin CP. CFS contains its own quick edit that required our default one to be disabled in order to function. Turn it back on by navigating to Admin CP → System Settings → Topics, Posts, and Polls → Enable QuickEdit?, and set it to Yes.

Now you can move on to the Post Rows.

With the mini profile in place, paste the following in the Post Row template.

<!-- The markup generated by Custom Structure begins here. -->
  <div id="new-posts">
     <div id="entry#<!-- |pid| -->" class="new-post group<!-- |g_id| -->-post-normal">
    (customPosts.initialize html: contents here)
  </div>
</div>
<!-- The markup generated by Custom Structure ends here. -->

Now copy the contents of “html:” from the customPosts.initialize object, delete the ”(customIndex.init html contents here)” and paste it right there.

Save the Post Row template.

Now reload the template via the Admin CP and the variables should be converted. Look for the <!– |post| –> variable. Delete the post variable and replace it with this block of HTML:

<div id="pid_<!-- |pid| -->">
 <!-- THE POST <!-- |pid| --> --><div class='postcolor'><!-- |post| --></div><!-- |signature| --><!-- THE POST -->
</div>

It must be placed exactly as shown to ensure your template will work with the quick-edit functionality.

Finally, remove the customPosts.init object block from the wrappers.

You are now finished.

 
jfh-converting-cfs-html-templates.txt · Last modified: 2016/11/17 20:25 by jcink