Legend Code

Can I please have a code that is like the Forumotion Support navbar and statistics?

A black strip that has each group on it in bigger text like the navbar.

Example:

_________________________________________________________________

Administrators Moderators Engineers Designers Helpers Platinum Members
_________________________________________________________________

Except the strip is black, no brackets or other words other than the groups and the group colors stay the same.

Bump.

Can you send the 'index_body' template? I do need to make some small edits to get that result.

I will send tomorrow.

Sorry for being so late!

Code:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>
<br class="clear" />

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
   <div class="inner"><span class="corners-top"><span></span></span>
      <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
         <div class="user_login_form center">
            <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
            <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
            <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
            {S_HIDDEN_FIELDS}<input class="mainoption button1" 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>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
   <div class="panel introduction">
      <div class="inner"><span class="corners-top"><span></span></span>
   <!-- BEGIN message_admin_titre -->
      <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
      <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
   <!-- END message_admin_txt -->
      <span class="corners-bottom"><span></span></span></div>
   </div>
<!-- END message_admin_index -->

{CHATBOX_TOP}
{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->

   <!-- BEGIN switch_viewonline_link -->
   <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
   <!-- END switch_viewonline_link -->

   <!-- BEGIN switch_viewonline_nolink -->
   <div class="h3">{L_WHO_IS_ONLINE}</div>
   <!-- END switch_viewonline_nolink -->

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

<br />
{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

<br />
<em>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</em>

</p>
<div class="clear"></div>

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

   <!-- BEGIN switch_statistics_nolink -->
   <div class="h3">{L_STATISTICS}</div>
   <!-- END switch_statistics_nolink -->

<p class="page-bottom">
{TOTAL_POSTS}
</p>
<p class="page-bottom">
{TOTAL_USERS}
</p>
<p class="page-bottom">
{NEWEST_USER}
</p>
   <!-- BEGIN switch_chatbox_activate -->
   <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
   <div class="page-bottom">
   {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
   {CHATTERS_LIST}<br />
   </div>
      <!-- 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 -->
   <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
   <div class="inner"><span class="corners-top"><span></span></span>
      <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
         <div class="user_login_form center">
            <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
            <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
            <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
            {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
            <!-- BEGIN switch_fb_connect -->
            <span class="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>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_footer -->

<br style="clear:both" />

<!-- BEGIN switch_legend -->
<ul id="picture_legend">
   <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
   <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
   <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->

{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 and replace this

Code:

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

by

Code:

<em class="newlegend">{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</em>

Add this to your CSS

Code:

em.newlegend {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    padding: 10px 0 10px 0;
}

Thanks but not what I am looking for. I want it exactly like the navbar on this forum or my forum except with the usergroups without brackets if that makes sense?

Try this css:

Code:

em.newlegend {
  display: block;
  font-size: 0px;
  height: 35px;
  line-height: 35px;
  background: #000000;
}
em.newlegend a {
  font-size: 12px;
  padding: 0px 5px;
}

You can use the same template as in the post of SarkZkalie

@Clashmune do you mean something like this? :

but with or without the brackets?

Just to let you know the FM skin is copy right and we will not let you copy our skin
Other forums with a close copy has been asked to have it removed or the forum would be banned

EDIT:
I also see that leah7 is a member on your forum so this should not be a problem as she was one of the members that holds the copyright to the skin in the first place.

Without brackets.

This tutorial helps you remove the brackets from your Legend. Now for the text you can change that from the template. As for the lines, add a class to the legend part and add

Code: border-top:1px solid #00000; border-bottom:1px solid #000000;

That'd do what you want to do!

What do you mean add a class to legend? Also I don't really want lines more of a background like the navbar or the strips on profile. Some black stripe basically that matches the navbar. Also if the text goes all the way across the screen instead of just the length of the forum that would help. Also wondering if I can just take out the "Legend : " part.

To remove the legend text you must go to your index_body template and find {LEGEND} and delete it.

Still shows the :

Edit fixed it.

Bump.

Bump.

What else is needed?

Basically just a black stripe thing in the background like the navbar with the groups. The stripe should be able to go all the way to the end of the screen if possible just like the navbar.

Bump,

Bump.

Bump.

Then you need to make a few edits to your template.

1. Go to 'overall_header' and around line 327 you should find

   Code: <div id="wrapper">

   , change it for:

   Code: <div id="wrapper" class="clearfix">

   
   
2. Go to 'index_body' and search for

   Code: <!-- BEGIN disable_viewonline -->

   and replace it by

   Code: <!-- BEGIN disable_viewonline --><div id="whos_online_cont">

   . The a 50 lines lower you should find

   Code: <!-- END disable_viewonline -->

   , change that to:

   Code: </div><!-- END disable_viewonline -->

   
   
3. When you place this javascript with placing 'on the index', it should move the block who is online and the other statistics right above your footer and outside the table layout.
   
   

   Code: $(function(){   $('#whos_online_cont').insertBefore('#page-footer'); });

   
   
4. Now you can use css to make it fit the page:
   
   

   Code: em.newlegend {   width: 100%;   display: block;   text-align: center; }

I don't want the lines though, I want the groups listed to be on like the navbar on my forum.

Then you need to change it in the css for

Code: .newlegend

.

Code: em.newlegend {   border: none;   background-color: #222222; }

I don't understand lol

You have this css in your admin panel:

Code: em.newlegend {   border-bottom: 1px solid #808080;   border-top: 1px solid #808080;   padding: 10px 0px; }

Replace it by:

Code: em.newlegend {   background-color: #222;   padding: 10px 0px; }

Oh okay, will do a little later, thanks.

Did it but the thing behind the groups doesn't stretch all the way, it hasn't changed, and the left part isn't all the way stretched either.

And now when adding a new reply or editing there is no thing above the text field where you would make text bold, add image, etc.

Bump.