Scrolling Group Legend

So I created codes for a scrolling group legend but. . .I don't know how to get it to work so this is the code you post in the CSS:

Code:

#Group-Legend{background:#0d0d0;height:200px;overflow:auto;text-align:justify;width:210px}
.g1{background-image:url(http://i.imgur.com/wgzB81V.jpg);background-repeat:no-repeat}
.g2{background:url(http://i.imgur.com/InkcYEX.jpg);background-repeat:no-repeat}
.g3{background:url(http://i.imgur.com/Yop3vdT.jpg);background-repeat:no-repeat}
.g4{background:url(http://i.imgur.com/XBb4j9R.jpg);background-repeat:no-repeat}
.g5{background:url(http://i.imgur.com/EL8qgRf.jpg);background-repeat:no-repeat}
.g6{background:url(http://i.imgur.com/oLaHo23.jpg);background-repeat:no-repeat}
.g7{background:url(http://i.imgur.com/HwtgOqx.jpg);background-repeat:no-repeat}
.g8{background:url(http://i.imgur.com/q9lSnt0.jpg);background-repeat:no-repeat}
.g9{background:url(http://i.imgur.com/x6S7gSR.jpg);background-repeat:no-repeat}
.g10{background:url(http://i.imgur.com/2w5i7jV.jpg);background-repeat:no-repeat}
.g11{background:url(http://i.imgur.com/gMSOXd1.jpg);background-repeat:no-repeat}
.g12{background:url(http://i.imgur.com/tfoFKSu.jpg);background-repeat:no-repeat}
.g13{background:url(http://i.imgur.com/iZKNXSR.jpg);background-repeat:no-repeat}
.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12,.g13{color:#fff;display:block;font-size:15px;height:50px;margin-top:2px;width:200px}

And here is the code I don't know what to do with.

Code:

<td><div id="Group-Legend">
<div class="g1">
</div><div class="g2"> 
</div><div class="g3">
</div><div class="g4">
</div><div class="g5"> 
</div><div class="g6"> 
</div><div class="g7"> 
</div><div class="g8">
</div><div class="g9">
</div><div class="g10">
</div><div class="g11">
</div><div class="g12">
</div><div class="g13">  </div></div></td>

This is essentially what I want the outcome to be



That image was made in photoshop.

But yeah I can't seem to figure out where to post that code, I know I need to classify the groups so the images work then I need to ID the Group-Legend but I can't figure out where. I want to say in a template under displays but. . .I don't know where and I don't know if the code is incomplete can anyone help?

Hi @Zed is Not Dead,

You can find the legend under the index_body template.
( Display > Templates > General )

It should be under the variable {GROUP_LEGEND}. Unfortunately you cannot modify the contents, but you can hide the original legend and write a custom one by hand which I assume you're doing ?

It is what I am doing but I don't know if I am doing it right

Update: So I got it to work but this is how it looks



Overall I want to code it out so this is the ending product.

bump

bump

I see, you'll most likely want everything in one table row, or if it's not using a table you can use floats in that case. Your index_body is modified right ? Code you post the template code here ?

Thanks

yes sir!

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){

    if(typeof(_atc) == "undefined") {
        _atc = {  };
    }

    _atc.cwait = 0;
    $('.addthis_button').mouseup(function() {
        if ($('#at15s').css('display') == 'block') {
            addthis_close();
        }
    });
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
         {
            if( $(this).is(":visible") )
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    }
    catch(e) { }
   
   return false;
};

//]]>
</script>

<ul id="navstrip" class="clearfix" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
   <li class="begin"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a></li>
   {NAV_CAT_DESC}
</ul>

<!-- BEGIN topicpagination -->
<div class="pagination topic-options">
   {PAGINATION}
</div>
<!-- END topicpagination -->

<div class="posting-options topic-options">
   <ul class="posting-buttons clearfix">
      <!-- BEGIN switch_user_authpost -->
         <li class="post-icon"><a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" /></a></li>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
         <li class="post-icon"><a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a></li>
      <!-- END switch_user_authreply -->
      <!-- BEGIN switch_fb_likebtn -->
      <li class="post-icon">
         <div id="fb-root"></div>
         <script>(function(d, s, id) {
           var js, fjs = d.getElementsByTagName(s)[0];
           if (d.getElementById(id)) return;
           js = d.createElement(s); js.id = id;
           js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
           fjs.parentNode.insertBefore(js, fjs);
         }(document, 'script', 'facebook-jssdk'));</script>   
         <div class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false" style="top:5px"></div>
      </li>   
      <!-- END switch_fb_likebtn -->
      
      <!-- BEGIN switch_twitter_btn -->
      <li class="post-icon" style="padding-top:5px">
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </li>
      <!-- END switch_twitter_btn -->
   </ul>
</div>

<div class="clearfix empty-clear"></div>

<div class="borderwrap">
   <div class="maintitle floated">
      <h1>{TOPIC_TITLE}</h1>
      <div id="topicmenu-options" class="popmenubutton">
         <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=forumotion">{L_SHARE}</a>
         <!-- BEGIN switch_plus_menu -->
         <script type="text/javascript">//<![CDATA[
            var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
            var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
            var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
            var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
            var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
            var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
            insert_plus_menu_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES}, '{JS_WATCH_TOPIC}');
         //]]>
         </script>
         <!-- END switch_plus_menu -->
      </div>
   </div>
   {POLL_DISPLAY}

   <!-- BEGIN postrow -->
   
   <!-- BEGIN hidden -->
   <div class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</div>
   <!-- END hidden -->
   
   <!-- BEGIN first_post_br -->
</div>
<hr id="first-post-br" />
<div class="borderwrap">
   <!-- END first_post_br -->
   
   <!-- BEGIN displayed -->
   <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ONLINE_IMG_NEW} clearfix post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
      <div class="post-container"{postrow.displayed.THANK_BGCOLOR}>
         <div class="postbody clearfix">
            <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">

               <div class="postprofile-head post-header"{postrow.displayed.THANK_BGCOLOR}>
                  <div class="popmenubutton-new-out popmenubutton">
                     <a href="javascript:void(0);"{postrow.displayed.ONCLICK}>{postrow.displayed.ONLINE_IMG_INV}{postrow.displayed.POSTER_NAME_INV}</a>
                  </div>
                  <!-- BEGIN user_logged_in -->
                  <div id="pm{postrow.displayed.U_POST_ID}" class="popupmenu clearfix" style="display:none;">
                     <div class="avatar">
                        {postrow.displayed.POSTER_AVATAR}
                     </div>
                     <ul>
                        <li class="popupmenu-item">{postrow.displayed.PROFILE_IMG}&nbsp;</li>
                        <!-- BEGIN switch_user_pm -->
                        <li class="popupmenu-item">{postrow.displayed.PM_IMG}&nbsp;</li>
                        <!-- END switch_user_pm -->
                        <!-- BEGIN switch_user_email -->
                        <li class="popupmenu-item">{postrow.displayed.EMAIL_IMG}&nbsp;</li>
                        <!-- END switch_user_email -->
                        <!-- BEGIN switch_contact_row -->
                        <li class="popupmenu-item">
                           <!-- BEGIN contact_field -->
                           {postrow.displayed.user_logged_in.switch_contact_row.contact_field.CONTENT}&nbsp;
                           <!-- END contact_field -->&nbsp;
                        </li>
                        <!-- END switch_contact_row -->
                        <!-- BEGIN switch_user_posts -->
                        <li class="popupmenu-item last">{postrow.displayed.USER_POSTS_IMG}&nbsp;</li>
                        <!-- END switch_user_posts -->
                     </ul>
                  </div>
                  <!-- END user_logged_in -->
               </div>

                             <dl class="postprofile-details postdetails">
                  <dt>
                                                  <span class="profile-avatar">{postrow.displayed.POSTER_AVATAR}</span><br />
                                                  <span class="profile-name">{postrow.displayed.POSTER_NAME}</span>
                  </dt>
                  <dd class="profile-rank">{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
                  <dd><br /></dd>
                  <dd class="profile-info">
                    <!-- BEGIN profile_field -->
                    {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                    <!-- END profile_field -->
                    {postrow.displayed.POSTER_RPG}
                  </dd>
              </dl>
            </div>

         <div class="postbody-head postdetails post-header"{postrow.displayed.THANK_BGCOLOR}>
            <ul class="post-info">
               <li>{postrow.displayed.IP_IMG}</li>
               <li>{L_POST_NUMBER}{postrow.displayed.COUNT_POSTS_NUMBER}</li>
            </ul>
                <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
            <h3>{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h3>
            <p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" />&nbsp;{L_TOPIC_BY}&nbsp;{postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</p>
         </div>

         <div class="post-entry">
            <!-- BEGIN switch_vote_active -->
            <div class="vote gensmall">
               <!-- BEGIN switch_vote -->
               <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
               <!-- END switch_vote -->

               <!-- BEGIN switch_bar -->
               <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                  <!-- BEGIN switch_vote_plus -->
                  <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                  <!-- END switch_vote_plus -->

                  <!-- BEGIN switch_vote_minus -->
                  <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                  <!-- END switch_vote_minus -->
               </div>
               <!-- END switch_bar -->

               <!-- BEGIN switch_no_bar -->
               <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
               <!-- END switch_no_bar -->

               <!-- BEGIN switch_vote -->
               <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
               <!-- END switch_vote -->
            </div>
            <!-- END switch_vote_active -->
            <div>{postrow.displayed.MESSAGE}</div>

            <!-- BEGIN switch_attachments -->
            <dl class="attachbox">
               <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
               <dd>
                  <!-- BEGIN switch_post_attachments -->
                  <dl class="file">
                     <dt>
                        <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                        <!-- BEGIN switch_dl_att -->
                        <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                        <!-- END switch_dl_att -->

                        <!-- BEGIN switch_no_dl_att -->
                        {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                        <!-- END switch_no_dl_att -->
                     </dt>

                     <!-- BEGIN switch_no_comment -->
                     <dd>
                        <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                     </dd>
                     <!-- END switch_no_comment -->

                     <!-- BEGIN switch_no_dl_att -->
                     <dd>
                        <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                     </dd>
                     <!-- END switch_no_dl_att -->

                     <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                  </dl>
                  <!-- END switch_post_attachments -->
               </dd>
            </dl>
            <!-- END switch_attachments -->
            <div class="clear"></div>
            {postrow.displayed.EDITED_MESSAGE}
         </div>


         <!-- BEGIN switch_signature -->
         <br />
         <div id="sig{postrow.displayed.U_POST_ID}" class="signature_div">{postrow.displayed.SIGNATURE_NEW}</div>
         <!-- END switch_signature -->

      </div>

   </div>

      <div class="post-footer clearfix"{postrow.displayed.THANK_BGCOLOR}>
         <ul class="misc-icons">
            <li><a href="#top">{L_BACK_TO_TOP}</a></li>
            <li>{postrow.displayed.REPORT_IMG_NEW}</li>
         </ul>
         <ul class="posting-icons">
            <li>{postrow.displayed.THANK_IMG}</li>
            <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
            <li>{postrow.displayed.QUOTE_IMG}</li>
            <li>{postrow.displayed.EDIT_IMG}</li>
            <li>{postrow.displayed.DELETE_IMG}</li>
         </ul>
      </div>
   </div> <!-- closing tag post -->
   <!-- END displayed -->
   <!-- END postrow -->
   <div class="topic-footer clearfix">
      <!-- BEGIN minisearch -->
      <div class="search-footer-box">
         <form method="get" id="forum-search" action="{S_SEARCHBOX_ACTION}">
            <fieldset>
               <input type="text" name="search_keywords" id="search_keywords" size="20" value="{L_SEARCH}" onclick="if (this.value == '{L_SEARCH}') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}';" />
               &nbsp;<input class="button" type="submit" value="{L_SEARCH}" />
               <input type="hidden" value="{SEARCH_WHERE}" name="search_where" />
               <input type="hidden" value="{SEARCH_TOPIC}" name="search_topic" />
               <input type="hidden" value="posts" name="show_results" />
            </fieldset>
         </form>
      </div>
      <!-- END minisearch -->
      <div class="next-prev">
         « <a href="{U_VIEW_OLDER_TOPIC}">{L_IPB_PREVIOUS_TOPIC}</a> · <a href="{U_VIEW_NEWER_TOPIC}">{L_IPB_NEXT_TOPIC}</a> »
      </div>
   </div>
</div>

<!-- BEGIN viewtopic_bottom -->
<br />
<div class="borderwrap">
   <div class="bar clearfix">
      <div class="left rtl-inversion-left">
         <input type="hidden" name="t" value="{TOPIC_ID}" />

         <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
         <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

         {S_TOPIC_ADMIN}
      </div>
      <div class="right rtl-inversion-right">
         {L_TABS_PERMISSIONS} <br />{S_AUTH_LIST}
      </div>
   </div>
</div>
<!-- END viewtopic_bottom -->

<!-- BEGIN topicpagination -->
<div class="pagination topic-options">
   {PAGINATION}
</div>
<!-- END topicpagination -->

<div class="posting-options topic-options">
   <ul class="posting-buttons clearfix">
      <!-- BEGIN switch_user_authpost -->
      <li class="post-icon">
         <a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" /></a>
      </li>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
      <li class="post-icon">
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
      </li>
      <!-- END switch_user_authreply -->
   </ul>
</div>

<div class="clearfix empty-clear"></div>

<!-- BEGIN promot_trafic -->
<div class="row2">
   <div id="ptrafic_close" class="clearfix" style="display:none">
      <div class="maintitle floated">
         <h3>{PROMOT_TRAFIC_TITLE}</h3>
         <div class="right rtl-inversion-right">
            <a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a>
         </div>
      </div>
   </div>
   <div id="ptrafic_open" class="clearfix" style="display:''">
      <div class="maintitle floated">
         <h3>{PROMOT_TRAFIC_TITLE}</h3>
         <div class="right rtl-inversion-right">
            <a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a>
         </div>
      </div>
      <div>
         <!-- BEGIN link -->
         »&nbsp;<a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
         <!-- END link -->
      </div>
   </div>
</div>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<div class="row1" id="forum_rules">
   <div class="maintitle">
      <h3>{L_FORUM_RULES}</h3>
   </div>
   <table>
      <tr>
         <!-- BEGIN switch_forum_rule_image -->
         <td class="logo">
            <img src="{RULE_IMG_URL}" alt=""/>
         </td>
         <!-- END switch_forum_rule_image -->
         <td class="rules post-entry">
            {RULE_MSG}
         </td>
      </tr>
   </table>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
<br />
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .post-entry', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

I think that's the viewtopic_body, I'll need the index_body.

lol my bad,

Code:

{JAVASCRIPT}
<ul id="navstrip" class="clearfix" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
   <li class="begin"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a></li>
   {NAV_CAT_DESC}
</ul>

<!-- BEGIN message_admin_index -->
   <div class="newslink">
   <p class="date">{LAST_VISIT_DATE}</p>
   <!-- BEGIN message_admin_titre -->
      <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
   <!-- END message_admin_txt -->
   </div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="borderwrap module">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
         <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
         <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
         <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
         {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_fb_connect -->
         <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
         <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
         <!-- END switch_fb_connect -->
      </div>
   </form>
</div>
 <br />
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}

{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div id="fo_stat" class="borderwrap">
   <div class="maintitle floated">
      <h3>{L_STATISTICS}</h3>
      <div class="contract" id="bs0" onclick="toggleCategory('s0');">
         &nbsp;&nbsp;&nbsp;
      </div>
   </div>

   <table cellpadding="0" cellspacing="0" class="ipbtable">
      <thead>
         <tr>
            <th colspan="2">
               <div class="linklist clearfix statlinks">
                  <ul>
                     <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
                     <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
                     <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
                  </ul>
               </div>
            </th>
         </tr>
      </thead>
      <tfoot>
         <tr><td colspan="2"></td></tr>
      </tfoot>
      <tbody id="s0">
         <tr>
            <th colspan="2" class="formsubtitle">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
            </th>
         </tr>
         <tr>
            <td class="row1" width="1%"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td>
            <td class="row2">
               <div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
               <div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
               <div>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</div>
            </td>
         </tr>
         <!-- BEGIN switch_birthday -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_BIRTHDAY}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_BIRTHDAY_IMG}" alt="{L_BIRTHDAY}" /></td>
            <td class="row2">
               <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            </td>
         </tr>
         <!-- END switch_birthday -->
         <!-- BEGIN switch_calendar_5days -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_CALENDAR_5DAYS}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_CALENDAR_IMG}" alt="{L_CALENDAR}" /></td>
            <td class="row2">
               {CALENDAR_EVENTS_5DAYS}
            </td>
         </tr>
         <!-- END switch_calendar_5days -->
         <tr>
            <th colspan="2" class="formsubtitle">

            <!-- BEGIN switch_statistics_link -->
            <a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a>
            <!-- END switch_statistics_link -->

            <!-- BEGIN switch_statistics_nolink -->
            {L_STATISTICS}
            <!-- END switch_statistics_nolink -->
            </th>
         </tr>
         <tr>
            <td class="row1"><img src="{L_STATISTICS_IMG}" alt="{L_STATISTICS}" /></td>
            <td class="row2">
               <p>{TOTAL_POSTS}</p>
               <p>{TOTAL_USERS}</p>
               <p>{NEWEST_USER}</p>
               <p>{RECORD_USERS}</p>
            </td>
         </tr>
         <!-- BEGIN switch_chatbox_activate -->
         <tr>
            <th colspan="2" class="formsubtitle">{CHATBOX_NAME}</th>
         </tr>
         <tr>
            <td class="row1"><img src="{CHATBOX_IMG}" alt="{CHATBOX_NAME}" /></td>
            <td class="row2">
               <p>{TOTAL_CHATTERS_ONLINE}</p>
               <p>{CHATTERS_LIST}</p>
               <!-- BEGIN switch_chatbox_popup -->
               <div id="chatbox_popup"></div>
               <script type="text/javascript">
               insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
               </script>
               <!-- END switch_chatbox_popup -->
            </td>
         </tr>
         <!-- END switch_chatbox_activate -->
      </tbody>
   </table>

</div>

<!-- END disable_viewonline -->
<br />
{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<br />
<div class="activeusers clearfix">
    <ul class="ul-icons-home">
        <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />&nbsp;{L_NEW_POSTS}</li>
        <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />&nbsp;{L_NO_NEW_POSTS}</li>
        <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />&nbsp;{L_FORUM_LOCKED}</li>
    </ul>
</div>
<!-- END switch_legend -->


<!-- BEGIN switch_user_login_form_footer -->
<div class="borderwrap module">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
         <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
         <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
         <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
         {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_fb_connect -->
         <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
         <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
         <!-- END switch_fb_connect -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_footer -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->

Find :

Code:

<!-- BEGIN disable_viewonline -->
<div id="fo_stat" class="borderwrap">
  <div class="maintitle floated">
      <h3>{L_STATISTICS}</h3>
      <div class="contract" id="bs0" onclick="toggleCategory('s0');">
        &nbsp;&nbsp;&nbsp;
      </div>
  </div>

  <table cellpadding="0" cellspacing="0" class="ipbtable">
      <thead>
        <tr>
            <th colspan="2">
              <div class="linklist clearfix statlinks">
                  <ul>
                    <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
                    <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
                    <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
                  </ul>
              </div>
            </th>
        </tr>
      </thead>
      <tfoot>
        <tr><td colspan="2"></td></tr>
      </tfoot>
      <tbody id="s0">
        <tr>
            <th colspan="2" class="formsubtitle">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
            </th>
        </tr>
        <tr>
            <td class="row1" width="1%"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td>
            <td class="row2">
              <div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
              <div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
              <div>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</div>
            </td>
        </tr>
        <!-- BEGIN switch_birthday -->
        <tr>
            <th colspan="2" class="formsubtitle">{L_BIRTHDAY}</th>
        </tr>
        <tr>
            <td class="row1" width="1%"><img src="{L_BIRTHDAY_IMG}" alt="{L_BIRTHDAY}" /></td>
            <td class="row2">
              <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            </td>
        </tr>
        <!-- END switch_birthday -->
        <!-- BEGIN switch_calendar_5days -->
        <tr>
            <th colspan="2" class="formsubtitle">{L_CALENDAR_5DAYS}</th>
        </tr>
        <tr>
            <td class="row1" width="1%"><img src="{L_CALENDAR_IMG}" alt="{L_CALENDAR}" /></td>
            <td class="row2">
              {CALENDAR_EVENTS_5DAYS}
            </td>
        </tr>
        <!-- END switch_calendar_5days -->
        <tr>
            <th colspan="2" class="formsubtitle">

            <!-- BEGIN switch_statistics_link -->
            <a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a>
            <!-- END switch_statistics_link -->

            <!-- BEGIN switch_statistics_nolink -->
            {L_STATISTICS}
            <!-- END switch_statistics_nolink -->
            </th>
        </tr>
        <tr>
            <td class="row1"><img src="{L_STATISTICS_IMG}" alt="{L_STATISTICS}" /></td>
            <td class="row2">
              <p>{TOTAL_POSTS}</p>
              <p>{TOTAL_USERS}</p>
              <p>{NEWEST_USER}</p>
              <p>{RECORD_USERS}</p>
            </td>
        </tr>
        <!-- BEGIN switch_chatbox_activate -->
        <tr>
            <th colspan="2" class="formsubtitle">{CHATBOX_NAME}</th>
        </tr>
        <tr>
            <td class="row1"><img src="{CHATBOX_IMG}" alt="{CHATBOX_NAME}" /></td>
            <td class="row2">
              <p>{TOTAL_CHATTERS_ONLINE}</p>
              <p>{CHATTERS_LIST}</p>
              <!-- BEGIN switch_chatbox_popup -->
              <div id="chatbox_popup"></div>
              <script type="text/javascript">
              insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
              </script>
              <!-- END switch_chatbox_popup -->
            </td>
        </tr>
        <!-- END switch_chatbox_activate -->
      </tbody>
  </table>

</div>

<!-- END disable_viewonline -->

Replace by :

Code:

<!-- BEGIN disable_viewonline -->
<div id="fo_stat" class="borderwrap">
  <div class="maintitle floated">
      <h3>{L_STATISTICS}</h3>
      <div class="contract" id="bs0" onclick="toggleCategory('s0');">
        &nbsp;&nbsp;&nbsp;
      </div>
  </div>

  <table cellpadding="0" cellspacing="0" class="ipbtable">
      <thead>
        <tr>
            <th colspan="3">
              <div class="linklist clearfix statlinks">
                  <ul>
                    <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
                    <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
                    <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
                  </ul>
              </div>
            </th>
        </tr>
      </thead>
      <tfoot>
        <tr><td colspan="3"></td></tr>
      </tfoot>
      <tbody id="s0">
        <tr>
            <th colspan="3" class="formsubtitle">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
            </th>
        </tr>
        <tr><td class="row1" colspan="3"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td></tr>
        <tr>
            <td class="row2" width="50%" id="memberColumn">
              <div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
              <div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
              <!-- BEGIN switch_birthday -->
              <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
              <!-- END switch_birthday -->
            </td>
         
          <td class="row2" width="25%" id="groupColumn"><div>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</div></td>
          <td class="row2" width="25%" id="statsColumn">
              <p>{TOTAL_POSTS}</p>
              <p>{TOTAL_USERS}</p>
              <p>{NEWEST_USER}</p>
              <p>{RECORD_USERS}</p>
          </td>
         
        </tr>
      </tbody>
  </table>

</div>

<!-- END disable_viewonline -->

This should add the content you want split into three columns :

Members online || Groups || Stats

Each column has an ID for style modifications :
#memberColumn || #groupColumn || #statsColumn

I left the who is online image in case you wanted to add the image via pics management. You can remove it if you want though.

Awesome so now where do I put this code:

Code:

<td><div id="Group-Legend">
<div class="g5">
</div><div class="g9"> 
</div><div class="g7">
</div><div class="g16">
</div><div class="g19"> 
</div><div class="g1"> 
</div><div class="g14"> 
</div><div class="g8">
</div><div class="g10">
</div><div class="g17">
</div><div class="g4">
</div> </div></div></td>

so I can activate this code:

Code:

#Group-Legend{background:#0d0d0;height:200px;overflow:auto;text-align:justify;width:210px}
.g5{background-image:url(http://i.imgur.com/LUVi3qT.jpg);background-repeat:no-repeat}
.g9{background:url(http://i.imgur.com/6k5FBmt.jpg);background-repeat:no-repeat}
.g7{background:url(http://i.imgur.com/08CkYuQ.jpg);background-repeat:no-repeat}
.g16{background:url(http://i.imgur.com/iPlS9OK.jpg);background-repeat:no-repeat}
.g19{background:url(http://i.imgur.com/PqIsTQW.jpg);background-repeat:no-repeat}
.g11{background:url(http://i.imgur.com/l0W5nV8.jpg);background-repeat:no-repeat}
.g14{background:url(http://i.imgur.com/dtXrnLB.jpg);background-repeat:no-repeat}
.g8{background:url(http://i.imgur.com/GqigKDf.jpg);background-repeat:no-repeat}
.g10{background:url(http://i.imgur.com/nJtyT2D.jpg);background-repeat:no-repeat}
.g17{background:url(http://i.imgur.com/AYcorpP.jpg);background-repeat:no-repeat}
.g4{background:url(http://i.imgur.com/9DRcwfU.jpg);background-repeat:no-repeat}
.g5,.g9,.g7,.g16,.g19,.g11,.g14,.g8,.g10,.g17,.g4{color:#fff;display:block;font-size:15px;height:50px;margin-top:2px;width:200px}

And where do I put this image:


so I can get the ending result of this:

For the legend, you can add your code in the place where the default legend can be found :

Code:

<div>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</div>

As for the image, try adding it under Display > Pics management > Advanced > Who is online ?

nope this is all that happened when I put the image in the who is online area

Weird, in that case you can replace this image in the template.

Code:

<img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />

I got it to work



but everything seems too scrunched up and also I want to get rid of the top bar that says who is online and place the links on the blue bar above it on the image in black text to the left. is that possible?

also I want the background of the scrollbar to be black and the actual scroll bar to be a blue shade um lets say #202f8e

Yeah, I was gonna say something about that. Could you give me the modified template so I can see what's causing that ? I'll also add the other things in you mentioned.

Yeah I can do that also not sure if you visited the site but. . .when you visit and scroll every other forum will have this under it



can you some how get rid of that too?

Code:

{JAVASCRIPT}
<ul id="navstrip" class="clearfix" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
   <li class="begin"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a></li>
   {NAV_CAT_DESC}
</ul>

<!-- BEGIN message_admin_index -->
   <div class="newslink">
   <p class="date">{LAST_VISIT_DATE}</p>
   <!-- BEGIN message_admin_titre -->
      <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
   <!-- END message_admin_txt -->
   </div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="borderwrap module">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
         <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
         <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
         <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
         {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_fb_connect -->
         <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
         <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
         <!-- END switch_fb_connect -->
      </div>
   </form>
</div>
 <br />
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}

{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div id="fo_stat" class="borderwrap">
   <div class="maintitle floated">
      <h3>{L_STATISTICS}</h3>
      <div class="contract" id="bs0" onclick="toggleCategory('s0');">
         &nbsp;&nbsp;&nbsp;
      </div>
   </div>

   <table cellpadding="0" cellspacing="0" class="ipbtable">
      <thead>
         <tr>
            <th colspan="2">
               <div class="linklist clearfix statlinks">
                  <ul>
                     <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
                     <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
                     <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
                  </ul>
               </div>
            </th>
         </tr>
      </thead>
      <tfoot>
         <tr><td colspan="2"></td></tr>
      </tfoot>
      <tbody id="s0">
         <tr>
            <th colspan="2" class="formsubtitle">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
            </th>
         </tr>
         <tr>
            <td class="row1" width="1%"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td>
            <td class="row2">
               <div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
               <div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
               <div>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</div>
            </td>
         </tr>
         <!-- BEGIN switch_birthday -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_BIRTHDAY}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_BIRTHDAY_IMG}" alt="{L_BIRTHDAY}" /></td>
            <td class="row2">
               <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            </td>
         </tr>
         <!-- END switch_birthday -->
         <!-- BEGIN switch_calendar_5days -->
         <tr>
            <th colspan="2" class="formsubtitle">{L_CALENDAR_5DAYS}</th>
         </tr>
         <tr>
            <td class="row1" width="1%"><img src="{L_CALENDAR_IMG}" alt="{L_CALENDAR}" /></td>
            <td class="row2">
               {CALENDAR_EVENTS_5DAYS}
            </td>
         </tr>
         <!-- END switch_calendar_5days -->
         <tr>
            <th colspan="2" class="formsubtitle">

            <!-- BEGIN switch_statistics_link -->
            <a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a>
            <!-- END switch_statistics_link -->

            <!-- BEGIN switch_statistics_nolink -->
            {L_STATISTICS}
            <!-- END switch_statistics_nolink -->
            </th>
         </tr>
         <tr>
            <td class="row1"><img src="{L_STATISTICS_IMG}" alt="{L_STATISTICS}" /></td>
            <td class="row2">
               <p>{TOTAL_POSTS}</p>
               <p>{TOTAL_USERS}</p>
               <p>{NEWEST_USER}</p>
               <p>{RECORD_USERS}</p>
            </td>
         </tr>
         <!-- BEGIN switch_chatbox_activate -->
         <tr>
            <th colspan="2" class="formsubtitle">{CHATBOX_NAME}</th>
         </tr>
         <tr>
            <td class="row1"><img src="{CHATBOX_IMG}" alt="{CHATBOX_NAME}" /></td>
            <td class="row2">
               <p>{TOTAL_CHATTERS_ONLINE}</p>
               <p>{CHATTERS_LIST}</p>
               <!-- BEGIN switch_chatbox_popup -->
               <div id="chatbox_popup"></div>
               <script type="text/javascript">
               insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
               </script>
               <!-- END switch_chatbox_popup -->
            </td>
         </tr>
         <!-- END switch_chatbox_activate -->
      </tbody>
   </table>

</div>

<!-- END disable_viewonline -->
<br />
{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<br />
<div class="activeusers clearfix">
    <ul class="ul-icons-home">
        <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />&nbsp;{L_NEW_POSTS}</li>
        <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />&nbsp;{L_NO_NEW_POSTS}</li>
        <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />&nbsp;{L_FORUM_LOCKED}</li>
    </ul>
</div>
<!-- END switch_legend -->


<!-- BEGIN switch_user_login_form_footer -->
<div class="borderwrap module">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
         <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
         <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
         <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
         {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_fb_connect -->
         <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
         <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
         <!-- END switch_fb_connect -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_footer -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->{JAVASCRIPT}
<ul id="navstrip" class="clearfix" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
   <li class="begin"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a></li>
   {NAV_CAT_DESC}
</ul>

<!-- BEGIN message_admin_index -->
   <div class="newslink">
   <p class="date">{LAST_VISIT_DATE}</p>
   <!-- BEGIN message_admin_titre -->
      <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
   <!-- END message_admin_txt -->
   </div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="borderwrap module">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
         <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
         <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
         <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
         {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_fb_connect -->
         <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
         <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
         <!-- END switch_fb_connect -->
      </div>
   </form>
</div>
 <br />
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}

{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div id="fo_stat" class="borderwrap">
  <div class="maintitle floated">
      <h3>{L_STATISTICS}</h3>
      <div class="contract" id="bs0" onclick="toggleCategory('s0');">
        &nbsp;&nbsp;&nbsp;
      </div>
  </div>

  <table cellpadding="0" cellspacing="0" class="ipbtable">
      <thead>
        <tr>
            <th colspan="3">
              <div class="linklist clearfix statlinks">
                  <ul>
                    <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
                    <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
                    <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
                  </ul>
              </div>
            </th>
        </tr>
      </thead>
      <tfoot>
        <tr><td colspan="3"></td></tr>
      </tfoot>
      <tbody id="s0">
        <tr>
            <th colspan="3" class="formsubtitle">
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
            </th>
        </tr>
        <tr><td class="row1" colspan="3"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td></tr>
        <tr>
            <td class="row2" width="50%" id="memberColumn">
              <div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
              <div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
              <!-- BEGIN switch_birthday -->
              <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
              <!-- END switch_birthday -->
            </td>
         
          <td class="row2" width="25%" id="groupColumn"><td><div id="Group-Legend">
<div class="g5">
</div><div class="g9"> 
</div><div class="g7">
</div><div class="g16">
</div><div class="g19"> 
</div><div class="g1"> 
</div><div class="g14"> 
</div><div class="g8">
</div><div class="g10">
</div><div class="g17">
</div><div class="g4">
</div> </div></div></td></td>
          <td class="row2" width="25%" id="statsColumn">
              <p>{TOTAL_POSTS}</p>
              <p>{TOTAL_USERS}</p>
              <p>{NEWEST_USER}</p>
              <p>{RECORD_USERS}</p>
          </td>
         
        </tr>
      </tbody>
  </table>

</div>

<!-- END disable_viewonline -->
<br />
{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<br />
<div class="activeusers clearfix">
    <ul class="ul-icons-home">
        <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />&nbsp;{L_NEW_POSTS}</li>
        <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />&nbsp;{L_NO_NEW_POSTS}</li>
        <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />&nbsp;{L_FORUM_LOCKED}</li>
    </ul>
</div>
<!-- END switch_legend -->


<!-- BEGIN switch_user_login_form_footer -->
<div class="borderwrap module">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
         <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
         <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
         <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
         {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_fb_connect -->
         <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
         <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
         <!-- END switch_fb_connect -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_footer -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->

link to the site for proof:
http://fairytailonline-rp.forumotion.com/

Here, replace your index_body template with this :

Code:

{JAVASCRIPT}
<ul id="navstrip" class="clearfix" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <li class="begin"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a></li>
  {NAV_CAT_DESC}
</ul>

<!-- BEGIN message_admin_index -->
  <div class="newslink">
  <p class="date">{LAST_VISIT_DATE}</p>
  <!-- BEGIN message_admin_titre -->
      <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
  <!-- END message_admin_titre -->

  <!-- BEGIN message_admin_txt -->
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
  <!-- END message_admin_txt -->
  </div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="borderwrap module">
  <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
        <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
        <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
        <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
        {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
        <!-- BEGIN switch_fb_connect -->
        <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
        <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
        <!-- END switch_fb_connect -->
      </div>
  </form>
</div>
 <br />
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}

{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div id="fo_stat" class="borderwrap">
  <div class="maintitle floated">
      <h3>{L_STATISTICS}</h3>
      <div class="contract" id="bs0" onclick="toggleCategory('s0');">
        &nbsp;&nbsp;&nbsp;
      </div>
  </div>

  <table cellpadding="0" cellspacing="0" class="ipbtable">
      <tfoot>
        <tr><td colspan="3"></td></tr>
      </tfoot>
      <tbody id="s0">
        <tr>
          <td class="row1" colspan="3" id="whoisImage">
            <a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a>
              <div class="linklist clearfix statlinks">
                  <ul>
                    <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
                    <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
                    <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
                  </ul>
              </div>
          </td>
        </tr>
        <tr>
            <td class="row2" width="50%" id="memberColumn">
              <div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
              <div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
              <!-- BEGIN switch_birthday -->
              <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
              <!-- END switch_birthday -->
            </td>
         
          <td class="row2" width="25%" id="groupColumn"><div id="Group-Legend">
<div class="g5">
</div><div class="g9"> 
</div><div class="g7">
</div><div class="g16">
</div><div class="g19"> 
</div><div class="g1"> 
</div><div class="g14"> 
</div><div class="g8">
</div><div class="g10">
</div><div class="g17">
</div><div class="g4">
</div> </div></td>
          <td class="row2" width="25%" id="statsColumn">
              <p>{TOTAL_POSTS}</p>
              <p>{TOTAL_USERS}</p>
              <p>{NEWEST_USER}</p>
              <p>{RECORD_USERS}</p>
          </td>
         
        </tr>
      </tbody>
  </table>

</div>

<!-- END disable_viewonline -->
<br />
{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<br />
<div class="activeusers clearfix">
    <ul class="ul-icons-home">
        <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />&nbsp;{L_NEW_POSTS}</li>
        <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />&nbsp;{L_NO_NEW_POSTS}</li>
        <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />&nbsp;{L_FORUM_LOCKED}</li>
    </ul>
</div>
<!-- END switch_legend -->


<!-- BEGIN switch_user_login_form_footer -->
<div class="borderwrap module">
  <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
        <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
        <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label> &nbsp;
        <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
        {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
        <!-- BEGIN switch_fb_connect -->
        <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
        <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
        <!-- END switch_fb_connect -->
      </div>
  </form>
</div>
<!-- END switch_user_login_form_footer -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->

There was an unclosed div, plus an extra set of td tags. I'm assuming that's what attributed to everything being out of place.

I also removed the who is online title and moved the links. Use this CSS for positioning the links where you want them :

Code:

#whoisImage {
  position:relative;
}

#whoisImage .statlinks {
  position:absolute;
  left:5px;
  top:10px;
}

#whoisImage .statlinks a {
  color:#000;
}

awesome as always but the scroller is still all white can I make the background of the scroller black and the scroller blue #202f8e

The white doesn't really fit the site

As far as I know, I think you can only customize the scrollbars via CSS in Chrome. This is actually a pretty good read if you're interested in styling the scrollbars : https://css-tricks.com/custom-scrollbars-in-webkit/

Here's some simple CSS to start that :

Code:

::-webkit-scrollbar {
  width:8px;
}
 
::-webkit-scrollbar-track {
  background:#000;
}
 
::-webkit-scrollbar-thumb {
  background:#202f8e;
}

awesome thanks this is solved

You're welcome

Topic archived

Have a great weekend. ^^