The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Legend styling

View previous topic View next topic Go down

Solved Legend styling

Post by Joost on August 8th 2017, 9:59 pm

Hello Guest ,


I have follow http://help.forumotion.com/t151948-who-is-online-statistics-groups-tabs?highlight=who+is+online topic.

I have 2 questions about this:

1) How can i add the chatbox to this. -delete by Joost-
2) My legend is large there must a enter how to do this or have you a another idea for a nice view ? xD ? Very Happy -delete by Joost-

My ''index_body'' template:
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_social_login -->
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                </div>
                <!-- END switch_social_login -->
        </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}
 
<br/><!-- BEGIN disable_viewonline -->
<div class="fa-st-tab">
  <ul class="fa-st-tab-toggle">
    <li class="active">{L_WHO_IS_ONLINE}</li>
      <li>{L_STATISTICS}</li>
      <li>Gebruikersgroepen</li>
  </ul>
 
  <div class="fa-st-tab-content">
      <div class="active">
        <!-- 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}<br />
            {L_CONNECTED_MEMBERS}<br />
            {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
        </p>
      </div>     
      <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"><br />
            {NEWEST_USER}
        </p>
      </div>
      <div>
        <div class="h3">Gebruikersgroepen</div><br />
        <em><span id="groupLegend">{GROUP_LEGEND}</span></em>
      </div>
  </div>
 
  <script>
      (function($) {
        'use strict';
       
        var $toggle = $('.fa-st-tab-toggle li');
        var $content = $('.fa-st-tab-content > div');
       
        $toggle.on('click', function() {
            var $this = $(this);
           
            if ($this.hasClass('active')) {
              return;
            }
           
            var index = $this.index();
           
            $.each([$toggle, $content], function() {
              $(this)
                  .removeClass('active')
                  .eq(index)
                  .addClass('active')
              ;
            });
        });
      }(jQuery));
  </script>
</div>
 
<!-- 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_social_login -->
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                </div>
                <!-- END switch_social_login -->
        </div>
      </form>
  <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_footer -->
 
<br style="clear:both" />
 
 
 
{AUTO_DST}

Thank you for your time and help! :wouhou:


Last edited by Joost on August 9th 2017, 5:11 pm; edited 2 times in total
avatar
Joost
Forumember

Male Posts : 696
Reputation : 7
Language : Dutch
Location : The Netherlands

Back to top Go down

Solved Re: Legend styling

Post by Draxion on August 8th 2017, 10:04 pm

Can you please provide your forum's URL so I can possibly assist with the 2nd question. Thanks.


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1856
Reputation : 232
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Legend styling

Post by Joost on August 8th 2017, 10:14 pm

@Draxion wrote:Can you please provide your forum's URL so I can possibly assist with the 2nd question. Thanks.

I have send you a PM with login codes from my testing account, thanks! Very Happy
avatar
Joost
Forumember

Male Posts : 696
Reputation : 7
Language : Dutch
Location : The Netherlands

Back to top Go down

Solved Re: Legend styling

Post by Draxion on August 8th 2017, 10:16 pm

Thank you. For your 2nd question, add this CSS to help with the alignment of the groups.
Code:
#groupLegend {
  line-height: 23px;
}


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1856
Reputation : 232
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Legend styling

Post by Joost on August 8th 2017, 10:23 pm

@Draxion wrote:Thank you. For your 2nd question, add this CSS to help with the alignment of the groups.
Code:
#groupLegend {
  line-height: 23px;
}

Thanks, 2nd question it's solved. :wouhou:
avatar
Joost
Forumember

Male Posts : 696
Reputation : 7
Language : Dutch
Location : The Netherlands

Back to top Go down

Solved Re: Legend styling

Post by APE on August 9th 2017, 1:01 am

Not sure about chat box info Sad I got help off of my good friend @Wolfuryo
he Helped me add the birthdays to the tabs
http://help.forumotion.com/t153466-adding-a-new-tab-to-my-who-s-online-box so maybe he can help here also Wink



avatar
APE
Manager
Manager

Male Posts : 11260
Reputation : 1078
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

Solved Re: Legend styling

Post by Justice™ on August 9th 2017, 6:54 am

Try this:
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_social_login -->
                        <div class="social_btn">
                            <!-- BEGIN fb_connect -->
                            <div class="fb-login-button"></div>
                            <!-- END fb_connect -->
                        </div>
                        <!-- END switch_social_login -->
                </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}
       
        <br/><!-- BEGIN disable_viewonline -->
        <div class="fa-st-tab">
          <ul class="fa-st-tab-toggle">
            <li class="active">{L_WHO_IS_ONLINE}</li>
              <li>{L_STATISTICS}</li>
              <li>Gebruikersgroepen</li>
<li>Chat</li>
          </ul>
       
          <div class="fa-st-tab-content">
              <div class="active">
                <!-- 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}<br />
                    {L_CONNECTED_MEMBERS}<br />
                    {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
                </p>
              </div>   
              <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"><br />
                    {NEWEST_USER}
                </p>
              </div>
              <div>
                <div class="h3">Gebruikersgroepen</div><br />
                <em><span id="groupLegend">{GROUP_LEGEND}</span></em>
              </div>
<div><!-- 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 --></div>
</div>
          </div>
       
          <script>
              (function($) {
                'use strict';
             
                var $toggle = $('.fa-st-tab-toggle li');
                var $content = $('.fa-st-tab-content > div');
             
                $toggle.on('click', function() {
                    var $this = $(this);
                 
                    if ($this.hasClass('active')) {
                      return;
                    }
                 
                    var index = $this.index();
                 
                    $.each([$toggle, $content], function() {
                      $(this)
                          .removeClass('active')
                          .eq(index)
                          .addClass('active')
                      ;
                    });
                });
              }(jQuery));
          </script>
        </div>
       
       
        <!-- 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_social_login -->
                        <div class="social_btn">
                            <!-- BEGIN fb_connect -->
                            <div class="fb-login-button"></div>
                            <!-- END fb_connect -->
                        </div>
                        <!-- END switch_social_login -->
                </div>
              </form>
          <span class="corners-bottom"><span></span></span></div>
        </div>
        <!-- END switch_user_login_form_footer -->
       
        <br style="clear:both" />
       
       
       
        {AUTO_DST}
avatar
Justice™
Forumember

Posts : 521
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: Legend styling

Post by Joost on August 9th 2017, 5:10 pm

Thank you very much! It's solved now. Very Happy
avatar
Joost
Forumember

Male Posts : 696
Reputation : 7
Language : Dutch
Location : The Netherlands

Back to top Go down

Solved Re: Legend styling

Post by Draxion on August 9th 2017, 5:59 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1856
Reputation : 232
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

View previous topic View next topic Back to top


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