The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Personalize sub-forums display [All version's]

Go down

Tutorial Personalize sub-forums display [All version's]

Post by Ape December 8th 2014, 7:09 pm

  Personalize sub-forums display  

This tutorial will allow you to customize the display of sub-forums on the index of your forum.

Personalize sub-forums display [All version's] Captur29

Template modification

Administration Panel Personalize sub-forums display [All version's] Arrow10 Display Personalize sub-forums display [All version's] Arrow10  Templates Personalize sub-forums display [All version's] Arrow10  General

Regardless of your forum version, look for the following variables in your Index_box template :
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

And replace them with :
Code:
<div class="s_forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>

Remember to save and publish your template. Add


Creation of JavaScript

Administration Panel Personalize sub-forums display [All version's] Arrow10  Modules Personalize sub-forums display [All version's] Arrow10  HTML & JAVASCRIPT Personalize sub-forums display [All version's] Arrow10  JavaScript codes management
Make sure javascript code management is enabled, and create a new script.

Title : what ever you like
Placement : In the home page
Add the following Code
Code:
$(function() {  
  var sep = '/', max_by_line = 3;
  $('.s_forum').each(function() {  
    var nth = 0;  
    $('a.gensmall', this).each(function(){  
      var next = this.nextSibling;
      if (next && next.nodeType == 3 && next.nodeValue == ", ") {  
        if (++nth % max_by_line) $(next).replaceWith(sep);
        else $(next).replaceWith('<br>');
      }  
    });  
  });  
});

You can customize the code by editing the following variables :

Right now max_by_line is set to 3, so this is what it will look like :
Personalize sub-forums display [All version's] Captur30

To modify the code look for this part of the JavaScript :
Code:
var sep = '/', max_by_line = 3;

Changing max_by_line from 3 to 2 will display the sub-links as :
Personalize sub-forums display [All version's] Captur31

And changing it to 1 will display them as :
Personalize sub-forums display [All version's] Untitl13

Changing the / in sep to something like > will change the separator like below.
Personalize sub-forums display [All version's] Captur32

Now it's your turn Wink




Personalize sub-forums display [All version's] Left1212Personalize sub-forums display [All version's] Center11Personalize sub-forums display [All version's] Right112
Personalize sub-forums display [All version's] Ape_b110
Personalize sub-forums display [All version's] Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

TonnyKamper likes this post

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum