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.
The forum of the forums

    Personalize sub-forums display [All version's]

    Ape
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19432
    Reputation : 2010
    Language : fluent in dork / mumbojumbo & English haha
    • Post n°1

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

    Post by Ape Mon 8 Dec 2014 - 19:09

      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



    This tutorial was written by SeLfde4Th7 From the French forum
    Translated By @APE



    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

    TonnyKamper likes this post

    • Back to top

      Current date/time is Mon 11 Nov 2024 - 19:01